jQuery中的基本选择器用法学习教程

一.简单选择器
在使用jQuery 选择器时,必须使用“$()”函数来包装CSS 规则。而CSS 规则作为参数传递到jQuery 对象内部后,再返回包含页面中对应元素的jQuery 对象。随后,就可以对这个获取到的DOM 节点进行行为操作了。

#box {//使用ID 选择器的CSS 规则 

 color:red;//将ID 为box 的元素字体颜色变红 

}

在jQuery 选择器里,我们使用如下的方式获取同样的结果:

$('#box').css('color', 'red');//获取DOM 节点对象,并添加行为

那么除了ID 选择器之外,还有两种基本的选择器,分别为:元素标签名和类(class):

选择器 CSS 模式 jQuery 模式 描述
元素名 div {}  $('div')  获取所有div 元素的DOM 对象
ID #box {} $('#box')   获取一个ID 为box 元素的DOM 对象
类(class) .box{}  $('.box')   获取所有class 为box 的所有DOM 对象
$('#box').css('color', 'red');//获取DOM 节点对象,并添加行为 

$('div').css('color', 'red');//元素选择器,返回多个元素 

$('#box').css('color', 'red'); //ID 选择器,返回单个元素 

$('.box').css('color', 'red'); //类(class)选择器,返回多个元素

为了证明ID 返回的是单个元素,而元素标签名和类(class)返回的是多个,可以采用jQuery 核心自带的一个属性length 或size()方法来查看返回的元素个数。

alert($('div').size());//3 个 

alert($('#box').size()); //1 个,后面两个失明了 

alert($('.box').size());//3 个

同理,也可以直接使用jQuery 核心属性来操作:

alert($('#box').length);//1 个,后面失明了

警告:有个问题特别要注意,ID 在页面只允许出现一次,一般都是要求开发者要遵守和保持这个规则。但如果你在页面中出现三次,并且在CSS 使用样式,那么这三个元素还会执行效果。但如果,你想在jQuery 这么去做,那么就会遇到失明的问题。所以,开发者必须养成良好的遵守习惯,在一个页面仅使用一个ID。

$('#box').css('color', 'red');//只有第一个ID 变红,后面两个失明

jQuery 选择器的写法与CSS 选择器十分类似,只不过功能不同。CSS 找到元素后添加的是单一的样式,而jQuery 则添加的是动作行为。最重要的一点是:CSS 在添加样式的时候,高级选择器会对部分浏览器不兼容,而jQuery 选择器在添加CSS 样式的时候却不必为此烦恼。

#box > p { //CSS 子选择器,IE6 不支持 

 color:red; 

} 

$('#box > p').css('color','red'); //jQuery 子选择器,兼容了IE6

jQuery 选择器支持CSS1、CSS2 的全部规则,支持CSS3 部分实用的规则,同时它还有少量独有的规则。所以,对于已经掌握CSS 的开发人员,学习jQuery 选择器几乎是零成本。而jQuery 选择器在获取节点对象的时候不但简单,还内置了容错功能,这样避免像JavaScript那样每次对节点的获取需要进行有效判断。

$('#pox').css('color', 'red');//不存在ID 为pox 的元素,也不报错 

document.getElementById('pox').style.color = 'red';//报错了

因为jQuery 内部进行了判断,而原生的DOM 节点获取方法并没有进行判断,所以导致了一个错误,原生方法可以这么判断解决这个问题:

if (document.getElementById('pox')) {//先判断是否存在这个对象 

 document.getElementById('pox').style.color = 'red'; 

}

那么对于缺失不存在的元素,使用jQuery 调用的话,怎么去判断是否存在呢?因为本身返回的是jQuery 对象,可能会导致不存在元素存在与否,都会返回true。

if ($('#pox').length > 0) {//判断元素包含数量即可 

 $('#pox').css('color', 'red'); 

}

除了这种方式之外,还可以用转换为DOM 对象的方式来判断,例如:

if ($('#pox').get(0)) {} 或if ($('#pox')[0]) {} //通过数组下标也可以获取DOM 对象

二.进阶选择器
在简单选择器中,了解了最基本的三种选择器:元素标签名、ID 和类(class)。那么在基础选择器外,还有一些进阶和高级的选择器方便我们更精准的选择元素。

选择器 CSS 模式 jQuery 模式 描述
群组选择器 span,em,.box {}  $('span,em,.box')  获取多个选择器的DOM 对象
后代选择器 ul li a {} $('ul li a') 获取追溯到的多个DOM 对象
通配选择器 * {}  $('*')  获取所有元素标签的DOM 对象
//群组选择器
span, em, .box {//多种选择器添加红色字体 

 color:red; 

} 

$('span, em, .box').css('color', 'red');//群组选择器jQuery 方式 

