小强的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>

其实我的目的并不是让全部屏幕变成红色，为什么全部变成红色的呢？再看下面代码，我在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中的过滤器详解的更多相关文章

小强的HTML5移动开发之路（14）——Video标签详解
来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...
小强的HTML5移动开发之路（18）——HTML5地理定位
来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...
小强的HTML5移动开发之路（13）——HTML5中的全局属性
来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey 快捷键 <!DOCTYPE HTML> ...
小强的HTML5移动开发之路（11）——链接，图片，表格，框架
来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...
小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较
一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...
小强的HTML5移动开发之路（37）——jqMobi快速入门
在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...
小强的HTML5移动开发之路（12）——从一个多媒体标签说起
来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...
小强的HTML5移动开发之路（3）——HTML5与HTML4比较
来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...
小强的HTML5移动开发之路（1）——HTML介绍
来自:http://blog.csdn.net/dawanganban/article/details/17591373 HTML是HyperText Markup Language(超文本标记语言) ...

随机推荐

每日技术总结：encodeURI,encodeURIComponent,toFixed
1. encodeURI(URIstring) encodeURI()函数可把字符串作为URI进行编码 encodeURI("http://www.w3school.com.cn" ...
cocos2d-x中六种持续性动作
持续性动作: (一) 位置变化动作 Move by to Jump by to (二) 属性变化动作 Scale by to Rotate by to Fade in out to Tint to b ...
ubuntu下安装phpredis的模块扩展
1.前提是先安装好redis,然后再安装phpredis. .. 2.先下载phpredis-master.tar.gz安装包... 详细详情例如以下: <span style="co ...
驱动学习3-make
在向内核中添加驱动的时候要完成3项工作 (1)在Kconfig中添加新代码对应项目的编译条件(下面Makefile文件中需要用到它定义的的宏变量) (2)将驱动源码添加到对应的目录中 (3)在目录Ma ...
[Angular] AuthService and AngularFire integration
Config AngularFire, we need database and auth module from firebase. import {NgModule} from '@angular ...
ORACLE表空间的备份与恢复策略
转自原文如何进行ORACLE表空间的备份与恢复? 1.切换服务器归档模式,如果已经是归档模式可跳过此步: %sqlplus /nolog (启动sqlplus) SQL> conn / as s ...
[NodeJS] Use Now alias for custom sub-domains
Now is a great way to deploy your node application, but the generated URLs aren't memorable or easil ...
swift项目第一天：环境部署
一:项目部署项目部署一.开源中国(OSChina) 网站地址:https://git.oschina.net/ 开源中国社区成立于2008年8月,其目的是为中国的IT技术人员提供一个全面的.快捷更 ...
17、网卡驱动程序-DM9000举例
(参考:cs89x0.c可以参考) DM9000 芯片实现网络功能的基础,在接收数据时采用中断方式,即当有数据到来并在 DM9000 内部 CRC 校验通过后会产生一个接收中断: 网卡驱动程序框架: ...
PBOC
http://blog.sina.com.cn/s/blog_64cc82620100rcgu.html 最近在做一个基于PBOC电子现金卡的终端应用, 项目还没有完成, 但电子现金部分的处理模块已完 ...

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

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

随机推荐

热门专题