jQuery筛选方法及筛选选择器

jQuery筛选方法及筛选选择器

1. 筛选选择器

    //html代码
    

        
1
        
2
        
3
        
4
        
5
        
6
    

• $(‘li:first’)——获得第一个li元素
• $(‘li:last’)——获得最后一个li元素
• $(‘li:eq(n)’)——获得索引为n的li元素
• $(‘li:odd’)——获得索引为奇数的li元素
• $(‘li:even’)——获得索引为偶数的li元素

        //jQuery代码(记得引入jQuery文件)
        console.log($('li:first').text());//1
        console.log($('li:eq(1)').text());//2
        console.log($('li:last').text());//6
        console.log($('li:odd').text());//246
        console.log($('li:even').text());//135

2. 筛选方法

    //html代码
    

        
一
        
二
        
三
        
四
    
    

        
1
        
2
        
3
        
4
        
5
        
6
    

• $('li).parent()——查找li元素的父级
• $(‘li’).eq(n)——查找索引为2的li元素
• $(‘ul’).children(‘li’)——查找ul元素的最近一级子元素
• $(‘ul’).find(‘li’)——查找ul元素的所有子元素
• $(’.class’).siblings(‘li’)——查找类名为class的元素的兄弟元素li，不包括它自己
• $(’.class’).nextAll()——查找类名为class的元素之后的所有同辈元素
• $(’.class’).prevAll()——类名为class的元素之前的所有同辈元素
• $(‘li’).hasClass(‘currrent’)——检测li元素是否含有名为current的类，若有，则返回true，否则返回false

            //jQuery代码(记得引入jQuery文件)
            console.log($('p').parent()); //div
            console.log($('p').eq(0).text()); //一
            console.log($('div').children('p').text()); //1
            console.log($('ul').find('li').text()); //123456
            console.log($('.current').siblings('li').text()); //23456
            console.log($('li').eq(2).text()); //3
            console.log($('li').eq(2).prevAll().text()); //21
            console.log($('li').hasClass('current')); //true