jQuery的选择器

jQuery的选择器

基本选择器 ：是JQuery最常用的选择器,也是最简单的选择器,它通过元素id、class和标签名来查找DOM元素。
1.　$( "#id" )：根据给定的id匹配一个元素，返回单个元素
2.$( ".class" )：根据给定的类名匹配元素，返回集合元素
3、元素选择器：根据给定的元素名匹配元素，返回集合元素
4.通配符选择器：匹配所有元素，返回集合元素
5.集合选择器：将每一个匹配到的元素合并后一起返回

<button id="two">按钮</button>
		<button class="one" >按钮</button>
		<button>按钮</button>
		<button>按钮</button>
		<button>按钮</button>	

$('button').css('background','red');
	$('.one').css('background','pink');
	$('#two').css('color','white');

层次选择器：通过DOM元素间的层次关系来获取元素，主要的层次关系包括父子、后代、相邻、兄弟关系。
$('ancestor descendant'):选取祖先元素里的所有后代元素
$('parent>child'):选取父元素下的所有子元素
$('prev+next')：选取紧邻在prev后面的next元素
$('prev～siblings)：选取prev元素之后的所有siblings元素

<div>
		<span>我是1</span>
		<span>我是2</span>
		<span>我是3</span>
</div

	$("div span").css('background','red')
	$("div>span").css('background','green')
	$("div+span").css('background','black')
	$("div～span").css('background','yellow')

过滤选择器：
1.过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，
2.过滤规则与CSS中的伪类选择器语法相同
3.可以分为基本过滤选择器，内容过滤选择器，可视化过滤选择器，属性过滤选择器，子元素过滤选择器和表单元素选择器
//基本过滤选择器
$("tr:first"):选择所有tr元素的第一个
$("tr:last"):选择所有tr元素的最后一个

//过滤掉：checked的选择器的所有的input元素
$("tr:even"):选择所有的tr元素的第0，2，4… …个元素（注 意：因为所选择的多个元素时为数组，所以序号是从0开始）
$("tr:odd"):选择所有的tr元素的第1，3，5… …个元素
$("td:eq(2)"): 选择所有的td元素中序号为2的那个td元素
$("td:gt(4)"):选择td元素中序号大于4的所有td元素
$("td:ll(4)"):选择td元素中序号小于4的所有的td元素
$(":header"):获取所有的标题元素,如：h1~h6;

//内容过滤选择器：
$("div:contains('John')") : 选择所有div中含有John文本的元素
$("td:empty"): 选择所有的为空（也不包括文本节点）的td元素的数组
$("div:has(p)") : 选择所有含有p标签的div元素
$("td:parent")" 选择所有的以td为父节点的元素数组
//可视化过滤选择器：
$("div:hidden"): 选择所有的被hidden的div元素
$("div:visible") : 选择所有的可视化的div元素
//属性过滤选择器：
$("div[id]"): 选择所有含有id属性的div元素
$("input[name='newsletter']"): 选择所有的name属性等于’newsletter’的input元素
$("input[name!='newsletter']"): 选择所有的name属性不等于’newsletter’的input元素
$("input[name^='news']") 选择所有的name属性以’news’开头的input元素
$("input[name$='news']"): 选择所有的name属性以’news’结尾的input元素
$("input[name*='man']"): 选择所有的name属性包含’news’的input元素
$("input[id][name$='man']")： 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素
//子元素过滤选择器：
$("ul li:nth-child(2)"): 选择ul标签下，第2个li标签
$("ul li:nth-child(odd)"): 选择ul标签下，偶数个li元素（even奇数个）
$("ul li:nth-child(3n + 1)"): 选择ul标签下，第3n+1个li标签（n从0开始）
$("div span:first-child"): 返回所有的div元素的第一个子节点的数组
$("div span:last-child")： 返回所有的div元素的最后一个节点的数组
$("div button:only-child")： 返回所有的div中只有唯一个子节点的所有子节点的数组
//表单元素选择器：
$(":input")：” 选择所有的表单输入元素，包括input, textarea, select 和 button
$(":text")： 选择所有的text input元素
// 选择所有的password input元素
$(":radio"): 选择所有的radio input元素
$(":checkbox")： 选择所有的checkbox input元素
$(":submit")： 选择所有的submit input元素
$(":image")： 选择所有的image input元素
$(":reset")： 选择所有的reset input元素
$(":button")： 选择所有的button input元素
$(":file")： 选择所有的file input元素
$(":hidden")： 选择所有类型为hidden的input元素或表单的隐藏域
//表单元素过滤选择器：
$(":enabled")： 选择所有的可操作的表单元素
$(":disabled") : 选择所有的不可操作的表单元素
$(":checked"): 选择所有的被checked的表单元素
$("select option:selected"): 选择所有的select 的子元素中被selected的元素