jQuery-Selectors-Filters

Selectors & Filters

1、选择所有元素: $(“*”)
2、根据元素类型选择:$(“element”) ex: $(“div”)
3、根据元素id选择:$(“#id”) ex: $(“#someId”)
4、根据classname选择:$(“.className”) ex:$(“.someClass”)

5、根据Attribute和value选择:
格式:$(“[attribute=value]”) ex: <input type='text'> ,则使用 $(“[type=text]”)
说明:
$(“[a =’v’]”)Selects elements that have attribute a with value equal ‘v’
选择属性a的值等于v的元素

$(“[a^=’v’]”)Selects elements that have attribute a with value starting with ‘v’
选择属性a的值以’v’开始的元素

$(“[a$=’v’]”)Selects elements that have attribute a with value ending with ‘v’
选择属性a的值以’v’结束的元素

$(“[a*=’v’]”)Selects elements that have attribute a with value containing ‘v’
选择属性a的值包含’v’的元素

$(“[a!=’v’]”)Selects elements that do NOT have attribute a or attribute a exists with value that does not equal ‘v’
选择不包含属性a 或者 属性a的值不等于’v’的元素

$(“[a~=’v’]”)Selects elements that have attribute a with value containing ‘v’ delimited by spaces.
选择属性a的值包含v且以空格分割的元素

$(“[a|=’v’]”)Selects elements that have attribute a with value equal ‘v’ or value starting with ‘v’ followed by a hyphen (-).
选择属性a的值等于’v’ 或者属性a的值以’v’开头且值后面紧跟’-‘的元素
demo

6、选择器和属性混合选择:
$(“selector[attribute=value]”)
ex:
$(“div[name=’apple’]”) ,我们会找到: <div name=’apple’>.
$(‘.circle[name=’apple’]’) 我们会找到如下元素: class=.circle & attribute name=’apple’

7、拥有某个属性的选择:
$(“[attribute]”)
ex:
$(“[id]”) 会找到所有包含属性id的元素.

8、多属性选择器:
$(“[attr=’value’][attr2=’value2′]”) 既满足attr=value且attr2=value2的元素
ex:
$(“[id^=’f’][name=’apple’]”);
html:
<div id=”fruit-1″ name=”apple”>apple 1</div>
<div id=”2-fruit” name=”apple”>apple 2</div>
<div id=”fruit-3″ name=”apple”>apple 3</div>

最终结果我们会找到fruit-1和fruit-3两个元素

9、Select Child Elements
子元素选择器:
$(“parent > child”) 查询parent元素直属的子元素
ex:
$(“div > p”) 会找到所有直接父元素是div的元素p

<div>
  <p><!--matched-->
  <p><!--matched-->
</div>

ex2:
$(‘div > .cirlce’):找到所有父元素是div且class=’circle’的元素

10、Select Inner Elements
查找所有内部的元素的选择器:
$(“outter inner”):查找所有子元素、孙元素为inner且外部元素为outer的元素
$(“#box1 .cirlce”); // 查找外部元素id为’box1′ & inner class=’cirlce’的元素

<div id=”box1″>
Box 1
<div class=”circle”>circle</div><!–matched–>
<div class=”square”>square</div>
<div id=”box2″>
Box 2
<div class=”circle”>circle</div> <!–matched–>
<div class=”square”>square</div>
</div>
</div>

11、Select Next Adjacent
查找紧挨着的下一个元素
$(“prev + next”) 紧挨着pre的下一个为next的选择器
ex:$(“div + p”)

<div>div1</div>
<p>p1</p><!--matched-->
<p>p2</p>
<div>div2</div>
<p>p3</p><!--matched-->

ex2:
$(‘.circle + .square’):

<div class=“circle”>circle</div>

<div class=“square”>square</div><!–matched–>

<div class=“square”>square</div>

<div class=“circle”>circle</div>

<div class=“square”>square</div><!–matched–>

12、Select Siblings
查找所有的后代元素
$(“prev ~ siblings”)
$(“div ~ p”)

<div>div</div>
<p>p1</p><!--matched-->
<span>span</span>
<p>p2</p><!--matched-->

$(“div + p”):紧挨着的

<div>div</div>
<p>p1</p><!--matched-->
<span>span</span>
<p>p2</p>

13、Multiple Selectors $(“selector1, selector2,…, selectorN”)
多元素选择器
$(“#someID, [name=’someName’], .someClass”) :会获得如下元素 id=’someID’或者attribute name=’someName’或者class=’someClass’ .

<div id='someID'>div</div><!--matched-->
<p>p1</p>
<span name='someName'>span</span><!--matched-->
<p class='someClass'>p2</p><!--matched-->

14、索引选择器
$(“:eq(n)”): 选择第n+1个元素(根据索引n精确查找)
ex:
$(“li:eq(1)”) 选择下标为1的li元素

<ul>
<li>a</li> // index = 0
<li>b</li><!--matched-->
<li>c</li>
</ul>

ex2: $(“div:eq(2)”)

<div id='someID'>div-1</div> //index = 0
<p>p-1</p>
<div class='someClass'>div-2</div> //index = 1
<p>p-2</p>
<div>div-3</div> //index = 2<!--matched--->
<span>span-1</span>

&npsp;
$(“:gt(n)”):索引大于n的元素
ex:
$(“li:gt(0)”) : index大于0的li元素

<ul>
<li>a</li> // index = 0
<li>b</li><!--matched-->
<li>c</li><!--matched-->
</ul>

$(“:lt(n)”):索引小于n的元素
ex:
$(“li:lt(2)”):index小于2的li元素

<ul>
<li>a</li>// index = 0<!--matched-->
<li>b</li><!--matched-->
<li>c</li>
</ul>

15、匹配首个和最后一个元素
$(“:first”): 匹配首个元素
$(“:last”):匹配最后一个元素
$(“:even”):匹配索引为偶数的元素 e.g. 0,2,4…
$(“:odd”):匹配索引为奇数的元素 e.g. 1,3,5…
ex:
$(“div:first”):匹配第一个div元素

<div>a</div><!---matched-->
<div>b</div>
<div>c</div>

$(“div:last”):匹配最后一个div元素

<div>a</div>
<div>b</div>
<div>c</div><!--matched-->

$(“li:even”):匹配偶数索引的li元素

<ul>
<li>0</li><!--matched-->
<li>1</li>
<li>2</li><!--matched-->
</ul>

$(“li:odd”):匹配奇数索引的li元素

<ul>
<li>0</li>
<li>1</li><!--matched-->
<li>2</li>
</ul>

16、 包含和不包含某个选择器的元素
$(“:not(selector)”):不包含 Select Elements NOT Matching selector;
$(“:has(selector)”):Select Elements Having Inner Element Matching selector
ex: $(“div:not([id])”) :不包含id属性的div元素 。will find div elements that do NOT have id attribute.

<div>div</div><!--matched-->
<div id='someID'>div with id</div>
<p>p</p>
<div>div</div><!--matched-->

ex:$(“ul:has([id])”):内部至少有一个内部元素包含id属性的ul

<ul><!--matched-->
   <li>a</li><!--matched-->
   <li id>b</li><!--matched-->
   <li>c</li><!--matched-->
</ul><!--matched-->
    
<ul>
  <li>d</li>
  <li>e</li>
  <li>f</li>
</ul>

17、Select Elements Having Inner Child or Text
$(“:parent”):包含子元素或文本的元素
ex:$(“div:parent”):所有包含子元素或文本的div元素

<div> // parent
 <p>child element</p>
</div>
    
<div>text</div> // parent 
    
<div></div> //not parent

Select Elements Having NO children
$(“:empty”):不包含子元素或文本的元素
ex:$(“div:empty”):所有不包含子元素或不包含文本的div元素

<div> // parent
 <p>child element</p>
</div>
    
<div>text</div> // parent
    
<div></div> //not parent 'empty'<!---matched-->

Select Elements Containing text
$(“:contains(text)”):包含某些文本的元素
ex: $(“div:contains(‘abc’)”):文本中包含abc的div元素

<div>abc</div><!--matched-->
    
<div>abcdef</div><!---matched-->
    
<div>ghi</div>

Select Visible Elements $(“:visible”)
$(“:visible”):可视的元素
Elements that are not in a document are considered to be hidden. Elements with display:hidden or with visibility:hidden are considered to be visiable.

<div></div><!--matched-->
    
<div style="display:hidden"></div><!--matched-->
    
<div style="visibility:hidden"></div><!--matched-->
<div style="display:none"></div>

18、
$(“:first-child”):selects elements if they are first child of their parents,如果是父元素的第一个元素,则选择该元素
$(“:last-child”):selects elements if they are last child of their parents.,如果是父元素的最后一个元素,则选择该元素
$(“:nth-child(n)”):selects elements if they arenth child of their parents,如果是父元素的第n个子元素,则选择该元素。
e.g. $(“div:nth-child(n)”) n:{integer e.g. [1,2,…,n], even, odd or equation e.g. (n+2) n= [0,1,…,n] }
$(“:nth-last-child(n)”):Select nth Last Child Elements ,最后第n个元素
e.g. $(“div:nth-last-child(n)”) n:{integer e.g. [1,2,…,n], even, odd or equation e.g. (n+2) n= [0,1,…,n] }
$(“span:first-child”)

<div>
  <p>a</p> // first child but not <span>
  <span>b</span>
  <span>c</span>
</div>
<div>
  <span>d</span><!--matched-->
  <span>e</span>
  <span>f</span>
</div>

ex:$(“span:last-child”)

<div>
  <span>a</span> 
  <span>b</span>
  <span>c</span><!--matched-->
</div>
<div>
  <span>d</span>
  <span>e</span>
  <p>f</p> // last child but not <span> 
</div>

ex:$(“li:nth-child(2)”):

<ul>
<li>1st</li>
<li>2nd</li><!--matched-->
<li>3rd</li>
</ul>
    
<ul>
<li>1st</li>
<li>2nd</li><!--matched-->
</ul>

ex: $(“li:nth-child(odd)”):第奇数个子元素

<ul>
<li>1st</li><!--matched-->
<li>2nd</li>
<li>3rd</li><!--matched-->
</ul>
    
<ul>
<li>1st</li><!--matched-->
<li>2nd</li>
</ul>

ex:$(“li:nth-child(n+2)”):n从0开始,第2个及后面的元素

<ul>
<li>1st</li>
<li>2nd</li><!--matched-->
<li>3rd</li><!--matched-->
</ul>
    
<ul>
<li>1st</li>
<li>2nd</li><!--matched-->
</ul>

ex:$(“li:nth-last-child(1)”):

<ul>
<li>1st</li>
<li>2nd</li>
<li>3rd</li>  //last index=1 <!--matched-->
</ul>
    
<ul>
<li>1st</li>
<li>2nd</li><!--matched-->
</ul>

ex:$(“li:nth-last-child(odd)”):最后奇数个元素

<ul>
<li>1nd</li>  // index = 4 
<li>2st</li>  // index = 3 <!--matched-->
<li>4nd</li>  // index = 2
<li>4rd</li>  // index = 1 starting from last <!--matched-->
</ul>
    
<ul>
<li>1nd</li>
<li>2st</li>  // index = 1 starting from last <!--matched-->
</ul>

ex:$(“li:nth-last-child(n+2)”) will select all elements if they are (n+2) child starting from last of their parents

<ul>
<li>1st</li>  // index = 3 (1+2)  <!--matched-->
<li>2nd</li>  // index = 2 (0+2)  <!--matched-->
<li>3rd</li>  // index = 1 starting from last 
</ul>
    
<ul>
<li>1st</li>  // index = 2 (0+2)  <!--matched-->
<li>2nd</li>  // index = 1 starting from last 
</ul>

ex:$(“span:nth-last-child(3)”) will find all elements if they are 3rd child starting from last of their parents.

<div>
  <p>a</p> // 3rd child but NOT <span>
  <span>b</span>
  <span>c</span>
</div>
<div>
  <span>d</span> // 3rd child and <span><!--matched-->
  <p>e</p> 
  <span>f</span>
</div>

19、
$(“:first-of-type”):selects elements that are first of their types within their parents i.e. NOT preceded by a sibling of the same element name .
如果在父元素范围内,它是第一个元素,则选定该元素
ex:$(“div:first-of-type”):选择第一个div元素

<p>a</p>  //first of its type, but not <div> 
<div>b</div>  // <div> & first of its type, no other <div> preceding it<!--matched-->
<div>c</div>  // <div>, but not first of its type 

ex: $(“.d:first-of-type”)

<div>
  <p>a</p>
  <span class="d">b</span>// first element of type <span> within its parent with class='d'
  <span>c</span>
</div>

<div>
  <span>d</span>  // first element of type <span> within its parent but without class='d'
  <p class="d">e</p> // first element of type <p> within its parent with class='d'
  <span class="d">f</span> // class='d' but not first of its type <span>
</div>

$(“:last-of-type”):selects elements that are last of their types within their parents i.e. NOT followed by a sibling of the same element name . 这种类型的最后一个元素
ex: $(“div:last-of-type”)

<p>a</p>  //last of its type, but not <div> 
<div>b</div>  // <div>, but not last of its type 
<div>c</div>  // <div> & last of its type, no other <div> following it <!--matched-->

ex:$(“.d:last-of-type”)

<div>
  <p>a</p>
  <span class="d">b</span>//class='d' but NOT last element of type <span> within its parent
  <span>c</span>
</div>

<div>
  <span>d</span>  // first element of type <span> within its parent but without class='d'
  <p class="d">e</p> // last element of type <p> within its parent with class='d'
  <span class="d">f</span> // class='d' and last of its type <span>
</div>

$(“:nth-of-type(n)”):第n个某种类型的元素 e.g. $(“div:nth-of-type(n)”) n:{integer e.g. [1,2,…,n], even, odd or equation e.g. (n+2) n= [0,1,…,n] }
ex:$(“li:nth-of-type(2)”)

<ul>
<li>1st</li> // 1st of type <li> 
<li>2nd</li> // 2nd of type <li> <!--matched-->
<li>3rd</li>
</ul>
    
<ul>
<li>1st</li> // 1st of type <li> 
<li>2nd</li> // 2nd of type <li> <!--matched-->
</ul>

ex:$(“li:nth-of-type(odd)”)

<ul>
<li>1st</li> // 1st of type <li>, 1 is ODD 
<li>2nd</li> // 2nd of type <li>, but 2 is EVEN 
<li>3rd</li> // 3rd of type <li>, 3 is ODD
</ul>
    
<ul>
<li>1st</li> // 1st of type <li>, 1 is ODD 
<li>2nd</li> // 2nd of type <li>, why not selected? 
</ul>

ex:$(“li:nth-of-type(n+2)”)

<ul>
<li>1st</li>
<li>2nd</li> // 2nd of type <li>,(0+2)=2 
<li>3rd</li> // 3rd of type <li>, (1+2)=3 
</ul>
    
<ul>
<li>1st</li>
<li>2nd</li> // 2nd of type <li>, (0+2)=2 
</ul>

ex:$(“.d:nth-of-type(2)”):选择某种类型元素的第二个元素

<div>
  <p>a</p>
  <span>b</span> //1st <span> within its parent <div>
  <span class="d">c</span>  //2nd <span> with class='d'
</div>

<div>
  <p>e</p>  //1st <p> within its parent <div>
  <span>d</span> //1st <span> within its parent 
  <p class="d">e</p>  //2nd <p> with class='d'
  <span class="d">f</span>  //2nd <span> with class='d'
</div>

$(“:nth-last-of-type(n)”):Select nth Last Element of Its Type
selects elements that are the nth of their types within their parents starting from the last.
ex:$(“li:nth-last-of-type(2)”)

<ul>
<li>1st</li> 
<li>2nd</li> // 2nd of type <li> 
<li>3rd</li> // 1st of type <li> 
</ul>
    
<ul>
<li>1st</li> // 2nd of type <li> 
<li>2nd</li> // 1st of type <li> 
</ul>

ex:$(“li:nth-last-of-type(odd)”)

<ul>
<li>1st</li> // 3rd of type <li>, 3 is ODD 
<li>2nd</li> // 2nd of type <li>, but 2 is EVEN 
<li>3rd</li> // 1st of type <li>, 1 is ODD
</ul>
    
<ul>
<li>1st</li> // 2nd of type <li>, why not selected? 
<li>2nd</li> // 1st of type <li>, 1 is ODD 
</ul>

ex:$(“li:nth-last-of-type(n+2)”) for equation, n starts from zero

<ul>
<li>1rd</li> // 3rd of type <li>, (1+2)=3 
<li>2nd</li> // 2nd of type <li>,(0+2)=2 
<li>3st</li>
</ul>
    
<ul>
<li>1nd</li> // 2nd of type <li>, (0+2)=2 
<li>2st</li>
</ul>

ex:$(“.d:nth-last-of-type(2)”)

<div>
  <p>a</p>
  <span class="d">b</span>  //2nd <span> with class='d'
  <span>c</span> //1st <span> within its parent <div>
</div>

<div>
  <p class="d">d</p>  //2nd <p> with class='d'
  <span class="d">e</span>  //2nd <span> with class='d'
  <p>f</p>  //1st <p> within its parent <div>
  <span>g</span> //1st <span> within its parent 
</div>

on going…

此条目发表在jquery, js分类目录,贴了标签。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注