資料來源
1. jQuery名稱沖突
解決方法
var $jquery = jQuery.noConflict();
2.ready()--文檔準備就緒
當DOM已經加載完成，并且頁面（包含圖像）已完全呈現，觸發ready事件
用法
1. $(document).ready(function() {
//do sth
});
2. $().ready(function() {});
3. $(function() {});
注意
ready只能用于document對象
ready與<body onload="">不應該一起使用
3. load
當指定元素及其子元素加載完成時，觸發load事件
$(selector).load(function() {})
4.事件綁定bind
4.1綁定單個事件
$(selector).bind(event-type,fn);
栗子
JS
var isClick = true;
$('.box1').bind('click',function() {
if(isClick) {
$('.box1').css('width','200px');
isClick =false;
}else{
$('.box1').css('width','100px');
isClick =true;
}
});
效果展示
4.2綁定多個事件
$(selector).bind({
event1: function() {},
event2: function() {}
....
})
栗子
JS
$('.box').bind({
mouseover:function() {
$('.box').css('background-color','#0f0');
},
mouseout:function() {
$('.box').css('background-color','#f00');
}
});
效果展示
5.聚焦、失焦事件
5.1聚焦事件focus
當元素獲得焦點時觸發該事件；
$(selector).focus(function() {});
也可以不使用回調函數；
當通過鼠標點擊選中元素或通過 tab 鍵定位到元素時，該元素就會獲得焦點；
5.2失焦事件blur
當元素失去焦點時發生 blur 事件
$(selector).blur(fn);
也可以不使用回調函數；
栗子
JS
$('input:button').focus(function() {
$('input:button').css('background-color','aqua');
});
$('input:button').blur(function() {
$('input:button').css('background-color','aquamarine');
});
效果展示
6.變化
6.1元素值發生改變--change
當元素的值發生改變時觸發change事件。
$(selector).change(function);
注意
該事件只適用于文本域 text field、text area、和 select 元素。
當用于 select 元素時，change 事件會在選擇某個選項時發生。當用于 text field 或 text area 時，該事件會在元素失去焦點時發生。
栗子
JS
$('input:text').change(function() {
$('input:text').css('background-color','#f00');
});
$('textarea').change(function() {
$('textarea').css('background-color','#0ff');
});
$('select').change(function() {
$(this).css('color','#00a0e6');
});
效果展示
7.鼠標事件
7.1鼠標單擊事件
當單擊元素時，觸發click事件；
$(selector).click(function() {});
當鼠標指針停留在元素上方，然后按下并松開鼠標左鍵時，就會發生一次 click；
7.2鼠標雙擊事件
當雙擊元素時，觸發dbclick事件；
$(selector).dblclick(function() {});
注意
避免鼠標單擊事件和鼠標雙擊事件作用于同一個元素上。
栗子
JS
$('.c').click(function() {
$(this).html('單擊事件');
});
$('.db').dblclick(function() {
$(this).html('鼠標雙擊事件');
});
效果展示
7.3鼠標滑入事件mouseover
當鼠標指針滑入元素內時，觸發該事件;
$(selector).mouseover(function() {});
注意
與 mouseenter 事件不同，不論鼠標指針穿過被選元素或其子元素，都會觸發 mouseover 事件。只有在鼠標指針穿過被選元素時，才會觸發 mouseenter 事件；
在有嵌套關系的元素上使用該事件，需要設置阻止事件冒泡
7.4鼠標滑出事件mouseover
當鼠標指針從元素上移開時，觸發mouseout 事件；
$(selector).mouseout(funciton() {});
注意
與 mouseleave 事件不同，不論鼠標指針離開被選元素還是任何子元素，都會觸發 mouseout 事件。只有在鼠標指針離開被選元素時，才會觸發 mouseleave 事件；
栗子
JS
$('.m').mouseover(function() {
$(this).css({'height':'300px','width':'300px'});
}).mouseout(function() {
$(this).css({'height':'200px','width':'200px'});
});
效果展示
7.5鼠標移入事件mouseenter
當鼠標指針穿過元素時，會觸發mouseenter 事件
$(selector).mouseenter(function() {})
7.6鼠標移出事件 mouseleave
當鼠標指針離開元素時，會觸發mouseleave 事件。
$(selector).mouseleave(function() {});
栗子
JS
$('.e').mouseenter(function() {
$(this).animate({'width':'400px','background-color':'olive'});
}).mouseleave(function() {
$(this).animate({'width':'200px','background-color':'darkgoldenrod'});
});
展示效果
7.7 鼠標指針移動事件mousemove
當鼠標指針在指定的元素中移動時，就會發生 mousemove 事件
$(selector).mousemove(function() {})
用戶把鼠標移動一個像素，就會發生一次 mousemove 事件。處理所有 mousemove 事件會耗費系統資源。請謹慎使用該事件。
栗子
JS
$('.move').mousedown(function(event) {
/*
* 鼠標初始位置
*/
var x = event.clientX-$('.move')[0].getBoundingClientRect().left;
var y = event.clientY-$('.move')[0].getBoundingClientRect().top;
$(document).mousemove(function(event) {
var l = event.clientX- x;
var t = event.clientY- y;
if(l <=0) {l =0;}
if(t <=0) { t =0;}
if(l >=$('.parent')[0].offsetWidth-$('.move')[0].offsetWidth) {
l =$('.parent')[0].offsetWidth-$('.move')[0].offsetWidth;
}
if( t >=$('.parent')[0].offsetHeight-$('.move')[0].offsetHeight) {
t =$('.parent')[0].offsetHeight-$('.move')[0].offsetHeight;
}
$('.move').css({
'left': l +'px',
'top': t +'px'
});
event.cancelBubble=true;
});
/* 鼠標彈起時 */
$(document).mouseup=function() {
// 釋放全局捕獲
if($('.move').releaseCapture) {
$('.move').releaseCapture();
}
$(document).mousemove=null;
$(document).mouseup=null;
};
/* IE8 取消默認行為-設置全局捕獲 */
console.log($('.move'));
if($('.move').setCapture) {
$('.move').setCapture();
}
return false;
});
實現效果
7.8鼠標按鍵按下mousedown
當鼠標指針移動到元素上方，并按下鼠標按鍵時，會發生 mousedown 事件。
$(selector).mousedown(function() {})
7.9鼠標按鍵彈起mouseup
當在元素上放松鼠標按鈕時，會發生 mouseup 事件
$(selector).mouseup(funciton() {})
栗子
HTML
<div class="box"></div>
CSS
.box{width:300px;height:300px;margin:100px;background:indianred;transition:all 0.5s ease;}
.new{transform:rotate(45deg);}
JS
$(function() {
$('.box').mousedown(function(event) {
$('.box').addClass('new');
}).mouseup(function() {
$('.box').removeClass('new');
});
});
效果展示
8.鍵盤事件
8.1按鍵按下事件keydown
完整的 key press 過程分為兩個部分：1. 按鍵被按下；2. 按鍵被松開。
當按鈕被按下時，發生 keydown 事件。
如果在文檔元素上進行設置，則無論元素是否獲得焦點，該事件都會發生。
提示：請使用.which 屬性來確定按下了哪個按鍵
$(selector).keydown()
8.2按鍵彈起事件keyup
完整的 key press 過程分為兩個部分，按鍵被按下，然后按鍵被松開并復位。
當按鈕被松開時，發生 keyup 事件。它發生在當前獲得焦點的元素上。
提示：請使用.which 屬性來確定按下了哪個按鍵
$(selector).keyup()
8.3按鍵事件keypress
keypress 事件與 keydown 事件類似。當按鈕被按下時，會發生該事件。它發生在當前獲得焦點的元素上。
不過，與 keydown 事件不同，每插入一個字符，就會發生 keypress 事件。
如果在文檔元素上進行設置，則無論元素是否獲得焦點，該事件都會發生。
$(selector).keypress()
瀏覽器差異：Internet Explorer 使用 event.keyCode 取回被按下的字符，而 Netscape/Firefox/Opera 使用 event.which
9.事件對象event
event.target:觸發某個事件的DOM元素
event.type: 事件的類型
event.which: 顯示按了哪個鍵
event.preventDefault(); 阻止默認事件
