选择器是jQuery最重要的部分之一,在jQuery中对事件处理,DOM操作和Ajax操作都依赖于选择器,熟练使用选择器,不仅能简化代码,还可以达到事半功倍的效果。
在说jQuery之前我们也可以回忆一下CSS的选择器,我想这对我们还算是比较熟悉,分别有:标签选择器、ID选择器、类选择器、群组选择器、后代选择器、通配选择符....等等选择器,具体语法说明在这里就不说了。而我们要说了jQuery中的选择器完全继承了CSS的风格,不过jQuery选择器适应通用性更好,CSS中很多选择器IE不支持,但jQuery支持常用的浏览器。
$的选择器部分,凡是运用符号:$,其返回值都是一个object。
下面分类别的简单介绍一下jQuery选择器:
1、基本选择器:通过标签元素id、class、标签名等来查找DOM元素
$("#id名"),如$("#test")是选取了id为test的标签节点
$("标签名"),如$("p")是选取了所有的P标签节点
$(".class名"),如$(".test")是选取了所有class为test的标签节点
$("*"),如$("*")是选取所有的标签元素
$("标签名1,标签名2,..."),如$("div,span,p.myClass")是选取所有<div>,<span>和拥有class为myClass的<p>的一线标签元素。
2、层次选择器:通过DOM元素的层次关系来获取特定元素,包括后代元素、子元素、相依元素、兄弟元素等。
$("标签名 标签名"),如$("div span")选取<div>里所有的<span>元素
$("parent child"),如$("div>span")选取<div>元素下元素名是<span>的子元素
$('prev+next')等价$('prev').next('next'),如$('.one+div')等价$('.one').next('div')是选取class为one的下一个<div>标签元素
$('prev~siblings')等价$('prev').nextAll('div'),如('#two~div')等价$('#two').nextAll('div')是选取id为two的元素后面的所有<div>兄弟元素
3、过滤选择器:主要是通过一些过滤规则来筛选DOM元素,过滤规则与CSS中的伪类选择器语法相同,即选择器都以一个冒号(:)开头
$("标签元素:first"),如$("div:first")是选取所有<div>元素中第一个<div>元素