前端HTML调用jQuery库，元素、id、class、群组选择器（前端：HTML搭配jQuery系列教程一）

最新推荐文章于 2022-10-10 00:09:30 发布

Kkh_8686

最新推荐文章于 2022-10-10 00:09:30 发布

阅读量271

点赞数

分类专栏： web端 flask 服务器文章标签： html5 jquery javascript css html

本文链接：https://blog.csdn.net/K_AAbb/article/details/116895014

版权

web端同时被 3 个专栏收录

17 篇文章 1 订阅

订阅专栏

服务器

14 篇文章 0 订阅

订阅专栏

flask

11 篇文章 1 订阅

订阅专栏

1、元素选择器

对指定的内容进行操作，代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>  元素选择器  </title>
    <script src="../static/js/jquery-3.5.1.js"></script>   <!-- 导入jQuery库 -->
    <!-- 元素选择器，将元素的颜色定义为红色。css()是“对象的一个方法 -->
    <script>
        $(function () {
            $("div").css("color","red")
            $("p").css("color","yellow")
            $("span").css("color","blue")
        })
    </script>
</head>
<body>
    <div>1111111</div>
    <p>22222222</p>
    <span>33333333</span>
    <div>444444444</div>
</body>

</html>

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

2、id选择器

对指定的内容进行操作，代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>  元素选择器  </title>
    <script src="../static/js/jquery-3.5.1.js"></script>   <!-- 导入jQuery库 -->
    <!-- id选择器，将元素的颜色定义为红色。css()是“对象的一个方法 -->
    <script>
        $(function () {
            $("#xxx").css("color","red")
            $("#yyy").css("color","yellow")
            $("#zzz").css("color","blue")
        })
    </script>
</head>
<body>
    <div id="xxx">1111111</div>
    <p>22222222</p>
    <span id="zzz">33333333</span>
    <div>444444444</div>
</body>

</html>

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

3、class选择器

对指定的内容进行操作，代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>  元素选择器  </title>
    <script src="../static/js/jquery-3.5.1.js"></script>   <!-- 导入jQuery库 -->
    <!-- class选择器，将元素的颜色定义为红色。css()是“对象的一个方法 -->
    <script>
        $(function () {
            $(".xxx").css("color","red")
            $(".yyy").css("color","yellow")
            $(".zzz").css("color","blue")
        })
    </script>
</head>
<body>
    <div class="xxx">1111111</div>
    <p>22222222</p>
    <span class="zzz">33333333</span>
    <div>444444444</div>
</body>

</html>

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

4、群组选择器

对指定的内容进行操作，代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>  元素选择器  </title>
    <script src="../static/js/jquery-3.5.1.js"></script>   <!-- 导入jQuery库 -->
    <!-- 群组选择器，将元素的颜色定义为红色。css()是“对象的一个方法 -->
    <script>
        $(function () {
            $("div,p,span").css("color","red")
        })
    </script>
</head>
<body>
    <div>1111111</div>
    <p>22222222</p>
    <span>33333333</span>
    <div>444444444</div>
</body>

</html>

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

5、选择器_改变字体背景颜色

对指定的内容进行操作，代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>  元素选择器  </title>
    <script src="../static/js/jquery-3.5.1.js"></script>   <!-- 导入jQuery库 -->
    <!-- id选择器，将元素的颜色定义为红色。css()是“对象的一个方法 -->
    <script>
        $(function () {
            $("#xxx").css("color","red")
            $("#yyy").css("color","yellow")
            $("#zzz").css("color","blue")
            $("#rrr").css("background-color", "red")
            $("#zzz").css("background-color", "yellow")

        })
    </script>
</head>
<body>
    <div id="xxx">1111111</div>
    <p>22222222</p>
    <span id="zzz">33333333</span>
    <div>444444444</div>
    <div id="rrr">444444444</div>

</body>

</html>

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

Kkh_8686

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端HTML调用jQuery库，元素、id、class、群组选择器（前端：HTML搭配jQuery系列教程一）

1、元素选择器对指定的内容进行操作，代码：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title> 元素选择器 </title> <script src="../static/js/jquery-3.5.1.js"></script>  <!-- 元素选
复制链接

扫一扫

专栏目录