jQuery篩選器及練習 jQuery初識
- 2019 年 10 月 4 日
- 筆記
jQuery初識
jQuery是什麼？
jQuery是一個兼容多瀏覽器的JavaScript庫。
jQuery能極大地簡化JavaScript編程，它的宗旨就是："Write less,do more."
jQuery包含以下內容：
- HTML元素選取
- HTML元素操作
- CSS操作
- HTML事件函數
- JavaScript特效和動畫
- HTML DOM遍歷和修改
- AJAX
下載鏈接：jQuery官網
jQuery對象
jQuery對象就是通過jQuery包裝DOM對象後產生的對象，jQuery對象是jQuery獨有的。如果一個對象是 jQuery對象，那麼它就可以使用jQuery里的方法：例如$(「#i1」).html()。
$(「#i1」).html()的意思是：獲取id值為i1的元素的HTML程式碼，其中html()是jQuery里的方法。
相當於JavaScript中的document.getElementById("i1").innerHTML;
雖然jQuery對象是包裝DOM對象後產生的，但是jQuery對象無法使用DOM對象的任何方法，同理DOM對象也不能使用jQuery也不能使用jQuery里的方法。
jQuery與JavaScript在申明變數的區別：
1 var $variable = jQuery對象 2 var variable = DOM對象 3 $variabl[0] //jQuery對象轉換成DOM對象
拿上面的例子舉例，jQuery對象和DOM對象的使用：
1 $("#i1").html(); //jQuery對象可以使用jQuery的方法 2 $("#i1")[0].innerHTML; //DOM對象使用DOM的方法
jQuery基礎語法
$(selector).action()
查找標籤>選擇器
id選擇器：
$("#id");
class選擇器：
$(".className");
標籤選擇器：
$("tagName");
組合選擇器：
$("#id,.className,tagName")
層級選擇器：
$("#id a"); //查找id下方所有的a標籤，中間的空格表示後代。 $("#id > a"); //查找第一個a標籤
基本選擇器：
:first //第一個 :eq(index) //索引等於index的那個元素 :last //最後一個
屬性選擇器：
<input type="text"> <input type="password"> <input type="checkbox"> $("input[type = 'checkbox']"); //取到checkbox類型的input標籤
篩選器
下一個元素：
1 $("#id").next(); //篩選出下一個元素 2 $("#id").nextAll(); //篩選出下面所有的元素 3 $("#id").nextUntil("#i2"); //篩選出下面所有的元素，找到ID為i2終止
上一個元素：
$("#id").prev(); //篩選出上一個元素 $("#id").prevAll(); //篩選出上面所有的元素 $("#id").prevUntil("#i2"); //篩選出下面所有的元素，找到id為i2終止
父親元素：
1 $("#id").parent(); //parent() 方法返回被選元素的直接父元素。 2 $("#id").parentsAll(); //parentsAll()返回被選元素的所有祖先元素 3 $("#id").parentsUntil(); //parentsUntil() 方法返回介於 selector 與 stop 之間的所有祖先元素。
子元素和同級元素：
$("#id").children(); //所有子元素 $("#id").siblings(); //所有同級元素
查找元素:
$("id").find()
操作>屬性
用於自定義屬性：
attr() removeAttr()
用於checkbox和radio
prop() removeProp()
注意：
在1.x及2.x版本的jQuery中使用attr對checkbox進行複製操作時會出bug，在3.x版本的jQuery中則沒有這個問題。為了兼容性，我們在處理checkbox和radio的時候盡量使用特定的prop()，不要使用attr(「checked」, 「checked」)。
練習題：
1.找到本頁面中id是i1的標籤 $("#i1") 2.找到本頁面中所有的h2標籤
$("h2") 3.找到本頁面中所有的input標籤
$("input") 4.找到本頁面所有樣式類中有c1的標籤
$(".c1") 5.找到本頁面所有樣式類中有btn-default的標籤
$(".btn-default") 6.找到本頁面所有樣式類中有c1的標籤和所有h2標籤
$(".c1,h2") 7.找到本頁面所有樣式類中有c1的標籤和id是p3的標籤
$(".c1,#p3") 8.找到本頁面所有樣式類中有c1的標籤和所有樣式類中有btn的標籤
$(".c1,btn") 9.找到本頁面中form標籤中的所有input標籤
$("form input") 10.找到本頁面中label標籤下的input標籤子標籤
$("label>input") 11.找到本頁面中緊挨著label標籤的input標籤
$("label+input") 12.找到本頁面中id為p2的標籤後面所有和它同級的li標籤
$("#p2~li") 13.找到id值為f1的標籤下面的第一個input標籤
$("#f1 input:first") 14.找到id值為my-checkbox的標籤下面最後一個input標籤
$("#my-checkbox input:last") 15找到id值為my-checkbox的標籤下面沒有被選中的那個input標籤
$("#my-checkbox input:not(':checked')") 16.找到所有含有input標籤的label標籤 $("label:has(input)")
