JQuery系统学习之基础部分

一、JQuery 概述1.1 JavaScript库1.2 jQuery 的概念二、走进jQuery2.1 JQuery 的下载2.2 JQuery 的使用步骤2.3jQuery 的入口函数2.4jQuery 的顶级对象 $2.5jQuery 对象和 DOM 对象三、 jQuery常用API3.1 jQuery 基础选择器1.2jQuery 层级选择器1.3隐式迭代（重要）1.4jQuery 筛选

记录学习的習習君

288人浏览 · 2022-06-01 15:57:26

记录学习的習習君 · 2022-06-01 15:57:26 发布

2.5 jQuery 对象和 DOM 对象

4.1 设置或获取元素固有属性值 prop()

4.2 设置或获取元素自定义属性值 attr()

一、JQuery 概述

1.1 JavaScript库

1. 仓库：可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。

2. JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。

3. 简单理解：就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。

比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。

1.2 jQuery 的概念

1. jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。

2. j 就是 JavaScript； Query 查询；意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。

3. JQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。

4. 学习jQuery本质：就是学习调用这些函数（方法）。

5. jQuery 出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。

6. 优点

轻量级。核心文件才几十kb，不会影响页面加载速度
跨浏览器兼容。基本兼容了现在主流的浏览器
链式编程、隐式迭代
对事件、样式、动画支持，大大简化了DOM操作
支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等
免费、开源

二、走进jQuery

2.1 JQuery 的下载

官网地址：

https://jquery.com/https://jquery.com/

版本：

1x ：兼容 IE 678 等低版本浏览器，官网不再更新
2x ：不兼容 IE 678 等低版本浏览器，官网不再更新
3x ：不兼容 IE 678 等低版本浏览器，是官方主要更新维护的版本

各个版本的下载：

https://code.jquery.com/https://code.jquery.com/

2.2 JQuery 的使用步骤

1. 引入JQuery 文件

<script src="../jquery.min.js"></script>

2. 直接使用即可

2.3 jQuery 的入口函数

$(function () {
... // 此处是页面 DOM 加载完成的入口
}) ;

$(document).ready(function(){
... // 此处是页面DOM加载完成的入口
});

等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。
相当于原生 js 中的 DOMContentLoaded。
不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。
更推荐使用第一种方式。

2.4 jQuery 的顶级对象 $

1.$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，但一般为了方便，通常都直接使用 $ 。

2.$ 是jQuery 的顶级对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。

2.5 jQuery 对象和 DOM 对象

1. 用原生 JS 获取来的对象就是 DOM 对象

2. jQuery 方法获取的元素就是 jQuery 对象。

3. jQuery 对象本质是：利用$对DOM 对象包装后产生的对象（伪数组形式存储）。

注意：

只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。

<body>
    <div></div>
    <span></span>
    <script>
        // 1.DOM对象：用jQuery方式获取过来的对象就是DOM对象
        let myDiv = document.querySelector('div');// myDiv对象 是DOM对象
        let mySpan = document.querySelector('span');// mySpan 是DOM对象
        console.log(myDiv);
        // 2. jQuery对象：用jQuery方式获取过来的对象是jQuery对象。本质：通过 $ 把DOM元素进行了包装
        $('div');//  $('div')是一个jQuery对象
        $('span');
        console.log($('div'));
        //3.jQuery对象只能使用jQuery方法，DOM对象则使用原生JavaScript属性和方法
        // myDiv.style.display = 'none';
        // myDiv.hide(); myDiv是DOM对象不能使用jQuery里面的hide方法
        // $('div').style.display = 'none'; jQuery也不能使用原生的js属性和方法！
    </script>
</body>

4. DOM 对象与 jQuery 对象之间是可以相互转换的。

5. 因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

（1）. DOM 对象转换为 jQuery 对象： $(DOM对象)

$('div')

（2） jQuery 对象转换为 DOM 对象（两种方式）

$('div') [index] index 是索引号

$('div') .get(index) index 是索引号

<body>
    <div></div>

    <script>
        let myDiv = document.querySelector('div');// myDiv对象 是DOM对象
        console.log(myDiv);
        $('div');//  $('div')是一个jQuery对象
        $(myDiv).hide();//DOM转jQuery对象
        $('div')[0].style.display = 'none';//Jquery转DOM对象
    </script>
</body>

三、 jQuery常用API

1.1 jQuery 基础选择器

原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。

$(“选择器”) // 里面选择器直接写 CSS 选择器即可，但是要加引号

1.2 jQuery 层级选择器

ps: jQuery 设置样式

$('div').css('属性', '值')

1.3 隐式迭代（重要）

1. 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。

2. 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。

