jquery选择器之子元素

Posted 2020-08-23 孔扎根

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery选择器之子元素相关的知识，希望对你有一定的参考价值。

　　html代码：

　　:first-child 匹配第一个子元素，每个父元素的第一个子元素

　　:last-child 匹配最后一个子元素，每个父元素的最后一个子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!--HTML区域-->
    <h1>第一个标题</h1>
    <div class="nav-2014">
        <div class="w">
            <div class="w-spacer"></div>
            <div class="categorys">
                <div class="dt">家用电器分类</div>
                <div class="dp">家用电器价格</div>
            </div>
            <span class="hr"></span>
            <div class="navitems-2014">
                <div id="treasure"></div>
                <span class="clr"></span>
                <span class="chr"></span>
                男：<input type="checkbox" checked="checked" value="nan">
                女:<input type="checkbox" value="nv">
            </div>
        </div>
    </div>
    <h2>第二个标题</h2>
    <div id="electronic">
        <div id="firstScreen">1
            <div class="w">2</div>
        </div>
        <ul>
            <li class="ui-switch-curr">第一</li>
            <li class="ui-switch-item"></li>
            <li class="ui-switch-next">第三</li>
            <li class="ui-switch-sub">第四</li>
        </ul>
        <ul>
            <li class="lizi">梨</li>
            <li class="pingguo">苹果</li>
        </ul>
        <div class="secord_screen">
            <div></div>
        </div>
        <div class="third_screen"></div>
    </div>
</body>
</html>

　　jquery区

    <script src="jquery-3.1.0.js"></script>
    <script>
//        获取每个ul下的第一个li元素
        $("ul li:first-child")
//        获取每个ul下的最后一个li元素
        $("ul li:last-child")

以上是关于jquery选择器之子元素的主要内容，如果未能解决你的问题，请参考以下文章

jquery中的$的特殊用法

jQ选择器学习片段（JavaScript 部分对应）