jQuery学习之二 jQuery选择器
一、jQuery选择器是什么
1.CSS选择器
2.jQuery选择器
二、jQuery选择器的优势
1.简洁的写法
2.支持从CSS1到CSS3选择器
3.完善的处理机制
传统js选择器假如要操作的元素不存在会报错，jq不会，避免了判断存在操作的麻烦
当需要使用jq判断某个元素在网页上是否存在时不能用
if($('#id')){ xxx };
要使用if($('#id').length > 0){ xxx };
或先转化成DOM再判断if($('#id')[0]){ xxx };
三、jQuery选择器
1.基本选择器
#id
.class
element
*
selector1,selector2,...selectorN
2.层次选择器
$('.ancestorClass .sonClass'): 选中所有后代
$('.fatherClass > .sonClass'): 选中子元素
$('prev + next'): 选中代码顺序下一个兄弟
$('prev ~ silbings'): 选中代码顺序后所有兄弟
3.过滤选择器
（1）基本过滤选择器
:first $("div:first")
:last $("div:last")
:not(selector) $("input:not(.myClass)")
:even $("input:even")
:odd $("input:odd")
:eq(index) $("input:eq(1)")
:gt(index) $("input:gt(1)")
:lt(index) $("input:lt(1)")
:header 选取所有标题元素
:animated 选取当前正在执行动画的所有元素
:focus 选取当前获取焦点的元素
（2）内容过滤选择器
:contains(text) 选取文本内容为“text”的元素
:empty 选取不包含子元素或者文本的空元素
:has(selector) 选取含有选择器所匹配的元素的选择器
:parent 选择含有子元素或者文本的元素
（3）可见性过滤选择器
:hidden 选取所有不可见的元素
:visible 选取所有可见的元素
（4）属性过滤选择器
[attribute] 拥有属性
[attribute=value] 属性等于
[attribute!=value] 属性不等于
[attribute^=value] 属性以什么开头
[attribute$=value] 属性以什么结尾
[attribute*=value] 属性中包含什么值
[attribute|=value] 属性以什么为前缀并且后跟'-'做连接
[attribute~=value] 属性以空格分隔的值中含有某值
[attribute1][attribute2][attributeN] 并列过滤
（5）子元素过滤选择器
:nth-child(index/even/odd/equation) 选取每个父元素下的第index个元素或奇偶元素.(index从1算起)、
eg: nth-child(even) nth-child(odd) nth-child(3n) nth-child(3n+1)
:first-child 选取每个父元素的第1个子元素
:last-child 选取每个父元素的最后一个元素
:only-child 如果某个元素是它父元素的唯一子元素，则被选中
（6）表单对象属性过滤选择器
:enabled 选取所有可用元素
:disabled 选取所有不可用元素
:checked 选取所有被选中的元素(单选框，复选框)
:selected 选取所有被选中的选项元素(下拉列表)
判断是否聚焦、可视等可使用is(),eg:
$("xxx").is(":visible")
$("input").is(":enabled")
4.表单选择器
:input 选取所有<input>、<textarea>、<select>、<button> PS.注意$(":input")和$("input")的区别
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
四、应用jQuery改写示例
五、选择器中的一些注意事项
1.选择器中最好不要含有"."、"#"、"("或"]"等特殊字符
如果含有这些特殊字符则需要加转义符转义
eg: <div id="id#b"></div> → 获取：$("#id#b")× $("#id\\#b")√
2.属性选择器的@符号问题
旧版本使用了@，在新版本中已被淘汰
3.选择器中含有空格的注意事项
eg: $(".test :hidden") 指的是带class="test"元素内的被hidden元素
$(".test:hidden") 指的是带class="test"且被隐藏的元素
六、案例研究
filter(expr):筛选出与指定表达式匹配的元素集合，其中expr可以是多个选择器的组合
七、其他选择器
