jquery对节点的操作

版权声明:本文为 梦蓝樱飞 原创文章,可以随意转载,但真诚希望在明确位置注明原文超链接的出处!!! 非常感谢! https://blog.csdn.net/menglanyingfei/article/details/79292699

Jquery对事件的绑定

().bind(,);jquery().bind(“事件类型1 事件类型2 事件类型3..”, 事件处理)
绑定多个事件类型并且使用同一个处理程序。
$().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 ...", 处理程序) 使用不多, 事件类型之间只能是一个空格
        $("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);

Jquery对于节点的操作

父子关系添加节点

().append();().appendTo(): 被动添加在末尾
().prepend()().prependTo() 被动添加在开头
image.png

兄弟关系添加节点

after() 在后面添加
before() 在前面添加
insertAfter() 被动在后面添加
insertBefore() 被动在前面添加
image.png

替换节点

replaceAll() 主动替换
replaceWith() 被动替换

image.png

删除节点

empty() 清除某个节点下的所有子节点
remove() 清除某些节点
image.png

复制节点

clone() 该方法只会复制节点的内容 而不会复制事件
clone(true) 该方法不光复制节点的内容 还复制事件
image.png

完整代码地址

image.png

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

阅读更多
换一批

没有更多推荐了,返回首页