selector_child(选择器_子元素选择器)

最新推荐文章于 2024-04-13 12:25:41 发布

Begin_W_T_E_I_M

最新推荐文章于 2024-04-13 12:25:41 发布

阅读量655

点赞数

分类专栏： jQuery技术文章标签： jquery子元素选择器 nth-Child() first-child

本文链接：https://blog.csdn.net/Begin_W_T_E_I_M/article/details/97484199

版权

jQuery技术专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.jQuery 子元素选择器-内容
(1):nth-child()
概述：匹配其父元素下的第N个子或奇偶元素

‘:eq(index)’ 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！可以使用:
nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)

<script>
        $(function () {
           $('.buydetail tr:nth-child(2n)').css({"background-color": "mistyrose"});
           // even 偶数行 | odd 奇数行
  		  $('.buydetail tr:nth-child(odd)').css({"background-color": "azure"});
        });
    </script>

作用：查找buydetail下的tr奇数行的元素，给它加上css样式：背景颜色。
(2):first-child
概述：匹配第一个子元素

‘:first’ 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素

<script>
        $(function () {
         $('.buydetail tr:first-child').css({"background-color": "cornflowerblue"});
        });
    </script>

作用：在每个buydetail 中查找第一个tr 孩子，给它加上css样式：背景颜色。

(3):last-child
概述：匹配最后一个子元素

':last’只匹配一个元素，而此选择符将为每个父元素匹配一个子元素

<script>
        $(function () {
           $('.buydetail tr:last-child').css({"background-color": "pink"});
        });
    </script>

作用：在每个buydetail 中查找最后一个tr 孩子，给它加上css样式：背景颜色。
(4):only-child
概述：如果某个元素是父元素中唯一的子元素，那将会被匹配

如果父元素中含有其他元素，那将不会被匹配。

<script>
        $(function () {
         	$('h3 a:only-child').css({color: 'red'});
        });
    </script>

作用：在每个h3中查找只有一个a元素的元素，给它加上css样式：背景颜色。

（5）源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子元素选择器</title>
    <script src="../../jquery-2.2.4.js"></script>
    <style>
        .buydetail {
            width: 500px;
            /* height: 200px;*/
            border: 2px solid mistyrose;
            border-collapse: collapse;
        }
        .buydetail tr{
            height: 30px;
        }
        .buydetail td,th{
            text-align: center;
        }
        .buy-month{
            background-color: white;
            font-weight: bold;
            color: blue;
        }
        td:empty{
            content: "----";
            background-color: azure;
        }
        .xx {
            background-color: cornflowerblue;
        }
    </style>

<script>
$(function () {
    $('.buydetail tr:nth-child(2n)').css({"background-color": "mistyrose"});
    // even 偶数行 | odd 奇数行
    $('.buydetail tr:nth-child(odd)').css({"background-color": "azure"});

    $('.buydetail tr:first-child').css({"background-color": "cornflowerblue"});
    $('.buydetail tr:last-child').css({"background-color": "pink"});

    $('h3 a:only-child').css({color: 'red'});

});
</script>
</head>
<body>
<h3 style="margin-left: 30px"><a href="../index.html">返 回</a></h3>

<h1>jQuery 子元素选择器：</h1>
<h3><a href="../index.html"><p>1<p>2</p></a>子元素(:nth-child(), :first-child, :last-child, :only-child ) </h3>

<table class="buydetail" border="2">
    <!-- 表格标题 -->
    <caption>月度消费明细</caption>
    <tr>
        <th>月度</th>
        <th>衣帽</th>
        <th>娱乐</th>
        <th>吃喝玩乐</th>
    </tr>
    <tr class="row">
        <td class="month">一月</td>
        <td>￥1200.0</td>
        <td>￥500.0</td>
        <td>￥1500.0</td>
    </tr>
    <tr>
        <td class="month">二月</td>
        <td>￥800.0</td>
        <td>￥550.0</td>
        <td>￥2000.0</td>
    </tr>
    <tr>
        <td class="month">三月</td>
        <td>￥450.0</td>
        <td>￥300.0</td>
        <td>￥1000.0</td>
    </tr>
    <tr>
        <td class="month">四月</td>
        <td></td>
        <td>￥300.0</td>
        <td></td>
    </tr>
    <tr>
        <td class="month">五月</td>
        <td>￥450.0</td>
        <td>￥300.0</td>
        <td>￥1000.0</td>
    </tr>
    <tr>
        <td class="month">六月</td>
        <td>￥450.0</td>
        <td>￥300.0</td>
        <td>￥1000.0</td>
    </tr>
    <tr>
        <td class="month">七月</td>
        <td>￥450.0</td>
        <td>￥300.0</td>
        <td>￥1000.0</td>
    </tr>
</table>
</body>
</html>

运行结果：
在这里插入图片描述

Begin_W_T_E_I_M

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
selector_child(选择器_子元素选择器)

1.jQuery 子元素选择器-内容(1):nth-child()概述：匹配其父元素下的第N个子或奇偶元素‘:eq(index)’ 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！可以使用:nth-child(even):nth-child(odd):nth-child(3n):nth-child(2):nth-child(3n+1...
复制链接

扫一扫