jQuery中關於​​Selector選擇器的使用總結

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($(&#39;button[@class^=not&#39;).length); // 表示有class属性且值开头匹配not的元素 
// alert($(&#39;button[@class$=not&#39;).length); // 表示有class属性且值结尾匹配not的元素 
// alert($(&#39;button[@class*=not&#39;).length); // 表示有class属性且值中匹配not的元素 
//expression 之 XPATH 过滤器 XPATH语法来表示需要选择的页面元素 
//$("ol[@id^=&#39;orderedlist&#39;]").find("li:contains(&#39;First&#39;)").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=&#39;orderedlist&#39;] 定位父元素 直接用each 迭代 
//ol[@id=&#39;orderedlist&#39;]/* 所有父元素下的子元素 使用find(&#39;child- element&#39;).each()迭代 

//Unit two 
///$( html, [ownerDocument]) return jQuery 
//这个函数允许传入html元素文本,构造器会产生这个HTML文本所创造的jQuery对象,这个对象可以是原本没有的,也可是原本页面上存在的 
//$(&#39;<p>hello</p>&#39;).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)>

符合表單內

##

:reset Returns: Array<Element(s)>

image的元素 

:button Returns: Array<Element(s)>

符合表單內input type為reset的元素 

:file Returns: Array<Element(s)>

符合表單內input type為button的元素 

:hidden Returns: Array<Element(s)>

符合表單內input type為file的元素. 

:enabled Returns: Array<Element(s)>

符合表單內input type為hidden的元素或hidden區域 ##​​
#

:disabled Returns: Array<Element(s)>

符合所有啟用元素 

:checked Returns: Array<Element(s)>

符合所有非啟用元素 

:selected Returns: Array<Element(s)>

符合所有選取元素 

rrreee符合所有
下拉清單
選取元素 

*/######

以上是jQuery中關於​​Selector選擇器的使用總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！