一、jQuery操作元素的尺寸
1. width和height
设置语法：jQuery对象.width(数字);
获取语法：jQuery对象.width();
得到的只是内容的大小。
1 <style>
2 div {
3 width: 500px;
4 height: 500px;
5 padding: 10px;
6 border: 10px solid;
7 }
8 </style>
9 <body>
10 <div></div>
11 <script src="lib/jquery-1.12.4.js"></script>
12 <script>
13 var w = $('div').width(); //返回的是一个number
14 console.log(w); //500
15 $('div').width(300); //把div设置为300px
16 </script>
17 </body>
2. innerWidth和innerHeight
设置语法：jQuery对象.innerWidth(数字);
获取语法：jQuery对象.innerWidth();
得到的是内容部分大小 + padding的大小。
设置时padding固定不变，内容部分自动适应变化。
1 <style>
2 div {
3 width: 500px;
4 height: 500px;
5 padding: 10px;
6 border: 10px solid;
7 }
8 </style>
9 <body>
10 <div></div>
11 <script src="lib/jquery-1.12.4.js"></script>
12 <script>
13 var w = $('div').innerwidth(); //返回的是一个number
14 console.log(w); //520。width+padding
15 $('div').innerwidth(300); //div设置为300-20=280px，padding占有20px
16 </script>
17 </body>
3. outerWidth和outerHeight
设置语法：jQuery对象.outerWidth(数字);
获取语法：jQuery对象.outerWidth();
得到的是内容部分大小 + padding + border的大小。
设置时padding和边框border固定不变，内容部分自动适应变化。
1 <style>
2 div {
3 width: 500px;
4 height: 500px;
5 padding: 10px;
6 border: 10px solid;
7 }
8 </style>
9 <body>
10 <div></div>
11 <script src="lib/jquery-1.12.4.js"></script>
12 <script>
13 var w = $('div').outerwidth(); //返回的是一个number
14 console.log(w); //540。width+padding+border
15 //div设置为300-20-20=260px，padding占有20px，border占有20px
16 $('div').outerwidth(300);
17 </script>
18 </body>
二、jQuery操作元素的位置
1. 获取元素距离文档的位置
语法：jQuery对象.offset();
返回的是一个对象，对象中包含了元素的位置。（相对于文档的位置）
位置和定位无关。若元素加了（子绝父相）定位后也依然参照文档的位置。不论元素是否定位。
1 <style>
2 div {
3 width: 200px;
4 height: 200px;
5 margin: 0 auto;
6 background: red;
7 }
8 p {
9 height: 600px;
10 }
11 </style>
12 <body>
13 <p></p>
14 <div></div>
15 <script src="lib/jquery-1.12.4.js"></script>
16 <script>
17 var o = $('div').offset();
18 console.log(o); //得到一个对象，其中包含top:632, left:574.5
19 //设置时传参传的是对象。位置依然参照文档，和定位无关。
20 var s = $('div').offset({top:0,left:0});
21 console.log(s); //div变到页面左上角
22 </script>
23 </body>一般不会用到设置。
在DOM对象中，元素.offsetLeft 和 元素.offsetTop 是只读的。
2. 获取元素距离定位元素的位置
语法：**jQuery对象.position(); **
和定位有关系。返回一个包含left和top的对象。
但是position不能设置。
1 <style>
2 .f {
3 width: 200px;
4 height: 200px;
5 margin: 0 auto;
6 background: red;
7 position: relative;
8 }
9 .son {
10 width: 200px;
11 height: 200px;
12 background: red;
13 position: absolute;
14 }
15 p {
16 height: 600px;
17 }
18 </style>
19 <body>
20 <p></p>
21 <div class="f">
22 <div class="son"></div>
23 </div>
24 <script src="lib/jquery-1.12.4.js"></script>
25 <script>
26 var o = $('.son').position();
27 console.log(o); //得到一个对象，其中包含top:0, left:0
28 //position方法只能获取元素的位置不能传参设置位置
29 $('.son').position({left:50, top:50});
30 </script>
31 </body>
3. 操作卷去的页面间距
获取语法：jQuery对象.scrollTop();
设置语法：jQuery对象.scrollTop(数字);
1 <style>
2 body {
3 text-align: center;
4 }
5 div {
6 width: 500px;
7 height: 500px;
8 margin: 0 auto;
9 border: 1px solid;
10 overflow: auto;
11 }
12 </style>
13 <script src="lib/jquery-1.12.4.js"></script>
14 <script>
15 //入口函数
16 $(function () {
17 //给div注册滚动条滚动事件
18 $('div').scroll(function(){
19 var v = $(this).scrollTop();
20 console.log(v);
21 });
22 //回到顶部
23 $('button').click(function(){
24 $('div').scrollTop(0);
25 });
26 });
27 </script>
28 <body>
29 <div>
30 <p></p>*100
31 </div>
32 <button>回到顶部</button>
33 </body>在jQuery中可以使用 $(window)
不加动画时，可以直接使用 $(window).scrollTop(数字)
4. 固定导航和回到顶部案例
1 <body>
2 <script src="lib/jquery-1.12.4.js"></script>
3 <script>
4 var _top = $('.box2').offset().top;
5 $(window).scroll(function () {
6 var v = $('window').scrollTop();
7 if (v >= _top) {
8 //给固定导航设置定位
9 $('.box2').addClass('active');
10 //设置回到顶部按钮显示
11 $('.top').show();
12 }
13 else {
14 $('.box2').removeClass('active');
15 $('.top').hide();
16 }
17 });
18 $('.top').click(function () {
19 //动画中动的必须是元素（即标签）。
20 $('html,body').animate({ scrollTop: 0 }, 500);
21 })
22 </script>
23 </body>
三、jQuery事件操作
1. 注册事件
语法：jQuery对象.事件名(事件处理程序);
在jQuery中事件的底层就是事件监听，可以实现事件叠加。
2. on方法注册事件
注册简单事件语法：jQuery对象.on('事件名',事件处理程序);
1 <body>
2 <button>click</button>
3 <script src="lib/jquery-1.12.4.js"></script>
4 <script>
5 $('button').on('click',function(){
6 console.log(1);
7 });
8 $('button').on('click',function(){
9 console.log(2); //输出1 2。事件叠加
10 });
11 </script>
12 </body>事件委托语法：jQuery对象.on('事件名','选择器',事件处理程序);
选择器：子孙元素
在事件处理程序中，this代表的是子孙元素（所点最先触发的）
3. off方法移除事件
移除简单事件语法：jQuery对象.off('click',事件处理程序名称);
移除事件委托的事件语法：jQuery对象.off('click',‘选择器’,事件处理程序名称);
不传参数的话会移除所有事件类型。
移除事件的底层也是事件监听（removeEventListener）。
1 <script>
2 // 解绑按钮的事件处理程序：fn1和fn2
3 $('button').off('click',fn1);
4 $('button').off('click',fn2);
5
6 // 解绑通过事件委托给p注册的事件处理程序 fn2
7 $('div').off('click','p',fn2);
8 </script>
4. 触发事件
语法：jQuery对象.trigger('事件名');
5. 事件对象
1）鼠标事件对象相关的属性
事件对象.clientX/Y
事件对象.pageX/Y
事件对象.offsetX/Y
2）键盘事件对象相关的属性
事件对象.keyCode
事件对象.alt/shift/ctrlKey
3）公共的属性或方法
- 属性：
事件对象.target;
- 方法：
事件对象.preventDefault();
事件对象.stopPropagation();
四、链式编程
可以用连续点点方式调用其他方法。
css方法只能jQuery对象调用
end()方法
在链式上可以返回到上一个jQuery对象
1 <body>
2 <ul>
3 <li>列表1</li>
4 <li>列表2</li>
5 </ul>
6 <script src="lib/jquery-1.12.4.js"></script>
7 <script>
8 $('ul li').eq(0).css('color','red') //返回索引为0的li的jQuery对象
9 .parent().css('border','1px solid blue') //返回ul这个jQuery对象
10 .end().css('background','gold'); //返回了索引为0的li的jQuery对象
11 </script>
12 </body>
