這幾天研究了一下jQuery,來聊聊

jQuery(即JavaScript Query)是一個JavaScript函式庫 但是既然有JavaScript了,我們為什麼還要用jQuery呢?原因大概有以下幾個方面:

1,隱藏與顯示:

隱藏:$(selector).hide(speed,callback);
顯示:$(selector).show(speed,callback);
可選的 speed 引數規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 引數是隱藏或顯示完成後所執行的函式名稱。

但是有時候,對於一個內容,可能需要切換hide()和show()方法,怎麼辦呢?寫if判斷可以,但是jQuery提供了一個更簡單的方法:

$(selector).toggle(speed,callback);
引數speed和callback是可選引數
只需要這樣一行程式碼,便可實現show和hide方法的切換

2,淡入淡出:

淡入元素:$(selector).fadeIn(speed,callback);
淡出元素:$(selector).fadeOut(speed,callback);
可選的 speed 引數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 引數是滑動完成後所執行的函式名稱。

隱藏與顯示有一個方法toggle可以實現兩者切換,同樣淡入淡出也有一個方法,可以實現兩者切換

$(selector).fadeToggle(speed,callback);
引數同樣是可選

3,滑動

向下滑動元素:$(selector).slideDown(speed,callback);
向上滑動元素:$(selector).slideUp(speed,callback);
向下向上切換:$(selector).slideToggle(speed,callback);
可選的 speed 引數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 引數是滑動完成後所執行的函式名稱。

4,動畫-animate方法

$(selector).animate({params},speed,callback);
必需的 params 引數定義形成動畫的 CSS 屬性。
可選的 speed 引數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 引數是動畫完成後所執行的函式名稱。
其中animate幾乎可以用來操作所有css屬性

5,取值賦值操作:

取值:
第一種方式:
$('#元素 option:selected').text();     //選中的文字
$('#元素 option:selected') .val();    //選中的值
第二種方式:
$("#元素").find("option:selected").text();      //選中的文字
$("#元素").find("option:selected").val();       //選中的值

賦值:
第一種:
$("#Type  option:["value='0']").val("0");
第二種:
$("#Type").val("0");

6,新增元素:

$("元素").append()      在被選元素的結尾插入內容
$("元素").prepend()     在被選元素的開頭插入內容
$("元素").after()       在被選元素之後插入內容
$("元素").before()      在被選元素之前插入內容

7,刪除元素:

$("元素").remove()     刪除被選元素（及其子元素）
$("元素").empty()      從被選元素中刪除子元素
其中,remove() 方法也可接受一個引數，允許對被刪元素進行過濾
比如,刪掉 class="a" 的所有 <p> 元素：
$("p").remove(".a");

8,遍歷:

遍歷祖先:
$("元素").parent()     //返回被選元素的直接父元素
$("元素").parents()   //返回被選元素的所有祖先元素
$("元素").parentsUntil()   //返回介於兩個給定元素之間的所有祖先元素
比如,返回介於 <span> 與 <div> 元素之間的所有祖先元素:
$("span").parentsUntil("div");

9,過濾:

$("元素").first()     //返回被選元素的首個元素
$("元素").last()      //返回被選元素的最後一個元素
$("元素").eq()       //返回被選元素中帶有指定索引號的元素
$("元素").filter()    //匹配的元素會被返回,不匹配的元素將會從集合中刪除
比如:帶有類名 "url" 的所有 <p> 元素：$("p").filter(".url");
$("元素").not()     //返回不匹配標準的所有元素
比如:返回不帶有類名 "url" 的所有 <p> 元素：$("p").not(".url");

總覺得一張圖,比上面的文字來的更加直接準確一些,所以最後上一張我梳理的導圖(個人觀點,如有偏頗之處,還望指出): 想說的大概就這麼多了,感謝您的閱讀~