例子1
ready() DOM加載完畢
load() 元素加載完畢
resize() 瀏覽器窗口的大小發生變化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> /*原生寫法 window.onload = function(){ } */ /*jquery寫法 上面等同於下面的寫法 $(window).load(function() { }); */ /* ready的寫法: $(document).ready(function(){ }) */ /* ready的簡寫: $(function(){ }) */ // 窗口改變尺寸的時候,會觸發事件;比如多次手動拉動瀏覽器窗口大小,就會觸發多次2 $(window).resize(function() { console.log('2'); }); </script> </head> <body> <div id="div1"></div> </body> </html>
二,bind()
使用bind()可以綁定多個事件,比如bind('click' mouseover', function(){...},其中有2個參數,第一個參數表示事件,多個事件用空格隔開,比如這里點擊和鼠標經過都會觸發事件;后面的參數是一個匿名函數,寫入觸發的事件。
綁定和解綁方法如下
$(function(){ $('#div1').bind('mouseover click', function(event) { alert($(this).html()); // $(this).unbind(); $(this).unbind('mouseover'); }); });
三. 自定義事件
主動觸發:可使用jquery對象上的trigger方法來觸發對象上綁定的事件。
自定義事件:除了系統事件外,可通過bind方法自定義事件,然后用trigger方法來觸發這寫事件
如下例子
再第一個按鈕上綁定了2個事件,一個是自定義的hello事件,一個是系統事件click;在第二個按鈕上點擊后,分別觸發這兩個事件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定義事件</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ $('#btn').bind('hello',function(){ alert('hello!'); }); $('#btn').bind('click',function(){ alert('click'); }); $('#btn2').click(function() { $('#btn').trigger('hello'); $('#btn').trigger('click'); }); }) </script> </head> <body> <input type="button" name="" value="按鈕" id="btn"> <input type="button" name="" value="按鈕2" id="btn2"> </body> </html>