jQuery中first-child与first选择器区别

Posted web前端开发技术

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery中first-child与first选择器区别相关的知识，希望对你有一定的参考价值。

1、first-child

first-child为每个父级元素匹配第一个子元素，可以匹配出多个元素：

示例代码：

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>jQuery中first-child与first选择器区别</title>
    </head>

    <body>
        <ul>
            <li>John</li>
            <li>Karl</li>
            <li>Brandon</li>
        </ul>
        <ul>
            <li>Glen</li>
            <li>Tane</li>
            <li>Ralph</li>
        </ul>
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
        <script type="text/javascript">
            //选择了2个元素：
            //分别是：<li>John</li> 和 <li>Glen</li>
            //first-child为每个父级元素匹配第一个子元素，可以匹配出多个元素
            $("li:first-child").css(\'color\', \'red\');
        </script>
    </body>

</html>

效果：

 

2、first

first为获取匹配的第一个元素，只能匹配一个元素。

示例代码：

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>jQuery中first-child与first选择器区别</title>
    </head>

    <body>
        <ul>
            <li>John</li>
            <li>Karl</li>
            <li>Brandon</li>
        </ul>
        <ul>
            <li>Glen</li>
            <li>Tane</li>
            <li>Ralph</li>
        </ul>
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
        <script type="text/javascript">
            //选择了1个元素：
            //是：<li>John</li>
            //first为获取匹配的第一个元素，只能匹配一个元素
            $("li:first").css(\'color\', \'red\');
        </script>
    </body>

</html>

效果：

 

 

在使用过程中要注意两者的区别。

 

以上是关于jQuery中first-child与first选择器区别的主要内容，如果未能解决你的问题，请参考以下文章

[ jquery 选择器 :first :first-child ] 实例分析: :first :first-child 之间在元素选取方面的区别

jQuery中 :first:first-child 和 :first-of-type 之间的不同

css选择器中:first-child与:first-of-type的区别

jQuery选择器和遍历的总结

jquery子元素筛选

CSS3 PIE 与 :first-child 冲突