Jquery選擇器

Jquery選擇器的基礎入門案例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <link href="js/basicSelect.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/jquery-1.3.1.js"></script>
    </head>
    <body><br>
         <input type="button" value="設置p01背景粉色"  id="b1"/><br>
         <input type="button" value=" 設置class為 mini元素背景紅色"  id="b2"/><br>
         <input type="button" value=" 設置元素名為 <p> 元素背景黃色 "  id="b3"/><br>
         <input type="button" value=" 設置所有元素的背景色綠色"  id="b4"/><br>
         <input type="button" value=" 設置所有的<span>元素和id為 p01 的元素背景紫色"  id="b5"/><br>
 
         <p id="p01"  class="mini">p01</p>
         <p id="p02" class="mini">p02</p>
         <p id="p03">p03 </p>
         <span id="sp01"  class="mini">sp01</span>
         <span id="sp02">sp02</span>
         <br>
         <p>段落1</p>
         <p>段落2</p>
         <p>段落3</p>
 
         <script type="text/javascript">
         /*$('#b1'):獲取id為b1的控件($('#id選擇器'))
         *$('#b1').click();將控件id的點擊點擊事件
         *function:響應事件的具體實現
         */
         //id選擇器 id
         $('#b1').click(function(){
                        $('#p01').css("background","pink");
                    });
 
        //類選擇器class
        $('#b2').click(
        function (){
            $('.mini').css("background"," red");
        });
 
        //元素選擇器element
        $('#b3').click(
        function(){
        $('p').css("background","yellow");
        });
 
        //通配選擇器 *
        $('#b4').click(function(){
        $('*').css("background","green");
        });
 
        //多重選擇器:篩選條件用,隔開
        $('#b5').click(function(){
        $('span,#p01').css("background","purple");
        });
 
        //元素和事件綁定
        $('p').click(function(){
        $('p').css('color','red');
        //window.alert(this.innerHTML);  //這裡的this還隻是dom對象,表示當前點擊的對象
        window.alert($(this).html());  //$(this):表示將dom對象包裝成jquery對象,可以使用jquery對象的方法
        });
         </script>
  </body>
</html>

這裡寫圖片描述

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *