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

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

  
  

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)中指明元素前缀,比如:   (责任编辑:admin)

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

下一篇:没有了

推荐内容

客户服务热线

010-400-12345

在线客服