第1章 WEB前端开发工程师-jQuery框架 1-5：jQuery 高级选择器

                                                   jQuery 高级选择器

 

本节课所讲内容：

1. jQuery高级选择器

 

                                                                     主讲教师：Head老师

一. jQuery高级选择器

在前面我们学习六种最常规的选择器，一般来说通过这六种选择器基本上可以解决所有DOM 节点对象选择的问题。但在很多特殊的元素上，比如父子关系的元素，兄弟关系的元素，特殊属性的元素等等。在早期 CSS 的使用上，由于 IE6 等低版本浏览器不支持，所以这些高级选择器的使用也不具备普遍性，但随着 jQuery 兼容，这些选择器的使用频率也越来越高。

选择器	CSS模式	jQuery 模式	描述
后代选择器	ul li a {}	$('ul li a')	获取追溯到的多个 DOM 对象
子选择器	div > p {}	$('div p')	只获取子类节点的多个 DOM 对象
next 选择器	div + p {}	$('div + p')	只获取某节点后一个同级DOM对象
nextAll 选择器	div ~ p {}	$('div ~ p')	获取某节点后面所有同级DOM对象

在层次选择器中，除了后代选择器之外，其他三种高级选择器是不支持 IE6 的，而 jQuery

却是兼容 IE6 的。

//后代选择器

$('#box p').css('color', 'red'); //全兼容

jQuery 为后代选择器提供了一个等价 find()方法

$('#box').find('p').css('color', 'red'); //和后代选择器等价

//子选择器，孙子后失明

#box > p { //IE6 不支持

color:red;

}

$('#box > p').css('color', 'red'); //兼容 IE6

jQuery 为子选择器提供了一个等价 children()方法：

$('#box').children('p').css('color', 'red'); //和子选择器等价

选择器 CSS 模式 jQuery 模式 描述

后代选择器 ul li a {} $('ul li a') 获取追溯到的多个 DOM 对象

子选择器 div > p {} $('div p') 只获取子类节点的多个 DOM 对象

next 选择器 div + p {} $('div + p') 只获取某节点后一个同级DOM对象

nextAll 选择器 div ~ p {} $('div ~ p') 获取某节点后面所有同级DOM对象

//next 选择器(下一个同级节点)

#box + p { //IE6 不支持

color:red;

}

$('#box+p').css('color', 'red'); //兼容 IE6

jQuery 为 next 选择器提供了一个等价的方法 next()：

$('#box').next('p').css('color', 'red'); //和 next 选择器等价

//nextAll 选择器(后面所有同级节点)

#box ~ p { //IE6 不支持

color:red;

}

$('#box ~ p').css('color', 'red'); //兼容 IE6

jQuery 为 nextAll 选择器提供了一个等价的方法 nextAll()：

$('#box').nextAll('p').css('color', 'red'); //和 nextAll 选择器等价

层次选择器对节点的层次都是有要求的，比如子选择器，只有子节点才可以被选择到，

孙子节点和重孙子节点都无法选择到。next 和 nextAll 选择器，必须是同一个层次的后一个

和后 N 个，不在同一个层次就无法选取到了。

在 find()、next()、nextAll()和 children()这四个方法中，如果不传递参数，就相当于传递

了“*”，即任何节点，我们不建议这么做，不但影响性能，而且由于精准度不佳可能在复杂