例子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>
