002 JQuery (004 - 008)
[A] JQuery特效函数
1. hover(funIn, funOut)
第一个参数：移入函数
第二个参数: 移出函数
示例：
$(function(){
$("#div1").hover(function(){
$("#div1").css("backgroundColor", "red");
}, function(){
$("#div1").css("backgroundColor", "pink");
});
})
2. hide() 隐藏
show() 显示
示例：
$("#div1").hover(function(){
$("#div2").hide();
}, function(){
$("#div2").show();
});
这两个函数可传参
第一个参数：动画持续的时间
第二个参数：回调函数，动画结束时调用
【注】动画效果：从左上角收起和展开
示例：
$("#div1").hover(function(){
$("#div2").hide(2000, function(){
$("#div1").html("移入");
});
}, function(){
$("#div2").show(2000, function(){
$("#div1").html("移出");
});
});
3. 卷闸效果
slideDown() 卷下出现，可传参
slideUp() 卷起消失，可传参
这两个函数可传参
第一个参数：动画持续的时间
第二个参数：回调函数，动画结束时调用
示例：
$("#div1").hover(function(){
$("#div2").slideUp(2000, function(){
$("#div1").html("移入");
});
}, function(){
$("#div2").slideDown(2000, function(){
$("#div1").html("移出");
});
});
4. 淡入淡出
fadeIn() 淡入，可传参
fadeOut() 淡出，可传参
这两个函数可传参
第一个参数：动画持续的时间
第二个参数：回调函数，动画结束时调用
示例：
$("#div1").hover(function(){
$("#div2").fadeOut(2000, function(){
$("#div1").html("移入");
});
}, function(){
$("#div2").fadeIn(2000, function(){
$("#div1").html("移出");
});
});
fadeTo(时长, 透明度0~1, 回调函数)
示例：
$("#div1").hover(function(){
$("#div2").fadeTo(2000, 0.3, function(){
$("#div1").html("移入");
});
}, function(){
$("#div2").fadeTo(2000, 0.8, function(){
$("#div1").html("移出");
});
});
5. 动画特效 animate
【格式】animate(属性对象, 持续时间, [速度特效], [回调函数])
第一个参数：属性对象，需要实现的结果
第二个参数：动画持续时间
第三个参数：动画速度特性
"linear" 线性
"swing" 慢快慢，默认值
第三个参数：回调函数，动画结束时调用
【注】运动特性拓展：
1. 引入jquery-ui模块，需先下载再使用
2. 查找想要的动画形式：
https://www.jqueryui.org.cn/demo/5735.html
3. 将动画特效名，修改为指定名即可
示例：
$("#div1").hover(function(){
$("#div2").animate({
width:400,
height: 400,
opacity: 0.5
}, 2000, function(){
$("#div1").html("移入");
});
}, function(){
$("#div2").animate({
width:100,
height: 100,
opacity: 0
}, 2000, function(){
$("#div1").html("移出");
});
});
【默认动画存在的问题】在一次动画还未结束时，快速多次触发该动画，动画会持续重复运动，知道完成所有触发
【解决】
1. $("#div1").stop()
// 不传参，停止当前动画，但后续动画正常进行(若存在链式运动)
2. $("#div1").stop(true)
// 传一个true，停止所有动画
3. $("#div1").stop(true, true)
// 传两个true，停止所有动画，并将当前动画直接达到目的值
4. $("#div1").finish()
// 停止所有动画，并且将所有动画都达到目的值
在每次调用animate()时都调用stop(true)，停止掉之前的所有动画
示例：
$("#div1").stop().animate()
// 添加动画前调用stop()方法
6. 删除节点
remove() 删除节点，返回值为被删除的节点元素
detach() 删除节点，返回值为被删除的节点元素
【区别】1. remove()所删除的节点，不会保留节点上绑定的事件和行为
当被删除的节点被获取到后重新添加，之前绑定的事件和行为消失了
2. detach()所删除的节点，会保留节点上绑定的事件和行为
当被删除的节点被获取到后重新添加，之前绑定的事件和行为还在
7. ready事件
8. 标签间的内容 html() 相当于innerHTML
标签间纯文本 text() 相当于innerText
【注】在相应的()中可以写设置的内容，设置标签间的内容或者纯文本
[B] 节点相关操作
1. 节点操作
【注】下述所有方法的参数都是选择器，即调用时在()输入"div", "h2"等
siblings() 获取除了自身外的所有兄弟节点
nextAll() 获取从该节点开始，往下所有的兄弟节点
prevAll() 获取从该节点开始，往上所有的兄弟节点
nextUntil() 传入选择器，获取从当前元素往下到所传入选择器之间的所有节点
prevUntil() 传入兄弟节点选择器，获取从当前元素往上到所传入选择器之间的所有节点
parentUntil() 传入父节点选择器，获取从当前元素开始到指定父节点的所有父亲节点
parent() 获取父元素
parents() 获取父元素们，即父节点及其祖先节点
可传参数：选择器，即二次筛选
closest() 获取第一个复合元素的节点(从自身开始)
必传参数：选择器
包装方法，实现对所选元素在外部添加一个父元素的方法
wrap() 给每一个获取到的节点都进行包装
wrapAll() 将所有获取的元素节点包装在一个盒子里，即整体包装
【注】若被包装的元素节点不在一起，则其中非包装元素会被自动移到后面
wrapInner() 内部包装，即在所选中的节点的内部添加包装
unwrap() 删除包装，若所选中的元素节点外面有包装，则会被删除(body不会被删)，若没有就不删
clone() 克隆节点，默认只会克隆节点本身，不会克隆相应行为
参数：true 若传入true，则既会克隆节点本身，也会克隆相应行为
add() 添加节点操作，当多个元素节点有相同的行为时，可通过add添加，实现多个元素节点赋予相同的行为
示例：
$("#div1").add(".sp").add("#box")
.css(样式)
.click()
......
【注】该方法与$("#div1, .sp, #box")实现的效果是一样的
slice(start, end) 获取所选中的节点的指定范围[start, end)内的节点(参数为数字)
[C] 表单相关操作
1. serialize() 将获取到的表单元素的数据拼接成查询字符串，返回值即为拼接好的字符串
示例：
$(function(){
$("#btn").click(function(){
var s = $("input").serialize(); 返回字符串：a=xxx&b=yyy$c=zzz
alert(s);
})
})
<input type="text" name="a"> 若输入xxx
<input type="text" name="b"> 若输入yyy
<input type="text" name="c"> 若输入zzz
<button id="btn">提交</button>
2. serializeArray() 将获取到的表单元素的数据拼接成数组，返回值为数组,数组元素为对象
$(function(){
$("#btn").click(function(){
var s = $("input").serializeArray();
// 返回值为数组：
[{name: a, value: xxx},
{name: b, value: yyy},
{name: c, value: zzz}]
alert(s);
})
})
<input type="text" name="a"> 若输入xxx
<input type="text" name="b"> 若输入yyy
<input type="text" name="c"> 若输入zzz
<button id="btn">提交</button>
事件参数及触发
节点绑定的触发函数可以传入参数ev，ev中包含着所有数据
其中：
ev.data() 返回值为传入数据对象
ev.target() 返回值为触发的对象(事件接受者)
ev.type() 返回值为触发事件的类型,"click", "mouseover"等
trigger() 主动触发
// 当节点被赋予了事件后，调用$("#div").trigger("click")即可实现主动触发事件
