jQuery-$选择器 学习笔记三

来源:互联网 发布:帝国cms dedecms 编辑:程序博客网 时间:2024/05/29 15:08

选择器是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>元素