jQuery：选择器

其他 2018-08-29 10:11:33 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u013101178/article/details/81612861

总结

  1. jQuery提供了丰富的选择器以获取DOM元素。
  2. jQuery中基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器。
  3. 使用jQuery的层次选择器可通过DOM元素之间的层次关系来获取元素，包括后代元素、子元素、相邻元素和同辈元素。
  4. 使用属性选择器可通过HTML元素的属性来选择元素。
  5. 使用过滤选择器可通过特定的过滤规则来筛选所需要的DOM元素，包括基本过滤选择器、可见性过滤选择器等。
  6. 编写选择器时要注意特殊符号和空格。

1.基本选择器

<html>

<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
    <style type="text/css">
        #box {
            background-color: #FFF;
            border: 1px solid #000;
            padding: 5px;
        }
    </style>

    <script type="text/javascript" src="../tool/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            /*
            //获取并设置所有class为title的元素的背景颜色
            $(".title").css("background", "red");
            //获取并设置id为box的元素的背景颜色
            $("#box").css("background-color", "blue");
            //获取并设置所有h2,dt,class为title的元素的背景颜色
            $("h2,dt,.title").css("background", "green");
            //设置所有class为title的h2元素的背景色
            $("h2.title").css("background", "black");
            */
            //获取h2元素并为其添加click事件函数
            $("h2").click(function () {
                //获取h3元素并为其添加背景颜色
                $("h3").css("background-color", "#09F");
            });
        });
    </script>
</head>

<body>
<div id="box">
    id为box的div
    <h2 class="title">class为title的h2</h2>
    <h3 class="title">class为title的h3</h3>
    <h3>热门排行</h3>
    <dl>
        <dt><img src="" width="90" height="20" alt="哈哈"/></dt>
        <dd class="title">斗地主</dd>
        <dd>休闲游戏</dd>
        <dd>QQ游戏，下象棋。。。。。</dd>
    </dl>
</div>
</body>

</html>

2.层次选择器
层次选择器

<html>

<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            line-height: 30px;
        }

        body {
            margin: 10px;
        }

        #menu {
            width: 50%;
            border: 2px solid #03C;
            padding: 10px;
        }

        a {
            text-decoration: none;
            margin-right: 5px;
        }

        span {
            font-weight: bold;
            padding: 3px;
        }

        h2 {
            margin: 10px 0;
        }
    </style>

    <script type="text/javascript" src="../tool/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(
            function () {
                //为#menu下的<span>元素添加背景色
                $("h2").click(
                    function () {
                        $("#menu span").css("background-color", "#09F");
                    }
                );
                //为#menu下的子元素<span>添加背景色
                $("#menu>span").css("background-color", "#09F");
                //为紧邻h2元素后的<dl>元素添加背景色
                //next()方法代替prev+next[相邻元素选择器]
                $("h2+dl").css("background-color", "red");
                //为跟h2元素后的所有同辈元素添加背景色
                //nextAll()方法代替prev~siblings[同辈元素选择器]
                //$("h2~dl").css("background-color", "green");

            }
        );
    </script>
</head>

<body>
<div id="menu">
    <h2>全部旅游产品分类</h2>
    <dl>
        <dt>北京周边旅游<span>特价</span></dt>
        <dd>
            <a href="#">按天数</a>
            <a href="#">海边旅游</a>
            <a href="#">草原</a>
        </dd>
    </dl>

    <dl>
        <dt>景点门票</dt>
        <dd>
            <a href="#">名胜</a>
            <a href="#">暑期</a>
            <a href="#">乐园</a>
        </dd>
        <dd>
            <a href="#">国庆</a>
            <a href="#">元旦</a>
        </dd>
    </dl>
    <span>更多分类</span>
</div>
</body>

</html>

3.属性选择器
属性选择器

<html>

<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style type="text/css">
        #box {
            width: 50%;
            background-color: #FFF;
            border: 2px solid #000;
            padding: 5px;
        }
    </style>

    <script type="text/javascript" src="../tool/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(
            function () {
                $("h2").click(
                    function () {
                        //为包含属性名为title的h2元素添加背景色
                        $("h2[title]").css("background-color", "#09F");
                    }
                );
                $("[type=button]").click(
                    function () {
                        $("[name][type=text]").css("background-color", "red");
                    }
                );
                //改变class属性的值为odds的元素的背景颜色
                //$("[class=odds]").css("background-color", "#09F");
                //改变id属性值不为box的元素的背景颜色
                //$("[id!=box]").css("background-color", "green");
                //改变title属性值以h开头的元素的背景色
                //$("[title^=h]").css("background-color", "#09F");
                //改变title属性中的值以jp结尾的元素的背景颜色
                //$("[title$=jp]").css("background-color", "red");
                //改变title属性中含有s的元素的背景颜色
                //$("[title*=s]").css("background-color", "blue");
                //改变包含class属性，且title属性的值含有y的<li>元素的背景色
                $("li[class][title*=y]").css("background-color", "yellow");
            }
        );
    </script>
