侧边栏壁纸
博主头像
Epoch

Java开发、Python爬虫、微服务、分布式、前端

  • 累计撰写 93 篇文章
  • 累计创建 110 个标签
  • 累计收到 8 条评论

目 录CONTENT

文章目录

JQuery实验室--基本选择器

Epoch
2021-01-25 / 0 评论 / 0 点赞 / 296 阅读 / 870 字 / 正在检测是否收录...

JQuery下载链接jQuery下载

/*
    id选择器使用"#id值"进行选择
    // 给id=btnSelect的元素添加高亮类 id选择器
    $("#btnSelect").addClass("highlight");

    css选择器使用".css类名"进行选择
    // 给class = myclass的元素添加高亮类 CSS类选择器
    $(".myclass").addClass("highlight");

    标签选择器使用标签名进行选择
    $("p").addClass("highlight");

    组合选择器 对元素进行组合
    $("p,.myclass,input,#btnSelect").addClass("highlight");    
*/
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery实验室</title>
    <script src="js/jquery-3.5.1.js"></script>
    <style>
        .myclass {
            font-style: italic;
            color: darkblue;
        }

        /* 高亮CSS类 */
        .highlight {
            color: red;
            font-size: 30px;
            background: lightblue;
        }
    </style>
</head>

<body>
    <div class="section">
        <h2>JQuery选择器实验室</h2>
        <input style="height: 24px" id="txtSelector" />
        <button id="btnSelect" style="height: 30px;">选择</button>
        <hr>
        <div>
            <p id="welcome">欢迎来带选择器实验室</p>
            <ul>
                <li>搜索引擎:
                    <a href="http://www.baidu.com">百度</a>
                    <span>
                        <a style="color: darkgreen;" href="http://www.so.com">360</a>
                    </span>
                </li>
                <li>电子邮箱:
                    <a href="http://mail.163.com">网易邮箱</a>
                    <span>
                        <a style="color: darkgreen;" href="http://mail.qq.com">QQ邮箱</a>
                    </span>
                </li>
                <li>中国名校:
                    <a href="http://www.tsinghua.edu.cn">清华大学</a>
                    <span>
                        <a style="color: darkgreen;" href="http://www.pku.edu.cn">北京大学</a>
                    </span>
                </li>
            </ul>

            <span class="myclass">我是拥有myclass类的span标签</span>

            <p class="myclass">我是拥有myclass类的p标签</p>
            <form id="info" action="#" method="GET">
                <div>
                    用户名: <input type="text" name="uname" value="admin">
                    密码:<input type="password" name="upsd" value="123456">
                </div>
                <div>
                    婚姻状况:<select id="marital_status">
                        <option value="1">未婚</option>
                        <option value="2">已婚</option>
                        <option value="3">离异</option>
                        <option value="4">丧偶</option>
                    </select>
                </div>
                <div class="left clear-left">
                    <input type="submit" value="提交" />
                    <input type="reset" value="重置">
                </div>
            </form>

        </div>
    </div>
    <script>
        /*
            id选择器使用"#id值"进行选择
            // 给id=btnSelect的元素添加高亮类 id选择器
            $("#btnSelect").addClass("highlight");

            css选择器使用".css类名"进行选择
            // 给class = myclass的元素添加高亮类 CSS类选择器
            $(".myclass").addClass("highlight");

            标签选择器使用标签名进行选择
             $("p").addClass("highlight");

             组合选择器 对元素进行组合
            $("p,.myclass,input,#btnSelect").addClass("highlight");    
        */
        
        
        document.getElementById("btnSelect").onclick = function () {
            var selector = document.getElementById("txtSelector").value;
            //jQuery的选择器
            //选择器
            // 给所有的元素中拥有高亮的class去除掉
            $("*").removeClass("highlight");
            // 给input中输入的元素添加高亮的class
            $(selector).addClass("highlight");
        }
    </script>
</body>

</html>
0

评论区