jQuery Selector選擇器小結(jié)
更新時間:2010年05月06日 22:26:13 作者:
jQuery Selector選擇器小結(jié),需要的朋友可以參考下,都是一些常用的選擇控制方式。
//jQuery 選擇器 $
//$(expression,[context]) return jQuery
//Unit One
//expression 之 CSS 定義符 就是以CSS語法表示所要選擇的元素
// $("*"); // 表示頁面所有元素標(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最后一個元素
// $("#orderedlist li:first"); // 表示id=orderedlist 中l(wèi)i第一個元素
// $("#orderedlist li:nth- child(0)"); //表示id=orderedlist 中l(wèi)i第(N)個元素 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 過濾器 XPATH語法來表示需要選擇的頁面元素
//$("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
//這個函數(shù)允許傳入html元素文本,構(gòu)造器會產(chǎn)生這個HTML文本所創(chuàng)造的jQuery對象,這個對象可以是原本沒有的,也可是原本頁面上存在的
//$('<p>hello</p>').appendTo("h2"); //生成一個標(biāo)記文本 并追加到頁面h2標(biāo)簽內(nèi)
//也可以 將原本頁面元素取出追加
//$("input",this).appendTo("h2"); //注意,這里取出的頁面元素,是移動!而不是復(fù)制
///$(elements) return jQuery
//這個函數(shù)允許直接傳入DOM
//$(document.forms[0].elements).appendTo("h2"); // 可以參考DOM文檔
//$(callback) return jQuery
//以下是selector一些說明
/*
基礎(chǔ):
#id:根據(jù)對象的id屬性獲取對象。
element:匹配某一HTML標(biāo)簽的所有對象
.class:根據(jù)對象的class屬性獲取對象
*:獲取所有的對象
selector1, selector2, selectorN:獲取多個選擇符的合集,不剔出重復(fù)項(xiàng)
層級選擇符:
ancestor descendant:這個選擇符就是空格,表示先找到第一個選擇符的所有對象,然后在他的子孫節(jié)點(diǎn)中找到所有符合第二個選擇符的對象。
parent > child:這個選擇符就是大于號,表示先找到第一個選擇符的所有對象,然后在他的子節(jié)點(diǎn)(不能是孫節(jié)點(diǎn))中找到所有符合第二個選擇符的對象。
prev + next:這個選擇符就是加號,表示先找到第一個選擇符的所有對象,然后找和他同級的緊跟著的下一個節(jié)點(diǎn)同時符合第二個選擇符的對象。
prev ~ siblings:這個選擇符就是~號,表示先找到第一個選擇符的所有對象,然后找和他同級的以后所有節(jié)點(diǎn)里面同時符合第二個選擇符的對象。
基礎(chǔ)過濾符:
:first:匹配多個對象中的第一個對象
:last:匹配多個對象中的最后一個對象
:not(selector):匹配去除了not后面選擇符中內(nèi)容的項(xiàng)
:even:匹配所有對象中的第偶數(shù)個
:odd:匹配所有對象中的第奇數(shù)個
:eq(index):匹配某一下表的單獨(dú)某元素
:gt(index):匹配大于某一下標(biāo)的所有元素
:lt(index):匹配小于某一下標(biāo)的所有元素
:header:匹配所有的header元素,例如 h1,h2,h3,h4,h5,h6
:animated:匹配所有有動畫效果的元素
文本過濾符:
:contains(text):匹配內(nèi)部擁有該文本元素的對象,包含間接有用的情況
:empty:匹配所有沒有子元素的對象
:has(selector):匹配所有至少含有一個子選擇符的對象
:parent:匹配所有的父對象,父對象包含那些只含有文本的對象
可見性過濾符:
:hidden:匹配所有隱藏對象,或者input中的hidden類型
:visible:匹配所有可見的對象
屬性過濾符:
[attribute]:匹配擁有某一屬性的所有對象
[attribute=value]:匹配擁有某一屬性和值的對象
[attribute!=value]:匹配擁有某一屬性,且不是某一值的對象
[attribute^=value]:匹配擁有某一屬性,且以某一值開頭的對象
[attribute$=value]:匹配擁有某一屬性,且以某一值結(jié)尾的對象
[attribute*=value]:匹配擁有某一屬性,且包含某一值的對象
[selector1] [selector2][selectorN]:匹配同時符合多個屬性選擇符的對象
子過濾符:
:nth- child(index/even/odd/equation):匹配子元素中的某一下標(biāo)/偶數(shù)/奇數(shù)/等式的對象,:eq(index)只能匹配某單一對象的子元素特征,而這個方法可以匹配多個對象的某一子元素共同特征
:first-child:匹配第一個子元素
:last- child:匹配最后一個子元素
這兩個匹配符也可以對多個父對象的所有子元素進(jìn)行匹配操作
:only-child:如果一個父元素只有一個子元素,就匹配這個子元素
表單過濾符
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)>
匹配所有下拉列表選中元素
*/
//$(expression,[context]) return jQuery
//Unit One
//expression 之 CSS 定義符 就是以CSS語法表示所要選擇的元素
// $("*"); // 表示頁面所有元素標(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最后一個元素
// $("#orderedlist li:first"); // 表示id=orderedlist 中l(wèi)i第一個元素
// $("#orderedlist li:nth- child(0)"); //表示id=orderedlist 中l(wèi)i第(N)個元素 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 過濾器 XPATH語法來表示需要選擇的頁面元素
//$("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
//這個函數(shù)允許傳入html元素文本,構(gòu)造器會產(chǎn)生這個HTML文本所創(chuàng)造的jQuery對象,這個對象可以是原本沒有的,也可是原本頁面上存在的
//$('<p>hello</p>').appendTo("h2"); //生成一個標(biāo)記文本 并追加到頁面h2標(biāo)簽內(nèi)
//也可以 將原本頁面元素取出追加
//$("input",this).appendTo("h2"); //注意,這里取出的頁面元素,是移動!而不是復(fù)制
///$(elements) return jQuery
//這個函數(shù)允許直接傳入DOM
//$(document.forms[0].elements).appendTo("h2"); // 可以參考DOM文檔
//$(callback) return jQuery
//以下是selector一些說明
/*
基礎(chǔ):
#id:根據(jù)對象的id屬性獲取對象。
element:匹配某一HTML標(biāo)簽的所有對象
.class:根據(jù)對象的class屬性獲取對象
*:獲取所有的對象
selector1, selector2, selectorN:獲取多個選擇符的合集,不剔出重復(fù)項(xiàng)
層級選擇符:
ancestor descendant:這個選擇符就是空格,表示先找到第一個選擇符的所有對象,然后在他的子孫節(jié)點(diǎn)中找到所有符合第二個選擇符的對象。
parent > child:這個選擇符就是大于號,表示先找到第一個選擇符的所有對象,然后在他的子節(jié)點(diǎn)(不能是孫節(jié)點(diǎn))中找到所有符合第二個選擇符的對象。
prev + next:這個選擇符就是加號,表示先找到第一個選擇符的所有對象,然后找和他同級的緊跟著的下一個節(jié)點(diǎn)同時符合第二個選擇符的對象。
prev ~ siblings:這個選擇符就是~號,表示先找到第一個選擇符的所有對象,然后找和他同級的以后所有節(jié)點(diǎn)里面同時符合第二個選擇符的對象。
基礎(chǔ)過濾符:
:first:匹配多個對象中的第一個對象
:last:匹配多個對象中的最后一個對象
:not(selector):匹配去除了not后面選擇符中內(nèi)容的項(xiàng)
:even:匹配所有對象中的第偶數(shù)個
:odd:匹配所有對象中的第奇數(shù)個
:eq(index):匹配某一下表的單獨(dú)某元素
:gt(index):匹配大于某一下標(biāo)的所有元素
:lt(index):匹配小于某一下標(biāo)的所有元素
:header:匹配所有的header元素,例如 h1,h2,h3,h4,h5,h6
:animated:匹配所有有動畫效果的元素
文本過濾符:
:contains(text):匹配內(nèi)部擁有該文本元素的對象,包含間接有用的情況
:empty:匹配所有沒有子元素的對象
:has(selector):匹配所有至少含有一個子選擇符的對象
:parent:匹配所有的父對象,父對象包含那些只含有文本的對象
可見性過濾符:
:hidden:匹配所有隱藏對象,或者input中的hidden類型
:visible:匹配所有可見的對象
屬性過濾符:
[attribute]:匹配擁有某一屬性的所有對象
[attribute=value]:匹配擁有某一屬性和值的對象
[attribute!=value]:匹配擁有某一屬性,且不是某一值的對象
[attribute^=value]:匹配擁有某一屬性,且以某一值開頭的對象
[attribute$=value]:匹配擁有某一屬性,且以某一值結(jié)尾的對象
[attribute*=value]:匹配擁有某一屬性,且包含某一值的對象
[selector1] [selector2][selectorN]:匹配同時符合多個屬性選擇符的對象
子過濾符:
:nth- child(index/even/odd/equation):匹配子元素中的某一下標(biāo)/偶數(shù)/奇數(shù)/等式的對象,:eq(index)只能匹配某單一對象的子元素特征,而這個方法可以匹配多個對象的某一子元素共同特征
:first-child:匹配第一個子元素
:last- child:匹配最后一個子元素
這兩個匹配符也可以對多個父對象的所有子元素進(jìn)行匹配操作
:only-child:如果一個父元素只有一個子元素,就匹配這個子元素
表單過濾符
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)>
匹配所有下拉列表選中元素
*/
您可能感興趣的文章:
- jQuery prev ~ siblings選擇器使用介紹
- jquery 層次選擇器siblings與nextAll的區(qū)別介紹
- 使用jquery選擇器如何獲取父級元素、同級元素、子元素
- jquery選擇器之屬性過濾選擇器詳解
- JQuery 選擇器、過濾器介紹
- jquery選擇器排除某個DOM元素的方法(實(shí)例演示)
- JQuery中$之選擇器用法介紹
- jquery選擇器-根據(jù)多個屬性選擇示例代碼
- jQuery中的類名選擇器(.class)用法簡單示例
- jQuery選擇器全集詳解
- jquery選擇器大全 全面詳解jquery選擇器
- jQuery 選擇器用法實(shí)例分析【prev + next】
相關(guān)文章
js和jQuery設(shè)置Opacity半透明 兼容IE6
對于每一個網(wǎng)站前端開發(fā)人員,常常都會遇到設(shè)置div透明度的需求,比如在實(shí)現(xiàn)圖片幻燈片切換效果經(jīng)常就需要使圖片淡入淡出。本文分別對原生js和jQuery在IE和其它瀏覽器中設(shè)置透明度的方法和相關(guān)注意事項(xiàng)進(jìn)行總結(jié)。2016-05-05jQuery解決input元素的blur事件和其他非表單元素的click事件沖突問題
這篇文章主要介紹了jQuery解決input元素的blur事件和其他非表單元素的click事件沖突問題,非常不錯,具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08分享20個提升網(wǎng)站界面體驗(yàn)的jQuery插件
今天為大家整理20個提升網(wǎng)站界面的體驗(yàn)的jQuery插件,這些都是比較“新款”的代碼,喜歡的請用到你的網(wǎng)站項(xiàng)目上吧2014-12-12jQuery使用slideUp方法實(shí)現(xiàn)控制元素緩慢收起
這篇文章主要介紹了jQuery使用slideUp方法實(shí)現(xiàn)控制元素緩慢收起的功能,實(shí)例分析了jQuery中slideUp方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03JQuery實(shí)現(xiàn)ul中添加LI和刪除指定的Li元素功能完整示例
這篇文章主要介紹了JQuery實(shí)現(xiàn)ul中添加LI和刪除指定的Li元素功能,結(jié)合完整實(shí)例形式分析了jQuery基于事件響應(yīng)的頁面元素屬性動態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-10-10終于實(shí)現(xiàn)了!精彩的jquery彈幕效果
終于實(shí)現(xiàn)精彩的jquery彈幕效果了,這篇文章就為大家詳細(xì)介紹了jquery彈幕效果的實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-07-07jQuery ajax 跨域插件jquery.xdomainrequest.min.js的使用方法
jQuery XDomainRequest 是一個利用 XDomainRequest 對象為 IE8、IE9 實(shí)現(xiàn)跨域資源共享(CORS - Cross Origin Resource Sharing)的 jQuery 插件2023-06-06JQuery團(tuán)隊(duì)打造的javascript單元測試工具QUnit介紹
元測試又稱為模塊測試,是針對程序模塊(軟件設(shè)計(jì)的最小單位)來進(jìn)行正確性檢驗(yàn)的測試工作。單元測試主要是用來檢驗(yàn)程式的內(nèi)部邏輯,也稱為個體測試、結(jié)構(gòu)測試或邏輯驅(qū)動測試。通常由撰寫程式碼的程式設(shè)計(jì)師負(fù)責(zé)進(jìn)行。2010-02-02