梦蓝樱飞(一点一滴, 记录个人成长之路)

时光荏苒,祝愿勿忘曾经的初心 && 活在当下,一定做好现在的事情

jquery对节点的操作

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

阅读更多
版权声明:本文为 梦蓝樱飞 原创文章,可以随意转载,但真诚希望在明确位置注明原文超链接的出处!!! 非常感谢! https://blog.csdn.net/menglanyingfei/article/details/79292699
上一篇jquery对于属性和事件的操作
下一篇使用原生JS发送ajax异步请求
想对作者说点什么? 我来说一句

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

关闭
关闭