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

1、基本过滤选择器
:first
:last
:not(selector) :selector匹配的节点之外的节点
:even :偶数
:odd ：奇数
:eq(index)
:gt(index) :比他大的

:lt(index) ：比他小的

  
      
          
          
      
      
        
  
            
  
                
  
                    
name
age
  
                
  
            
  
            
  
                
zs
22
  
                
ls
22
  
                
ww
22
  
                
ll
22
  
            
  
        
  
          
      

2、内容过滤选择器
:contains(text)
:empty:没有子节点的节点或者文本内容为空的节点
:has(selector)
:parent :包含有父节点的节点

  
      
          
          
      
      
        
  
            
hello
  
            
你好
立即学习“前端免费学习笔记（深入）”；
  
            
  
                
java
  
            
  
              
        
  
      
  

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

$('p:contains(hello)').css('background','red');

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

Reword

AI文章写作，一个会思考的编辑

下载

$('p p:contains(hello)').css('background','red');

3、可见性过滤选择器
:hidden
找到input type="hidden" 以及display=none:visible

$(function(){  
    $('#a1').click(function(){  
        $('p: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]

  
      
          
          
      
      
        
hello
  
        
world
  
          
      

(2),子元素过滤选择器：返回所有匹配的父节点下的子节点
:nth-child(index/even/odd)
n从1开始

  
      
          
          
      
      
            
  
                
item1
  
                
item2
  
                
item3
  
  
            
  
            
  
                
item4
  
                
item5
  
                
item6
  
  
            
  
              
      

(3),表单对象属性过滤选择器
:enabled
:disabled      //文本输入框不能输入
:checked//被选择的节点
:selected

5、表单选择器
:input       $(':input');返回所有的input
:text
:pasword
:checkbox
:radio
:submit
:image
:reset
:button

以上就是 小强的HTML5移动开发之路（35）——jQuery中的过滤器详解的内容，更多相关内容请关注PHP中文网（www.php.cn）！