HTML5入门

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

字号+ 作者:水寒 来源:csdn 2015-06-02 10:01 我要评论( )

1,基本过滤选择器:first:last:not(selector) :selector匹配的节点之外的节点:even :偶数:odd :奇数:eq(index):gt(index) :比他大的:lt(index) :比他小的$(function(){$(#b1).click(function(){//$(

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>
(3),表单对象属性过滤选择器
:enabled
:disabled      //文本输入框不能输入
:checked//被选择的节点
:selected
5、表单选择器
:input       $(':input');返回所有的input
:text
:pasword
:checkbox
:radio
:submit
:image
:reset
:button

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5常用标签总结

    HTML5常用标签总结

    2016-03-23 14:02

  • 响应式网站如何才能得到百度的重视

    响应式网站如何才能得到百度的重视

    2016-01-27 10:11

  • html5学得好不好,看掌握多少标签

    html5学得好不好,看掌握多少标签

    2015-09-28 12:53

  • 关于meta标签

    关于meta标签

    2015-06-06 16:22

网友点评
精彩导读
热门资讯
关注我们
关注微信公众号,了解最新精彩内容

3