JQuery得常用方法

88 阅读2分钟
		$()下的常用方法
            • hover()
            • show()         hide()  //从左上角收起和展开
            【注】可以传入参数:
                第一个参数:毫秒数
                第二个参数:回调函数,动画结束的时候执行


            • fadeIn()       fadeOut()  淡入淡出
            • fadeTo()


            • slideDown() slideUp()  卷闸效果

例子:

    <script>
        $(function(){
            
            $("#div1").hover(function(){
                //mouseover
                $(this).html("移入"); //实际上调用执行的js代码是非常多
            }, function(){
                this.innerHTML = '移出'; //这个性价比高,为了使用JQ而使用JQ。
            })


            $("#div1").hover(function(){
                $("#div2").hide(2000, function(){
                    $("#div1").html("移入");
                });

                $("#div2").fadeOut(2000, function(){
                    $("#div1").html("移入");
                });

                $("#div2").fadeTo(2000, 0.5, function(){
                    $("#div1").html("移入");
                });


                $("#div2").slideUp(2000, function(){
                    $("#div1").html("移入");
                });
            }, function(){
                $("#div2").show(2000, function(){
                    $("#div1").html("移出");
                });


                $("#div2").fadeIn(2000, function(){
                    $("#div1").html("移出");
                });
                $("#div2").fadeTo(2000, 1, function(){
                    $("#div1").html("移出");
                });

                $("#div2").slideDown(2000, function(){
                    $("#div1").html("移出");
                });
            })
        })
    </script>
</head>

<body>
    <div id='div1'></div>
    <div id='div2'></div>
</body>

运动函数

			animate
            【注】方法运动的形式默认是慢快慢
            提供两种运动形式
                匀速
                慢快慢(默认)

例子:

    <script>

        $(function(){
            
            $("#div1").hover(function(){
                $(this).animate({
                    width: 300,
                    height: "300px",
                    opacity: 0.5
                }, 2000, function(){
                    this.innerHTML = '移入'
                })
            }, function(){
                $(this).animate({
                    width: 100,
                    height: "100px",
                    opacity: 1
                }, 2000, function(){
                    this.innerHTML = '移出'
                })
            })
            

            
            $("#div1").click(function(){
                $("#div1").animate({
                    width: 300,
                    height: 300
                }, 2000, "swing");
                $("#div2").animate({
                    width: 300,
                    height: 300
                }, 2000, "linear");
                //有兴趣的同学去拓展一下JQUI 的插件方法。
            })
    </script>
</head>

<body>
    <div id='div1'></div>
    <div id='div2'></div>
</body>
                完成取消动画的操作。

                stop()
                delay() 延迟

例子:

$("#div1").click(function(){
                $(this)
                    .animate({width: 200}, 2000)
                    .delay(4000)
                    .animate({height: 200}, 2000)
                    .animate({opacity: 0.5}, 2000);
            });

            $("#div2").click(function(){
                $("#div1").stop();  //停止当前正在运行的动画,不影响后续动画
                $("#div1").stop(true); //停止所有动画

                $("#div1").stop(true, true); //停止所有动画,当前正在进行的动画,直接到达目的值

                $("#div1").finish(); //停止所有动画,将所有动画都到达目的值

            })
        });
            remove() 删除节点
            detach() 删除节点  会保留之前的行为
            返回值:都是删除的节点
            	 parents() //获取所有符合条件的祖先节点,参数是选择器
                 closest() //必须传入参数,找到第一个符合条件的父节点
                 siblings() //找到除当前节点以外的所有兄弟节点
                 nextAll() //找到所有从当前节点开始往下的节点
                 prevAll() //找到所有从当前节点开始往上的节点
                 parentsUntil() nextUntil() prevUntil() 
                 clone() 克隆节点
            	 clone(true) 克隆节点+克隆之前的行为

包装方法

                wrap() 独立包装 
                
                wrapAll()  整理包装
                
                wrapInner() 内部包装
                
                unwrap() 取消包装(取消自己的父节点,直到body)

事件细节

                ev.data 事件绑定函数传参--间接的传参
                
                ev.target(兼容后触发对象/目标对象) 
                
                ev.type(输出事件类型)