//后代选择器
ul li a { //层层追溯到的元素添加红色字体 

 color:red; 

} 

$('ul li a').css('color', 'red');//群组选择器jQuery 方式 

//通配选择器
* { //页面所有元素都添加红色字体 

color:red; 

} 

$('*').css('color', 'red'); //通配选择器 

目前介绍的六种选择器,在实际应用中,可以灵活的搭配,使得选择器更加的精准和快速:

$('#box p, ul li *').css('color', 'red');//组合了多种选择器

警告:在实际使用上,通配选择器一般用的并不多,尤其是在大通配上,比如:$('*'),这种使用方法效率很低,影响性能,建议竟可能少用。还有一种选择器,可以在ID 和类(class)中指明元素前缀,比如:

$('div.box');//限定必须是.box 元素获取必须是div 

$('p#box div.side');//同上

类(class)有一个特殊的模式,就是同一个DOM 节点可以声明多个类(class)。那么对于这种格式,我们有多class 选择器可以使用,但要注意和class 群组选择器的区别。

.box.pox {//双class 选择器,IE6 出现异常 

 color:red; 

} 

$('.box.pox').css('color', 'red');//兼容IE6,解决了异常

多class 选择器是必须一个DOM 节点同时有多个class,用这多个class 进行精确限定。而群组class 选择器,只不过是多个class 进行选择而已。

$('.box, .pox').css('color', 'red');//加了逗号,体会区别

警告:在构造选择器时,有一个通用的优化原则:只追求必要的确定性。当选择器筛选越复杂,jQuery 内部的选择器引擎处理字符串的时间就越长。比如:

$('div#box ul li a#link');//让jQuery 内部处理了不必要的字符串 

$('#link'); //ID 是唯一性的,准确度不变,性能提升

三.高级选择器
在前面六种最常规的选择器,一般来说通过这六种选择器基本上可以解决所有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');//和子选择器等价 

//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()这四个方法中,如果不传递参数,就相当于传递了“*”,即任何节点,不建议这么做,不但影响性能,而且由于精准度不佳可能在复杂的HTML 结构时产生怪异的结果。

$('#box').next();//相当于$('#box').next('*');

为了补充高级选择器的这三种模式,jQuery 还提供了更加丰富的方法来选择元素:

$('#box').prev('p').css('color', 'red');//同级上一个元素 

$('#box').prevAll('p').css('color', 'red');//同级所有上面的元素

nextUntil()和prevUnitl()方法是选定同级的下面或上面的所有节点,选定非指定的所有元素,一旦遇到指定的元素就停止选定。

$('#box').prevUntil('p').css('color', 'red');//同级上非指定元素选定,遇到则停止 

$('#box').nextUntil('p').css('color', 'red');//同级下非指定元素选定,遇到则停止

siblings()方法正好集成了prevAll()和nextAll()两个功能的效果,及上下相邻的所有元素进行选定:

$('#box').siblings('p').css('color', 'red');//同级上下所有元素选定 

//等价于下面: 

$('#box').prevAll('p').css('color', 'red');//同级上所有元素选定 

$('#box').nextAll('p').css('color', 'red'); //同级下所有元素选定

警告:切不可写成“$('#box').prevAll('p').nextAll('p').css('color', 'red');”这种形式,因为prevAll('p')返回的是已经上方所有指定元素,然后再nextAll('p')选定下方所有指定元素,这样必然出现错误。理论上来讲,jQuery 提供的方法find()、next()、nextAll()和children()运行速度要快于使用高级选择器。因为他们实现的算法有所不同,高级选择器是通过解析字符串来获取节点对象,而jQuery 提供的方法一般都是单个选择器,是可以直接获取的。但这种快慢的差异,对于客户端脚本来说没有太大的实用性,并且速度的差异还要取决了浏览器和选择的元素内容。比如,在IE6/7 不支持querySelectorAll()方法,则会使用“Sizzle”引擎,速度就会慢,而其他浏览器则会很快。有兴趣的可以了解这个方法和这个引擎。选择器快慢分析:

//这条最快,会使用原生的getElementById、ByName、ByTagName 和querySelectorAll()

$('#box').find('p'); 

//jQuery 会自动把这条语句转成$('#box').find('p'),这会导致一定的性能损失。它比最快的形式慢了5%-10%

$('p', '#box'); 

//这条语句在jQuery 内部,会使用$.sibling()和javascript 的nextSibling()方法,一个个遍历节点。它比最快的形式大约慢50%

$('#box').children('p'); 

//jQuery 内部使用Sizzle 引擎,处理各种选择器。Sizzle 引擎的选择顺序是从右到左,所以这条语句是先选p,然后再一个个过滤出父元素#box,这导致它比最快的形式大约慢70%

$('#box > p'); 

