JQuery学习笔记（四） 选择器
基本的
一、*
匹配所有元素
他会匹配所有不同的页面元素，<head></head>
$(",el|jquery) 返回el|jquery下的所有元素，若el|jquery为空，则返回document的所有子元素
二、.class
根据样式类匹配所有元素
一个元素可能有很多个样式类，但只要有一个匹配就返回元素
var sh= $(".ff"); 全文匹配只要应用了ff样式的元素都返回
三、element
根据给定的元素前缀查询
$("div") 查找所有div元素
四、#id
t通过id查找元素 等价于 document.getElementById(id)
$("#id")
五、selector1,selector2,selectorN
多个选择器合并使用，只要满足其中一个就返回在一个集合中
层次的
一、ancestor descendant
ancestor: 祖先节点选择器
descendant:后代节点的选择器
首先找出符合ancetor的所有元素，再在所有祖先节点的子节点返回符合descendant的子元素
$(".ff label"); 查找所有应用了ff样式的祖先节点的子节点为label的节点
二、 parent>child
parent:父级元素选择器
child:子节点选择器
一和二之间的区别:ancestor descendant 是查找所有后代元素的， 而parent>child 是查找所有子代元素，不查找孙子节点
三、 prev+next
prev:前一节点选择器
next:紧跟其后的选择器，返回的是next的元素
$("label + input") 首先找到所有label元素，返回所有紧跟label后的所有同辈input
四、 prev~next
prev:前一节点选择器
next:所有满足条件的尾随节点元素
简单的
一、:animated
匹配所有正在执行动画效果的元素
$("div:animated") 查找正在执行动画的div
$("div:not(animated)") 查找不在执行动画的div
$("#run").click(function(){
$("div:not(:animated)").animate({ left: "+=20" }, 1000);
});
解读：找到id为run的jquery对象，并注册点击事件，查找那些不在执行动画的div,执行一个向右偏移20的动画，时长一秒钟
二、:eq(index)
index:序号从0开始
$("li:eq(0)") 等价于 $("li:first")
当 index超出数组范围，这样就会返回一个undefind
三、:even
偶数的意思 ，从0开始
$("li:even") 返回0,2,4,6节点
$("input:even") 查找所有input 的偶数
<input type="text" />
<input type="button" value="特性" />
<input type="button" value="2" />
<input type="button" value="3" />
① $("input:button:even")
结果:[<input type="button" value="特性" />,<input type="button" value="3" />]
②$("input:even:button")
结果:[<input type="button" value="2" />]
总结：因此选择器的执行顺序是从左往右的一般顺序
四、:first
返回第一元素
等价于$("li:eq(0)")
五、:gt(index)
匹配大于index（不包括index）的元素,index从0开始
$("tr:gt(1)") 从第三个元素开始
六、:header
匹配 h1,h2,h3...类似元素
$(":header").css("backgroundColor","black");
$(":header").css("color","white");
注：所有javascript都一样在CSS中background-color 在js中 backgroundColor
七、:last
于:first相反
$("li:last") 最后一个元素
八：:lt(index)
九、:not(selector)
去除所有与给定的选择器符合的元素
$(:not(#ff)) 去除所有id为ff的元素
十、:odd
与even相反，取所有奇数的元素
$(li:odd)
内容
一、 :contains(string)
匹配包含给定文本的元素
$(div:contains('第')) 匹配：<div>第一个</div> <div>第二个</div>
二、:empty
匹配所有不包含子元素和文本元素的空元素
$(div:empty) 只匹配<div></div>
三、:has(selector)
具有所有子元素为符合selector的子元素
$(div:has('p')) 匹配子元素中具有p元素的节点
四、:parent
匹配所有具有子元素和文本的元素
$(div:parent) 匹配所有非空的div元素
可见性
一、:hidden
符合不显示的
