jQuery基础选择器（较常用）

最新推荐文章于 2024-03-20 16:21:21 发布

Keeling1720

最新推荐文章于 2024-03-20 16:21:21 发布

阅读量175

点赞数

分类专栏： JavaScript JavaWeb

本文链接：https://blog.csdn.net/weixin_44741023/article/details/118267567

版权

JavaWeb 同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

JavaScript

32 篇文章 3 订阅

订阅专栏

jQuery基础选择器（较常用）

jQuery的四大基本选择器：

id选择器：$("#idValue"):查询id为idValue的对象
类选择器：$(".className")：查询class为className的对象
标签选择器：$(“div”)：查询标签为div的对象
混合选择器：$(“div,.className”)：查询满足标签为div或class为className的对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //点击id为btn1的按钮时
            $("#btn1").click(function () {
                //类名为className的元素的color设置为tomato
                $(".className").css('color','#bfa');
            });

            //点击id为btn2的按钮时
            $("#btn2").click(function () {
                //标签为p的元素的color设置为yellowgreen
                $("p").css('color','yellowgreen');
            });

            //点击id为btn3的按钮时
            $("#btn3").click(function () {
                //scan标签或者class为java的标签颜色变红
                $("scan,.java").css('color','red');
            });
        })
    </script>
</head>
<body>
    <button id="btn1">按钮1</button>
    <div class="className">我是class为className的元素</div>
    <br>
    <button id="btn2">按钮2</button>
    <p>床前明月光</p>
    <p>疑是地上霜</p>
    <p>举头望明月</p>
    <p>低头思故乡</p>
    <br>
    <button id="btn3">按钮3</button>
    <div>
        <scan>Hello，World</scan>
        <ul>
            <li class="python">Python</li>
            <li class="c++">C++</li>
            <li class="java">Java</li>
        </ul>
    </div>

</body>
</html>

显示如下：
在这里插入图片描述
点击按钮1、按钮2、按钮3后，显示如下：

Keeling1720

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础选择器（较常用）

jQuery基础选择器（较常用）jQuery的四大基本选择器：id选择器：$("#idValue"):查询id为idValue的对象类选择器：$(".className")：查询class为className的对象标签选择器：$(“div”)：查询标签为div的对象混合选择器：$(“div,.className”)：查询满足标签为div或class为className的对象<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