jQuery知識重構

jQuery知識重構

目錄：

 

 

 

 

1、入口函數

1          $(document).ready(function(){});

2          $(function(){});

jQuery入口函數與js入口函數的區別：

jQuery的入口函數是在 html全部標籤都加載以後，就會去執行。

Js的window.onload事件是等到全部內容，包括外部圖片之類的文件加載完後，纔會執行

2、jQuery選擇器

1.基本選擇器

 2.層級選擇器

 

3.過濾選擇器

 

4.屬性選擇器

 

5.篩選選擇器

 

3、jQuery動畫

 

顯示/隱藏

1          $(selector).show(speed,callback);

2          $(selector).hide(speed,callback);

3          $(selector).toggle(speed,callback);

speed：隱藏/顯示的速度，能夠取如下值："slow"、"fast" 或毫秒

callback：隱藏或顯示完成後所執行的函數

滑動

1          $(selector).slideDown(speed,callback);

2          $(selector).slideUp(speed,callback);

3          $(selector).slideToggle(speed,callback);

淡入淡出

1          $(selector).fadeIn(speed,callback);

2          $(selector).fadeOut(speed,callback);

3          $(selector).fadeToggle(speed,callback);

4          $(selector).fadeTo(speed,opacity,callback);

opacity：必選參數，將淡入淡出效果設置爲給定的不透明度

自定義動畫

1          $(selector).animate({params},speed,callback);

必需的 params 參數定義造成動畫的 CSS 屬性。

可選的 speed 參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒。

可選的 callback 參數是動畫完成後所執行的函數名稱。

操做多個屬性

中止動畫

1          $(selector).stop(stopAll,goToEnd);

可選的 stopAll 參數規定是否應該清除動畫隊列。默認是 false。

可選的 goToEnd 參數規定是否當即完成當前動畫。默認是 false。

stop(true)              全部動畫不執行

stop(false,true)       動畫當即執行完畢，這種用法使用較多

 

4、jQuery html

操做dom

text() - 設置或獲取所選元素的文本內容

html() - 設置或獲取所選元素的內容（包括 HTML 標記）

val() - 設置或獲取表單字段的值

attr()- 設置或獲取屬性的值

       有一個參數就是設置，沒有參數就是獲取！

removeAttr ()- 移除屬性

操做樣式

addClass()             給指定的元素添加樣式類名

removeClass()        給指定的元素移除樣式類名

toggleClass ()         給指定的元素切換樣式類名

hasClass ()             判斷是否有樣式類名

操做元素

1.在內部添加

$(「div」).append(node)          // 在div內部元素的結尾追加元素node

node.appendTo(「div」)           // 把node追加到div內部元素的結尾

$(「div」).prepend(node)         // 在div內部元素的開頭追加元素node

node.prependTo(「div」)         // 把node追加到div內部元素的開頭

2.在外部添加

$(「div」).before(node)           // 在div後面添加兄弟節點node

$(「div」).after(node)              // 在div前面添加兄弟節點node

3.刪除

remove() - 刪除被選元素及其子元素（自殺）

empty() - 刪除被選元素的子元素，不包括被選元素！

刪除被選元素的子元素用html(「」)更加高效！

4.複製

clone()- 若是加參數true就是深層複製，會把以前綁定的事件也給複製

replaceWith()-替換節點

 

五、jQuery 尺寸

 

1.寬度和高度

width()

height()

innerWidth()

innerHeight()

outerWidth()

outerHeight()

 

.height()方法和.css(「height」)的區別：

返回值不一樣：.height()方法返回的是數字類型(20)； .css(「height」)返回的是字符串類型(20px)

2.座標值

offset()           //獲取和設置元素在當前窗口的相對偏移，返回的是一個對象，設置值後自動變成相對定位       Object {top: 50, left:8}

position()       //只能獲取元素相對於父親的偏移，返回的是一個對象，不能設置值

獲取值：offset().left     offset().top     position() .left        position() .top

設置值：$("p").offset({left:txtLeft,top:txtTop});

區別：

使用position()方法時事實上是把該元素當絕對定位來處理，獲取的是該元素至關於最近的一個擁有絕對或者相對定位的父元素的偏移位置。使用position()方法時若是其全部的父元素都爲默認定位（static）方式，則其處理方式和offset()同樣，是當前窗口的相對偏移。

使用offset()方法無論該元素如何定位，也無論其父元素如何定位，都是獲取的該元素相對於當前視口的偏移。

3.滾動條

scrollTop()     //獲取或者設置垂直方向上到頁面頂端的距離

scrollLeft()     // 獲取或者設置水平方向上到頁面左端的距離

scroll()           // 觸發滾動事件：$(selector).scroll(function(){…});       

 

 六、jQuery 事件綁定機制

 

