一.简单选择器
在使用jQuery 选择器时,必须使用“$()”函数来包装CSS 规则。而CSS 规则作为参数传递到jQuery 对象内部后,再返回包含页面中对应元素的jQuery 对象。随后,就可以对这个获取到的DOM 节点进行行为操作了。在jQuery 选择器里,我们使用如下的方式获取同样的结果:
那么除了ID 选择器之外,还有两种基本的选择器,分别为:元素标签名和类(class):
$('div').css('color','red');//元素选择器,返回多个元素
$('#Box').css('color','red'); //ID 选择器,返回单个元素
$('.Box').css('color','red'); //类(class)选择器,返回多个元素
为了证明ID 返回的是单个元素,而元素标签名和类(class)返回的是多个,可以采用jQuery 核心自带的一个属性length 或size()方法来查看返回的元素个数。
alert($('#Box').size()); //1 个,后面两个失明了
alert($('.Box').size());//3 个
同理,也可以直接使用jQuery 核心属性来操作:
警告:有个问题特别要注意,ID 在页面只允许出现一次,一般都是要求开发者要遵守和保持这个规则。但如果你在页面中出现三次,并且在CSS 使用样式,那么这三个元素还会执行效果。但如果,你想在jQuery 这么去做,那么就会遇到失明的问题。所以,开发者必须养成良好的遵守习惯,在一个页面仅使用一个ID。
jQuery 选择器的写法与CSS 选择器十分类似,只不过功能不同。CSS 找到元素后添加的是单一的样式,而jQuery 则添加的是动作行为。最重要的一点是:CSS 在添加样式的时候,高级选择器会对部分浏览器不兼容,而jQuery 选择器在添加CSS 样式的时候却不必为此烦恼。
jQuery 选择器支持CSS1、CSS2 的全部规则,支持CSS3 部分实用的规则,同时它还有少量独有的规则。所以,对于已经掌握CSS 的开发人员,学习jQuery 选择器几乎是零成本。而jQuery 选择器在获取节点对象的时候不但简单,还内置了容错功能,这样避免像JavaScript那样每次对节点的获取需要进行有效判断。
document.getElementById('pox').style.color = 'red';//报错了
因为jQuery 内部进行了判断,而原生的DOM 节点获取方法并没有进行判断,所以导致了一个错误,原生方法可以这么判断解决这个问题:
document.getElementById('pox').style.color = 'red';
}
那么对于缺失不存在的元素,使用jQuery 调用的话,怎么去判断是否存在呢?因为本身返回的是jQuery 对象,可能会导致不存在元素存在与否,都会返回true。
除了这种方式之外,还可以用转换为DOM 对象的方式来判断,例如:
二.进阶选择器
在简单选择器中,了解了最基本的三种选择器:元素标签名、ID 和类(class)。那么在基础选择器外,还有一些进阶和高级的选择器方便我们更精准的选择元素。color:red;
}
$('span,.Box').css('color','red');//群组选择器jQuery 方式
//后代选择器
ul li a { //层层追溯到的元素添加红色字体
color:red;
}
$('ul li a').css('color','red');//群组选择器jQuery 方式
//通配选择器
color:red;
}
$('*').css('color','red'); //通配选择器
目前介绍的六种选择器,在实际应用中,可以灵活的搭配,使得选择器更加的精准和快速:
警告:在实际使用上,通配选择器一般用的并不多,尤其是在大通配上,比如:$('*'),这种使用方法效率很低,影响性能,建议竟可能少用。还有一种选择器,可以在ID 和类(class)中指明元素前缀,比如:
类(class)有一个特殊的模式,就是同一个DOM 节点可以声明多个类(class)。那么对于这种格式,我们有多class 选择器可以使用,但要注意和class 群组选择器的区别。
多class 选择器是必须一个DOM 节点同时有多个class,用这多个class 进行精确限定。而群组class 选择器,只不过是多个class 进行选择而已。
警告:在构造选择器时,有一个通用的优化原则:只追求必要的确定性。当选择器筛选越复杂,jQuery 内部的选择器引擎处理字符串的时间就越长。比如:
三.高级选择器
在前面六种最常规的选择器,一般来说通过这六种选择器基本上可以解决所有DOM 节点对象选择的问题。但在很多特殊的元素上,比如父子关系的元素,兄弟关系的元素,特殊属性的元素等等。在早期CSS 的使用上,由于IE6 等低版本浏览器不支持,所以这些高级选择器的使用也不具备普遍性,但随着jQuery 兼容,这些选择器的使用频率也越 来越高。<div class="jb51code">
<pre class="brush:js;">
//后代选择器
$('#Box p').css('color','red');//全兼容