JQuery常用方法( 中 )
JQuery动画
hover 函数
hover(funOver, funOut)
可以传入参数，
第一个参数 毫秒数 动画持续的事件
第二个参数 回调函数 动画执行完毕以后执行的代码
show() 显示
hide() 隐藏
fadeIn() 淡入
fadeOut() 淡出 透明度发生变化 0-1
fadeTo()
【注】卷闸
slideDown()
slideUp()
$(function(){
$("#div1").hover(function(){
// this.innerHTML = "移入";
/*$("#div2").hide(2000, function(){
$("#div1").html("动画移入完成")
});*/
/*$("#div2").fadeOut(2000, function(){
$("#div1").html("动画淡出完成")
})*/
/*$("#div2").fadeTo(2000, 0.5, function(){
$("#div1").html("动画淡出完成")
})*/
$("#div2").slideUp(2000)
}, function(){
// this.innerHTML = "移出";
/*$("#div2").show(2000, function(){
$("#div1").html("动画移出完成")
});*/
/*$("#div2").fadeIn(2000, function(){
$("#div1").html("动画淡入完成")
})*/
/*$("#div2").fadeTo(2000, 1, function(){
$("#div1").html("动画淡入完成")
})*/
$("#div2").slideDown(2000)
})
})
animate()
第一个参数 变化样式属性
第二个参数 动画持续的事件 不传入 默认400毫秒
第三个参数 回调函数
【注】慢快慢
提供了两种运动形式：swig 慢快慢(默认) linear(匀速)
$(function(){
$("#div1").click(function(){
$(this).animate({
width: 300,
height: 300,
opacity: 0.5,
}, 5000, function(){
alert("回调函数");
})
$("#div2").animate({
width: 300,
height: 300,
opacity: 0.5,
}, 5000, "linear", function(){
// alert("回调函数")
})
})
})
stop() 停止动画
$("#div1").click(function(){
/*$(this).animate({
width: 300,
height: 300
}, 2000)*/
//链式运动
$(this).animate({width: 300}, 2000).animate({height: 300}, 2000)
})
$("#div2").click(function(){
// $("#div1").stop(); //关闭正在运动的动画，后续动画正常执行
// $("#div1").stop(true);//关闭所有动画
// $("#div1").stop(true, true); //关闭所有的动画，当前正在运动的动画直接到目的值
$("#div1").finish() //关闭所有的动画，将所有动画都到达目的值。
})
解决触发动画几次就执行几次的问题
$("#div1").hover(function(){
$(this).stop().animate({width: 300, height: 300}, 2000)
}, function(){
$(this).stop().animate({width: 100, height: 100}, 2000)
})
delay() 延迟 延迟执行 参数传入毫秒数
$("#div1").click(function(){
//链式运动
$(this).animate({width: 300}, 2000).delay(4000).animate({height: 300}, 2000);
})
trigger() 触发事件上的函数
bind 添加自定义的事件（不要和JS的bind混起来）
<script>
$(function(){
/*$("input").blur(function{
alert("失去焦点了");
})
$("button").click(function{
//主动触发某一事件类型上所有的函数
$("input").trigger("blur");
})*/
//2、触发自定义事件
$("button").bind("play", function{
alert("播放");
})
$("button").click(function{
$("button").trigger("play");
})
})
<\script>
<body>
<input type="text">
<button>按钮</button>
</body>
ev.data
ev.target(兼容后触发对象)
ev.type(输出事件类型)
<script>
$(function(){
/*$(document).mousedown(function(ev){
alert(ev.type)
})*/
$(document).on("click", {name: "钢铁侠", sex: "男"}, function(ev){
alert(ev.data);
alert(ev.data.name)
})
})
</script>
JQ基础方法的扩充
get(): 下标和length属性
outerWidth(): 针对隐藏元素和参数true
text(): 合体的特例
remove()，detach() 删除
$(), $(document).ready()
get() 可以实现JS和JQ的混用
$().get(下标).JS代码
【注】JS和JQ可以共存，但是不能混用。
alert($("div").get(1).innerHTML);
outerWidth()
> width() width
>
> innerWidth() width + padding
>
> outerWidth() width + padding + border
>
> outerWidth(true) width + padding + border + margin
text() 获取元素节点中，包括子节点中的纯文本 innerText
<script>
$(function{
//alert($("div").text());//div1 div2 div3 em strong
$("div").text("<h1>h1</h1>");//会把h1标签当文本插入
})
</script>
<body>
<div>div1</div>
<div>div2</div>
<div>
div3
<em>em</em>
<strong>strong</strong>
</div>
</body>
remove()，detach() 删除
返回值：就是删除的节点
【注】上述这两个函数都是用来删除元素节点的，但是detach删除节点的 时候，可以保留该节点之前的行为。
<script>
$(function{
$("button").click(function(){
//var node = $("#div1").remove();
var node = $("#div1").detach();//效果一样
//填入到div2里面
node.appendTo($("$div2"));
});
})
</script>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
</body>
$(), $(document).ready()
<script>
window.onload = function(){
alert(2);
//等整个窗口中的内容，都加载完毕以后才去执行
}
//当document文档加载完成以后，才去执行
$(document).ready(function(){
alert(1);
})
$(function(){
alert(3);
})
</script>
节点操作
parents() closest()
siblings()
nextAll() prevAll()
parentsUntil() nextUntil() prevUntil()
clone()
wrap() wrapAll() wraplnner() unwrap()
add() slice()
serialize() serializeArray()
• parents() 获取当前节点所有的父节点 参数是筛选条件(CSS选择器的字符串)
closest() 获取当前节点的父节点，必须传入参数，获取第一个符合条件的父节点（包括本身）
• siblings() 获取，当前节点的同级兄弟节点，参数筛选条件
• nextAll() 获取，当前节点的往下同级兄弟节点，参数筛选条件
prevAll() 获取，当前节点的往上同级兄弟节点，参数筛选条件
• parentsUntil() 从当前节点开始，找所有的父节点，直到某个节点为止
nextUntil() 获取，当前节点的往下直到某一个节点为止所有同级兄弟节点，参数筛选条件
prevUntil()
<script>
$(function{
// $("#div3").parents("div").css("backgroundColor", "red");
// $("#div3").closest(".box").css("backgroundColor", "red");
// $("span").siblings("h2").css("backgroundColor", 'red');
// $("span").nextAll().css("backgroundColor", 'red');
// $("span").prevAll().css("backgroundColor", 'red');
// $("span").nextUntil("h3").css("backgroundColor", 'red');
// $("span").prevUntil("h3").css("backgroundColor", 'red');
$("#div3").parentsUntil("body").css("backgroundColor", 'red');
})
</script>
<body id="box">
<div id="div1" class="box">
<div id="div2">
<div id="div3" class="box"> </div>
</div>
</div>
<div id="div1" class="box">
<h3>h3</h3>
<h2>h2</h2>
<em>em</em>
<span>span</span>
<h1>h1</h1>
<h3>h3</h3>
</div>
</body>
clone() 克隆节点本身，无法克隆节点的行为
clone(true)还能够克隆行为
<script>
$(function{
$("#div1").hover(function(){
$(this).css("backgroundColor", 'orange');
}, function(){
$(this).css("backgroundColor", 'black');
})
$("button").click(function(){
var node = $("#div1").clone();
//填入到div2里面
node.appendTo($("$div2"));
});
})
</script>
<body>
<button>按钮</button>
<div id="div1" title="name" class="box">div1</div>
<div id="div2">div2</div>
</body>
包装: wrap() wrapAll() wrapInner() unwrap()
<script>
$(function(){
//$("span").wrap("<em>);
//整体打包
//$("span").wrapAll("<em>");
//内部打包
//$("span").wrapInner("<em>");
//删除
//$("span").unwrap("<div>");
})
</script>
<body>
<div>
<span>span</span>
</div>
<span>span</span>
<span>span</span>
<span>span</span>
<span>span</span>
</body>
add() slice()
<script>
$(function(){
// $("li").slice(1, 4).css("backgroundColor", 'red');
/*$("div").css("backgroundColor", 'red');
$("em").css("backgroundColor", 'red');
$("li").css("backgroundColor", 'red');*/
// $("div").add("em").add("li").css("backgroundColor", 'red');
$("div,em,li").css("backgroundColor", 'red')
})
</script>
<body>
<div>div</div>
<span>span</span>
<em>em</em>
<ul>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<ul>
</body>
serialize() serializeArray() 数据串联
serialize() a=1&b=2&c=3(queryString格式) ?a=1&b=2&c=3(search格式)
{a:1,b:2,c:3} (query格式)
serializeArray() 变成对象的格式
必须用在表单里
<script>
$(function(){
alert($("form").serialize());
console.log($("form").serializeArray());
})
</script>
<body>
<form action="#">
<input type="text" name = 'a' value = "1">
<input type="text" name = 'b' value = "2">
<input type="text" name = 'c' value = "3">
</form>
</body>
247
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
