jQuery选择器

最新推荐文章于 2024-07-14 10:34:53 发布

yananye

最新推荐文章于 2024-07-14 10:34:53 发布

阅读量159

点赞数

文章标签： html javascript css

本文链接：https://blog.csdn.net/yananye/article/details/113917501

版权

什么是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.选择器中含有空格的注意事项

选择器中的空格也是不容忽视的，多一个或少一个空格，可能会得到截然不同的结果。

yananye

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery选择器

什么是jQuery选择器jQuery选择器获取元素后，为该元素添加的是行为，使页面交互变得更加丰富多彩。此外，jQuery选择器拥有着良好的浏览器兼容性，不用像使用css选择器那样需要考虑各个浏览器的对它的支持情况。jQuery选择器的优势1.简介的写法2.完善的处理机制jQuery选择器的类型通过css选择器选取元素基本选择器层次选择器属性选择器通过过滤选择器选择元素基本过滤选择器可见性过滤选择器通过css选择器选取元素jQuery支持大多数css选择器，其中最常用的
复制链接

扫一扫