jq选择器总结

Posted 2020-08-09

jQuery选择器：
1、id
根据给定的id匹配一个元素。
<div id="first"></div>
$("#first");

2、 element
根据给定的元素名匹配所有元素。
<div></div>
$("div");

3、class
根据给定的类匹配所有元素。
<div class="first"></div>
$(".first");

4、*
匹配所有元素。
<div></div>
<p></p>
$("*");

5、selector1,selector2,selectorN
将每一个选择器匹配到的元素合并后一起返回。
<div></div>
<p></p>
$("div p");

6、ancestor descendant
<div>
<p></p>
</div>
$("div p");

7、parent > child
在给定的父元素下匹配所有的元素
<div>
<p></p>
<span></span>
</div>
$("div span");

8、prev + next
匹配所有紧接在 prev 元素后的 next 元素
<label for=""></label>
<input type="text" />
$("label + input");

9、prev ~ siblings
匹配 prev 元素之后的所有 siblings 元素

<div></div>
<p></p>
$("div ~ p");

10、:first
获取第一个元素
<ul>
<li></li>
<li></li>
<li></li>
</ul>
$("ul li:first");

11、:last
获取最后一个元素
<ul>
<li></li>
<li></li>
<li></li>
</ul>
$("ul li:last");

12、:not(selector)
去除所有与给定选择器匹配的元素
<div></div>
<div class="first"></div>
$("div:not(".first)");

