当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jQuery过滤选择器

jQuery过滤选择器

2017年12月21日  | 移动技术网IT编程  | 我要评论

要点：

基本过滤器 内容过滤器 可见性过滤器 子元素过滤器 其他方法

一、基本过滤器



item1
item2
item3
item4
item5
item6


1.获取ul下的第一个li，等价方法first()


$("ul li:first").css("color", "red");
$("ul li").first().css("color", "blue");


2.获取ul下的最后一个li，等价方法last()


$("ul li:last").css("color", "red");
$("ul li").last().css("color", "blue");


3.获取ul下的class不等于item3的li，等价方法not()


$("ul li:not(.item3)").css("color", "red");
$("ul li").not(".item3").css("color", "blue");


4.获取ul下索引值为奇数的li


$("ul li:odd").css("color", "red");


5.获取ul下指定索引值的li


$("ul li:eq(0)").css("color", "red");


6.获取ul下大于指定索引值的li


$("ul li:gt(2)").css("color", "red");


7.获取ul下小于指定索引值的li


$("ul li:lt(2)").css("color", "red");


8.匹配h1~h6的h标签



h1
h2
h5
$(":header").css("color", "red");

9.获取网页初始状态已经被激活焦点的元素，不能是鼠标点击或者是tab键入



$("#txt").get(0).focus();
$(":focus").css("background", "red");


二、内容过滤器

1.内容过滤器的过滤规则主要是包含的子元素或者是文本内容上

选取含有”lamport”文本的元素




lamport1


abclamport

asdfllamportsdf
 
$(":contains(lamport)").css("color", "red");

2.匹配不包含子元素或者是任何文本的元素


alert($("h3:empty").get(0).tagName);   // H3


3.选取包含子元素为class=red的元素，即返回的元素是父元素,等价方法为has()




item1
item2
item3

alert($("ul:has(.red)").get(0).innerHTML); $("ul").has(".red").css("background", "blue");

4.匹配包含子元素或者文本内容的元素


alert($(".red:parent").get(0).tagName);        // LI, 返回class为red且包含子元素或者文本内容的元素


5.parent()与:parent属性类似，但返回的是元素的父节点


alert($(".red").parent().get(0).tagName);      // UL


6.parents()方法，返回的是元素的父节点以及祖先


var ele = $(".red").parents();
for(var i = 0, len = ele.length; i < len; i++) {
    alert(ele.get(i).tagName);      // UL BODY HTML
}


7.parentsUntil()方法，返回的是元素的父节点以及祖先,直到遇到指定的父元素为止


var ele = $(".red").parentsUntil("html");
for(var i = 0, len = ele.length; i < len; i++) {
    alert(ele.get(i).tagName);      // UL BODY
}


三、可见性过滤器

可见性过滤器是根据元素的可见性与不可见性来选取元素




item1
item2
item3

alert($("ul li:hidden").get(0).innerHTML); // item1 alert($("ul li:visible").size()); // 2

四、子元素过滤器

过滤规则：通过父元素和子元素之间的关系




li1
li2
li3


only-one


li4
li5
li6


1.匹配每一个li元素的父元素的第一个子元素


$("ul li:first-child").css("color", "red");


2.匹配每一个li元素的父元素的最后一个子元素


$("ul li:last-child").css("color", "red");


3.匹配只有一个元素的元素


$("ul li:only-child").css("color", "red");


4.匹配每一个li元素的父元素的第几个元素,索引值从1开始


$("ul li:nth-child(1)").css("color", "red");


五.其他方法

1.判断选择器is




li1
li2
li3

alert($(".red").is("li")); // true, 判断class为red的元素是否为li元素

同时，is可以包含匿名函数为参数


alert($('.red').is(function () { //true，方法，同上
    return $(this).get(0).innerText == 'li2'; //可以自定义各种判断
}));


2.hasClass，判读某个元素是否包含每个class


alert($("ul li:nth-child(2)").hasClass("red"));    // true
slice(start, end), 选取从start到end的元素，索引值从0开始,选取范围[start, end)
$("ul li").slice(0, 2).css("color", "red");        // 第一个和第二个，不包括第三个


3.获取某个元素下的所有元素节点包括文本节点(空白文本)


alert($("ul").contents().size());      // 7


filter()过滤方法，和is()方法都可以接受一个function参数

首先选取ul下的li元素，接着用filter()方法过滤得到最后一个子元素


$("ul li").filter(':last').css("color", "red");


4.end(),获取当前元素的前一次状态





This is H1

This is p



$("#test").click(function () { // 首先获取#test下的p,使其隐藏 // 接着接受本次引用，返回的是#test // 最后又调用了一次hide(),使得整个DIV都被隐藏掉 $(this).find("p").hide().end().hide(); }); 						

                    

                        

                            
                        

                    

                    


                    
                    

                        
    
                            
  • 
                                
                            
    • 
                        

                    


                    
                    

                    

                        
您可能感兴趣的文章:

                        
                    

                    

                        如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！
                        点击进行留言回复
                    

                

                 
                

                    
相关文章:

                    
                

               
                       
                             

                

                    
                    

                        
                        
                        

                        

                            

                                
                                    
                                
                                 
                                    
                                
                            

                            

                                验证码：
                                
                                    
                                    
                                    
                                
                            

                        

                        
                    

                    
                    

                        
                        
                        
                    

                

            

        

        
        
 
            

                

                    
                    

                    
                


                

                    

                        

                            
最近更新的文章

                            

                                
                            

                        

                    

                


                

                    
                    

                        
                    

                


                

                

                    

                        

                            
大家感兴趣的文章

                            

                                
                            

                        

                    

                

                

                    
                    

                        
                    

                


            

        

    



 


 
 

     
    

        

移动技术网