一、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 返回是布尔值。 检测是否按下（true）
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>