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>

  • 相关阅读:
    hdu 1017 A Mathematical Curiosity 解题报告
    hdu 2069 Coin Change 解题报告
    hut 1574 组合问题 解题报告
    hdu 2111 Saving HDU 解题报
    hut 1054 Jesse's Code 解题报告
    hdu1131 Count the Trees解题报告
    hdu 2159 FATE 解题报告
    hdu 1879 继续畅通工程 解题报告
    oracle的系统和对象权限
    oracle 自定义函数 返回一个表类型
  • 原文地址:https://www.cnblogs.com/atlj/p/8047191.html
Copyright © 2011-2022 走看看