JQuery 高级

1. 动画

三种方式显示和隐藏元素

1. 默认显示和隐藏方式

show([speed,[easing],[fn]])
参数：

speed：动画的速度。三个预定义的值(“slow”,“normal”, “fast”)或表示动画时长的毫秒数值(如：1000)
easing：用来指定切换效果，默认是\”swing\”，可用参数\”linear\”

swing：动画执行时效果是先慢，中间快，最后又慢
linear：动画执行时速度是匀速的

fn：在动画完成时执行的函数，每个元素执行一次。

hide([speed,[easing],[fn]])

toggle([speed],[easing],[fn])

2. 滑动显示和隐藏方式

slideDown([speed],[easing],[fn])：往下拉，相当于滑动显示
slideUp([speed,[easing],[fn]])：往上拉，相当于滑动隐藏
slideToggle([speed],[easing],[fn])：切换

3. 淡入淡出显示和隐藏方式

fadeIn([speed],[easing],[fn])：淡入，相当于显示
fadeOut([speed],[easing],[fn])：淡出，相当于隐藏
fadeToggle([speed,[easing],[fn]])：切换

4. jQuery 动画 – animate() 方法

jQuery animate() 方法用于创建自定义动画。
语法：

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

**提示：**可以用 animate() 方法来操作所有 CSS 属性吗？

是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

$(\"button\").click(function(){$(\"#showDiv\").animate({left:\'250px\'});});

jQuery animate() – 操作多个属性

请注意，生成动画的过程中可同时使用多个属性：

$(\"button\").click(function(){$(\"div\").animate({left:\'250px\',opacity:\'0.5\',height:\'150px\',width:\'150px\'});});

<!DOCTYPE html><html><head><meta charset=\"UTF-8\"><title>Insert title here</title><script type=\"text/javascript\" src=\"../js/jquery-3.3.1.min.js\"></script><script>function hideFn() {// $(\"#showDiv\").hide(\"slow\",\"swing\",function () {//     //alert(\"隐藏了。。。\")// });//$(\"#showDiv\").hide(5000,\"swing\");//5秒之内隐藏$(\"#showDiv\").slideUp(2000,\"swing\");}function showFn() {// $(\"#showDiv\").show(\"slow\",\"swing\",function () {//     //alert(\"显示。。。\")// });$(\"#showDiv\").slideDown(3000);}function toggleFn(){//切换显示和隐藏// $(\"#showDiv\").toggle(4000,\"linear\",function () {//// });$(\"#showDiv\").fadeToggle(3000);}function animateFn(){$(\"#showDiv\").animate({left:\'250px\',opacity:\'0.5\',height:\'150px\',width:\'150px\'},2000);}</script></head><body><input type=\"button\" value=\"点击按钮隐藏div\" onclick=\"hideFn()\"><input type=\"button\" value=\"点击按钮显示div\" onclick=\"showFn()\"><input type=\"button\" value=\"点击按钮切换div显示和隐藏\" onclick=\"toggleFn()\"><input type=\"button\" value=\"点击按钮执行动画\" onclick=\"animateFn()\"><div id=\"showDiv\" style=\"width:300px;height:300px;background:pink;position: absolute\">div显示和隐藏</div></body></html>

2. 遍历

js的遍历方式

for(初始化值;循环结束条件;步长)

jq的遍历方式
jq对象.each(callback)

[ol]语法：
jquery对象.each(function(index,element){});
- element：就是集合中的每一个元素对象
- this：集合中的每一个元素对象
回调函数返回值：

false:如果当前function返回为false，则结束循环(break)。
true:如果当前function返回为true，则结束本次循环，继续下次循环(continue)

$.each(object, [callback])

for…of: jquery 3.0 版本之后提供的方式
for(元素对象 of 容器对象)

[/ol]

<!DOCTYPE html><html><head><meta charset=\"UTF-8\"><title></title><script src=\"../js/jquery-3.3.1.min.js\" type=\"text/javascript\" charset=\"utf-8\"></script><script type=\"text/javascript\">$(function () {//js遍历var liArr = $(\"#city li\");// for (var i = 0; i < liArr.length; i++) {//     alert(i+\":\"+liArr[i].innerHTML);// }//jq对象.each(callback)// liArr.each(function (index,element) {//     //3.1,第一种方式 this//     //alert(this.innerHTML);//     //3.2,第二种方式,index,element////     //alert(index+\":\"+element.innerHTML);//     if($(element).html()==\"上海\"){//         //如果返回为false,则结束循环(break)；如果为true,则结束本次循环，继续下次循环(continue)//         return false;//     }//     alert(index+\":\"+element.innerHTML);// });//全局遍历$.each(object, [callback])$.each(liArr,function () {alert(this.innerHTML);});//jq3.0版本之后提供的方式//// for(li of liArr){//     alert(li.innerHTML);// }})</script></head><body><ul id=\"city\"><li>北京</li><li>上海</li><li>天津</li><li>重庆</li></ul></body></html>

3. 事件绑定

jquery标准的绑定方式
- 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
- 表单对象.submit();//让表单提交
on绑定事件/off解除绑定
- jq对象.off(“事件名称”)
- 如果off方法不传递任何参数，则将组件上的所有事件全部解绑
事件切换：toggle

jq对象.toggle(fn1,fn2…)
当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2…
注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。

<script src=\"../js/jquery-migrate-1.0.0.js\" type=\"text/javascript\" charset=\"utf-8\"></script>

<!DOCTYPE html><html><head><meta charset=\"UTF-8\"><title></title><script src=\"../js/jquery-3.3.1.min.js\" type=\"text/javascript\" charset=\"utf-8\"></script><script src=\"../js/jquery-migrate-1.0.0.js\" type=\"text/javascript\" charset=\"utf-8\"></script><script type=\"text/javascript\">$(function () {$(\"#btn\").toggle(function () {$(\"#myDiv\").css(\"backgroundColor\",\"red\");},function () {$(\"#myDiv\").css(\"backgroundColor\",\"green\");});})</script></head><body><input id=\"btn\" type=\"button\" value=\"事件切换\"><div id=\"myDiv\" style=\"width:300px;height:300px;background:pink\">点击按钮变成绿色，再次点击红色</div></body></html>

JQuery （二）