jQuery中事件與動畫的總結分享

更新時間：2016年05月24日 11:54:50 投稿：jingxian

下面小編就為大家?guī)硪黄猨Query中事件與動畫的總結分享。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

1.加載DOM

1.1.window事件

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

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

區(qū)別：前者在HTML頁面中只能解析最后一個,二后者是N個

window.onload() = function () {

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

第一部分--事件

2.鼠標事件

2.1 常用鼠標事件的方法

click() :單擊事件、觸發(fā)或將函數(shù)綁定到指定元素的click事件

mouseover(): 觸發(fā)或將函數(shù)綁定到指定元素的mouseover事件

mouseout() ：觸發(fā)或將函數(shù)綁定到指定元素的mouseout的事件

經(jīng)典的光棒效果:

$(function () {
      $("input").click(function () {
        $("li").mouseover(function () {
          $(this).css("background", "green");
        }).mouseout(function () {
          //this.style.background = "";
          this.style.cssText = "background:";
        });
      });
    });

3.鍵盤事件

3.1 常用鍵盤事件的方法

keydown(): 按下按鍵時、觸發(fā)或將函數(shù)綁定到指定元素的keydown事件

keyup(): 釋放按鍵時、觸發(fā)或將函數(shù)綁定到指定元素的keyup事件

keypress(): 產(chǎn)生可打印的字符時、觸發(fā)或將函數(shù)綁定到指定元素的keypress事件

$(function () {
      $("p input").keyup(function () {
        $("#events").append("keyup");
      }).keydown(function () {
        $("#events").append("keydown");
      }).keypress(function () {
        $("#events").append("keypress");
      });
      $(document).keydown(function (event) {
        if (event.keyCode == "13") {
          //按enter鍵
          alert("確認要提交么?");
        }
      });
    });

4.表單事件

4.1 常用表單事件的方法

focus() : 獲得焦點、觸發(fā)或將函數(shù)綁定到指定元素的focus事件

blur() : 失去焦點、觸發(fā)或將函數(shù)綁定到指定元素的blur事件

$(function () {
        //給文本框添加邊框樣式
        $("input").focus(function() {
          $(this).addClass("myclass");
        }).blur(function() {
          $(this).removeClass("myclass");
        });
    });

5.綁定事件與移除事件

5.1 綁定事件

語法:

bind(type,[data],fn),其中data不是必需的

type:事件類型、主要包括blur、focus、click、mouseout等基礎事件，此外也還可以是自定義事件

fn :用來綁定的處理函數(shù)

$(function () {      //給li綁定click事件、并進行樣式修改
      $("li").bind("click", function () {
        $(this).css("background","red");
      });
    });

5.2 同時綁定多個事件

$(function () {
      $("li").bind({
        mouseover: function() {
          $(this).css("background", "pink");
        }, mouseout: function() {
          $(this).css("background", "gray");
        }
      });
    });

5.3 移除事件與同時移除多個事件

unbind([type],[fn]) 與綁定事件剛好相反,如果方法沒有參數(shù)則表示移除全部的事件

unbind如果要移除多個只需在兩兩之間添加一個空格即可

$(function () {
      $("li").unbind("click");      $("li").unbind("mouseover mouseout");
    });

5.4 一些其他的綁定與移除的方法

1.live() unbind()

2.on() jQuery1.7版本之后才有的方法 off()

3.delegate() undelegate()

6. 復合事件

6.1 hover()方法

語法:

hover(enter,leave); 該方法相當于mouseover與mouseout事件的組合

$("li").hover(function() {
        $("li").css("background", "gray");
      }, function() {
        $("li").css("background", "green");
      });

6.2 toggle()方法

語法:

toggle(fn1,fn2,……,fnN); 該方法用于模擬鼠標連續(xù)click事件,單鼠標單擊一次就執(zhí)行一個fn,從頭開始按順序執(zhí)行,tolgge()使用的隱藏域屬于

display,它在瀏覽器中是不占用位置的，與它相同的visibility是占用的

$("body").toggle(function () {
        $("li").css("background", "gray");
      }, function () {
        $("li").css("background", "green");
      }, function () {
        $("li").css("background", "blue");
      });

接下來再看看第二部分--動畫

1. 控制元素顯示與隱藏

語法:

$(select).show([speed],[callback]);

與show()方法相對的是hide()方法，該方法可以控制元素隱藏。

語法:

$(select).hide([speed],[callback]); 除了可以控制元素的隱藏外,還能定義隱藏元素時的效果，如隱藏速度

注意:絕大多數(shù)情況下,hide()方法與show()方法總是在一起使用

2. 控制元素透明度

2.1 控制元素淡入

語法:

$(select).fadeIn([speed],[callback]);

與show()方法相對的是fadeOut()方法，該方法可以控制元素淡出。

3. 改變元素高度

3.1 方法 slideUp()和slideDown()

slideDown()會將元素從上向下延伸顯示,slideUp()方法正好相反,元素會從下到上縮短直至隱藏。

$(function () {
      $("#btnshow").click(function () {
        $("img").show(1000);
      });
      $("#btnhide").click(function () {
        $("img").hide(1000);
      });
    });
    $(function () {
      $("#btnin").click(function () {
        $("img").fadeIn(5000);
      });
      $("#btnout").click(function () {
        $("img").fadeOut(5000);
      });
    });
    $(function () {
      $("#btnup").click(function () {
        $("img").slideUp(5000);
      });
      $("#btndown").click(function () {
        $("img").slideDown(5000);
      });
    });

4.animate()方法是用來自定義動畫的

當我們需要對動畫有更多的控制時,使用animate()方法能夠更具有靈活性,因為它可以替換其他所有的方法

$(function () {
      $("[type=button]").bind("click", function () {
        //兩個特效并行執(zhí)行，不加入隊列：
        $("div").
        animate({ "font-size": "50px" }, 3000)
        .animate({ "width": "300px" }, { queue: false, duration: 3000 });
      });
    });

4.1 animate()方法替換一些其他的方法

//替換show()方法
        //$("img").show(1000);
        $("img").animate({height:"show",width:"show",opacity:"show"},1000);
        //替換fadeIn()方法
        $("img").fadeIn(5000);
        $("img").animate({opacity:"show"},5000);
 
        //替換slideDown()方法        $("img").slideDown(5000); 
        $("img").animate({ height: "show" }, 5000);

這些動畫就是animate()方法的一種內置了特定樣式的簡寫形式,這些特定的樣式值可以為"show"、"hide"、"toggle",也可以自定義數(shù)值

$("div").click(function() { $(this).next().toggle(); $(this).next().fadeTo(600,0.2); $(this).next().fadeToggle(); $(this).next().slideToggle(); });

以上這篇jQuery中事件與動畫的總結分享就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

jQuery實現(xiàn)的粘性滾動導航欄效果實例【附源碼下載】
這篇文章主要介紹了jQuery實現(xiàn)的粘性滾動導航欄效果,涉及jQuery插件smint的相關使用技巧,并附帶完整實例源碼供讀者下載參考,需要的朋友可以參考下
2017-10-10
JQuery插件fancybox無法在彈出層使用左右鍵的解決辦法
本篇文章主要是對JQuery插件fancybox無法在彈出層使用左右鍵的解決辦法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12
jQuery 改變P標簽文本值方法
下面小編就為大家分享一篇jQuery 改變P標簽文本值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
jQuery基于ajax實現(xiàn)頁面加載后檢查用戶登錄狀態(tài)的方法
這篇文章主要介紹了jQuery基于ajax實現(xiàn)頁面加載后檢查用戶登錄狀態(tài)的方法,結合實例形式較為詳細分析了jQuery結合ajax進行表單登陸驗證操作的具體步驟與相關操作技巧,需要的朋友可以參考下
2017-02-02
jQuery?UI旋轉器部件Spinner?Widget
這篇文章介紹了jQuery?UI旋轉器部件Spinner?Widget，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-06-06
JQuery中層次選擇器用法實例詳解
這篇文章主要介紹了JQuery中層次選擇器用法,以實例形式較為詳細的分析了jQuery中層次選擇器的各種常見使用技巧,并備有較為詳細的注釋說明,需要的朋友可以參考下
2015-05-05
jQuery實現(xiàn)ajax調用WCF服務的方法(附帶demo下載)
這篇文章主要介紹了jQuery實現(xiàn)ajax調用WCF服務的方法,以完整實例形式分析了jQuery的ajax前端調用及后臺交互調用WCF服務的相關技巧,并附帶完整實例共讀者下載,需要的朋友可以參考下
2015-12-12
jQuery 使用手冊(三)
jQuery 使用手冊，大家可以耐心的看完，就基本上入門了。
2009-09-09
Jqgrid之強大的表格插件應用
jqGrid是一款基于jQuery的功能強大的表格插件，使用jqGrid可以輕松實現(xiàn)前端頁面與后臺數(shù)據(jù)進行ajax異步通信，jqGrid運行速度相當快，可以很好的應用在一些后臺管理系統(tǒng)來管理大量數(shù)據(jù)的場合
2015-12-12
jQuery 性能優(yōu)化指南（1）
在jQuery中最快的選擇器是ID選擇器，因為它直接來自于JavaScript的getElementById()方法
2009-05-05