jquery对节点的操作

作者: 梦蓝樱飞2020 | 来源:发表于2018-02-08 16:13 被阅读16次

jquery对节点的操作
四、jQuery属性操作
jQuery事件
jQuery学习总结之DOM操作篇
jQuery节点操作，jQuery插入节点，jQuery删除节点
Day23——jQuery
jQuery节点操作
jQuery节点操作
jQuery —— 节点操作
JQuery节点操作

Jquery对事件的绑定

$().bind(“事件类型”, 事件处理); 给jquery绑定一个事件
$().bind(“事件类型1 事件类型2 事件类型3..”, 事件处理)
绑定多个事件类型并且使用同一个处理程序。
$().bind({
事件类型1:处理程序,
事件类型2:处理程序,
事件类型3:处理程序...
});

image.png

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

        // bind("事件类型1 事件类型2 ...", 处理程序) 使用不多, 事件类型之间只能是一个空格
        $("div").bind("mouseover mouseout click", function () {
            alert("Hello World");
        });
    })

$(function () {
        // $().bind(json对象) {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对象的所有绑定事件
$().unbind(“事件类型”); 取消jquery对象的某种绑定事件
$().unbind(“事件类型”, 处理程序的有名函数);
取消某个单独的事件

        function fa(){
            alert("aaaa");
        }
        function fb(){
            alert("bbbb");
        }
        function fc(){
            alert("cccc");
        }
        $(function(){
            //$().bind(json对象)   {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绑定点击事件
        $("button").click(function(){
            //取消div的所有事件
            //$("div").unbind();
            //取消div的单击事件
            //$("div").unbind("click");
            
            //取消 处理程序为fc函数的单击事件
            $("div").unbind("click",fc);
        });

Jquery中的简单的动画效果

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


        //给button绑定点击事件
        $("#btn1").click(function(){
            $("div").show(1000,function(){
                alert("我又回来啦");
            });
        });
        
        $("#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);
        //定时器执行
        window.setInterval(aa, 1000);