jQuery基礎學習(1)(標籤選擇器，事件)

小溪彼岸發表於2016-06-28
jQuery事件

jQuery 是目前最受歡迎的 JavaScript 框架。

  • 它使用 CSS 選擇器來訪問和操作網頁上的 HTML 元素（DOM 物件）。
  • jQuery 同時提供 companion UI（使用者介面）和外掛。

jQuery 元素選擇器

  • $("p") 選取 <p>元素。
  • $("p.intro") 選取所有 class="intro" 的 <p> 元素。
  • $("p#demo") 選取所有 id="demo" 的 <p> 元素。

jQuery 屬性選擇器

jQuery 使用 XPath 表示式來選擇帶有給定屬性的元素。

  • $("[href]") 選取所有帶有 href 屬性的元素。
  • $("[href='#']") 選取所有帶有 href 值等於 "#" 的元素。
  • $("[href!='#']") 選取所有帶有 href 值不等於 "#" 的元素。
  • $("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素。

jQuery css選擇器

$("p").css("background-color","red");

jQuery事件

  • $(document).ready(function) 將函式繫結到文件的就緒事件（當文件完成載入時）
  • $(selector).click(function) 觸發或將函式繫結到被選元素的點選事件
  • $(selector).dblclick(function) 觸發或將函式繫結到被選元素的雙擊事件
  • $(selector).focus(function) 觸發或將函式繫結到被選元素的獲得焦點事件
  • $(selector).mouseover(function)
  • $(selector).mouseenter(function)

a.改變標籤的內容

method1：

<script>
   //method1
   function pclicka(){
   var p = document.getElementById("pida");
      p.innerHTML = "p的內容被改變了";
   }
</script>
<p id="pida" onclick="pclicka()">aaa</p>

method2：

<script src="jquery.min.js"></script>
<script>

   //method2
   function pclickb(){
       $("#pidb").text("內容被改變了");
   }
</script>

<p id="pidb" onclick="pclickb()">bbb</p>

method3:

//selector.js

$(document).ready(function(){
   $("#pidc").click(function(){
       $(this).text("pc內容被改變了");
   });
});
<script src="jquery.min.js"></script> 
<script src="js/selector.js"></script>

<p id="pidc">ccc</p>

完整例子：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery.min.js"></script>
    <script src="js/selector.js"></script>
    <script>
        //method1
        function pclicka(){
            var p = document.getElementById("pida");
            p.innerHTML = "p的內容被改變了";
        }

        //method2
        function pclickb(){
            $("#pidb").text("內容被改變了");
        }

    </script>
</head>
<body>
<p id="pida" onclick="pclicka()">aaa</p>
<p id="pidb" onclick="pclickb()">bbb</p>
<p id="pidc">ccc</p>
</body>
</html>

b. jQuery事件

$(document).ready(function(){
    //單擊事件
   $("button").click(function(){
       //設定隱藏
       $(this).hide();
   });

    //雙事件
    $("button").dblclick(function(){
        //設定隱藏
        $(this).hide();
    });
});

 //滑鼠移動到上面
    $("button").mouseenter(function(){
        $(this).hide();
    });
    //滑鼠離開
    $("button").mouseleave(function(){
        $(this).show();
    });

bind(事件繫結)

  • bind 繫結事件
  • ubind 解除繫結事件
    unbind（’a’）解除所有繫結的a事件，unbind（’a’，’b’）解除繫結a中的b事件
<script>
      $(document).ready(function(){
          $('#p1').bind('click',click1);
          $('#p1').bind('click',click2);
          $('#p1').unbind('click',click1);
      });

      function click1(){
          alert('click1');
      }
      function click2(){
          alert('click2');
      }
  </script>

在jQuery1.7後可以使用on 代替bind,off代替unbind

<script>
      $(document).ready(function(){
          $('#p1').on('click',click1);
          $('#p1').on('click',click2);
          $('#p1').off('click',click1);
      });

      function click1(){
          alert('click1');
      }
      function click2(){
          alert('click2');
      }
  </script>

<3>自定義事件

<script>
    var clickBtn;
    $(document).ready(function(){
       clickBtn = $('#btn1');
       clickBtn.click(function(){
           var e = jQuery.Event('myEvent');
           clickBtn.trigger(e);
       });
        clickBtn.bind('myEvent',function(){
            alert('dddd');
        });
    });
</script>

相關文章