zoukankan      html  css  js  c++  java
  • jQuery选择器

    1、获取网页中所有的<h3>元素,然后设置元素的背景色。

         "h3"为选择器的基本语法要求,必须放到$()中(工厂函数)

         $("h3")返回的是jQuery对象

         .css()是为jQuery对象设置的方法

         $("h3").css("background","17c");

    2、分类:

         基本选择器:标签选择器,类选择器,ID选择器,并集选择器,交集选择器,全局选择器

         层次选择器:后代选择器,子选择器,相邻元素选择器,同辈元素选择器

         过滤选择器:基本过滤选择器,可见性过滤选择器,属性选择器,内容过滤选择器,子元素过滤选择器,表单对象属性过滤选择器

         表单选择器

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>基本选择器</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <!-- 引入jQuery -->
    <script src="scripts/jquery.js" type="text/javascript"></script>
    <script src="lib/assist.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
    //选择id为one的元素
    $("#btn1").click(function(){
    $("#one").css("background","#bfa");
    })
    });
    $(function(){
    //选择 class 为 mini 的所有元素
    $("#btn2").click(function(){
    $(".mini").css("background","#bfa");
    });
    });
    $(function(){
    //选择元素名为div的所有元素
    $("#btn3").click(function(){
    $("div").css("background","#bfa");
    });
    });
    $(function(){
    //选择所有的元素
    $("#btn4").click(function(){
    $("*").css("background","#bfa");
    });
    });
    $(function(){
    //所有的span元素和id为two的元素
    $("#btn5").click(function(){
    $("span,#two").css("background","#bfa");
    });
    });



    </script>
    </head>
    <body>
    <button id="reset">
    手动重置页面元素
    </button>
    <input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label><br />
    <br />
    <h3>
    基本选择器.
    </h3>
    <!-- 控制按钮 -->
    <input type="button" value="选择 id为 one 的元素." id="btn1" />
    <input type="button" value="选择 class 为 mini 的所有元素." id="btn2" />
    <input type="button" value="选择 元素名是 div 的所有元素." id="btn3" />
    <input type="button" value="选择 所有的元素." id="btn4" />
    <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5" />
    <br />
    <br />
    <!-- 测试的元素 -->
    <div class="one" id="one">
    id为one,class为one的div
    <div class="mini">
    class为mini
    </div>
    </div>
    <div class="one" id="two" title="test">
    id为two,class为one,title为test的div.
    <div class="mini" title="other">
    class为mini,title为other
    </div>
    <div class="mini" title="test">
    class为mini,title为test
    </div>
    </div>
    <div class="one">
    <div class="mini">
    class为mini
    </div>
    <div class="mini">
    class为mini
    </div>
    <div class="mini">
    class为mini
    </div>
    <div class="mini">
    </div>
    </div>
    <div class="one">
    <div class="mini">
    class为mini
    </div>
    <div class="mini">
    class为mini
    </div>
    <div class="mini">
    class为mini
    </div>
    <div class="mini" title="tesst">
    class为mini,title为tesst
    </div>
    </div>
    <div style="display: none;" class="none">
    style的display为"none"的div
    </div>
    <div class="hide">
    class为"hide"的div
    </div>
    <div>
    包含input的type为"hidden"的div<input type="hidden" size="8" />
    </div>
    <span id="mover">正在执行动画的span元素.</span>
    </body>
    </html>

  • 相关阅读:
    学到了林海峰,武沛齐讲的Day20 装饰器
    学到了林海峰,武沛齐讲的Day19 迭代细讲
    学到了林海峰,武沛齐讲的Day18 迭代
    学到了林海峰,武沛齐讲的Day18-4 文件操作
    hdu1106 java字符串分割
    hdu1282 回文数猜想
    hud1047 java大数忽略空格
    hdu1018 阶乘位数的数学原理
    hdu1715 java解大菲波数
    hdu1316 java解高精度斐波数
  • 原文地址:https://www.cnblogs.com/atlj/p/8047191.html
Copyright © 2011-2022 走看看