jQuery selector 選擇器
阿新 • • 發佈：2019-02-04
//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)>
匹配所有下拉列表選中元素
//$(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)>
匹配所有下拉列表選中元素
*/
轉載自http://www.jb51.net/article/23338.htm