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

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>

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

其实我的目的并不是让全部屏幕变成红色,为什么全部变成红色的呢?再看下面代码,我在contains(hell0)前面加一个div

$(‘div:contains(hello)‘).css(‘background‘,‘red‘);
小强的HTML5移动开发之路(35)——jQuery中的过滤器详解

可以看到虽然不是全屏了,但是还不是我想要的结果,怎么才能只将hello下面的背景变成红色呢?可以这样做

$(‘div div:contains(hello)‘).css(‘background‘,‘red‘);
小强的HTML5移动开发之路(35)——jQuery中的过滤器详解
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>
(3),表单对象属性过滤选择器
:enabled
:disabled      //文本输入框不能输入
:checked //被选择的节点
:selected
5,表单选择器
:input       $(‘:input‘);返回所有的input
:text
:pasword
:checkbox
:radio
:submit
:image
:reset
:button

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

上一篇:一个与众不同的苹果--苹果产品制胜之道


下一篇:小强的HTML5移动开发之路(36)——jQuery中的DOM操作