</head>

<body>
<div id="box">
    <h2 class="odds" title="cartooninfo">动画列表</h2>
    <ul>
        <li class="odds" title="kn_ap">名侦探柯南</li>
        <li class="evens" title="hy_jp">火影忍者</li>
        <li class="oddt" title="ss_gp">死神</li>
        <li class="enn" title="hs_jp">机器猫</li>
    </ul>
</div>
</body>

</html>

4.基本过滤器

<html>

<head>
    <meta charset="UTF-8">
    <title>基本过滤器</title>
    <style type="text/css">

    </style>

    <script type="text/javascript" src="../tool/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(
            function () {
                $("h2").click(
                    function () {
                        //改变第一个<li>元素的背景色
                        //$("li:first").css("background-color", "#09F");
                        //改变所有标题元素的背景色，如改变<h1>,<h2>,<h3>....元素的背景色
                        //$(":header").css("background-color", "#09F");

                    }
                );
                //改变最后一個<li>元素的背景色
                //$("li:last").css("background-color", "#09F");
                //改变class不为three的<li>元素的背景颜色
                //$("li:not(.three)").css("background-color", "#09F");
                //改变索引值为偶数的<li>元素的背景颜色
                //$("li:even").css("background-color", "#09F");
                //改变索引值为奇数的<li>元素的背景颜色
                //$("li:odd").css("background-color", "#09F");
                //改变索引值为1的<li>元素的背景色
                //$("li:eq(1)").css("background-color", "#09F");
                //改变索引值大于1的<li>元素的背景色
                //$("li:gt(1)").css("background-color", "#09F");
                //改变索引值小于1的<li>元素的背景色
                //$("li:lt(1)").css("background-color", "#09F");
                //改变当前获取焦点的元素的背景色
                $(":focus").css("background-color", "#09F");
            }
        );
    </script>
</head>

<body>
<h2>网络小说</h2>
<ul>
    <li>小说1</li>
    <li>小说2</li>
    <li class="three">小说3</li>
    <li>小说4</li>
    <li>小说5</li>
    <li>小说6</li>
    <li>小说7</li>
    <li>小说8</li>
</ul>
</body>

</html>

5.可见性过滤选择器，1

<html>

<head>
    <meta charset="UTF-8">
    <title>可见性过滤选择器</title>
    <style type="text/css">
        #txt_show {
            display: block;
            color: #00C;
        }

        #txt_hide {
            display: none;
            color: #F30;
        }
    </style>

    <script type="text/javascript" src="../tool/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(
            function () {
                $("input[name='show']").click(
                    function () {
                        //show()方法的功能是将隐藏的元素显示出来
                        //$("#txt_hide").show();
                        $("p:hidden").show();
                    }
                );
                $("input[name='hide']").click(
                    function () {
                        //hide()方法的功能是将显示的元素隐藏起来
                        $("#txt_show").hide();
                        //$("p:visible").hide();
                    }
                );
            }
        );
    </script>
</head>

<body>
<p id="txt_hide">点击按钮，我会被隐藏。。</p>
<p id="txt_show">隐藏我，被显示了。。</p>

<input name="show" type="button" value="点击显示文字"/>
<input name="hide" type="button" value="点击隐藏文字"/>
</body>

</html>

5.可见性过滤选择器，2

<html>

<head>
    <meta charset="UTF-8">
    <title>可见性过滤选择器</title>
    <style type="text/css">
        .tips {
            width: 170px;
            padding: 9px;
            background: #ddd;
            border: 1px solid #000;
            font-size: 17px;
            font-family: Arial;
            color: #0033FF;
            display: none;
        }

        p {
            color: #FF0033;
        }
    </style>

    <script type="text/javascript" src="../tool/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(
            function () {
                $("p").click(
                    function () {
                        $(".tips:hidden").show();
                    }
                );
            }
        );
    </script>
</head>

<body>
<p>“逻辑”是什么意思？</p>
<div class="tips">
    萝莉，是洛丽塔的缩写，愿指一部美国小说，后在日报引申发展的一种次文化。。。
</div>
</body>

</html>

猜你喜欢

转载自blog.csdn.net/u013101178/article/details/81612861
今日推荐
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
周排行
Family Tree 题解
BZOJ 1093 最大半连通子图 SCC + DP
幂等处理
Spring----学习（2）----XML 配置Bean 自动装配
SQL Server 远程更新目标表数据
HIbernate3.6 环境搭建
特殊符号正则表达式
【Linux】第一章 进程的理解
843. n-皇后问题（dfs+输出各种情况）
空间数据库2
每日归档
更多
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022