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

时间：2024-12-07 21:34:26

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

相关文章