$()下的常用方法
• 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(输出事件类型)