jquery的查找方法

最新推荐文章于 2022-12-22 13:51:44 发布

天空守护云

最新推荐文章于 2022-12-22 13:51:44 发布

阅读量383

点赞数

本文链接：https://blog.csdn.net/weixin_44606660/article/details/88198235

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table{
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <h1>hello</h1>
    <table>
        <thead>
            <tr>
                <th>NO</th>
                <th>NAME</th>
                <th>SCORE</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>101</td>
                <td>AAA</td>
                <td>50</td>
            </tr>
            <tr>
                <td>102</td>
                <td>BBB</td>
                <td>100</td> 
            </tr>
            <tr>
                <td>103</td>
                <td>EEE</td>
                <td>58</td>
            </tr>
        </tbody>
    </table>
    <script src="lib/jquery-2.2.2.js"></script>
    <script>
        //children找直接子元素，不关心后代元素
        // $('thead').children().css('color','green');
        // find找后代元素
        // $('tbody').find('td');
        //为第一行（标题行）增加灰色边框线
        $('thead').children().css('border','1px solid #ddd');
        //为第二行（数据的第一行）增加背景颜色 #eee
        $('tbody tr:first').css('background-color','#eee');
        // 为每一行（除标题行）的第一列设置文本颜色 yellow
        $('tbody tr td:first-child').css('color','yellow');
        // 为第一个不及格（score< 60)的成绩标红（文本红色）
        $('tbody tr td:last-child').filter(function(){
            return $(this).html()<60;
        }).css('color','red');
        $('tbody tr td:last-child').filter(function(){
            return $(this).html()<60;
        }).parent().css('background','orange');
    </script>
    
</body>
</html>

天空守护云

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery的查找方法

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