jQuery filter method and filter selector

jQuery filter method and filter selector

1. Filter selector

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

• $('li:first')-get the first li element
• $('li:last')-get the last li element
• $('li:eq(n)')-get the li element with index n
• $('li:odd')-get the li element with an odd index
• $('li:even')-get the li element whose index is even

        //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. Screening method

    //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()-find the parent of the li element
• $('li').eq(n)-find the li element with index 2
• $('ul').children('li')-find the nearest child element of the ul element
• $('ul').find('li')-find all child elements of the ul element
• $('.class').siblings('li')-Find the sibling element li of the element whose class name is class, excluding itself
• $('.class').nextAll()-find all sibling elements after the element with the class name class
• $('.class').prevAll()-all sibling elements before the element whose class name is class
• $('li').hasClass('currrent')-check whether the li element contains a class named current, if so, return true, otherwise return 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