宏博網絡 | 專注互聯網品牌一站式服務

Thank you for visiting

029-81773686

全網開發&整合營銷服務商

CopyRight
?HOOBOO All rights reserved

全網開發&整合營銷服務商

029-81773686

西安網站建設 jQuery Selector選擇器小結

2018.10.22

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

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

// $("*"); // 表示頁面所有元素標簽 
// $("th, td") // 表示所有<th><td>元素標簽 
// $("a") // 表示所有<a>元素標簽 
// $("div#onlydiv"); // 表示CSS選擇中id=onlyidv的元素 $("#ID")為全文檔匹配 
// $("#rating"); // 表示id=rating的元素 
// $("#orderedlist > li"); // 表示id=orderedlist 所有子元素,但不包括子元素下的子元素 
// $("#orderedlist li:last"); // 表示id=orderedlist 中li最后一個元素 
// $("#orderedlist li:first"); // 表示id=orderedlist 中li第一個元素 
// $("#orderedlist li:nth- child(0)"); //表示id=orderedlist 中li第(N)個元素 n為數組下標 
// $("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 之 根據元素屬性選擇 
// 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屬性且值結尾匹配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標簽且屬性 id=orderedlist的所有元素,這里有兩種寫法 
//ol[@id='orderedlist'] 定位父元素 直接用each 迭代 
//ol[@id='orderedlist']/* 所有父元素下的子元素 使用find('child- element').each()迭代 

//Unit two 
///$( html, [ownerDocument]) return jQuery 
//這個函數允許傳入html元素文本,構造器會產生這個HTML文本所創造的jQuery對象,這個對象可以是原本沒有的,也可是原本頁面上存在的 
//$('<p>hello</p>').appendTo("h2"); //生成一個標記文本 并追加到頁面h2標簽內 
//也可以 將原本頁面元素取出追加 
//$("input",this).appendTo("h2"); //注意,這里取出的頁面元素,是移動!而不是復制 

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



//以下是selector一些說明 
/* 
基礎: 

#id:根據對象的id屬性獲取對象。 
element:匹配某一HTML標簽的所有對象 
.class:根據對象的class屬性獲取對象 
*:獲取所有的對象 
selector1, selector2, selectorN:獲取多個選擇符的合集,不剔出重復項 

層級選擇符: 
ancestor descendant:這個選擇符就是空格,表示先找到第一個選擇符的所有對象,然后在他的子孫節點中找到所有符合第二個選擇符的對象。 
parent > child:這個選擇符就是大于號,表示先找到第一個選擇符的所有對象,然后在他的子節點(不能是孫節點)中找到所有符合第二個選擇符的對象。 
prev + next:這個選擇符就是加號,表示先找到第一個選擇符的所有對象,然后找和他同級的緊跟著的下一個節點同時符合第二個選擇符的對象。 
prev ~ siblings:這個選擇符就是~號,表示先找到第一個選擇符的所有對象,然后找和他同級的以后所有節點里面同時符合第二個選擇符的對象。 

基礎過濾符: 
:first:匹配多個對象中的第一個對象 
:last:匹配多個對象中的最后一個對象 
:not(selector):匹配去除了not后面選擇符中內容的項 
:even:匹配所有對象中的第偶數個 
:odd:匹配所有對象中的第奇數個 
:eq(index):匹配某一下表的單獨某元素 
:gt(index):匹配大于某一下標的所有元素 
:lt(index):匹配小于某一下標的所有元素 
:header:匹配所有的header元素,例如 h1,h2,h3,h4,h5,h6 
:animated:匹配所有有動畫效果的元素 

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

可見性過濾符: 
:hidden:匹配所有隱藏對象,或者input中的hidden類型 
:visible:匹配所有可見的對象 

屬性過濾符: 
[attribute]:匹配擁有某一屬性的所有對象 
[attribute=value]:匹配擁有某一屬性和值的對象 
[attribute!=value]:匹配擁有某一屬性,且不是某一值的對象 
[attribute^=value]:匹配擁有某一屬性,且以某一值開頭的對象 
[attribute$=value]:匹配擁有某一屬性,且以某一值結尾的對象 
[attribute*=value]:匹配擁有某一屬性,且包含某一值的對象 
[selector1] [selector2][selectorN]:匹配同時符合多個屬性選擇符的對象 

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

表單過濾符 
Name Type 

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

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

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

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

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

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

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

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

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

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

:hidden Returns: Array<Element(s)> 
匹配表單內input type為hidden的元素或者hidden區域 



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

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

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

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

*/

讓價值共享 記錄企業發展腳步 感恩相伴

溫馨提醒:找西安做網站的公司,請選擇手續齊全、業務精、服務好的正規公司

HOOBOO宏博網絡,是一家專業從事網站設計制作的網絡公司,擁有一流的專業團隊及10年行業建站經驗,是您網站制作的最佳選擇,滿足企業個性化,多樣化的互聯網轉型需求,歡迎咨詢:029-81773686




上一篇:關于開展2018年全國網站備案信息抽查評估的通知

下一篇:西安網站建設 中秋節服務器維護通知

CopyRight ? HOOBOO   備案號:陜ICP備10007014號-9   站點地圖 免責聲明:本網站部分資源來源于網絡,如有侵權,請聯系我們告知刪除,我們將會盡快處理,謝謝!本站不承擔任何法律責任。

东北麻将算钱规则图 雪缘园足彩比分直播 中国足彩网 赌1块钱的三公棋牌 奖多多彩票网 天津11选5前三走势图带连线 快乐扑克下载 全天pk10最精准2期计划 山东麻将不听牌能胡吗 时时彩缩水工具手机端 pk10牛牛 美国职业棒球比分直播 2012奥运即时比分 福彩3d分析预测 dg视讯杀猪原理 海南环岛赛在哪直播 电瓶捕鱼器价格