关于jQuery_基础选择器中的元素选中和css样式添加

最新推荐文章于 2024-04-14 03:00:12 发布

NewBurlaSKing

最新推荐文章于 2024-04-14 03:00:12 发布

阅读量207

点赞数

分类专栏： jQuery 文章标签： html 前端 jquery javascript

本文链接：https://blog.csdn.net/qq_55961861/article/details/126374132

版权

jQuery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

jQuery_基础选择器

一.基础选择器

类选择器
元素选择器
ID选择器
子代选择器
后代选择器

二.实例

使用jQuey去得到HTML元素并修改元素文本内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jQuery/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="box">类选择器</div>
    <h2>元素选择器</h2>
    <a href="#" id="a">ID选择器</a>
    <script>
        // $就是jQuery
        $('.box').html('Hi~jquery类选择器');
        $('h2').html('Hi~jquery元素选择器');
        $('#a').html('Hi~jqueryID选择器');
    </script>
</body>
</html>

使用jQuery去获取子代元素和后代元素并且添加边框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jQuery/jquery-3.6.0.min.js"></script>
</head>
<body>
    <ul class="topnav">
        <li>item1</li>
        <li>
            <ul>
                <li>item1</li>
                <li>item2</li>
                <li>item3</li>
            </ul>
        </li>
        <li>item3</li>
    </ul>
    <ul class="topnav2">
        <li>item1</li>
        <li>
            <ul>
                <li>item1</li>
                <li>item2</li>
                <li>item3</li>
            </ul>
        </li>
        <li>item3</li>
    </ul>
    <script>
        // css('样式属性','属性对应值')
        // 子代元素
        $('.topnav > li').css('border','2px solid aquamarine');
        
        //后代元素
        $('.topnav2 li').css('border','2px solid red');
    </script>
</body>
</html>