小强的HTML5移动开发之路（35）——jQuery中的过滤器详解

浏览数：17 / 时间：2015年06月11日

1,基本过滤选择器

:first
:last
:not(selector) :selector匹配的节点之外的节点
:even :偶数
:odd ：奇数
:eq(index)
:gt(index) :比他大的
:lt(index) ：比他小的

<html>
	<head>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
		<script>
			$(function(){
				$(‘#b1‘).click(function(){
					//$(‘tr:first‘).css(‘background-color‘,‘#cccccc‘);
					//$(‘tbody tr:first‘).css(‘background-color‘,‘#cccccc‘);
					//$(‘tbody tr:not(#tr2)‘).css(‘background-color‘,‘#cccccc‘);
					//$(‘tbody tr:even‘).css(‘background-color‘,‘#cccccc‘);
					$(‘tbody tr:eq(2)‘).css(‘background-color‘,‘#cccccc‘);
				});
			});
		</script>
	</head>
	<body>
		<table border="1" cellpadding="0" cellspacing="0" width="60%">
			<thead>
				<tr>
					<td>name</td><td>age</td>
				</tr>
			</thead>
			<tbody>
				<tr><td>zs</d><td>22</td></tr>
				<tr id="tr2"><td>ls</d><td>22</td></tr>
				<tr><td>ww</d><td>22</td></tr>
				<tr><td>ll</d><td>22</td></tr>
			</tbody>
		</table>
		<input type="button" value="clickMe" id="b1"/>
	<body>
</html>

2,内容过滤选择器

:contains(text)
:empty :没有子节点的节点或者文本内容为空的节点
:has(selector)
:parent :包含有父节点的节点

<html>
	<head>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
		<script>
			$(function(){
				$(‘#b1‘).click(function(){
					$(‘:contains(hello)‘).css(‘background‘,‘red‘);
					//$(‘:empty‘).css(‘‘,‘‘);
					//$(‘div :has(p)‘).css(‘‘,‘‘);
				});
			});
		</script>
	</head>
	<body>
		<div>
			<div>hello</div>
			<div>你好</div>
			<div>
				<p>java</p>
			<div>
			<input type="button" value="clickMe" id="b1"/>
		</div>
	</body>

</html>
其实我的目的并不是让全部屏幕变成红色，为什么全部变成红色的呢？再看下面代码，我在contains(hell0)前面加一个div
$(‘div:contains(hello)‘).css(‘background‘,‘red‘);
可以看到虽然不是全屏了，但是还不是我想要的结果，怎么才能只将hello下面的背景变成红色呢？可以这样做
$(‘div div:contains(hello)‘).css(‘background‘,‘red‘);

3可见性过滤选择器

:hidden

找到input type="hidden" 以及display=none

:visible

			$(function(){
				$(‘#a1‘).click(function(){
					$(‘div:hidden‘).css(‘display‘,‘block‘);
					//如过有这个样式则去掉，没有则加上
					$(‘#d1‘).toggleClass(‘show‘);
				});
				//每点击一次，执行一个函数，循环执行
				$(‘#a1‘).toggle(function(){
					//$(‘#d1‘).css(‘display‘,‘block‘);
					$(‘#d1‘).show(400); //在400毫秒种打开
					//或者使用slow fast normal三个参数
					$(‘#d1‘).show(slow);
				},function(){
					//$(‘#d1‘).css(‘display‘,‘none‘);
					$(‘#d1‘).hide();
				});
			});

4,过滤选择器

(1)属性过滤选择器

[attribute]
[attribute=value]
[attribute!=value]

<html>
	<head>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
		<script>
			$(function(){
				$(‘#b1‘).click(function(){
					$(‘p[id=p1]‘).html(‘hello java‘);
				});
			});
		</script>
	</head>
	<body>
		<p id="p1">hello</p>
		<p>world</p>
		<input type="button" value="click" id="b1"/>
	</body>
</html>

(2),子元素过滤选择器：返回所有匹配的父节点下的子节点
:nth-child(index/even/odd)
n从1开始

<html>
	<head>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
		<script>
			$(function(){
				$(‘#b1‘).click(function(){
					$(‘ul li:nth-child(1)‘).html(‘item100‘);
				});
			});
		</script>
	</head>
	<body>
			<ul>
				<li>item1</li>
				<li>item2</li>
				<li>item3</li>

			</ul>
			<ul>
				<li>item4</li>
				<li>item5</li>
				<li>item6</li>

			</ul>
			<input type="button" value="click" id="b1"/>
	</body>
</html>