jquery中的事件和動畫

時間 2019-12-14

標籤 jquery 事件動畫欄目 JQuery 简体版

原文原文鏈接

jquery中的事件和動畫 javascript

1、jquery的事件 html

$(document).ready() 與 javascript中的 window.onload() 的對比； java

簡寫成: $(function(){}); $() <==>$(document) jquery

綁定事件 bind(type,[,data],fn) ide

第一個參數是類型；如:click... 函數

第二個參數爲可選參數,做爲event.data屬性值傳遞給事件對象的額外數據對象；動畫

第三個參數是用來綁定的處理函數； spa

簡寫： $(".hello").bind("click",function(e){}); <====> $(".hello").click(function(){}); orm

合成事件 hover(enter,leave) htm

當鼠標移動到元素上時，觸發第一個函數；當鼠標離開元素時，觸發第二個函數；

合成事件 toggle(fn1,fn2,fn3.....fnN)

當第一次單擊時觸發第一個函數，第二次時觸發第二個函數.......依次循環

toggle() 還能夠切換元素的可見狀態

事件冒泡

例如：

Html代碼

<html>
<body>
<div>
<span>
</span>
</div>
</body>
</html>
給body、div、span 都綁定一個click事件。

若是單擊 span 元素後。。。span、div、body 的click 事件都會被執行；這就叫事件冒泡（從裏往外）

1、中止事件冒泡 event.stopPropagation() <====> return false;

2、阻止默認行爲 如submit的提交行爲；超連接的跳轉行爲等

event.preventDefualt() <====> return false;

event.type() 獲取事件類型。

event.target() 獲取觸發事件的元素。

event.pageX() 和 event.pageY() 獲取到光標至關於頁面的X、Y座標。

event.which() 在鼠標單擊事件中獲取到鼠標的左、中、右鍵；以及鍵盤事件中獲取鍵盤的按鍵。

event.metaKey() 在鍵盤事件中獲取<ctrl>按鍵。

event.originalEvent() 指向原始的事件對象。

模擬事件操做

1、trigger(type,[,data])

Js代碼

$(".btn").trigger("click");//當加載完成時，就執行class="btn" 的click事件
//等價於 $(".btn").click();

2、 trigger() 與 triggerHandler() 的區別

Js代碼

$("input").trigger("myclick");//執行完myclick事件後，聚焦到input文本框
$("input").triggerHandler("myclick");//執行完myclick事件後，不會聚焦input文本框

動畫

1、show() 和 hide() 不帶參數表示當即顯示或隱藏元素

JQUERY 的動畫要求在標準模式 下進行，不然有可能發生抖動；標準模式便是要求文件頭部包含以下的DTD定義：

Html代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

默認值： fast = 200ms normal = 400ms slow = 600ms

2、fadeIn() 和 fadeOut() 只改變元素的不透明度 ，不會改變元素的高度和寬度

3、slideUp() 和 slideDwon() 只改變元素的高度。

4、自定義動畫 animate()

5、中止動畫 stop()

6、其它的動畫方法

toggle(speed,[callback]) 切換元素的可見狀態

slideToggle(speed,[callback]) 經過高度的變化，來切換元素的可見性

fadeTo(speed,opacity,[callback]) 以漸進的方式來改變元素的不透明度，不改變高度和寬度

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。