小强的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(超文本标记语言) ...
随机推荐
- VPS的centOS6安装远程桌面
VPS的centOS6安装远程桌面 64位系统的需要编译安装 ttp://www.landui.com/help/Show-991.html xrdp是在图形界面下使用的,首先要确定您的centos系 ...
- 1.1 Introduction中 Apache Kafka™ is a distributed streaming platform. What exactly does that mean?（官网剖析）（博主推荐）
不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Apache Kafka™ is a distributed streaming p ...
- usr/bin/mysqladmin: refresh failed; error: 'Unknown error'
debian wheezy 升级后, 由于授权错误, 导致password给改动, 在debian的mysql safe下也无法进入. 我在/etc/mysql/my.cnf 里面已经改动了bin ...
- JS实现跑马灯效果(鼠标滑入可暂停，离开继续跑)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- oracle 10g文件目录结构详解
一个典型的oralce目录结构如下: /u01└── oracle ├── admin (数据库管理文件位置,以实例划分) │ ├── mydb │ │ ├── adum ...
- Swift UIView 层次调整
Swift 中添加的UIView都是有层级的. 我们先添加三个看一看 let view1=UIView(frame: CGRectMake(10, 50, 200, 200)) let view2=U ...
- 关于IO重定向
首先,Unix进程使用文件描述符0,1,2作为标准输入.输出和错误的通道. 其次,当进程请求一个新的文件描述符的时候,系统内核将最低可用的文件描述符赋给它. 第三,文件描述符集合通过exec调用传递, ...
- IIS FTP匿名登录不成功
FTP网站没有开启匿名登录的权限,对你没有看错.可能你的虚拟目录已经设置了如下所示的内容: 但是,单击上右图时,在其功能视图中的FTP身份验证中,可能并未启用＂匿名身份验证＂,如下右图所示.启动 ...
- VS2012 打包部署程序
一. 下载 InstallShield 2015(支持VS2012) VS2012没有自带打包工具,所以要先下载并安装一个打包工具.我采用微软提供的打包工具: InstallShield2015 ...
- UITextField用法
.创建 .UITextField* textField = [[UITextField alloc]initWithFrame:CGRectMake(, , , )]; .设置委托 //委托类需要遵守 ...