jquery选择器之 过滤选择器
先来一个热身的代码:把li选择列表中的最后一个元素背景色变为红色。
<!DOCTYPE html>
<html>
<head>
<title>:first过滤选择器</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>改变最后一行"苹果"背景颜色:</div>
<ol>
<li>葡萄</li>
<li>香蕉</li>
<li>橘子</li>
<li>西瓜</li>
<li>苹果</li>
</ol>
<script type="text/javascript">
$("li:last").css("background-color", "red");
</script>
</body>
</html>
选择li元素中的倒数第三个元素,并且改变背景色
可以通过eq来具体定位到元素中的第几个,注意,序号是从零开始的。
<!DOCTYPE html>
<html>
<head>
<title>:eq(index)过滤选择器</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
</head>
<body>
<div>改变中间行"葡萄"背景颜色:</div>
<ol>
<li>橘子</li>
<li>香蕉</li>
<li>葡萄</li>
<li>苹果</li>
<li>西瓜</li>
</ol>
<script type="text/javascript">
<span style="color:#ff0000;">$("li:eq(-3)").css("background-color", "#60F");</span>
</script>
</body>
</html>
:contains(text)过滤选择器
上面的选择器通过序号来找到元素,这个在编程的时候很方便,不过有时候,我们希望拥有特定结果的值,进行特别的展示的时候,可以选择:contains(text)过滤选择器。
例如,选择所有包含“jQuery”文字内容的所有元素,并且高亮显示。
<!DOCTYPE html>
<html>
<head>
<title>:contains(text)过滤选择器</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>改变包含"jQuery"字符内容的背景色:</div>
<ol>
<li>强大的"jQuery"</li>
<li>"javascript"也很实用</li>
<li>"jQuery"前端必学</li>
<li>"java"是一种开发语言</li>
<li>前端利器——"jQuery"</li>
</ol>
<script type="text/javascript">
<span style="color:#ff0000;">$("li:contains('jQuery')").css("background", "green");</span>
</script>
</body>
</html>
:has(selector)选择器
该选择器,用来筛选符合某种条件的额父节点的。比如,我们选择所有包含了label节点的li节点的(其实当然也可以选择包含某个ID的li节点,其实选择器就是这样,好多都是可以通用的)
<!DOCTYPE html>
<html>
<head>
<title>:has(selector)过滤选择器</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>改变包含"label"元素的背景色:</div>
<ol>
<li><p>我是P先生</p></li>
<li><label id='test'>L妹纸就是我</label></li>
<li><p>我也是P先生</p></li>
<li><label>我也是L妹纸哦</label></li>
<li><p>P先生就是我哦</p></li>
</ol>
<script type="text/javascript">
$("li:has('label')").css("background-color", "blue");
</script>
</body>
</html>
:hidden过滤器
该过滤器可以把一些节点中,那些不展示的节点找出来,比如为disabled、display="none"或者是 type="hidden"的元素。
例如,把input元素中,状态为hidden的元素中的数据找出来,放入到div中。
<!DOCTYPE html>
<html>
<head>
<title>:hidden过滤选择器</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
</head>
<body>
<h3>显示隐藏元素的内容</h3>
<input id="hidstr" type="hidden" value="我已隐藏起来"/>
<div></div>
<script type="text/javascript">
<span style="color:#ff0000;"> var $strHTML = $("input:hidden").val();</span>
$("div").html($strHTML);
</script>
</body>
</html>
:visible过滤选择器
这个过滤器没啥好说的,哈hidden过滤器正好相反
[attribute=value]属性选择器
该选择器可以选择某个节点中,属性attribute的值为value元素。
例如,选择所有的li元素中,属性title 为蔬菜的的节点。
$("li[title='蔬菜']").css("background-color", "green");
注意,该属性选择器的相反选择器是:[attribute!=value]属性选择器。
[attribute*=value]属性选择器
这个选择器更加强大,原因在于可以模糊匹配。
例如:
$("li[title*='果']").css("background-color", "green");
选择所有li元素中title的值中包含果的元素。
注意:first-child、last-child这两个最好有图才能够说得清,比较特殊。很简单,和之前的first和last的区别主要是可以选取所有父节点下的第一个或者最后一个子节点了。
$("li:first-child").css("background-color", "green");