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

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

  
  

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 就对其变量进行缓存,那么速度会进一步提高。

  

   (责任编辑:admin)

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

下一篇:没有了

推荐内容

客户服务热线

010-400-12345

在线客服