jQuery中事件與動畫的總結(jié)

宜賓翠屏區(qū) 2019-05-01

展開全文

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ā)或?qū)⒑瘮?shù)綁定到指定元素的click事件
mouseover(): 觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的mouseover事件
mouseout() ：觸發(fā)或?qū)⒑瘮?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ā)或?qū)⒑瘮?shù)綁定到指定元素的keydown事件
keyup(): 釋放按鍵時,、觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的keyup事件
keypress(): 產(chǎn)生可打印的字符時,、觸發(fā)或?qū)⒑瘮?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ā)或?qū)⒑瘮?shù)綁定到指定元素的focus事件
blur() : 失去焦點,、觸發(fā)或?qū)⒑瘮?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等基礎(chǔ)事件,，此外也還可以是自定義事件
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()使用的隱藏域?qū)儆?br> 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()方法的一種內(nèi)置了特定樣式的簡寫形式,這些特定的樣式值可以為"show"、"hide",、"toggle",也可以自定義數(shù)值

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