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

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

  

[jQuery,基本选择器,选择器]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  

(责任编辑:admin)

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

下一篇:没有了

推荐内容

客户服务热线

010-400-12345

在线客服