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. Python *的下载、安装和使用

    最近正在学习机器学习和深度学习,需要python,大家都知道,它是这些领域的入门语言,不多说,直接上干货!突然发现python比java好玩多了 下面就开始python的安装以及测试,python2. ...

  2. JS 保留2位小数 四舍五入（小数点后面不足2位，自动用0补齐）

    function changeTwoDecimal_f(x) { var f_x = parseFloat(x); if (isNaN(f_x)) { alert('function:changeTw ...

  3. VC error link

    错误1:LIBCD.lib(crt0.obj) : error LNK2001: unresolved external symbol _main在project-setting-link里找到pro ...

  4. 在设置了android:parentActivityName后，点击子Activity返回键，父Activity总会调用OnDestroy()的解决方式

    近期查了非常久这个事情.分享给大家, 原理非常easy,一个Activity在manifet里声明了android:parentActivityName:这时候通过Activity左上角的返回butt ...

  5. 防止登录页面出如今frame中

    在使用frame页面嵌套开发的时候,遇到重新启动了server的时候会出现登录页面在frame页面中出现, 所以须要在登录页面里面用js推断下当前的地址信息,然后跳转到登录的单独页面中. js代码例如 ...

  6. [React] Theme your application with styled-components and "ThemeProvider"

    In this styled-components lesson, we set a "primary color" within a UI "theme" o ...

  7. 【2017 ACM-ICPC 亚洲区（乌鲁木齐赛区）网络赛 G】Query on a string

    [链接]h在这里写链接 [题意] 让你维护字符串的一段区间内T子串的个数. [题解] 因为t不大,所以. 暴力维护一下a[i]就好. a[i]表示的是S串从i位置开始,能和T串匹配几个字符. 用树状数 ...

  8. SpringMVC 学习笔记(十) 异常处理HandlerExceptionResolver

    Spring MVC 通过 HandlerExceptionResolver 处理程序的异常,包含 Handler 映射.数据绑定以及目标方法运行时发生的异常. SpringMVC 提供的 Handl ...

  9. [WASM] Compile C Code into WebAssembly

    We use the C language instead of pure WAST to create a square root function using WASM Fiddle (https ...

  10. Android ViewGroup使用小结

    ViewGroup定义 在api中是这么描写叙述ViewGroup的:A ViewGroup is a special view that can contain other views. 依据意思我 ...