jQuery--过滤选择器（简单过滤选择器、内容过滤选择器）详解

最新推荐文章于 2020-11-30 14:48:05 发布

吴声子夜歌

最新推荐文章于 2020-11-30 14:48:05 发布

阅读量1.4k

点赞数 6

分类专栏： jQuery 文章标签： jQuery 过滤选择器简单过滤选择器内容过滤选择器

本文链接：https://blog.csdn.net/cold___play/article/details/101834154

版权

jQuery 专栏收录该内容

30 篇文章 2 订阅

订阅专栏

过滤选择器

基本选择器和层次选择器可以满足大部分页面元素的选取需求。在jQuery中还提供了功能更加强大的过滤选择器，根据特定的过滤规则来筛选出所有需要的页面元素。过滤选择器又分为简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器和表单对象属性过滤选择器。

简单过滤选择器

简单过滤选择器是过滤选择器中用得最多的一种，过滤规则主要体现在元素的位置上或一些特定的元素上，书写时均以冒号(:)开头。

选择器	描述	返回
:first	选取第一个元素	单个jQuery对象
:last	选取最后一个元素	单个jQuery对象
:even	选取所有索引值为偶数的元素，索引从0开始	jQuery对象数组
:odd	选取所有索引值为奇数的元素、索引从0开始	jQuery对象数组
:header	选取所有标题元素，如h1、h2等	jQuery对象数组
:focus	获取当前获取焦点的元素（1.6+）	jQuery对象数组
:root	获取文档的根元素（1.9+）	单个JQuery对象
:animated	选取所有正在执行动画效果的元素	jQuery对象数组
:eq(index)	选取索引等于index的元素，索引从0开始	单个jQuery对象
:gt(index)	选取索引大于index的元素，索引从0开始	jQuery对象数组
:lt(index)	选取索引小于index的元素，索引从0开始	jQuery对象数组
:not(selector)	选取selector意外的元素	jQuery对象数组

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
	</head>
	<body>
		<div>
			<table>
				<tr><td>11</td><td>12</td><td>13</td></tr>
				<tr><td>21</td><td>22</td><td>23</td></tr>
				<tr><td>31</td><td>32</td><td>33</td></tr>
				<tr><td>41</td><td>42</td><td>43</td></tr>
				<tr><td>51</td><td>52</td><td>53</td></tr>
				<tr><td>61</td><td>63</td><td>63</td></tr>
				<tr><td>71</td><td>72</td><td>73</td></tr>
				<tr><td colspan="3">6</td></tr>
			</table>
			<script type="text/javascript">
				$(function(){
					//第一行
					$("table tr:first").css("background-color","gray");
					//最后一行
					$("table tr:last").css("text-align","right");
					//第三行
					$("table tr:eq(2)").css("color","red");
					//所有偶数行
					$("table tr:odd").css("background-color","#dddddd");
					//根元素
					$(":root").css("background-color","#EFEFEF");
					//除了第一行
					$("table tr:not(:first)").css("font-size", "20pt");
				});
			</script>
		</div>
	</body>
</html>

在这里插入图片描述

内容过滤选择器

内容过滤选择器是指根据元素的文字内容或所包含的子元素的特征进行过滤的选择器。

选择器	描述	返回
:contains(text)	选取包含text内容的元素	jQuery对象数组
:has(selector)	选取含有selector所匹配的元素	jQuery对象数组
:empty	选取所有不包含文本或者子元素的空元素	jQuery对象数组
:parent	选取含有字元素或文本的元素	jQuery对象数组

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
	</head>
	<body>
		<div>
			<table>
				<tr><td>11</td><td>12</td><td>13</td></tr>
				<tr><td>21</td><td>22</td><td>23</td></tr>
				<tr><td>31</td><td>32</td><td>33</td></tr>
				<tr><td>41</td><td>42</td><td>43</td></tr>
				<tr><td><span>51</span></td><td>52</td><td></td></tr>
				<tr><td>61</td><td>63</td><td></td></tr>
				<tr><td>71</td><td>72</td><td></td></tr>
				<tr><td colspan="3">8</td></tr>
			</table>
		</div>
		<script type="text/javascript">
			$(function(){
				//内容包含“2”的td
				$("td:contains('2')").css("font-weight","900");
				//包含文本的td
				$("td:parent").css("background-color","yellow");
				//不包含文本的td
				$("td:empty").css("background-color", "red");
				//包含span的td
				$("td:has('span')").css("background-color","blue");
			});
		</script>
	</body>
</html>