jQuery

1.入口函式

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

2          $(function(){});

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

jQuery的入口函式是在 html所有標籤都載入之後，就會去執行。

Js的window.onload事件是等到所有內容，包括外部圖片之類的檔案載入完後，才會執行

2.jQuery選擇器

基本選擇器

層級選擇器

過濾選擇器

屬性選擇器

篩選選擇器

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(){…});       

5.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

6.資料快取：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方法不會。