Chinaunix首页 | 论坛 | 博客

15859020900的ChinaUnix博客

首页　| 　博文目录　| 　关于我

15859020900

  • 博客访问： 76998
  • 博文数量： 59
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 600
  • 用 户 组： 普通用户
  • 注册时间： 2016-08-22 10:54
文章分类

全部博文（59）

文章存档

2016年（59）

我的朋友
最近访客
推荐博文
HTML5移动开发之路（35）——jQuery中的过滤器详解

分类： Html/Css

2016-11-04 16:41:11

本文为 兄弟连IT教育 机构官方 HTML5培训 教程，主要介绍：HTML5移动开发之路（35）——jQuery中的过滤器详解

1、基本过滤选择器

:first
:last
:not(selector) :selector匹配的节点之外的节点
:even :偶数
:odd ：奇数
:eq(index)
:gt(index) :比他大的

:lt(index) ：比他小的

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. <html>  
  2.     <head>  
  3.         <script src="">script>  
  4.         <script>  
  5.             $(function(){  
  6.                 $('#b1').click(function(){  
  7.                     //$('tr:first').css('background-color','#cccccc');  
  8.                     //$('tbody tr:first').css('background-color','#cccccc');  
  9.                     //$('tbody tr:not(#tr2)').css('background-color','#cccccc');  
  10.                     //$('tbody tr:even').css('background-color','#cccccc');  
  11.                     $('tbody tr:eq(2)').css('background-color','#cccccc');  
  12.                 });  
  13.             });  
  14.         script>  
  15.     head>  
  16.     <body>  
  17.         <table border="1" cellpadding="0" cellspacing="0" width="60%">  
  18.             <thead>  
  19.                 <tr>  
  20.                     <td>nametd><td>agetd>  
  21.                 tr>  
  22.             thead>  
  23.             <tbody>  
  24.                 <tr><td>zsd><td>22td>tr>  
  25.                 <tr id="tr2"><td>lsd><td>22td>tr>  
  26.                 <tr><td>wwd><td>22td>tr>  
  27.                 <tr><td>lld><td>22td>tr>  
  28.             tbody>  
  29.         table>  
  30.         <input type="button" value="clickMe" id="b1"/>  
  31.     <body>  
  32. html>  

2、内容过滤选择器

:contains(text)
:empty:没有子节点的节点或者文本内容为空的节点
:has(selector)
:parent :包含有父节点的节点
[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. <html>  
  2.     <head>  
  3.         <script src="">script>  
  4.         <script>  
  5.             $(function(){  
  6.                 $('#b1').click(function(){  
  7.                     $(':contains(hello)').css('background','red');  
  8.                     //$(':empty').css('','');  
  9.                     //$('div :has(p)').css('','');  
  10.                 });  
  11.             });  
  12.         script>  
  13.     head>  
  14.     <body>  
  15.         <div>  
  16.             <div>hellodiv>  
  17.             <div>你好div>  
  18.             <div>  
  19.                 <p>javap>  
  20.             <div>  
  21.             <input type="button" value="clickMe" id="b1"/>  
  22.         div>  
  23.     body>  
  24.   
  25. html>  

其实我的目的并不是让全部屏幕变成红色，为什么全部变成红色的呢？再看下面代码，我在contains(hell0)前面加一个div

 

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. $('div:contains(hello)').css('background','red');  

 

可以看到虽然不是全屏了，但是还不是我想要的结果，怎么才能只将hello下面的背景变成红色呢？可以这样做

 

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. $('div div:contains(hello)').css('background','red');  

 

3、可见性过滤选择器

:hidden
找到input type="hidden" 以及display=none
:visible
[javascript] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. $(function(){  
  2.     $('#a1').click(function(){  
  3.         $('div:hidden').css('display','block');  
  4.         //如过有这个样式则去掉，没有则加上  
  5.         $('#d1').toggleClass('show');  
  6.     });  
  7.     //每点击一次，执行一个函数，循环执行  
  8.     $('#a1').toggle(function(){  
  9.         //$('#d1').css('display','block');  
  10.         $('#d1').show(400); //在400毫秒种打开  
  11.         //或者使用slow fast normal三个参数  
  12.         $('#d1').show(slow);  
  13.     },function(){  
  14.         //$('#d1').css('display','none');  
  15.         $('#d1').hide();  
  16.     });  
  17. });  

4、过滤选择器

(1)属性过滤选择器
[attribute] 
[attribute=value]
[attribute!=value]
[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. <html>  
  2.     <head>  
  3.         <script src="">script>  
  4.         <script>  
  5.             $(function(){  
  6.                 $('#b1').click(function(){  
  7.                     $('p[id=p1]').html('hello java');  
  8.                 });  
  9.             });  
  10.         script>  
  11.     head>  
  12.     <body>  
  13.         <p id="p1">hellop>  
  14.         <p>worldp>  
  15.         <input type="button" value="click" id="b1"/>  
  16.     body>  
  17. html>  
(2),子元素过滤选择器：返回所有匹配的父节点下的子节点
:nth-child(index/even/odd)
n从1开始
[html]view plain copy print?在CODE上查看代码片派生到我的代码片
  1. <html>  
  2. <head>  
  3. <script src="">script>  
  4. <script>  
  5.             $(function(){  

                $('#b1').click(function(){  

  1.                     $('ul li:nth-child(1)').html('item100');  
  2.                 });  
  3.             });  
  4. script>  
  5. head>  
  6. <body>  
  7. <ul>  
  8. <li>item1li>  
  9. <li>item2li>  
  10. <li>item3li>  
  11. ul>  
  12. <ul>  
  13. <li>item4li>  
  14. <li>item5li>  
  15. <li>item6li>  
  16. ul>  
  17. <input type="button" value="click" id="b1"/>  
  18. body>  
  19. html>  
(3),表单对象属性过滤选择器
:enabled
:disabled      //文本输入框不能输入
:checked//被选择的节点
:selected

5、表单选择器

:input       $(':input');返回所有的input
:text
:pasword
:checkbox
:radio
:submit
:image
:reset
:button
阅读(541) | 评论(0) | 转发(0) |
0

上一篇：HTML5移动开发之路（34）——jQuery中的选择器

下一篇：HTML5移动开发之路（36）——jQuery中的DOM操作

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6