<body>
    <div>测试一把</div>
    <div>测试一把</div>
    <div>测试一把</div>
    <div>测试一把</div>
    <ul>
        <li>测试后代</li>
        <li>测试后代</li>
        <li>测试后代</li>
    </ul>
    <script>
        // 1. 获取四个div元素
        console.log($("div"));
        //2. 给四个div设置背景颜色
        $("div").css("background","red");//用到了隐式迭代，所以四个都变色了
        $("ul li").css("background","green");
    </script>
</body>

1.4 jQuery 筛选选择器

1.5 jQuery 筛选方法（重点）

重点记住： parent() children() find() siblings() eq()

1.6 jQuery 里面的排他思想

想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。

$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);

举例：

<head>
    <style>
        .current{
            background-color: red;
        }
    </style>
</head>
<body>
    <div>我是号1div</div>
    <div>我是号2div</div>
    <div>我是号3div</div>
    <script src="../jquery.min.js"></script>
    <script>
        $(function(){
            $("div").click(function(){
                $(this).addClass("current").siblings().removeClass("current");
            });
        });
    </script>
</body>

1.7 链式编程

链式编程是为了节省代码量，看起来更优雅。

$(this).css('color', 'red').sibling().css('color', '');

2. jQuery 样式操作

2.1 操作 css 方法

jQuery 可以使用 css 方法来修改简单元素样式；也可以操作类，修改多个样式。

1. 参数只写属性名，则是返回属性值

$(this).css(''color'');

2. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号。

$(this).css(''color'', ''red'');

3. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号。

$(this).css({ "color":"white","font-size":"20px"});

2.2 设置类样式方法

作用等同于以前的 classList，可以操作类样式，注意操作类里面的参数不要加点。

1. 添加类

$(“div”).addClass(''current'');

2. 移除类

$(“div”).removeClass(''current'');

3. 切换类

$(“div”).toggleClass(''current'');

举例：

