Jquery對(duì)事件的綁定

$().bind(“事件類型”, 事件處理); 給jquery綁定一個(gè)事件
$().bind(“事件類型1 事件類型2 事件類型3..”, 事件處理)
綁定多個(gè)事件類型并且使用同一個(gè)處理程序决左。
$().bind({
事件類型1:處理程序,
事件類型2:處理程序,
事件類型3:處理程序...
});

image.png

image.png

$(function () {
        $("div").mouseout(function () {
            $(this).css("background-color", "");
        });
        // bind("事件類型", 處理程序)
        $("div").bind("mouseover", function () {
            $(this).css("background-color", "lightgreen");
        });

        // bind("事件類型1 事件類型2 ...", 處理程序) 使用不多, 事件類型之間只能是一個(gè)空格
        $("div").bind("mouseover mouseout click", function () {
            alert("Hello World");
        });
    })

$(function () {
        // $().bind(json對(duì)象) {key: value, key:value}
        $("div").bind({
            mouseover: function () {
                $(this).css("background-color", "lightgreen");
            },
            mouseout: function () {
                $(this).css("background-color", "pink");
            },
            click: function () {
                $(this).css("color", "white");
            }
        });
    });

Jquery取消事件綁定

$().unbind(); 取消jquery對(duì)象的所有綁定事件
$().unbind(“事件類型”); 取消jquery對(duì)象的某種綁定事件
$().unbind(“事件類型”, 處理程序的有名函數(shù));
取消某個(gè)單獨(dú)的事件

        function fa(){
            alert("aaaa");
        }
        function fb(){
            alert("bbbb");
        }
        function fc(){
            alert("cccc");
        }
        $(function(){
            //$().bind(json對(duì)象)   {key:value,key:value}
            $("div").bind({
                mouseover:function(){
                    $(this).css("background-color","lightblue");
                },
                mouseout:function(){
                    $(this).css("background-color","pink");
                },
                click:function(){
                    $(this).css("color","white");
                }
            });
            
            $("div").bind("click",fa);
            $("div").bind("click",fb);
            $("div").bind("click",fc);
        });
        
        //給button綁定點(diǎn)擊事件
        $("button").click(function(){
            //取消div的所有事件
            //$("div").unbind();
            //取消div的單擊事件
            //$("div").unbind("click");
            
            //取消 處理程序?yàn)閒c函數(shù)的單擊事件
            $("div").unbind("click",fc);
        });

Jquery中的簡(jiǎn)單的動(dòng)畫效果

基本的顯示和隱藏:
show(speed,callBack)
hide(speed,callBack)
toggle(speed,callback); 如果是隱藏就顯示，反之 則隱藏

        //給button綁定點(diǎn)擊事件
        $("#btn1").click(function(){
            $("div").show(1000,function(){
                alert("我又回來(lái)啦");
            });
        });
        
        $("#btn2").click(function(){
            //hide(speed,callback)  speed:毫秒值
            $("div").hide(1000,function(){
                alert("我消失了");
            });
        });
        
        function aa(){
            //hide(speed,callback)  speed:毫秒值
            $("div").toggle(1000,function(){
                
            });
        }
        $("#btn3").click(aa);
        //定時(shí)器執(zhí)行
        window.setInterval(aa, 1000);

Jquery對(duì)于節(jié)點(diǎn)的操作

父子關(guān)系添加節(jié)點(diǎn)

$().append(); 主動(dòng)添加在末尾
$().appendTo(): 被動(dòng)添加在末尾
$().prepend() 主動(dòng)添加在開頭
$().prependTo() 被動(dòng)添加在開頭

image.png

兄弟關(guān)系添加節(jié)點(diǎn)

after() 在后面添加
before() 在前面添加
insertAfter() 被動(dòng)在后面添加
insertBefore() 被動(dòng)在前面添加

image.png

替換節(jié)點(diǎn)

replaceAll() 主動(dòng)替換
replaceWith() 被動(dòng)替換

image.png

刪除節(jié)點(diǎn)

empty() 清除某個(gè)節(jié)點(diǎn)下的所有子節(jié)點(diǎn)
remove() 清除某些節(jié)點(diǎn)

image.png

復(fù)制節(jié)點(diǎn)

clone() 該方法只會(huì)復(fù)制節(jié)點(diǎn)的內(nèi)容 而不會(huì)復(fù)制事件
clone(true) 該方法不光復(fù)制節(jié)點(diǎn)的內(nèi)容 還復(fù)制事件

image.png

完整代碼地址

image.png

https://github.com/menglanyingfei/front-end-Learning/tree/master/jquery/jquery-day03