JQuery事件與動畫總結

標籤：高度   資源   點擊事件   調用   isp   round   css   style   用法   

1、載入DOM

 

1.1.window事件

 

window.onload=function(){}.... 時機：其他資源都載入完畢後，再執行

 

$(function(){}) ……：只是等待標籤完畢，即可執行

 

區別：

① window.onload需在網頁所有內容載入完成之後執行(包括圖片音頻)
文檔就緒函數:只需要在網頁DOM結構載入以後便執行
② window.onload只能寫一個，寫多個只會執行最後一個
文檔就緒函數:可以寫多個，也不會被覆蓋

window.onload() = function () {    }    $(function () {      $("li").bind("click", function () {        $(this).css("background","red");      });    });    $(function () {      $("div").bind("click", function () {        $(this).css("background", "red");      });    });

2、JQuery中的事件

 

①事件綁定捷徑

$("button:first").click(function(){alert("666");});

（1）使用on綁定事件

 

① 使用on 進行單事件綁定

$("button").on("click",function(){//$(this) 取到當前呼叫事件函數的對象console.log($(this).html())})

② 使用on同時為多個事件，綁定同一函數

$("button").on("click mouseover",function(){console.log($(this).html())})

③ 調用函數時，傳入自訂參數

$("button").on("click",{name:"哈哈哈"},function(event){                    //使用event.data.屬性名稱找到傳入的參數                    console.log(event.data.name)

④ 使用on進行多時間多函數綁定

$("button").on({click:function(){console.log("click")},mouseover:function(){console.log("mouseOver");alert("哈哈哈")}});

⑤ 使用on進行事件委派：將原本需要綁定到某元素上的事件，改為綁定在父元素乃至根節點上，然後委派給當前元素生效；
作用:預設的綁定方式，只能綁定到頁面初始時已有的p元素，當頁面新p元素時，無法綁定到新元素上；
使用事件委派方式，當頁面新增元素時，可以為所有新元素繫結事件

$(document).on("click","button",function(){alert("富強民主和諧愛國敬業");});$("button").on("click",function(){var p = $("<p>3333<p>");$("p").after(p);})$(document).on("click","p",function(){alert("富強民主和諧愛國敬業");});

（2）.off()事件綁定

1、$("p").off():取消所有事件;
2、$("p").off("click"):取消點擊事件;
3、$("p").off("click mouseover"):取消多個事件;
4、$(document).off("click","on"):取消事件委派。

off事件綁定的使用方法和on的用法基本都相同，這裡我就不一一贅述了。

（3）、.one()事件綁定

這個one綁定用法什麼的都一樣，就一個不同使用.one()綁定的函數，只能執行一次

 

$("button").one("click",function(){                    alert("富強民主和諧愛國敬業");                })

 

3、動畫

 

 

<p>動畫動畫動畫</p>

 

　　　　　　p{                width: 00px;                height: 0px;                background-color: red;                display: none;            }

.show

① 不傳參：讓隱藏的元素直接顯示，不進行動畫
② 傳入時間：多少毫秒之內完成動畫
③ 傳入（時間，函數）：完成動畫後，執行回呼函數
>>> show()動畫執行效果：同時修改元素的寬度、高度、opacity屬性

$("p").show(2000,,function(){
alert("已經完成");
})

.hide():讓顯示元素隱藏，與show相反；

.slideDown():讓隱藏元素顯示，效果為從上往下，增加高度；
.slideUp():讓顯示的元素隱藏，效果為從下往上，減小高度；
.slideToggle():讓顯示的隱藏，讓隱藏的顯示
.fadeOut():讓顯示元素隱藏，淡出
.fadeIn():讓隱藏元素顯示，淡入
.fadeToggle():讓顯示的隱藏，讓隱藏的顯示。淡入淡出
.fadeTo(時間，透明度，函數)：同fadeToggle,但是多了透明度參數,可以指定顯示的最終透明度
.animate({最終的樣式屬性索引值對}，動畫時間，動畫效果("linear""swing"),回呼函數)：自訂動畫。

 

JQuery事件與動畫總結