bind方式              

語法格式：.bind( eventType, [ eventData ], handler )

參數說明

第一個參數：事件類型

第二個參數：傳遞給事件響應方法的數據對象，能夠省略。

事件響應方法中獲取數據方式：e.data

第三個參數：事件響應方法  

1     $("p").bind("click",function(e){

2        //事件響應方法

3     });

one方式

語法格式：one( events [, data ], handler )

只綁定一次事件

delegate方式

語法格式：$(selector).delegate( selector, eventType, handler )

語法說明：

第一個參數:selector， 子選擇器

第二個參數：事件類型

第三個參數：事件響應方法 

1          $(".parentBox").delegate("p","click", function(){

2             //爲 .parentBox下面的全部的p標籤綁定事件

3          });

on方式

jQuery1.7版本後，jQuery用on統一了全部的事件處理的方法

語法格式：$(selector).on( events, [ selector ],[ data ], handler )

參數介紹：

第一個參數：events，事件名

第二個參數：selector,相似delegate

第三個參數: 傳遞給事件響應方法的參數

第四個參數：handler，事件處理方法

1          //綁定一個方法

2          $( "#dataTable tbodytr" ).on( "click", function() {

3             console.log( $( this ).text() );

4          });

5           

6          //給子元素綁定事件

7          $( "#dataTable tbody").on( "click", "tr", function() {

8            console.log( $( this ).text() );

9          });

10       

11      //綁定多個事件的方式

12      $( "div.test" ).on({

13         click: function() {

14           $( this ).toggleClass( "active");

15         },

16      mouseenter: function() {

17           $( this ).addClass( "inside" );

18         },

19      mouseleave: function() {

20           $( this ).removeClass( "inside");

21          }

22       });

解綁事件

• unbind解綁 bind方式綁定的事件( 在jQuery1.7以上被 on和off代替)
  • $(selector).unbind(); //解綁全部的事件
  • $(selector).unbind("click"); //解綁指定的事件
• undelegate解綁delegate事件
  • $( "p" ).undelegate(); //解綁全部的delegate事件
  • $( "p" ).undelegate( "click" ); //解綁全部的click事件

• off解綁on方式綁定的事件
  • $( "p" ).off();
  • $( "p" ).off( "click", "**" ); // 解綁全部的click事件，兩個*表示全部
  • $( "body" ).off( "click", "p", foo );

1              案例1：

2              var foo = function() {

3                // Code to handle some kind of event

4              };

5           

6              // ... Now foo will be called whenparagraphs are clicked ...

7              $( "body" ).on("click", "p", foo );

8           

9              // ... Foo will no longer be called.

10          $( "body" ).off("click", "p", foo );

11       

12          案例2：（瞭解）解綁命名空間的方式：

13          var validate = function() {

14            // Code to validate form entries

15          };

16       

17          // Delegate events under the".validator" namespace

18          $( "form" ).on("click.validator", "button", validate );

19       

20          $( "form" ).on("keypress.validator", "input[type='text']", validate );

21       

22          // Remove event handlers in the".validator" namespace

23          $( "form" ).off( ".validator");

觸發事件

簡單事件觸發：$(selector).click();//觸發 click事件

trigger方法觸發事件：$( "#foo" ).trigger( "click" );

triggerHandler觸發事件響應方法，不觸發瀏覽器行爲：$("input" ).triggerHandler( "focus" );

event對象的簡介

event.data              //傳遞的額外事件響應方法的額外參數

event.currentTarget      //在事件響應方法中等同於this，當前Dom對象

event.target             //事件觸發源，不必定===this

event.pageX        

event.pageY

event.stopPropagation() //阻止事件冒泡

e.preventDefault();        //阻止默認行爲

event.type             //事件類型：click，dbclick...

event.which           //鼠標的按鍵類型：左1 中2 右3

 

  七、數據緩存：data（）

 

獲取值：$(「div」).data(「index」);

設置值：$(「div」).data(「index」,3);

&  .data()跟.attr() 方法的區別：

1.        獲取數據的時候，attr方法須要傳入參數，data方法能夠不傳入參數，這時候獲取到的是一個js對象，即便沒有任何data屬性。

2.        獲取到的數據類型不一樣，attr方法獲取到的數據類型是字符串(String)，data方法獲取到的是相應的類型。

3.        data方法獲取到數據以後，咱們使用一個對象來接收它，那麼就能夠直接操做(設置值或獲取值)這個對象，而attr方法不能夠。而且經過這種方式，要比.data(key,value)的方式更高效！

4.        data-attribute屬性會在頁面初始化的時候放到jQuery對象，被緩存起來，而attr方法不會。