jquery中選擇器詳解.doc

jQuery-強(qiáng)大的jQuery選擇器 (詳解)轉(zhuǎn)1. 基礎(chǔ)選擇器 Basics名稱 說明 舉例#id 根據(jù)元素Id選擇 $(divId) 選擇ID為divId的元素element 根據(jù)元素的名稱選擇, $(a) 選擇所有元素.class 根據(jù)元素的css類選擇 $(.bgRed) 選擇所用CSS類為bgRed的元素* 選擇所有元素 $(*)選擇頁面所有元素selector1, selector2, selectorN 可以將幾個(gè)選擇器用,分隔開然后再拼成一個(gè)選擇器字符串.會同時(shí)選中這幾個(gè)選擇器匹配的內(nèi)容. $(#divId, a, .bgRed) 2.層次選擇器 Hierarchy名稱 說明 舉例ancestor descendant 使用form input的形式選中form中的所有input元素.即ancestor(祖先)為from, descendant(子孫)為input. $(.bgRed div) 選擇CSS類為bgRed的元素中的所有元素.parent child 選擇parent的直接子節(jié)點(diǎn)child. child必須包含在parent中并且父類是parent元素. $(.myListli) 選擇CSS類為myList元素中的直接子節(jié)點(diǎn)對象.prev + next prev和next是兩個(gè)同級別的元素. 選中在prev元素后面的next元素. $(#hibiscus+img)選在id為hibiscus元素后面的img對象.prev siblings 選擇prev后面的根據(jù)siblings過濾的元素 注:siblings是過濾器 $(#someDivtitle)選擇id為someDiv的對象后面所有帶有title屬性的元素 3.基本過濾器 Basic Filters名稱 說明 舉例:first 匹配找到的第一個(gè)元素 查找表格的第一行:$(tr:first):last 匹配找到的最后一個(gè)元素 查找表格的最后一行:$(tr:last):not(selector) 去除所有與給定選擇器匹配的元素 查找所有未選中的 input 元素: $(input:not(:checked):even 匹配所有索引值為偶數(shù)的元素，從 0 開始計(jì)數(shù) 查找表格的1、3、5.行:$(tr:even):odd 匹配所有索引值為奇數(shù)的元素，從 0 開始計(jì)數(shù) 查找表格的2、4、6行:$(tr:odd):eq(index) 匹配一個(gè)給定索引值的元素 注:index從 0 開始計(jì)數(shù) 查找第二行:$(tr:eq(1):gt(index) 匹配所有大于給定索引值的元素 注:index從 0 開始計(jì)數(shù) 查找第二第三行，即索引值是1和2，也就是比0大:$(tr:gt(0):lt(index) 選擇結(jié)果集中索引小于 N 的 elements 注:index從 0 開始計(jì)數(shù) 查找第一第二行，即索引值是0和1，也就是比2小:$(tr:lt(2):header 選擇所有h1,h2,h3一類的header標(biāo)簽. 給頁面內(nèi)所有標(biāo)題加上背景色: $(:header).css(background, #EEE);:animated 匹配所有正在執(zhí)行動(dòng)畫效果的元素 只有對不在執(zhí)行動(dòng)畫效果的元素執(zhí)行一個(gè)動(dòng)畫特效:$(#run).click(function() $(div:not(:animated).animate( left: +=20 , 1000); ); 4. 內(nèi)容過濾器 Content Filters名稱 說明 舉例:contains(text) 匹配包含給定文本的元素 查找所有包含 John 的 div 元素:$(div:contains(John):empty 匹配所有不包含子元素或者文本的空元素 查找所有不包含子元素或者文本的空元素:$(td:empty):has(selector) 匹配含有選擇器所匹配的元素的元素 給所有包含 p 元素的 div 元素添加一個(gè) text 類: $(div:has(p).addClass(test);:parent 匹配含有子元素或者文本的元素 查找所有含有子元素或者文本的 td 元素:$(td:parent) 5.可見性過濾器 Visibility Filters名稱 說明 舉例:hidden匹配所有的不可見元素注:在1.3.2版本中, hidden匹配自身或者父類在文檔中不占用空間的元素.如果使用CSS visibility屬性讓其不顯示但是占位,則不輸入hidden.查找所有不可見的 tr 元素:$(tr:hidden):visible 匹配所有的可見元素 查找所有可見的 tr 元素:$(tr:visible)6.屬性過濾器 Attribute Filters名稱 說明 舉例attribute 匹配包含給定屬性的元素 查找所有含有 id 屬性的 div 元素: $(divid)attribute=value 匹配給定的屬性是某個(gè)特定值的元素 查找所有 name 屬性是 newsletter 的 input 元素:$(inputname=newsletter).attr(checked, true);attribute!=value 匹配給定的屬性是不包含某個(gè)特定值的元素 查找所有 name 屬性不是 newsletter 的 input 元素: $(inputname!=newsletter).attr(checked, true);attribute=value 匹配給定的屬性是以某些值開始的元素 $(inputname=news)attribute$=value 匹配給定的屬性是以某些值結(jié)尾的元素 查找所有 name 以 letter 結(jié)尾的 input 元素: $(inputname$=letter)attribute*=value 匹配給定的屬性是以包含某些值的元素查找所有 name 包含 man 的 input 元素: $(inputname*=man)attributeFilter1attributeFilter2attributeFilterN 復(fù)合屬性選擇器，需要同時(shí)滿足多個(gè)條件時(shí)使用。 找到所有含有 id 屬性，并且它的 name 屬性是以 man 結(jié)尾的: $(inputidname$=man)7.子元素過濾器 Child Filters名稱 說明 舉例:nth-child(index/even/odd/equation) 匹配其父元素下的第N個(gè)子或奇偶元素:eq(index) 只匹配一個(gè)元素，而這個(gè)將為每一個(gè)父元素匹配子元素。:nth-child從1開始的，而:eq()是從0算起的！可以使用: nth-child(even) :nth-child(odd) :nth-child(3n) :nth-child(2) :nth-child(3n+1) :nth-child(3n+2)在每個(gè) ul 查找第 2 個(gè)li: $(ul li:nth-child(2):first-child 匹配第一個(gè)子元素:first 只匹配一個(gè)元素，而此選擇符將為每個(gè)父元素匹配一個(gè)子元素在每個(gè) ul 中查找第一個(gè) li: $(ul li:first-child):last-child 匹配最后一個(gè)子元素:last只匹配一個(gè)元素，而此選擇符將為每個(gè)父元素匹配一個(gè)子元素在每個(gè) ul 中查找最后一個(gè) li: $(ul li:last-child):only-child 如果某個(gè)元素是父元素中唯一的子元素，那將會被匹配如果父元素中含有其他元素，那將不會被匹配。在 ul 中查找是唯一子元素的 li: $(ul li:only-child)8.表單選擇器 Forms 名稱 說明 解釋:input 匹配所有 input, textarea, select 和 button 元素 查找所有的input元素: $(:input):text 匹配所有的文本框 查找所有文本框: $(:text):password 匹配所有密碼框 查找所有密碼框: $(:password):radio 匹配所有單選按鈕 查找所有單選按鈕:checkbox 匹配所有復(fù)選框 查找所有復(fù)選框: $(:checkbox):submit 匹配所有提交按鈕 查找所有提交按鈕: $(:submit):image 匹配所有圖像域匹配所有圖像域: $(:image):reset 匹配所有重置按鈕 查找所有重置按鈕: $(:reset):button 匹配所有按鈕 查找所有按鈕: $(:button):file 匹配所有文件域 查找所有文件域: $(:file)9.表單過濾器 Form Filters名稱 說明 解釋:enabled 匹配所有可用元素查找所有可用的input元素: $(input:enabled):disabled 匹配所有不可用元素 查找所有不可用的input元素: $(input:disabled):checked 匹配所有選中的被選中元素(復(fù)選框、單選框等，不包括select中的option) 查找所有選中的復(fù)選框元素: $(input:checked):selected 匹配所有選中的option元素 查找所有選中的選項(xiàng)元素: $(select option:selected) 以jQuery(v1.3.2)為基礎(chǔ)from：/showtopic-89.aspx1).基本#id 根據(jù)給定的ID匹配一個(gè)元素。例如：$(#id)element 根據(jù)給定的元素名匹配所有元素。例如：$(div).class 根據(jù)給定的類匹配元素。例如：$(.style1);* 匹配所有元素。例如：$(*)selector1,selector2,selectorN 將每一個(gè)選擇器匹配到的元素合并后一起返回。例如：$(#id,div,.style1)2).表單:button 匹配所有按鈕。例如：$(:button):checkbox 匹配所有復(fù)選框。例如：$(:checkbox):file 匹配所有文件域。例如：$(:file):hidden 匹配所有不可見元素，或者type為hidden的元素。例如：$(input:hidden):image 匹配所有圖像域。例如：$(:image):input 匹配所有 input, textarea, select 和 button 元素。例如：$(:input):password 匹配所有密碼框。例如：$(:password):radio 匹配所有單選按鈕。例如：$(:radio):reset 匹配所有重置按鈕。例如：$(:reset):submit 匹配所有提交按鈕。例如：$(:submit):text 匹配所有的單行文本框。例如：$(:text):header 匹配如 h1, h2, h3之類的標(biāo)題元素。例如：$(:header).css(background, #EEE);2.篩選條件1).屬性篩選attribute*=value 匹配給定的屬性是以包含某些值的元素。例如：$(inputname*=man)attribute!=value 匹配所有含有指定的屬性，但屬性不等于特定值的元素。例如：$(inputname!=man);attribute$=value 匹配給定的屬性是以某些值結(jié)尾的元素。例如：$(inputname$=man)attribute=value 匹配給定的屬性是某個(gè)特定值的元素。例如：$(inputname=man);attribute 匹配包含給定屬性的元素。例如：$(divid)attribute=value 匹配給定的屬性是以某些值開始的元素。例如：$(inputname=man)selector1selector2selectorN 同時(shí)滿足多個(gè)條件。例如：$(inputidname$=man):hidden 匹配所有的不可見元素。例如：$(tr:hidden):visible 匹配所有的可見元素。例如：$(tr:visible):checked 匹配所有選中的被選中元素(復(fù)選框、單選框等，不包括select中的option)。例如：$(input:checked):disabled 匹配所有不可用元素。例如：$(input:disabled):enabled 匹配所有可用元素。例如：$(input:enabled):selected 匹配所有選中的option元素。例如：$(select option:selected)2).內(nèi)容篩選:contains(text) 匹配包含給定文本的元素。例如：$(div:contains(John):empty 匹配所有不包含子元素或者文本的空元素。例如：$(td:empty):has(selector) 匹配含有選擇器所匹配的元素的元素。例如：$(div:has(p);:parent 匹配含有子元素或者文本的元素。例如：$(td:parent)3).層級篩選ancestor descendant 在給定的祖先元素下匹配所有的后代元素。例如：$(form input)parent child 在給定的父元素下匹配所有的子元素。例如：$(form input)prev + next 匹配所有緊接在 prev 元素后的 next 元素。例如：$(label + input)prev siblings 匹配 prev 元素之后的所有 siblings