15-Javaweb学习-jQuery-选择器
1.常规选择器
选择器
CSS****模式
jQuery****模式
描述
标签选择器
div{}
$(‘div’)
获取所有 div 元素的 DOM 对象
ID选择器
#box{}
$(‘#box’)
获取一个 ID 为 box 元素的 DOM 对象
类选择器(class)
.box{}
$(‘.box’)
获取所有 class 为 box 的所有 DOM 对象
$('div').css('color', 'red'); //元素选择器,返回多个元素
$('#box').css('color', 'red'); //ID 选择器,返回单个元素
$('.box').css('color', 'red'); //类(class)选择器,返回多个元素
为了证明 ID 返回的是单个元素,而元素标签名和类(class)返回的是多个,我们可以采用 jQuery 核心自带的一个属性 length 或 size()方法来查看返回的元素个数。
alert($('div').size());
alert($('#box').length);
判断元素对象是否存在
原生方法可以这么判断解决这个问题: if (document.getElementById(‘pox’)) { //先判断是否存在这个对象 document.getElementById(‘pox’).style.color = ‘red’; } 那么对于缺失不存在的元素,我们使用 jQuery 调用的话,怎么去判断是否存在呢?因为本身返回的是 jQuery 对象,可能会导致不存在元素存在与否,都会返回 true。 if ($(’#pox’).length > 0) { //判断元素包含数量即可 $(’#pox’).css(‘color’, ‘red’); }
2.进阶选择器
选择器
CSS****模式
jQuery****模式
描述
群组选择器
span,em,.box {}
$(‘span,em,.box’)
获取多个选择器的 DOM 对象
后代选择器
ul li a {}
$(‘ul li a’)
获取追溯到的多个 DOM 对象
通配选择器
* {}
$(’*’)
获取所有元素标签的 DOM 对象
$('span, em, .box').css('color', 'red'); //群组选择器 jQuery 方式
$('ul li a').css('color', 'red'); //群组选择器 jQuery 方式
$('*').css('color', 'red'); //通配选择器
3.高级选择器
选择器
CSS 模式
jQuery 模式
jQuery 等价方法
描述
后代选择器
ul li a {}
$(‘ul li a’)
find(‘p’)
获取追溯到的多个 DOM 对象
子选择器
div > p {}
$(‘div >p’)
children()
只获取子类节点的多个 DOM 对象
next 选择器
div + p {}
$(‘div + p’)
next()
只获取某节点后一个同级 DOM对象
nextAll 选择器
div ~ p {}
$(‘div ~ p’)
nextAll()
获取某节点后面所有同级 DOM对象
$(‘#box p’).css(‘color’, ‘red’); 等价于 $('#box').find('p').css('color', 'red');
$(‘#box > p’).css(‘color’, ‘red’); 等价于 $(‘#box’).children(‘p’).css(‘color’, ‘red’);
$(‘#box+p’).css(‘color’, ‘red’); 等价于 $('#box').next('p').css('color', 'red');
$(‘#box ~ p’).css(‘color’, ‘red’); 等价于 $('#box').nextAll('p').css('color', 'red');
4.高级选择器方法
1.选定同级元素的上一个(prev) 或 上面所有元素(prevAll)
$('#box').prev('p').css('color', 'red'); //同级上一个元素$('#box').prevAll('p').css('color', 'red'); //同级所有上面的元素
2. nextUntil()和 prevUnitl()方法是选定同级的下面或上面的所有节点,选定非指定的所有元素,一旦遇到指定的元素就停止选定。
$('#box').prevUntil('p').css('color', 'red'); //同级上非指定元素选定,遇到则停止$('#box').nextUntil('p').css('color', 'red'); //同级下非指定元素选定,遇到则停止
3. 选定同级元素的 上下所有元素
siblings()方法正好集成了 prevAll()和 nextAll()两个功能的效果,及上下相邻的所有元素进行选定:
$('#box').siblings('p').css('color', 'red'); //同级上下所有元素选定
//等价于下面:
$('#box').prevAll('p').css('color', 'red'); //同级上所有元素选定
$('#box').nextAll('p').css('color', 'red'); //同级下所有元素选定
注意:层次选择器对节点的层次都是有要求的,比如子选择器,只有子节点才可以被选择到,孙子节点和重孙子节点都无法选择到。next 和 nextAll 选择器,必须是同一个层次的后一个和后 N 个,不在同一个层次就无法选取到了。 注意:在 find()、next()、nextAll()和 children()这四个方法中,如果不传递参数,就相当于传递了“*” ,即任何节点,我们不建议这么做,不但影响性能,而且由于精准度不佳可能在复杂的HTML 结构时产生怪异的结果。
5.属性选择器
CSS 模式
jQuery 模式
描述
a[title]
$(‘a[title]’)
获取具有这个属性的 DOM 对象
a[title=num1]
$(‘a[title=num1]’)
获取具有这个属性=这个属性值的 DOM对 象
a[title^=num]
$(‘a[title^=num]’)
获取具有这个属性且开头属性值匹配的 DOM 对象
a[title$=num]
(
′
a
[
t
i
t
l
e
('a[title
( ′ a [ t i t l e =num]’)
获取具有这个属性且结尾属性值匹配的 DOM 对象
a[title*=num]
$(‘a[title*=num]’)
获取具有这个属性且属性值含有一个指定 字串的 DOM 对象
a[title!=num]
$(‘a[title!=num]’)
获取具有这个属性且不等于属性值的 DOM 对象
6.过滤选择器
过滤器名
jQuery 语法
jQuery****对应的方法
说明
返回
:first
$(‘li:first’)
first()
选取第一个元素
单个元素
:last
$(‘li:last’)
last()
选取最后一个元素
单个元素
:eq(index)
$(‘li:eq(2)’)
eq(2)
选择索引(0 开始)等于 index 的元素
单个元素
$('li').eq(2).css('background', '#ccc'); //元素 li 的第三个元素,负数从后开始
$('li').first().css('background', '#ccc'); //元素 li 的第一个元素
$('li').last().css('background', '#ccc'); //元素 li 的最后一个元素
注意::first、:last 和 first()、last()这两组过滤器和方法在出现相同元素的时候,first 会实现第一个父元素的第一个子元素,last会实现最后一个父元素的最后一个子元素。所以,如果需要明确是哪个父元素,需要指明: $(’#boxli:last’).css(‘background’, ‘#ccc’); //#box 元素的最后一个 li $(’#boxli).last().css(‘background’, ‘#ccc’); //同上