jQuery自学笔记(二):jQuery选择器
一、简单选择器
ID选择器:$('#box')
元素标签名:$('div')
类选择器:$('.box')
jQuery提供了length和size()两种方法查看返回的元素,可验证ID在页面只出现一次,ID多次出现则后面的会“失明”。CSS找到元素后添加的是单一的样式,jQuery找到元素后添加的是动作行为。jQuery子选择器兼容IE6,如:$('#box>p')
二、进阶选择器
群组选择器:获取多个DOM对象,如:$('span,em,.box')
后代选择器:获取追溯到多个DOM对象,如:$('ul li a')
通配选择器:获取所有元素标签的DOM对象,如:$('*')
以上选择器可以混合使用,选择更加精准快速,其中通配选择器很少使用,影响性能
三、高级选择器
子选择器:只获取子类节点的多个DOM对象,如:$('div p')
next选择器:只获取子节点后一个同级的DOM对象,如:$('div+p')
nextAll选择器:获取某节点后面所有同级的DOM对象,如:$('div~p')
jQuery为后代选择器提供了一个等价的find()方法,如:$('#box').find('p').css('color','red');
jQuery为子选择器提供了一个等价的children()方法,如:$('#box').children('p').css('color','red');
jQuery为next选择器提供了一个等价的next()方法,如:$('#box').next('p').css('color','red');
jQuery为nextAll选择器提供了一个等价的nextAll()方法,如:$('#box').nextAll('p').css('color','red');
补充高级选择器,jQuery还提供了更加丰富的方法来选择元素:
$('#box').prev('p').css('color','red'); //同级上一个元素
$('#box').prevAll('p').css('color','red'); //同级所有上面的元素
$('#box').prevUntil('p').css('color','red'); //同级上非指定元素选定,遇到则停止
$('#box').nextUntil('p').css('color','red'); //同级下非指定元素选定,遇到则停止
四、属性选择器
五、基本过滤选择器
通过特定的过滤规则来筛选所需的DOM元素,和CSS中伪类的语法类似,使用冒号(:)开头。
focus过滤器必须是网页初始状态已经被激活焦点的元素才能实现元素的获取,而不是鼠标点击或者TAB键敲击激活的
六、内容过滤选择器
内容过滤选择器主要是包含的子元素或者文本内容上
七、可见性过滤器
八、子元素选择器