jQuery選擇器選擇dom元素

2021-08-29 22:30:54 字數 2937 閱讀 4752

jquery選擇器其實是乙個有些地方比較費解的,如果沒有經過多次實驗的話,很難得出它的每個操作符到底是幹什麼的,很容易出錯,經過我的多次測試,終於對一些比較難理解或容易出錯的選擇操作進行總結,既方便自己將來查詢又方便初學者學習。如果**有不對的還望大家幫我指出來,這裡是乙個相互學習的地方。

1. 先說說通過位置選擇的幾個操作:

[list]

[*]:first:預設情況下是相對整個頁面來說的第乙個,如:li:first表示整個頁面的第乙個li元素,而ul li:first表示整個頁面的第乙個li元素,並且是在ul下的子元素;

[*]:last:同上了,只是是最後乙個而已;

[*]:first-child:為每個父元素匹配第乙個子元素,如li:first-child返回每個ul的第乙個li元素。可以這樣理解,頁面中的元素有相同的父元素的,並且裡面又包含li元素的,那麼就取第乙個li元素,每個子類集合都要進行判斷,直到找出所有符合要求的li元素;

[*]:last-child:這個也與上面相對了,只是取的是最後乙個;

[*]:only-child:返回所有沒有兄弟節點的元素,注意,文字元素不是,也就是說類似這樣的hellojquery

,對於這段會選出元素;對於$(」label:only-child「)會選出是label元素,同時它是它父類唯一的子元素的label元素;

[*]:nth-child(n):返回第n個子節點,n從1開始,如果n取0,那麼就會選擇所有的元素。如:[*]li:nth-child(2)返回li元素,並且該元素是其父元素的第二個子元素;

[*]:nth-child(even|odd):返回偶數或奇數的子節點;

[*]:nth-child(an+b):返回滿足表示式an+b的所有子節點,比如3n+1返回所處位置為父節點子元素的是3的倍數加1的那個子元素;

[*]:even:頁面範圍內的處於偶數字置的元素,如:li:even返回全部偶數li元素;

[*]:odd:頁面範圍內的處於奇數字置的元素;

[*]:eq(n):第n個匹配的元素(n從0開始),如:li:eq(3)返回整個頁面的第四個li元素,ul li:eq(1)返回頁面中第乙個ul元素下的第二個li元素,注意:只匹配一次就返回了;

[*]:gt(n):第n個匹配元素(不包括)之後的元素(n從0開始),如:ul:gt(2)返回從第3個ul開始的所有ul元素(含第三個);

[*]:lt(n):第n個匹配元素(不包括)之前的元素(n從0開始),如:ul:lt(2)返回從第0個和第1個ul元素;

[/list]

2. 利用css選擇器進行選擇:

[list]

[*]#id:通過元素id進行選擇,比如說$("#form1")會選擇id為form1的元素;

[*].class:通過元素的css類來選擇,比如說$(".boldstyle")會選擇css為boldstyle類的元素;

[*]標籤名#id.class:通過某類元素的id屬性和class屬性來選擇,如:$(a#blog.boldstyle)會選擇id為blog並且css型別為.boldstyle型別的鏈結元素();

[/list]

3. 通過子選擇器,容器選擇器和屬性選擇器進行選擇:

[list]

[*]*:匹配所有的元素,比如說:$(*)會把頁面中的所有元素都返回;

[*]e f:匹配父元素e下的標籤名為f的所有子元素(f可以為e的子類的子類,甚至更遠);

[*]e>f:匹配父元素e下的所有標籤名為f的直接子元素;

[*]e+f:匹配所有標籤名為f的元素,並且有e型別的兄弟節點在該f元素之前(e,f緊挨著);

[*]e~f:匹配前面是任何兄弟節點e的所有元素f(e,f不必緊挨著);

[*]e:has(f):匹配標籤名為e,至少有乙個標籤名為f的後代節點的所有元素e;

[*]e.c:匹配帶有類名c的所有元素e。.c等效於*.c;

[*]e#i:匹配id為i的所有元素e,#i等效於*#i;

[*]e[a]:匹配帶有屬性a的所有元素e;

[*]e[a=v]:匹配所有屬性a的值為v的元素e;

[*]e[a^=v]:匹配所有元素e,且a的屬性值是v開頭的;

[*]e[a$=v]:匹配所有元素e,且a的屬性值是v結尾的;

[*]e[a*=v]:匹配所有元素e,且a的屬性值中包含有v;

[/list]

4.利用jquery自定義的選擇器進行選擇:

[list]

[*]:button:選擇任何按鈕型別的元素,包括input[type=submit]等等;

[*]:checkbox:選擇核取方塊元素;

[*]:file:選擇所有檔案型別元素,即input[type=file];

[*]:image:選擇表單中的影象元素,即input[type=image],注意此處和前面根據標籤名img選擇影象有點不同哈;

[*]:input:選擇表單元素,如,,,等;

[*]:radio:選擇單選按鈕元素;

[*]:reset:選擇復位按鈕元素,如input[type=reset],button[type=reset];

[*]:submit:選擇提交按鈕元素;

[*]:text:選擇文字字段元素,即input[type=text];

[*]:animated:選擇當前處於動態控制下的元素;

[*]:contains(hello):選擇包含文字hello的元素;

[*]:header:選擇標題元素,如;

[*]:parent:選擇擁有後代節點(包括文字)的元素,而排除空元素;

[*]:selected:選擇已選中的選項元素;

[*]:visible:選擇可見元素;

[*]:enable:選擇介面上已經可以使用的表單元素;

[*]:disabled:選擇介面上被禁用的表單元素;

[*]:checked:選擇已選中的核取方塊或單選按鈕;

[/list]

主要還是要多練習,多寫點例子熟悉下,東西其實也不是很多哈,希望能給大家帶來幫助;

jquery選擇器和dom選擇器區別

1.jquery選擇器css file loading css visibility visible 2.dom選擇器stylrdocument.getelementbuyid file loading style.visibility visible 因為jquery沒有.css屬性 3.jque...

jQuery 選擇器,操作DOM

jquery是乙個輕量級的js庫 選擇器 新增乙個 按鈕,使段落的字型放大 function plus type button value onclick plus p1 利用jquery實現字型的放大 過濾選擇器 表單選擇器 操作dom 增刪節點 樣式操作 addclass 追加樣式 remove...

jquery學習 與DOM,選擇器

dom與jquery innerhtml html document.getelementbyid foo innerhtml foo html dom物件與jquery物件 var variable dom物件 var variable jquery物件 區別就是jquery需要在變數前加乙個 符...