欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JQuery中的常用事件、對象屬性與使用方法分析

 更新時間:2019年12月23日 09:42:19   作者:theVicTory  
這篇文章主要介紹了JQuery中的常用事件、對象屬性與使用方法,結(jié)合實例形式分析了jquery事件、對象屬性、方法相關(guān)使用技巧,需要的朋友可以參考下

本文實例講述了JQuery中的常用事件、對象屬性與使用方法。分享給大家供大家參考,具體如下:

JQuery中的常用事件

.click()

鼠標單擊觸發(fā)事件,參數(shù)可選(data,function)

.dblclick()

雙擊觸發(fā),同上

.mousedown()/up()

鼠標按下/彈起觸發(fā)事件

.mousemove()

鼠標移動事件

.mouseover()/out()

鼠標移入/移出觸發(fā)事件

.mouseenter()/leave()

鼠標進入/離開觸發(fā)事件*

.hover(func1,func2)

鼠標移入調(diào)用func1函數(shù),移出調(diào)用func2函數(shù)

.focusin()

鼠標聚焦到該元素時觸發(fā)事件

.focusout()

鼠標失去焦點時觸發(fā)事件

. focus()/.blur()

鼠標聚焦/失去焦點觸發(fā)事件(不支持冒泡)

.change()

表單元素發(fā)生改變時觸發(fā)事件

.select()

文本元素被選中時觸發(fā)事件

.submit()

表單提交動作觸發(fā)*

.keydown()/up()

鍵盤按鍵按下/彈起觸發(fā)

.on()

多事件的綁定

.off()

移除事件的綁定

.trigger(“event”)

觸發(fā)事件event調(diào)用

.triggerHandler()

觸發(fā)事件,不會冒泡,不會觸發(fā)默認事件

注:

1、以上事件函數(shù)有三種用法:

//直接綁定事件到元素上
$('.target1').keydown(function(e) {
  $("em:first").text(e.target.value)  //通過對象e獲取輸入的值
});

//傳遞參數(shù)調(diào)用函數(shù)處理
$("#test").click(11111,function(e) {
  //this指向 div元素
  //e.data => 11111 通過e傳遞參數(shù)數(shù)據(jù)
});

//手動觸發(fā)已綁定的點擊事件
$elem.click()

2、mouseover與mouseenter區(qū)別:不論鼠標指針穿過被選元素或其子元素,都會觸發(fā) mouseover 事件,稱作支持冒泡處理,冒泡處理指子元素與父元素共同定義的事件,在觸發(fā)子元素時,或者沒有定義子元素,事件就會向父級傳播,引發(fā)父級事件觸發(fā)。只有在鼠標指針穿過被選元素時,才會觸發(fā) mouseenter 事件。

3、form元素是有默認提交表單的行為,如果通過submit處理的話,需要禁止瀏覽器的這個默認行為。傳統(tǒng)的方式是調(diào)用事件對象  e.preventDefault() 來處理, jQuery中可以直接在函數(shù)中最后結(jié)尾return false即可。

  //回車鍵或者點擊提交表單后禁止瀏覽器默認跳轉(zhuǎn):
  $('#target2').submit(function() {
    alert('捕獲提交表達動作,阻止頁面跳轉(zhuǎn)')
    return false;
  });

4、on()使用

基本用法:.on( events ,[ selector ] ,[ data ] )

最常見的給元素綁定一個點擊事件,對比一下快捷方式與on方式的不同

$("#elem").click(function(){}) //快捷方式
$("#elem").on('click',function(){}) //on方式

//多個事件綁定同一個函數(shù),通過空格分離,傳遞不同的事件名,可以同時綁定多個事件
$("#elem").on("mouseover mouseout",function(){ });

//多個事件綁定不同函數(shù)
$("#elem").on({
  mouseover:function(){}, 
  mouseout:function(){}
});

//將數(shù)據(jù)傳遞到處理程序
$( "button" ).on( "click", {  //第二個參數(shù)傳遞數(shù)據(jù)給函數(shù)調(diào)用
 name: "Mr.Tory"
}, greet );
function greet( event ) {
 alert( "Hello " + event.data.name ); //輸出Hello Mr.Tory
}

事件對象的屬性與方法

.type

事件類型.如果使用一個事件處理函數(shù)來處理多個事件, 可以使用此屬性獲得事件類型,比如click

.data

事件調(diào)用時傳入額外參數(shù)

.target

觸發(fā)該事件的 DOM 元素

.which

指示按了哪個鍵或按鈕

.timeStamp

該屬性返回從 1970 年 1 月 1 日到事件發(fā)生時的毫秒數(shù)

.pageX/Y

相對于文檔左/上邊緣的鼠標位置

.result

上一個相同事件處理器函數(shù)返回的值

.preventDefalut()

阻止事件的默認動作

.stopPropagation()

取消事件冒泡

$("#content").click(function(event) {
  $("#msg").html("<p>外層div元素被單擊</p>");
  event.stopPropagation();             //通過event方法阻止事件冒泡
});

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具 http://tools.jb51.net/code/HtmlJsRun 測試上述代碼運行效果。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)

希望本文所述對大家jQuery程序設(shè)計有所幫助。

相關(guān)文章

最新評論