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

小强的HTML5移动开发之路（35）——jQuery中的过滤器详解的更多相关文章

  1. 小强的HTML5移动开发之路（14）——Video标签详解

    来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...

  2. 小强的HTML5移动开发之路（18）——HTML5地理定位

    来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...

  3. 小强的HTML5移动开发之路（13）——HTML5中的全局属性

    来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey  快捷键 <!DOCTYPE HTML> ...

  4. 小强的HTML5移动开发之路（11）——链接，图片，表格，框架

    来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...

  5. 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较

    一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...

  6. 小强的HTML5移动开发之路（37）——jqMobi快速入门

    在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...

  7. 小强的HTML5移动开发之路（12）——从一个多媒体标签说起

    来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...

  8. 小强的HTML5移动开发之路（3）——HTML5与HTML4比较

    来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...

  9. 小强的HTML5移动开发之路（1）——HTML介绍

    来自:http://blog.csdn.net/dawanganban/article/details/17591373 HTML是HyperText Markup Language(超文本标记语言) ...

随机推荐

  1. PMP杂谈--名词解释

    过程:PMP中常常提到过程,好像非常高大上,实则不然,过程说白了就是一系列的行动和活动,用来创建预定的产品,服务或成果. 就这么简单. 再深入点就是,行动和活动当然都会有ITTO(输入,工具和技术.输 ...

  2. Incapsula免费日本CDN加速和CDNZZ香港CDN节点加速

    Incapsula免费日本CDN加速和CDNZZ香港CDN节点加速 免费的CDN对于那些将空间放在美国的博客网站加速效果是最好的,CDN可以解决国内连接美国的网络线路经常抽风和访问速度时好时坏的问题, ...

  3. XAMPP各个版本配置

    XAMPP各个版本配置 http://code.stephenmorley.org/articles/xampp-version-history-apache-mysql-php/ XAMPP  Ap ...

  4. Android学习笔记之ViewFlipper

    <1>被添加到ViewFlipper中的两个或两个以上的视图之间将执行一个简单的ViewAnimator动画.一次仅能显示一个子视图.如果需要,可以设置间隔时间使子视图像幻灯片一样自动显示 ...

  5. 方正飞越 A600硬改BIOS激活win7的工具与方法。

    硬件:方正飞越A600-4E57:主板,H61 IPISB-VR:BIOS版本,方正A007SB0(AMI) 软件:Win7专业版 目标:修改BIOS,添加SLIC2.1,硬激活win7 OEM版 具 ...

  6. Jquery+Ajax+Bootstrap Paginator实现分页的拼接

    效果图如下 jsp页面引入bootstrap样式,jquery和bootstrap-paginator.js <link type="text/css" rel=" ...

  7. Dotfuscator use for .net4.0 error solve

    在混淆的时候报错了,错误描述大致如下: Could not find a compatible version of ildasm to run on assembly C:\xxx.dll This ...

  8. 损失函数 - Andrew Ng机器学习公开课笔记1.2

    线性回归中提到最小二乘损失函数及其相关知识.对于这一部分知识不清楚的同学能够參考上一篇文章<线性回归.梯度下降>. 本篇文章主要解说使用最小二乘法法构建损失函数和最小化损失函数的方法. 最 ...

  9. vue2.0 踩坑记录之组件

    - did you register the component correctly? For recursive components, make sure to provide the " ...

  10. (转)const char to LPCTSTR不能转化问题

    转: const char to LPCTSTR不能转化问题 Visual C++ 2008里cannot convert parameter 1 from 'const char [13]' to ...