jQuery - 选择器

基本选择器

区分	种类	使用	说明
直接选择器	全部（Universal）选择器	$("*");	所有元素
	id 选择器	$("#id_name");	id="id_name" 的元素
	class 选择器	$(".class_name");	class="class_name" 的所有元素
	元素选择器	$("element_name");	所有 element_name 元素 例如 <p>
	group 选择器	$("el1, el2, el3... eln");	所有 el1, el2, el3... eln 元素 例如<h1> <div> 和 <p>
	附属选择器	$("p.txt_1"), $("p#txt_1");	<p> 元素中 class 或 id 为 txt_1 的元素
相邻关系选择器	父母元素选择器	$("被选元素").parent();	被选元素的父母元素
	上游元素选择器	$("被选元素).parents();	被选元素所有的上游元素
	最近元素选择器	$("被选元素").closest("div");	被选元素的上游元素中最近的<div>
	子元素选择器	$("被选元素 子元素");	被选元素指定的 子元素
	子元素选择器	$("被选元素 > 子元素");	以被选元素基准指定的子元素
	子元素们选择器	$("被选元素").children();	以被选元素基准所有的子元素
	兄（以前）元素选择器	$("被选元素").prev();	被选元素之前的元素
	兄（以前）元素们选择器	$("被选元素").prevAll();	被选元素之前的所有元素
	指定兄（以前）元素们选择器	$("被选元素").prevUntil("元素名");	被选元素之前的指定元素
	弟（以后）元素选择器	$("被选元素").next(); $("被选元素 + 以后元素");	被选元素以后的元素
	弟（以后）元素们选择器	$("被选元素").nextAll();	被选元素以后的所有元素
	指定弟（以后）元素们选择器	$("被选元素").nextUntil("元素名");	被选元素以后的指定元素
	全部兄弟元素选择器	$(".box_1").siblings();	class 值为 box_1 的元素 所有的兄弟元素

位置探索(遍历- 过滤)选择器种类

种类	使用	说明
$("被选元素:first") $("被选元素") .first()	$("li:first"); $("li") .first();	first() 方法返回被选元素的首个元素
$("被选元素:last") $("被选元素") .last()	$("li:last"); $("li") .last();	last() 方法返回被选元素的最后一个元素
$("被选元素:odd")	$("li:odd");	选取奇数位置的 <li> 元素
$("被选元素:even")	$("li:even");	选取偶数位置的 <li> 元素
$("被选元素:first-of-type")	$("li:first-of-type");	选取最前位置的 <li> 元素
$("被选元素:last-of-type")	$("li:last-of-type");	选取最后位置的 <li> 元素
$("被选元素:nth-child(int)")	$("li:nth-child(3)");	选取第三位置的 <li> 元素
$("被选元素:nth-child(intn)")	$("li:nth-child(3n)");	选取第三的倍数位置的 <li> 元素
$("被选元素:nth-last-of-type(int)")	$("li:nth-last-of-type(2)");	选取倒数第二位置的 <li> 元素
$("被选元素:only-child")	$("li:only-child");	父母元素内只有一个 <li> 元素的 <li> 元素
$("被选元素:eq(index)")  $("被选元素") .index(index)	$("li:eq(2)"); $("li") .index(2);	<li> 元素中 index == 2 的元素
$("被选元素:git(index)")	$("li:git(1)");	<li> 元素中 index > 1 的元素
$("被选元素:lt(index)")	$("li:lt(1)");	<li> 元素中 index < 1 的元素
$("被选元素").slice(index)	$("li").slice(2);	<li> 元素中 index >= 2 的元素

属性(attribute)探索选择器

种类	使用	说明
$("被选元素[attribute]")	$("li[title]");	<li> 元素中包含 title 属性的元素
$("被选元素[attribute=value]")	$("li[title='List']");	<li> 元素中只选择 title 属性值为 List 的元素
$("被选元素[attribute^=Text]")	$("li[href^='http://']");	<li> 元素中只选择 href 属性值以 http:// 开头的元素
$("被选元素[attribute$=Text]")	$("li[href$='.com']");	<li> 元素中只选择 href 属性值以 .com 结束的元素
$("被选元素[href*=Text]")	$("li[href*='easyspub]");	<li> 元素中只选择 href 属性值包含 easyspub 的元素
$("被选元素:hidden")	$("li:hidden");	<li> 元素中只选择隐藏的元素
$("被选元素:visible")	$("li:visible);	<li> 元素中只选择显示的元素
$(".text")	$(".text");	<input> 元素中只选择 type 属性为 text 的元素
$(".selected")	$(".selected");	只选择已经适用 selected 的元素
$(".checked")	$(".checked");	只选择已经适用 checked 的元素

其它选择器 - contains 探索选择器

种类	使用	说明
$("被选元素:contains(Text)")	$("li:contains('内容2')");	<li> 元素中只选择包含 内容2 Text 的元素
$("被选元素").contains()	$("li").contains();	被选元素的子元素中最近的子元素
$("被选元素:has(元素名)")  $("被选元素").has(元素名)	$("li:has('span')"); $("li").has("span");	<li> 元素中只选择包含 <span> 的元素
$("被选元素:not(:排除元素)") / $("被选元素").not(:排除元素)	$("li:not(':frist')"); $("li").not(":frist");	<li> 元素中第一个元素之外的元素
$("被选元素").filter(过滤元素)	$("li").filter(".list2");	<li> 元素中 class 值为 list2 的元素
$("被选元素1").find(被选元素2)	$("li").find("strong");	只选择 <li> 元素的子元素为 <strong> 的元素
$("被选元素1").closest(被选元素2)	$("li").closest("div");	包围 <strong> 元素的上游 <div> 元素中最近的元素
end()	$("li").children("a").end();	结束当前链中最近的一次筛选操作， 并把匹配元素集合返回到前一次的状态

有助于选择器使用的方法

种类	使用	说明
is(”元素状态“)	$(”.txt1“).is(".visible");	被选元素显示的话，返回 true
$.noConflict()	var 变量 = $.noConflict(); 变量("被选元素");	使用 $.noConflict() 的话，会停止使用中的函数，使用新的变量名函数
get()	$("被选元素").get(0); style.color = "#f00";	选择器使用 get(0) 可以使用 DOM 方式的样式