jQuery用的越來(lái)越多,但是很多都是從下載的源碼,作為開發(fā)者有必要掌握一部分知識(shí)為自己所用,下面我們列舉下“jQuery Selector選擇器”的常見操作。

 //jQuery 選擇器 $ 
//$(expression,[context]) return jQuery 
//Unit One 
//expression 之 CSS 定義符 就是以CSS語(yǔ)法表示所要選擇的元素 

// $("*"); // 表示頁(yè)面所有元素標(biāo)簽 
// $("th, td") // 表示所有<th><td>元素標(biāo)簽 
// $("a") // 表示所有<a>元素標(biāo)簽 
// $("div#onlydiv"); // 表示CSS選擇中id=onlyidv的元素 $("#ID")為全文檔匹配 
// $("#rating"); // 表示id=rating的元素 
// $("#orderedlist > li"); // 表示id=orderedlist 所有子元素,但不包括子元素下的子元素 
// $("#orderedlist li:last"); // 表示id=orderedlist 中l(wèi)i最后一個(gè)元素 
// $("#orderedlist li:first"); // 表示id=orderedlist 中l(wèi)i第一個(gè)元素 
// $("#orderedlist li:nth- child(0)"); //表示id=orderedlist 中l(wèi)i第(N)個(gè)元素 n為數(shù)組下標(biāo) 
// $("button:only-child"); //表示 css選擇中的它為父容器唯一的元素 
// $(".stuff:empty"); // 表示css選擇中的空元素 
// $(".buttons:enabled"); // 表示css選擇中的正常啟用的元素 
// $(".buttons:disabled"); // 表示css選擇中的非啟用元素 
// $("input:checked"); // 表示css選擇中的選中的元素 
// $("button:not(.not)"); // 表示css選擇中的去除not()中的元素 
// $("button.not"); // 表示css選擇中的class=not的元素 $(".CLSS")為全文檔匹配 
// $("#orderedlist2 li"); // 表示id=orderedlist 所有子元素且包括所有子元素的子元素 
// //alert($("#orderedlist ~ li").length); 
// $("#orderedlist,.buttons,li"); //匹配 css選擇符的元素 



//expression 之 根據(jù)元素屬性選擇 
// alert($("button[@class]").length); // 表示有class屬性的元素 
// alert($("button[@class=not").length); // 表示有class屬性且值等于not的元素 
// alert($('button[@class^=not').length); // 表示有class屬性且值開頭匹配not的元素 
// alert($('button[@class$=not').length); // 表示有class屬性且值結(jié)尾匹配not的元素 
// alert($('button[@class*=not').length); // 表示有class屬性且值中匹配not的元素 
//expression 之 XPATH 過(guò)濾器 XPATH語(yǔ)法來(lái)表示需要選擇的頁(yè)面元素 
//$("ol[@id^='orderedlist']").find("li:contains('First')").each(function(i) { 
//// $(this).html( $(this).html() + " BAM! " + i ); 
// $(this).mouseover(function(){ 
// $(this).css("color","red"); 
// }); 
// $(this).mouseout(function(){ 
// $(this).css("color","#000"); 
// }); 
// }); 
//查找ol標(biāo)簽且屬性 id=orderedlist的所有元素,這里有兩種寫法 
//ol[@id='orderedlist'] 定位父元素 直接用each 迭代 
//ol[@id='orderedlist']/* 所有父元素下的子元素 使用find('child- element').each()迭代 

//Unit two 
///$( html, [ownerDocument]) return jQuery 
//這個(gè)函數(shù)允許傳入html元素文本,構(gòu)造器會(huì)產(chǎn)生這個(gè)HTML文本所創(chuàng)造的jQuery對(duì)象,這個(gè)對(duì)象可以是原本沒有的,也可是原本頁(yè)面上存在的 
//$('<p>hello</p>').appendTo("h2"); //生成一個(gè)標(biāo)記文本 并追加到頁(yè)面h2標(biāo)簽內(nèi) 
//也可以 將原本頁(yè)面元素取出追加 
//$("input",this).appendTo("h2"); //注意,這里取出的頁(yè)面元素,是移動(dòng)!而不是復(fù)制 

///$(elements) return jQuery 
//這個(gè)函數(shù)允許直接傳入DOM 
//$(document.forms[0].elements).appendTo("h2"); // 可以參考DOM文檔 
//$(callback) return jQuery 



