JQuery快速入門-事件與效果

時間 2019-12-09

原文原文鏈接

1、事件

事件綁定的方法有兩種：javascript

綁定到元素
查找元素後綁定事件

方法1：綁定到元素html

<body>
    <p onclick='func1()'>點擊我</p>
</body>

<script type="text/javascript">
     function func1(){
	    alert('123');
 
     }

方法2:查找到元素後綁定事件java

<body>
<p>點擊我</p>
</body>

<script type="text/javascript">
     $('p').click(function(){
	    alert('123');
    });
 
</script>

說明：方法2的優勢是不用在元素裏面進行事件添加，至關於事件和元素分離。jquery

一、瀏覽器事件

resize（）//只要在瀏覽器窗口的大小改變時，根據不一樣的瀏覽器，該消息被追加到<div id="log">一次或屢次。瀏覽器

<body>
<p id='log'>點擊我</p>
</body>

<script type="text/javascript">


$(window).resize(function() {
  $('#log').append('<div>Handler for .resize() called.</div>');
});
 
</script>

二、scroll（）//當用戶在元素內執行了滾動操做，就會在這個元素上觸發scroll事件。app

$('#target').scroll(function() {
 　　 $('#log').append('<div>Handler for .scroll() called.</div>');
});

二、文檔加載

當DOM準備就緒時，執行的一個函數。ide

$( document ).ready(function() {

　　// Handler for .ready() called.

 
  }); 
 
  等價於 
 
    $(function() { 
   
     　　// Handler for .ready() called. 
   
    });

三、事件綁定

bind(事件名稱，函數）和unbind（‘click’，function(){}）函數

$('#foo').bind('click', function() {

　　alert('User clicked on "foo."');

 
  }); 
 
 
    
 
 
  on（）和off（） 
 
 
   <!DOCTYPE html>
<html>
<head>
  <style>
button { margin:5px; }
button#theone { color:red; background:yellow; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="theone">Does nothing...</button>
<button id="bind">Add Click</button>
<button id="unbind">Remove Click</button>
<div style="display:none;">Click!</div>

<script>
//定義函數aClick，然div顯示，並展現慢慢消失效果。
function aClick() {
  $("div").show().fadeOut("slow");
}
//綁定點擊函數，針對#theone綁定aClick函數，並把內容改成‘Can Click!’
$("#bind").click(function () {
  $("body").on("click", "#theone", aClick)
    .find("#theone").text("Can Click!");
});
//找到unbind元素並綁定click事件，執行aClick函數,找到#theone元素而後把內容改成‘Does nothing.....’
$("#unbind").click(function () {
  $("body").off("click", "#theone", aClick)
    .find("#theone").text("Does nothing...");
});
</script>
 
</body>
</html>
 
  
　　

四、表單事件

.blur() //爲 "blur" 事件綁定一個處理函數，或者觸發元素上的 "blur" 事件
.change()//"change" 事件綁定一個處理函數，或者觸發元素上的 "change" 事件。此事件僅限用於<input>元素，<textarea>和<select>元素。
.focus()//"focus" 事件綁定一個處理函數，或者觸發元素上的 "focus" 事件。此事件起初適用於有限的元素，好比表單元素（<input>, <select>等）和連接元素（<a href>）。
.select()//"select" 事件綁定一個處理函數，或者觸發元素上的該事件。此事件只能用在<input type="text">和<textarea>。
.submit()//"submit" 事件綁定一個處理函數，或者觸發元素上的該事件。它只能綁定在<form>元素上。如下幾種狀況會致使表單被提交：用戶點擊了<input type="submit">, <input type="image">, 或者 <button type="submit">，或者當某些表單元素獲取焦點時，敲擊Enter（回車鍵），均可以提交。