什么是jQuery选择器
jQuery选择器获取元素后,为该元素添加的是行为,使页面交互变得更加丰富多彩。
此外,jQuery选择器拥有着良好的浏览器兼容性,不用像使用css选择器那样需要考虑各个浏览器的对它的支持情况。
jQuery选择器的优势
1.简介的写法
2.完善的处理机制
jQuery选择器的类型
通过css选择器选取元素
- 基本选择器
- 层次选择器
- 属性选择器
通过过滤选择器选择元素
- 基本过滤选择器
- 可见性过滤选择器
通过css选择器选取元素
jQuery支持大多数css选择器,其中最常用的有css中的基本选择器,层次选择器,属性选择器,在jQuery中它们对应的分别是jQuery基本选择器,层次选择器和属性选择器,它们的构成规则和css选择器完全相同。
1.基本选择器
基本选择器主要包括标签选择器,类选择器,id选择器,并集选择器和全局选择器,也是jQuery中使用频率最高的选择器。如下表所示:
2.层次选择器
若要通过DOM元素之间的层次关系来获取元素,如后代元素,子元素,相邻元素和同辈元素,则使用jQuery中的层次选择器是最佳选择。
jQuery中的层次选择器和css中的层次选择器相同,它们都是根据获取元素与其父元素,子元素,兄弟元素关系而构成的选择器,jQuery中有四种层次选择器,分别是,后代选择器,子选择器,相邻元素选择器,同辈元素选择器。其中最常用的是后代选择器和子选择器。
子选择器的选取范围比后代选择器的选取范围小。此外,在层次选择器中,后代选择器金额子选择器较为常用,而相邻元素选择器和同辈元素选择器在jQuery里可以用更加简单的方法代替,所以使用的概率较小。
3.属性选择器
属性选择器就是通过HTML元素的属性来选择元素的选择器,他与css中的属性选择器语法构成完成一致,如p中的title属性,a元素中的href属性。
属性选择器是jQuery选择器中非常有用的选择器,从语法构成来看他遵循css选择器,从类型来看他属性jQuery中按条件过滤获取元素的选择器之一。
实际上,在工作中属性选择器同样适用于表单中,如获取表单中的单选按钮,复选框的选中状态,按钮等。
通过条件过滤选取元素
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与css中的伪类语法相同,即选择器都以一个冒号(:)开头,冒号前是需要过滤的元素。例如:a:hover表示当鼠标指针移过a元素时,tr:visited表示当鼠标指针访问过tr元素后等。
按照不同的过滤条件,过滤选择器可以分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器。其中,最常用的过滤选择器是基本过滤选择器,可见性过滤选择器,属性选择器,和表单对象属性过滤器。
1.基本过滤选择器
基本过滤选择器是过滤选择器中使用最广泛的一种。
示例:
<body>
<div class="contain">
<h2>祝福冬奥</h2>
<ul>
<li> 贝克汉姆:衷心希望北京能够申办成功!</li>
<li> 姚明:北京申冬奥是个非常棒的机会!加油!</li>
<li> 张虹:北京办冬奥,大家的热情定超乎想象! </li>
<li> 肖恩怀特:我爱北京,支持北京申办冬奥会!</li>
<li> 赵宏博:北京申办冬奥会是再合适不过了!</li>
<li> 你喜欢哪些冬季运动项目?(点击进入调查页)</li>
</ul>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
// $(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});//设置.contain下所有的标题元素
// $(".contain li:first").css({"font-size":"16px","color":"#e90202"});//设置第一个li标签元素的样式
// $(".contain li:last").css("border","none"); //设置最后一个li标签元素的样式
// $(".contain li:even").css("background","#f0f0f0");//设置偶数行背景颜色下标从0开始
// $(".contain li:odd").css("background","#cccccc");//设置奇数行背景颜色下标从0开始
//用过滤选择器给h2设置背景颜色和字体颜色
$(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});
//最后一个li没有边框
$(".contain li:last").css("border","none");
//设置前两个li的字体颜色(从0开始,小于2)
$(".contain li:lt(2)").css("color","#708b02");
//设置后两个li的字体颜色(从0开始,大于3)
$(".contain li:gt(3)").css("color","#b66302");
});
</script>
</body>
2.可见性过滤选择器
jQuery选择器除了可以通过css选择器,位置选取元素外,还能够通过元素的显示状态,即元素显示或者隐藏来选择元素,在jQuery中,通过元素显示状态选取元素的选择器称为可见性过滤选择器。
注意:在可见性过滤选择器中需要注意,选择器:hidden获取的元素不仅包括样式属性display为“none”的元素,还包括文本隐藏域(input type=“hidden”)和visibility:hidden之类的元素。
jQuery选择器的注意事项
1.选择器中含有特殊符号的注意事项
在W3C规范中,规定属性值中不能含有某些特殊字符,但在实际开发中,可能会遇到表达式中含有“#”和“.”等特殊字符的情况,如果按照普通的方式去处理就会出错。解决此类错误的方法是使用转义符转义。
HTML代码如下:
<div id="id#a">aa</div>
<div id="id[2]">cc</div>
按照普通方式获取 例如:
$("#id#a");
$("id[2]");
以上代码不能正确获取到元素,正确写法如下:
$("#id\\#a");
$("id\\[2\\]");
2.选择器中含有空格的注意事项
选择器中的空格也是不容忽视的,多一个或少一个空格,可能会得到截然不同的结果。