jquery对节点的操作

Jquery对事件的绑定

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

$(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() 被动添加在开头

兄弟关系添加节点

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

替换节点

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

删除节点

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

复制节点

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

完整代码地址