小强的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(超文本标记语言) ...

随机推荐

iOS中学会如何对sqlite3 进行封装
#waring ---(看官注意) ---使用说明: ①在创建自定义model类之前让该类继承自文件中的Model类, ②为model类选一个NSString属性作为主键:(既,在初始化方法里面将从父 ...
9. ZooKeeper之搭建单机模式。
转自:https://blog.csdn.net/en_joker/article/details/78673456 在集群和单机两种模式下,我们基本完成了分别针对生产环境和开发环境ZooKeeper ...
event事件对象兼容写法：var oEvent=ev||event;和取消事件冒泡
要在整个页面添加事件要使用document,例如要捕抓鼠标位置 document.onclink=function(ev) //FireFox Chrome默认都是有一个值传进来的 { var oE ...
Oracle自定义类型在C#中调用示例
1.C#代码: 1)using Oracle.DataAccess.Types; using System; using System.Collections.Generic; using Syste ...
DOM相关知识总结
DOM相关: 1.获取DOM元素 document.getElementById document.getElementsByName document.getElementsByTagName do ...
Vue里父子组间的通讯
父组件代码 <template> <div> <child @child-say="listenToBoy" :mes=count></c ...
IR_drop
IR压降是指出现在集成电路中电源和地网络上电压下降或升高的一种现象.随着半导体工艺的演进金属互连线的宽度越来越窄,导致它的电阻值上升,所以在整个芯片范围内将存在一定的IR压降.IR压降的大小决定于从电 ...
3dmax入门
动画自己主动关键帧设置关键帧路径绑定材质M打开渲染f10 骨骼绑定. ..
自定义npm包的创建、发布、更新和撤销
大纲 1.准备2.自定义npm包3.发布自定义npm包4.引用npm包5.更新npm包6.撤销发布的npm包简书原文 https://www.jianshu.com/p/d737bc5df5b7 1 ...
C语言主要做哪些方面的开发---一个来自“IT技术学习”微信群的问题及答复
近期,在"IT技术学习"微信群中,有同学问了这样一个问题:C语言主要做哪些方面的开发?在这篇文章中,我想结合自身的经验,对这个问题进行下解答. C语言是计算机及其相关专业(如通信. ...

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

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

随机推荐

热门专题