jQuery筛选方法及筛选选择器

jQuery筛选方法及筛选选择器

1. 筛选选择器

    //html代码
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>

• $(‘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代码
    <div>
        <p>一</p>
        <p>二</p>
        <p>三</p>
        <p>四</p>
    </div>
    <ul>
        <li class="current">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>

• $('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