//以下是selector一些說(shuō)明 
/* 
基礎(chǔ)： 

#id：根據(jù)對(duì)象的id屬性獲取對(duì)象。 
element：匹配某一HTML標(biāo)簽的所有對(duì)象 
.class：根據(jù)對(duì)象的class屬性獲取對(duì)象 
*：獲取所有的對(duì)象 
selector1, selector2, selectorN：獲取多個(gè)選擇符的合集，不剔出重復(fù)項(xiàng) 

層級(jí)選擇符： 
ancestor descendant：這個(gè)選擇符就是空格，表示先找到第一個(gè)選擇符的所有對(duì)象，然后在他的子孫節(jié)點(diǎn)中找到所有符合第二個(gè)選擇符的對(duì)象。 
parent > child：這個(gè)選擇符就是大于號(hào)，表示先找到第一個(gè)選擇符的所有對(duì)象，然后在他的子節(jié)點(diǎn)（不能是孫節(jié)點(diǎn)）中找到所有符合第二個(gè)選擇符的對(duì)象。 
prev + next：這個(gè)選擇符就是加號(hào)，表示先找到第一個(gè)選擇符的所有對(duì)象，然后找和他同級(jí)的緊跟著的下一個(gè)節(jié)點(diǎn)同時(shí)符合第二個(gè)選擇符的對(duì)象。 
prev ~ siblings：這個(gè)選擇符就是~號(hào)，表示先找到第一個(gè)選擇符的所有對(duì)象，然后找和他同級(jí)的以后所有節(jié)點(diǎn)里面同時(shí)符合第二個(gè)選擇符的對(duì)象。 

基礎(chǔ)過(guò)濾符： 
:first：匹配多個(gè)對(duì)象中的第一個(gè)對(duì)象 
:last：匹配多個(gè)對(duì)象中的最后一個(gè)對(duì)象 
:not(selector)：匹配去除了not后面選擇符中內(nèi)容的項(xiàng) 
:even：匹配所有對(duì)象中的第偶數(shù)個(gè) 
:odd：匹配所有對(duì)象中的第奇數(shù)個(gè) 
:eq(index)：匹配某一下表的單獨(dú)某元素 
:gt(index)：匹配大于某一下標(biāo)的所有元素 
:lt(index)：匹配小于某一下標(biāo)的所有元素 
:header：匹配所有的header元素，例如 h1,h2,h3,h4,h5,h6 
:animated：匹配所有有動(dòng)畫效果的元素 

文本過(guò)濾符： 
:contains(text)：匹配內(nèi)部擁有該文本元素的對(duì)象，包含間接有用的情況 
:empty：匹配所有沒有子元素的對(duì)象 
:has(selector)：匹配所有至少含有一個(gè)子選擇符的對(duì)象 
:parent：匹配所有的父對(duì)象，父對(duì)象包含那些只含有文本的對(duì)象 

可見性過(guò)濾符： 
:hidden：匹配所有隱藏對(duì)象，或者input中的hidden類型 
:visible：匹配所有可見的對(duì)象 

屬性過(guò)濾符： 
[attribute]：匹配擁有某一屬性的所有對(duì)象 
[attribute=value]：匹配擁有某一屬性和值的對(duì)象 
[attribute!=value]：匹配擁有某一屬性，且不是某一值的對(duì)象 
[attribute^=value]：匹配擁有某一屬性，且以某一值開頭的對(duì)象 
[attribute$=value]：匹配擁有某一屬性，且以某一值結(jié)尾的對(duì)象 
[attribute*=value]：匹配擁有某一屬性，且包含某一值的對(duì)象 
[selector1] [selector2][selectorN]：匹配同時(shí)符合多個(gè)屬性選擇符的對(duì)象 

子過(guò)濾符： 
:nth- child(index/even/odd/equation)：匹配子元素中的某一下標(biāo)/偶數(shù)/奇數(shù)/等式的對(duì)象，:eq(index)只能匹配某單一對(duì)象的子元素特征，而這個(gè)方法可以匹配多個(gè)對(duì)象的某一子元素共同特征 
:first-child：匹配第一個(gè)子元素 
:last- child：匹配最后一個(gè)子元素 
這兩個(gè)匹配符也可以對(duì)多個(gè)父對(duì)象的所有子元素進(jìn)行匹配操作 
:only-child：如果一個(gè)父元素只有一個(gè)子元素，就匹配這個(gè)子元素 

表單過(guò)濾符 
Name Type 

:input Returns: Array<Element(s)> 
匹配表單內(nèi)input元素 

:text Returns: Array<Element(s)> 
匹配表單內(nèi) input type為text的元素 

:password Returns: Array<Element(s)> 
匹配表單內(nèi)input type為password的元素 

:radio Returns: Array<Element(s)> 
匹配表單內(nèi)input type為radio的元素 

:checkbox Returns: Array<Element(s)> 
匹配表單內(nèi)input type為checkbox的元素 

:submit Returns: Array<Element(s)> 
匹配表單內(nèi)input type為submit的元素 

:image Returns: Array<Element(s)> 
匹配表單內(nèi)image的元素 

:reset Returns: Array<Element(s)> 
匹配表單內(nèi) input type為reset的元素 

:button Returns: Array<Element(s)> 
匹配表單內(nèi)input type為button的元素 

:file Returns: Array<Element(s)> 
匹配表單內(nèi)input type為file的元素. 

:hidden Returns: Array<Element(s)> 
匹配表單內(nèi)input type為hidden的元素或者h(yuǎn)idden區(qū)域 



:enabled Returns: Array<Element(s)> 
匹配所有啟用元素 

:disabled Returns: Array<Element(s)> 
匹配所有非啟用元素 

:checked Returns: Array<Element(s)> 
匹配所有選中元素 

:selected Returns: Array<Element(s)> 
匹配所有下拉列表選中元素 

*/

讓價(jià)值共享 記錄企業(yè)發(fā)展腳步 感恩相伴

溫馨提醒：找西安做網(wǎng)站的公司，請(qǐng)選擇手續(xù)齊全、業(yè)務(wù)精、服務(wù)好的正規(guī)公司

HOOBOO宏博網(wǎng)絡(luò),是一家專業(yè)從事網(wǎng)站設(shè)計(jì)制作的網(wǎng)絡(luò)公司,擁有一流的專業(yè)團(tuán)隊(duì)及10年行業(yè)建站經(jīng)驗(yàn),是您網(wǎng)站制作的最佳選擇,滿足企業(yè)個(gè)性化,多樣化的互聯(lián)網(wǎng)轉(zhuǎn)型需求,歡迎咨詢:029-81773686