Home >Web Front-end >JS Tutorial >The difference between jQuery :first selector, :first-child selector and first()

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

黄舟Original: 2017-06-23 14:35:211801browse

: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>

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>

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>

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jquery: Why is the first-child selector invalid in this case?Next article：jquery: Why is the first-child selector invalid in this case?

See more

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

Related articles