一、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>