jQuery中的过滤器
来源:互联网 发布:linux配置ssh服务 编辑:程序博客网 时间:2024/06/05 10:20
1、基本过滤选择器
:first
:last
:not(selector) :selector匹配的节点之外的节点
:even :偶数
:odd :奇数
:eq(index)
:gt(index) :比他大的:lt(index) :比他小的
2、内容过滤选择器
- <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>
:contains(text)
:empty:没有子节点的节点或者文本内容为空的节点
:has(selector)
:parent :包含有父节点的节点
3、可见性过滤选择器
- <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');
:hidden
找到input type="hidden" 以及display=none
:visible
4、过滤选择器
- $(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();
- });
- });
(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),表单对象属性过滤选择器5、表单选择器
:enabled
:disabled //文本输入框不能输入
:checked//被选择的节点
:selected
:input $(':input');返回所有的input
:text
:pasword
:checkbox
:radio
:submit
:image
:reset
:button
0 0
- jQuery中的过滤器
- jquery中的过滤器
- jQuery过滤器
- JQuery 过滤器
- jQuery过滤器
- jQuery过滤器
- jQuery过滤器
- JQuery--过滤器
- Jquery系列-Jquery过滤器
- 前端jQuery之过滤器 jQuery过滤器
- JQuery选择过滤器大全
- JQuery 实现简单过滤器
- JQuery选择过滤器
- JQuery选择过滤器大全
- JQuery内容过滤器
- JQuery选择过滤器
- JQuery选择过滤器
- jquery过滤器的使用
- git 的常用操作
- 第十一周项目2(2)求四个数的最大公约数
- http协议详解
- WIN7环境下JAVA环境变量的设置方法及设置技巧
- 跟着老王学Python
- jQuery中的过滤器
- CATransform3D 矩阵变换之立方体旋转实现细节
- 中缀表达式和逆波兰式的相互转换
- 第十一周项目二求四个数的最大公约数
- arm-linux-gdb程序错误调试
- MyBatis的几种批量操作
- SSL 3.0高危漏洞避免方案
- 除法散列函数之散列值问题
- JSP端口转发工具 – KPortTran