玩法介绍当前位置:风暴娱乐 > 玩法介绍 > >

风暴娱乐注册:jQuery中的基本选择器用法学习教程(3)

  
  
  $('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  

(责任编辑:admin)

上一篇:风暴娱乐给你最佳的游戏玩法体验!

下一篇:没有了

推荐内容

客户服务热线

010-400-12345

在线客服