13、：even
匹配所有索引值为偶数的元素，从0开始计数
<div>
<p></p>
<p></p>
<p></p>
</div>
$("div p:even)

14、:odd
匹配所有索引值为奇数的元素，从 0 开始计数
<div>
<p></p>
<p></p>
<p></p>
</div>
$("div p:odd");

15、:eq
匹配一个给定索引值的元素
<div>
<p></p>
<p></p>
<p></p>
</div>
$("div p:eq(1)");

16、gt:(index)
匹配所有大于给定索引值的元素
<div>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
$("div p:gt(1)");

17、:lt(index)
匹配所有小于给定索引值的元素
<div>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
$("div p:lt(1)");

18、:lang(language)
选择指定语言的所有元素。
$("div:lang(en)")

19、:header
匹配所有h元素
<h1></h1>
<h2></h2>
<h3></h3>
$(":header")

20、:animated
匹配所有正在执行动画效果的元素
<div id="run"></div>
$("#run").click(function(){
$("div:not(:animated)").animate({ left: "+=20" }, 1000);
});

21、:focus
P匹配当前获取焦点的元素
$( "#content" ).delegate( "*", "focus blur", function( event ) {
var elem = $( this );
setTimeout(function() {
elem.toggleClass( "focused", elem.is( ":focus" ) );
}, 0);
});

22、：root
选择该文档的根元素
$(":root")

23、：target
选择由文档URI的格式化识别码表示的目标元素
$("p, button, h1, h2").click(function(event){ $("div").html("Triggered by a " + event.target.nodeName + " element.");});

24、:container(text)
匹配包含给定文本的元素
<div>这是一个div</div>
<div></div>
$("div:contains(‘这是一个div‘)")

25、:empty
匹配所有不包含子元素或者文本的空元素
<div></div>
<div>不为空</div>
$("div:empty")

26、:has(selector)
匹配含有选择器所匹配的元素的元素
<div>
<p></p>
</div>
<div></div>
$("div:has(p)")

27、:parent
匹配含有子元素或者文本的元素
<div>
<p></p>
</div>
<div></div>
$("div:parent")

28、:hidden
匹配所有不可见元素，或者type为hidden的元素
<div></div>
<div hidden></div>
$("div:hidden")

30：[attribute]
匹配包含给定属性的元素。
<div></div>
<div id="first"></div>
$("div[id]")

31、[attribute=value]
匹配给定的属性是某个特定值的元素
<input type="text" checked/>
$("input[checked=‘true‘]")

32、[attribute!=value]
匹配所有不含有指定的属性，或者属性不等于特定值的元素
<input type="text" checked/>
<input type="text" />
$("input[checked=‘true‘]")

33、[attribute^=value]
匹配给定的属性是以某些值开始的元素
<input type="text" checked/>
<input type="text" />
$("input[name^=‘ff‘]")

36、:first-child
匹配第一个子元素
‘:first‘ 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
$("ul li:first-child")

37、:first-of-type
选择所有相同的元素名称的第一个兄弟元素。
:first-of-type 选择器匹配元素，在文档树中，相同的父元素并且在其他相同的元素名称之前。
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>

$("div:first-of-type")

38、:nth-child
匹配其父元素下的第N个子或奇偶元素
‘:eq(index)‘ 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！可以使用:<br>nth-child(even)<br>:nth-child(odd)<br>:nth-child(3n)<br>:nth-child(2)<br>:nth-child(3n+1)<br>:nth-child(3n+2)
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
$("ul li:nth-child(2)")

39、:nth-of-type
选择同属于一个父元素之下，并且标签名相同的子元素中的第n个。

因为jQuery的实现:nth-是严格来自CSS规范，n值是“1-indexed”，也就是说，从1开始计数。对于所有其他选择器表达式比如:eq() 或 :even ，jQuery遵循javascript的“0索引”的计数。
<div> <span>John</span> <b>Kim</b> <span>Adam</span> <b>Rafael</b> <span>Oleg</span></div><div> <b>Dave</b> <span>Ann</span></div><div> <i><span>Maurice</span></i> <span>Richard</span> <span>Ralph</span> <span>Jason</span></div>

$("span:nth-of-type(2)");

40、:nth-child
如果某个元素是父元素中唯一的子元素，那将会被匹配

如果父元素中含有其他元素，那将不会被匹配。
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
</ul>
$("ul li:only-child")

41、:only-of-type
选择所有没有兄弟元素，且具有相同的元素名称的元素。

如果父元素有相同的元素名称的其他子元素，那么没有元素会被匹配。
<div> <button>Sibling!</button> <button>Sibling!</button></div> <div> <button>Sibling!</button></div><div> None</div> <div> <button>Sibling!</button> <span>Sibling!</span> <span>Sibling!</span> </div><div> <button>Sibling!</button></div>

$("button:only-of-type").text("Alone").css("border", "2px blue solid");

42、:input
匹配所有 input, textarea, select 和 button 元素
<form>
<input type="button" value="Input Button"/>
<input type="checkbox" />

<input type="file" />
<input type="hidden" />
<input type="image" />

<input type="password" />
<input type="radio" />
<input type="reset" />

<input type="submit" />
<input type="text" />
<select><option>Option</option></select>

<textarea></textarea>
<button>Button</button>

</form>
$(":input")

43、:text
匹配所有的单行文本框
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" />
<select><option/></select>
<textarea></textarea>
<button></button>
</form>
$(":text")

44、 :password
匹配所有的密码框
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" />
<select><option/></select>
<textarea></textarea>
<button></button>
</form>
$(":password")

45、:radio
匹配所有的单选按钮
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" />
<select><option/></select>
<textarea></textarea>
<button></button>
</form>
$(":radio")

46、:checked
匹配所有的多选按钮
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" />
<select><option/></select>
<textarea></textarea>
<button></button>
</form>
$(":checked")

46、:submit
匹配所有的提交按钮
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" />
<select><option/></select>
<textarea></textarea>
<button></button>
</form>
$(":submit")

47、:image
匹配所有图像域
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" />
<select><option/></select>
<textarea></textarea>
<button></button>
</form>
$("image")

48、:reset
匹配所有重置按钮
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" />
<select><option/></select>
<textarea></textarea>
<button></button>
</form>
$(":reset")

49、:button
匹配所有按钮
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" />
<select><option/></select>
<textarea></textarea>
<button></button>
</form>
$(":button")

50、:file
匹配所有文件域
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="file" />
<select><option/></select>
<textarea></textarea>
<button></button>
</form>
$(":file")

51、:enabled
匹配所有可用元素
<input type="text" disabled="disabled"/>
<input type="text" />
$("input:enabled")

52、:disabled
匹配所有不可用元素
<input type="text" disabled="disabled"/>
<input type="text" />
$("input:dabled")

53、:checked
匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
<form>
<input type="checkbox" name="newsletter" checked="checked" value="Daily" />
<input type="checkbox" name="newsletter" value="Weekly" />
<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
</form>
$("input:checked")

54、:selected
匹配所有选中的optiion元素
<select>
<option value="1">Flowers</option>
<option value="2" selected="selected">Gardens</option>
<option value="3">Trees</option>
</select>
$("select option:selected")