//这条语句与上一条是同样的情况。但是,上一条只选择直接的子元素,这一条可以于选择多级子元素,所以它的速度更慢,大概比最快的形式慢了77%。

$('#box p'); 

//jQuery 内部会将这条语句转成$('#box').find('p'),比最快的形式慢了23%。

$('p', $('#parent'));

综上所属,最快的是find()方法,最慢的是$('#box p')这种高级选择器。如果一开始将$('#box')进行赋值,那么jQuery 就对其变量进行缓存,那么速度会进一步提高。

var box = $('#box'); 

var p = box.find('p');

注意:使用哪种方案呢?其实,使用哪种都差不多。这里,推荐使用jQuery 提供的方法。因为不但方法的速度比高级选择器运行的更快,并且它的灵活性和扩展性要高于高级选择器。使用“+”或“~”从字面上没有next 和nextAll 更加语义化,更加清晰,jQuery 的方法更加丰富,提供了相对的prev 和prevAll。毕竟jQuery 是编程语言,需要
能够灵活的拆分和组合选择器,而使用CSS 模式过于死板。所以,如果jQuery 提供了独立的方法来代替某些选择器的功能,推荐优先使用独立的方法。

属性选择器
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[title|=num]')
获取具有这个属性且等于属性值或开头属

性值匹配后面跟一个“-”号的DOM 对象

a[title$=num]  $('a[title$=num]')
获取具有这个属性且结尾属性值匹配的

DOM 对象

a[title!=num]  $('a[title!=num]')
获取具有这个属性且不等于属性值的

DOM 对象

a[title~=num]  $('a[title~=num]')
获取具有这个属性且属性值是以一个空格

分割的列表,其中包含属性值的DOM 对

a[title*=num]  $('a[title*=num]')
获取具有这个属性且属性值含有一个指定

字串的DOM 对象

a[bbb][title=num1]  $('a[bbb][title=num1]')
获取具有这个属性且属性值匹配的DOM

对象

属性选择器也不支持IE6,所以在CSS 界如果要兼容低版本,那么也是非主流。但jQuery却不必考虑这个问题。

//选定这个属性的
a[title] { //IE6 不支持 

 color:red; 

} 

$('a[title]').css('color', 'red');//兼容IE6 了 

//选定具有这个属性=这个属性值的

a[title=num1] {//IE6 不支持 

 color:red; 

} 

$('a[title=num1]').css('color', 'red');//兼容IE6 了 

//选定具有这个属性且开头属性值匹配的

a[title^=num] { //IE6 不支持 

 color:red; 

} 

$('a[title=^num]').css('color', 'red'); //兼容IE6 了 

//选定具有这个属性且等于属性值或开头属性值匹配后面跟一个“-”号

a[title|=num] {//IE6 不支持 

 color:red; 

} 

$('a[title|="num"]').css('color', 'red');//兼容IE6 了 

//选定具有这个属性且结尾属性值匹配的

a[title$=num] {//IE6 不支持 

 color:red; 

} 

$('a[title$=num]').css('color','red'); //兼容IE6 了 

//选定具有这个属性且属性值不想等的

a[title!=num1] {//不支持此CSS 选择器 

 color:red; 

} 

$('a[title!=num1]').css('color','red');//jQuery 支持这种写法 

//选定具有这个属性且属性值是以一个空格分割的列表,其中包含属性值的

a[title~=num] {//IE6 不支持 

 color:red; 

} 

$('a[title~=num1]').css('color','red'); //兼容IE6 

//选定具有这个属性且属性值含有一个指定字串的

a[title*=num] {//IE6 不支持 

 color:red; 

} 

$('a[title*=num]').css('color','red');//兼容IE6 

//选定具有多个属性且属性值匹配成功的

a[bbb][title=num1] {//IE6 不支持 

 color:red; 

} 

$('a[bbb][title=num1]').css('color','red');//兼容IE6
(0)