<head>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
        .current{
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
    <script src="../jquery.min.js"></script>
    <script>
        $(function(){
            $("div").click(function(){
                $(this).toggleClass("current");
            });
        });
    </script>
</body>

2.3 类操作与className区别

原生 JS 中 className 会覆盖元素原先里面的类名。

jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。

3. jQuery 效果

jQuery 给我们封装了很多动画效果，最为常见的如下：

3.1 显示隐藏效果

1. 显示语法规范

show([speed,[easing],[fn]])

2. 显示参数

（1）参数都可以省略，无动画直接显示。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

3. 隐藏语法规范

hide([speed,[easing],[fn]])

4. 隐藏参数

（1）参数都可以省略，无动画直接显示。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

5. 切换语法规范

toggle([speed,[easing],[fn]])

6. 切换参数

（1）参数都可以省略，无动画直接显示。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

建议：平时一般不带参数，直接显示隐藏即可。

<head>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <button>显 示</button>
    <button>隐 藏</button>
    <button>切 换</button>
    <div></div>
    <script src="../jquery.min.js"></script>
    <script>
        $(function(){
            $("button").eq(0).click(function(){
                $("div").show(1000);
            });
            $("button").eq(1).click(function(){
                $("div").hide(1000);
            });
            $("button").eq(2).click(function(){
                $("div").toggle(1000);
            });
        });
    </script>
</body>

3.2 滑动效果

1. 下滑效果语法规范

slideDown([speed,[easing],[fn]])

2. 下滑效果参数

（1）参数都可以省略。
（2）speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing:(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

3. 上滑效果语法规范

slideUp([speed,[easing],[fn]])

4. 上滑效果参数

（1）参数都可以省略。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

5. 滑动切换效果语法规范

slideToggle([speed,[easing],[fn]])

6. 滑动切换效果参数

（1）参数都可以省略。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

<head>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <button>下 滑</button>
    <button>上 滑</button>
    <button>切 换</button>
    <div></div>
    <script src="../jquery.min.js"></script>
    <script>
        $(function(){
            $("button").eq(0).click(function(){
                $("div").slideDown(1000);
            });
            $("button").eq(1).click(function(){
                $("div").slideUp(1000);
            });
            $("button").eq(2).click(function(){
                $("div").slideToggle(1000);
            });
        });
    </script>
</body>

3.3 事件切换

hover([over,]out)

（1）over:鼠标移到元素上要触发的函数（相当于mouseenter）
（2）out:鼠标移出元素要触发的函数（相当于mouseleave）
（3）如果只写一个函数，则鼠标经过和离开都会触发它

<head>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
        .current{
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <h3> 鼠 标 移 动 切 换 颜 色</h3>
    <div></div>
    <script src="../jquery.min.js"></script>
    <script>
        $(function(){
            // 事件切换 hover 就是鼠标经过和离开的复合写法
            // $("div").hover(function(){
            //     $(this).addClass("current");
            // },function(){
            //     $(this).removeClass("current");
            // });
            // 2. 事件切换 hover  如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
            $("div").hover(function(){
                $(this).toggleClass("current");
            });
        });
    </script>
</body>

3.4 动画队列及其停止排队方法

1. 动画或效果队列

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

2. 停止排队

stop()

(1）stop() 方法用于停止动画或效果。
(2) 注意： stop() 写到动画或者效果的前面，相当于停止结束上一次的动画。

3.5 淡入淡出效果

1. 淡入效果语法规范

fadeIn([speed,[easing],[fn]])

2. 淡入效果参数

（1）参数都可以省略。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

3. 淡出效果语法规范

fadeOut([speed,[easing],[fn]])

4. 淡出效果参数

（1）参数都可以省略。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

5. 淡入淡出切换效果语法规范

fadeToggle([speed,[easing],[fn]])

6. 淡入淡出切换效果参数

（1）参数都可以省略。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

7. 渐进方式调整到指定的不透明度

fadeTo([[speed],opacity,[easing],[fn]])

8. 效果参数

（1）opacity 透明度必须写，取值 0~1 之间。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。必须写
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

3.6 自定义动画 animate

1. 语法

animate(params,[speed],[easing],[fn])

2. 参数

（1）params: 想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

3. 举例

<head>
    <script src="../jquery.min.js"></script>
    <style>
        div {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <button>动起来</button>
    <div></div>
    <script>
        $(function() {
            $("button").click(function() {
                $("div").animate({
                    left: 500,
                    top: 300,
                    opacity: .4,
                    width: 500
                }, 500);
            })
        })
    </script>
</body>

4. jQuery 属性操作

4.1 设置或获取元素固有属性值 prop()

所谓元素固有属性就是元素本身自带的属性，比如 <a> 元素里面的 href ，比如 <input> 元素里面的 type。

1. 获取属性语法

prop(''属性'')

2. 设置属性语法

prop(''属性'', ''属性值'')

4.2 设置或获取元素自定义属性值 attr()

用户自己给元素添加的属性，我们称为自定义属性。比如给 div 添加 index =“1”。

1. 获取属性语法

attr(''属性'')      // 类似原生 getAttribute()

2. 设置属性语法

attr(''属性'', ''属性值'')   // 类似原生 setAttribute()

4.3 数据缓存 data()

data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。

1. 附加数据语法

data(''name'',''value'')   // 向被选元素附加数据

2. 获取数据语法

date(''name'')             //   向被选元素获取数据

同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型。

举例：

<head>
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>

<body>
    <a href="http://www.itcast.cn" title="都挺好">都挺好</a>
    <input type="checkbox" name="" id="" checked>
    <div index="1" data-index="2">我是div</div>
    <span>123</span>
    <script>
        $(function() {
            //1. element.prop("属性名") 获取元素固有的属性值
            console.log($("a").prop("href"));
            $("a").prop("title", "我们都挺好");
            $("input").change(function() {
                console.log($(this).prop("checked"));
            });
            // console.log($("div").prop("index"));
            // 2. 元素的自定义属性 我们通过 attr()
            console.log($("div").attr("index"));
            $("div").attr("index", 4);
            console.log($("div").attr("data-index"));
            // 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面
            $("span").data("uname", "andy");
            console.log($("span").data("uname"));
            // 这个方法获取data-index h5自定义属性 第一个 不用写data-  而且返回的是数字型
            console.log($("div").data("index"));
        })
    </script>
</body>

5. jQuery 内容文本值

主要针对元素的内容还有表单的值操作。

1. 普通元素内容 html()（相当于原生inner HTML)

html()             // 获取元素的内容

html(''内容'')   // 设置元素的内容

2. 普通元素文本内容 text() (相当与原生 innerText)

text()                     // 获取元素的文本内容

text(''文本内容'')   // 设置元素的文本内容

3. 表单的值 val()（相当于原生value)

val()              // 获取表单的值

val(''内容'')   // 设置表单的值

4. 举例

<head>
    <title>Document</title>
    <script src="../jquery.min.js"></script>
</head>

<body>
    <div>
        <span>我是内容</span>
    </div>
    <input type="text" value="请输入内容">
    <script>
        // 1. 获取设置元素内容 html()
        console.log($("div").html());
        // $("div").html("123");
        // 2. 获取设置元素文本内容 text()
        console.log($("div").text());
        $("div").text("123");

        // 3. 获取设置表单值 val()
        console.log($("input").val());
        $("input").val("123");
    </script>
</body>

6. jQuery 元素操作

主要是遍历、创建、添加、删除元素操作。

6.1 遍历元素

jQuery 隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。

语法1：

$("div").each(function (index, domEle) { xxx; }）

1. each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个
2. 里面的回调函数有2个参数： index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象
3. 所以要想使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle)

语法2：

$.each(object，function (index, element) { xxx; }）

1. $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象。
2. 里面的函数有2个参数： index 是每个元素的索引号; element 遍历内容。

<head>
    <script src="jquery.min.js"></script>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function() {
            // $("div").css("color", "red");
            // 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）
            var sum = 0;
            // 1. each() 方法遍历元素 
            var arr = ["red", "green", "blue"];
            $("div").each(function(i, domEle) {
                // 回调函数第一个参数一定是索引号  可以自己指定索引号号名称
                // console.log(index);
                // console.log(i);
                // 回调函数第二个参数一定是 dom元素对象 也是自己命名
                // console.log(domEle);
                // domEle.css("color"); dom对象没有css方法
                $(domEle).css("color", arr[i]);
                sum += parseInt($(domEle).text());
            })
            console.log(sum);
            // 2. $.each() 方法遍历元素 主要用于遍历数据，处理数据
            // $.each($("div"), function(i, ele) {
            //     console.log(i);
            //     console.log(ele);

            // });
            // $.each(arr, function(i, ele) {
            //     console.log(i);
            //     console.log(ele);
            // })
            $.each({
                name: "andy",
                age: 18
            }, function(i, ele) {
                console.log(i); // 输出的是 name age 属性名
                console.log(ele); // 输出的是 andy  18 属性值
            })
        })
    </script>
</body>

6.2 创建元素

语法：

$(''<li></li>'');

动态的创建了一个 <li>

6.3 添加元素

1. 内部添加

element.append(''内容'')

把内容放入匹配元素内部最后面，类似原生 appendChild。

element.prepend(''内容'')

把内容放入匹配元素内部最前面。

2. 外部添加

element.after(''内容'')        //  把内容放入目标元素后面

element.before(''内容'')    //  把内容放入目标元素前面

内部添加元素，生成之后，它们是父子关系。
外部添加元素，生成之后，他们是兄弟关系。

<head>
    <script src="../jquery.min.js"></script>
</head>
<body>
    <ul>
        <li>原先的li</li>
    </ul>
    <div class="test">我是原先的div</div>
    <script>
        $(function() {
            // 1. 创建元素
            var li = $("<li>我是后来创建的li</li>");
            // 2. 添加元素
            // (1) 内部添加
            // $("ul").append(li);  内部添加并且放到内容的最后面 
            $("ul").prepend(li); // 内部添加并且放到内容的最前面

            // (2) 外部添加
            var div = $("<div>我是后妈生的</div>");
            // $(".test").after(div);
            $(".test").before(div);
            // 3. 删除元素
            // $("ul").remove(); 可以删除匹配的元素 自杀
            // $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子
            $("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子
        })
    </script>
</body>

6.4 删除元素

element.remove()   //  删除匹配的元素（本身）

element.empty()    //  删除匹配的元素集合中所有的子节点

element.html('''')   //  清空匹配的元素内容

remove 删除元素本身。
empt() 和 html('''') 作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容。

7. jQuery 尺寸、位置操作

7.1 jQuery 尺寸

以上参数为空，则是获取相应值，返回的是数字型。
如果参数为数字，则是修改相应值。
参数可以不必写单位。

7.2 jQuery 位置

位置主要有三个： offset()、position()、scrollTop()/scrollLeft()

1. offset() 设置或获取元素偏移

offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
该方法有2个属性 left、top 。offset().top 用于获取距离文档顶部的距离，offset().left 用于获取距离文档左侧的距离。
可以设置元素的偏移：offset({ top: 10, left: 30 });

2. position() 获取元素偏移

position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离，position().left 用于获取距离定位父级左侧的距离。
该方法只能获取。

3. scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧

scrollTop() 方法设置或返回被选元素被卷去的头部。
不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。

练习：

<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 15px solid red;
            margin: 20px;
        }
    </style>
    <script src="../jquery.min.js"></script>
</head>
<body>
    <div></div>
    <script>
        $(function() {
            // 1. width() / height() 获取设置元素 width和height大小 
            console.log($("div").width());
            // $("div").width(300);

            // 2. innerWidth() / innerHeight()  获取设置元素 width和height + padding 大小 
            console.log($("div").innerWidth());

            // 3. outerWidth()  / outerHeight()  获取设置元素 width和height + padding + border 大小 
            console.log($("div").outerWidth());

            // 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
            console.log($("div").outerWidth(true));
        })
    </script>
</body>

CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生