jQuery代碼節選（事件）

標籤：

事件

1.ready()
$(document).ready(function() {
//代碼
});
簡寫：
$(function( {
//代碼
});
該事件是會在頁面載入完後執行，相當於onloca()，但如果存在onloca()事件，ready()會失效

2.on()
<div class="div1">
<div class="div2"></div>
</div>

$("div").on("click mouseover",".div2",function(){
alert("hello world");
});
on()事件可綁定多個事件，能添加選取器篩選後代元素，上例子匹配div元素選擇.div1元素的後代.div2

3.off()
$("div").off()
刪除div元素上所有事件
$("div").off("click")
刪除div元素上的單擊事件

4.bind()
與on()事件相同，可綁定多個事件，目前本人發現的唯一區別是on()事件比bind()多了一個selector選取器

5.one()
與bin()事件相同，但one()綁定的事件是一次性的，使用一次過後就會被刪除

6.trigger()
$("div").trigger("click");
觸發div元素的單擊事件

7.triggerHandler()
$("div").trigger("click");
改事件功能與trigger()相同，只是triggerHandler()只觸發匹配到的集合的第一個元素，且如果觸發的事件是瀏覽器預設的，那將不被觸發。

8.unbind()
$("div").unbind();
刪除div元素bind()綁定的所有事件
$("div").unbind("click");
刪除div元素bind("click")綁定的事件
經測試unbind()的刪除能力對on()事件綁定的事件一樣有效

9.live()

已被刪除

10.die()

不建議使用

11.delegate()
<ul class="div1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

$(‘.div1‘).delegate(‘li‘,‘click‘,function(){
$(this).css(‘color‘,‘blue‘);
});
單擊ul.div1元素的子項目li後，相對應的li顏色改變
該方法可為選定元素的子類添加事件，子類可為空白 ""，但不能不寫,為空白時事件為自身

12.undelegate()
$(‘.div1‘).undelegate(‘click‘)
$(‘.div1‘).undelegate(‘li‘,‘click‘)
兩者效果相同，清除delegate()方法添加的事件

13.hover()
<ul class="div1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

$(‘.ul1‘).hover(function(){
$(this).css(‘background‘,‘blue‘);
},function(){
$(this).css(‘background‘,‘red‘);
});
hover()是一個模仿懸停事件的方法，第一個function()是移入，第二個是移出，兩者之間用逗號","隔開

14.blur()
<input type="text" id="text" autofocus>

$(function(){
$(‘#text‘).blur();

})
讓文字框失去焦點
$(‘#text‘).blur(
function(){
clg(‘blur‘);
}
);
當文字框失去焦點時，觸發事件

15.change()
<input type="text" id="text">

$(function(){
$(‘#text‘).change();

})
$(‘#text‘).change(
function(){
clg(‘change‘);
}
);
觸發change()事件

16.click()
<input type="text" id="text">

$(function(){
$(‘#text‘).click();

})
$(‘#text‘).click(
function(){
clg(‘click‘);
}
);
觸發click()事件

17.dblclick()
<input type="text" id="text">

$(function(){
$(‘#text‘).dblclick();

})
$(‘#text‘).dblclick(
function(){
clg(‘dblclick‘);
}
);
觸發dblclick()雙擊事件

18.erroe()

19.focus()
<input type="text" id="text">

$(function(){
$(‘#text‘).focus();

})
$(‘#text‘).focus(function(){
clg(‘focus‘);
});
觸發focus()雙擊事件

20.focusin()
<p class="ul2">
這裡是p
<input type="text" id="text">
</p>

$("p").focusin(function() {
$(this).css(‘color‘, ‘blue‘);
});
focusin()方法是當子項目擷取焦點時觸發的

21.focusout()
<p class="ul2">
這裡是p
<input type="text" id="text">
</p>

$("p").focusout(function() {
$(this).css(‘color‘, ‘blue‘);
});
p元素的子項目失去焦點時觸發

22.keydown()
$(window).keydown(function(e){
clg(String.fromCharCode(e.keyCode))
})
按下鍵盤時觸發該事件

23.keypress()
$(window).keypress(function(e){
clg(String.fromCharCode(e.keyCode))
})
該事件與keydown()事件功能相同，都是在鍵盤按下時觸發

24.keyup()
$(window).keyup(function(e){
clg(String.fromCharCode(e.keyCode))
})
送開鍵盤時觸發事件

25.mousedown()
<ul class="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

$(‘.ul1‘).mousedown(function(e){
$(this).css(‘background‘,‘blue‘);
})
按匹配到的元素上按下滑鼠觸發該事件

26.mouseenter()
<ul class="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

$(‘.ul1‘).mouseenter(function(e){
$(this).css(‘background‘,‘blue‘);
})
當滑鼠指標穿過元素時，會發生 mouseenter 事件

27.mouseleave()
<ul class="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

$(‘.ul1‘).mouseleave(function(e){
$(this).css(‘background‘,‘red‘);
})
當滑鼠指標離開元素時，會發生 mouseleave 事件

28.mousemove()
<ul class="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

$(‘.ul1‘).mousemove(function(e){
$(this).css(‘background‘,‘blue‘);
})
當滑鼠指標在指定的元素中移動時，就會發生 mousemove 事件。

29.mouseout()
<ul class="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

$(‘.ul1‘).mouseout(function(e){
$(this).css(‘background‘,‘red‘);
})
當滑鼠指標從元素上移開時，發生 mouseout 事件。

30.mouseover()
<ul class="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

$(‘.ul1‘).mouseover(function(e){
$(this).css(‘background‘,‘red‘);
})
當滑鼠指標位於元素上方時，會發生 mouseover 事件。

31.mouseup()
<ul class="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

$(‘.ul1‘).mouseup(function(e){
$(this).css(‘background‘,‘red‘);
})
當在元素上放鬆滑鼠按鍵時，會發生 mouseup 事件。

32.resize()
$(window).resize(function(){
alert("視窗大小發生改變!")
})
當調整瀏覽器視窗的大小時觸發事件

33.scroll()
$(window).scroll(function(){
alert("捲軸移動了")
})
匹配元素的捲軸移動時觸發事件

34.select()
<input type="text" id="text">

$(‘#text‘).select(function(){
clg(‘select‘);
})
當 textarea 或文本類型的 input 元素中的文本被選擇時，會發生 select 事件

35.submit()
$(‘form‘).submit()
提交表單
$(‘form‘).submit(function(){
alert("提交表單")
})
當提交表單時，會發生 submit 事件。

jQuery代碼節選（事件）