The difference between jQuery :first selector, :first-child selector and first()-JS Tutorial-php.cn

The difference between jQuery :first selector, :first-child selector and first()

黄舟

Release： 2017-06-23 14:35:21

Original

1787 people have browsed it

:first Get the first element.

:first-child The selector selects all elements that are the first child element of its parent element.

first() Returns the first element of the selected element.

The test code is as follows:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>Insert title here</title>  
</head>  
<body>  
    <ul>  
        <li>ul_1 item 1</li>  
        <li>ul_1 item 2</li>  
        <li>ul_1 item 3</li>  
        <li>ul_1 item 4</li>  
        <li>ul_1 item 5</li>  
    </ul>  
    <ul>  
        <li>ul_2 item 1</li>  
        <li>ul_2 item 2</li>  
        <li>ul_2 item 3</li>  
        <li>ul_2 item 4</li>  
        <li>ul_2 item 5</li>  
    </ul>  
</body>  
</html>

Copy after login

Test first: first, the code is as follows

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>  
<script type="text/javascript">  
    $(function(){  
        $("ul li:first").css("background-color","yellow");  
    })  
 </script>

Copy after login

The effect is as follows;

The difference between jQuery :first selector, :first-child selector and first()

Only The first one is selected,

Test: first-child, the code is as follows

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>  
<script type="text/javascript">  
    $(function(){  
        $("ul li:first-child").css("background-color","yellow");  
    })  
 </script>

Copy after login

The effect is as follows:

The difference between jQuery :first selector, :first-child selector and first()

Discover every ul The first li elements are all selected,

Test first(), the code is as follows

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>  
<script type="text/javascript">  
    $(function(){  
        $("ul li").first().css("background-color","yellow");  
    })  
 </script>

Copy after login

The effect is as follows:

The difference between jQuery :first selector, :first-child selector and first()

The result is that only The first one is selected.

It is found here that :first selects the first li sub-element of the first ul element, and then adds a style. No matter how many elements there are on this page, it only finds The first

and :first-child selects all elements whose first child element under ul is li. There are two ul parent elements, ul_1 and ul_2, both of which have their own child elements li.

The last one is first(), which is similar to :first. It gets the first li sub-element of the first ul element, no matter how many elements there are.

The above is the detailed content of The difference between jQuery :first selector, :first-child selector and first(). For more information, please follow other related articles on the PHP Chinese website!