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...