相关推荐

  • jquery之基本选择器practice(实例讲解)

    一.在输入框中输入数字,点击按钮,实现对应事件的功能. html代码: <input id="txt1" type="text" value="2" /> <input id="Button5" type="button" value="改变大于N的行背景为绿色" /> jQuery代码: //改变大于N的行背景为绿色 $("#Button5"

  • Jquery中基本选择器用法实例详解

    本文实例讲述了Jquery中基本选择器用法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

  • jquery选择器大全 全面详解jquery选择器

    选择器并没有一个固定的定义,在某种程度上说,jQuery的选择器和样式表中的选择器十分相似.选择器具有如下特点:1.简化代码的编写2.隐式迭代3.无须判断对象是否存在其中"$"是选择器不可缺少的部分,在jQuery库中,$就是jQuery的一个简写形式,比如$("#foo")和jQuery("#foo")是等价的,$.ajax和jQuery.ajax是等价的.如果没有特别说明,可以把程序中的$符号都理解为jQuery的简写形式.现在我们正式进入j

  • jQuery四种选择器使用及示例

     jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") 选取所有 class="intro" 的 <p> 元素. $("p#demo") 选取所有 id="demo" 的 <p> 元素. 示例代码: jquery 部分 $(document).ready(function(){/

  • jQuery中的基本选择器用法学习教程

    一.简单选择器 在使用jQuery 选择器时,必须使用"$()"函数来包装CSS 规则.而CSS 规则作为参数传递到jQuery 对象内部后,再返回包含页面中对应元素的jQuery 对象.随后,就可以对这个获取到的DOM 节点进行行为操作了. #box {//使用ID 选择器的CSS 规则 color:red;//将ID 为box 的元素字体颜色变红 } 在jQuery 选择器里,我们使用如下的方式获取同样的结果: $('#box').css('color', 'red');//获取D

  • jQuery中复合属性选择器用法实例

    本文实例讲述了jQuery中复合属性选择器用法.分享给大家供大家参考.具体分析如下: 此选择器能够匹配同时满足多个属性条件的元素. 语法结构: 复制代码 代码如下: [selector1][selector2][selectorN] 参数列表: 参数 描述 selector1 属性选择器. selector2 另一个属性选择器,用以进一步缩小范围. selectorN 任意多个属性选择器,也是用来缩小范围. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html&g

  • JQuery中基础过滤选择器用法实例分析

    本文实例讲述了JQuery中基础过滤选择器用法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

  • jQuery中[attribute^=value]选择器用法实例

    本文实例讲述了jQuery中[attribute^=value]选择器用法.分享给大家供大家参考.具体分析如下: 此选择器能够选取属性值是以某些值开始的元素. 语法结构: 复制代码 代码如下: $("[attribute^=value]") 参数列表: 参数 描述 attribute 属性名称. value 元素数属性开始的值. 引号在大多数情况下是可选的.但在遇到诸如属性值包含"]"时,用以避免冲突. 实例代码: 实例一: 复制代码 代码如下: <!DOCT

  • JQuery中属性过滤选择器用法实例分析

    本文实例讲述了JQuery中属性过滤选择器用法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

  • jQuery中的类名选择器(.class)用法简单示例

    本文实例讲述了jQuery中的类名选择器(.class)用法.分享给大家供大家参考,具体如下: 一.介绍 类名选择器是通过元素拥有的CSS类的名称查找匹配的DOM元素. 在一个页面中,一个元素可以有多个CSS类,一个CSS类又可以匹配多个元素,如果有元素中有一个匹配的类的名称就可以被类名选择器选取到. 类名选择器很好理解,在大学的时候大部分人一定都选过课,可以把CSS类名理解为课程名称,元素理解成学生,学生可以选择多门课程,而一门课程又可以被多名学生所选择. CSS类与元素的关系既可以是多对多的

  • jQuery选择器之层次选择器用法实例分析

    本文实例讲述了jQuery选择器之层次选择器用法.分享给大家供大家参考,具体如下: 前面一篇介绍了几种基本的jQuery选择器,今天归纳一下jQuery的层次选择器.DOM元素之间的层次关系主要包括元素的子元素.后代元素.相邻元素和兄弟元素等,我们可以通过DOM元素之间的层次关系来获取想要的元素.为了更好的学习,我们先列出一段HTML代码: <body> <div id="one" class="aaa"> id=one,class=aaa的

  • jQuery选择器之基本选择器用法实例分析

    本文实例讲述了jQuery选择器之基本选择器用法.分享给大家供大家参考,具体如下: 初学jQuery,为了能系统地学习好jQuery,今天特意把自己的学习心得归纳一下,贴上来与初学者共享,今天我主要总结的是jquery的基本选择器. 基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它主要是通过元素的id.class.标签等来查找HTML中的DOM元素.在网页中每个id只能使用一次,class允许重复使用.在jQuery应用中,可以使用这些基本选择器来完成绝大多数工作,下面我们主要来

  • jQuery中过滤器的基本用法示例

    本文实例讲述了jQuery中过滤器的基本用法.分享给大家供大家参考,具体如下: HTML正文: <input type="button" id="b1" value="偶数行红色"><br> <input type="button" id="b2" value="奇数行绿色"><br> <table border=1 width=&q

  • jQuery中extend函数简单用法示例

    本文实例讲述了jQuery中extend函数简单用法.分享给大家供大家参考,具体如下: var result=$.extend({},item,item1); extend给对象添加新的属性:js插件经常使用来配置参数 {}:item和item1合并后的结果 item:默认属性 item1:新增属性,如果item1和item属性重合则会覆盖item1中的属性 <span id="Test"></span> var item={"name":&

随机推荐