一、动画
三种方式显示和隐藏元素
1、默认显示和隐藏方式
1）、show([speed,[easing],[fn]])([easing],[fn]可省略)
参数：
（1）、speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的 毫秒数值(如：1000)(毫秒值不加双引号)
（2）、easing：用来指定切换效果，(不写的话)默认是"swing"，可用参数"linear"
swing：动画执行时效果是 先慢，中间快，最后又慢
linear：动画执行时速度是匀速的
（3）、fn：在动画完成时执行的函数，每个元素执行一次。(fn参数可以不写)
$("#showDiv").show(5000,"linear");
2）、hide([speed,[easing],[fn]])
$("#showDiv").hide(5000,"swing");
3）、toggle([speed,[easing],[fn])
$("#showDiv").toggle("slow");
2、滑动显示和隐藏方式
1）、slideDown([speed,[easing],[fn])显示
$("#showDiv").slideDown("slow");
2）、slideUp([speed,[easing],[fn]])隐藏
$("#showDiv").slideUp("slow");
3）、slideToggle([speed],[easing],[fn])
$("#showDiv").slideToggle("slow");
3、淡入淡出显示和隐藏方式
1）、fadeIn([speed],[easing],[fn])显示
$("#showDiv").fadeIn("slow");
2）、fadeOut([speed],[easing],[fn])隐藏
$("#showDiv").fadeOut("slow");
3）、fadeToggle([speed,[easing],[fn]])
$("#showDiv").fadeToggle("slow");
4、jQuery 效果方法
| 方法 | 描述 |
|---|---|
| animate() | 对被选元素应用"自定义"的动画 |
| clearQueue() | 对被选元素移除所有排队函数（仍未运行的） |
| delay() | 对被选元素的所有排队函数（仍未运行）设置延迟 |
| dequeue() | 移除下一个排队函数，然后执行函数 |
| fadeIn() | 逐渐改变被选元素的不透明度，从隐藏到可见 |
| fadeOut() | 逐渐改变被选元素的不透明度，从可见到隐藏 |
| fadeTo() | 把被选元素逐渐改变至给定的不透明度 |
| fadeToggle() | 在 fadeIn() 和 fadeOut() 方法之间进行切换 |
| finish() | 对被选元素停止、移除并完成所有排队动画 |
| hide() | 隐藏被选元素 |
| queue() | 显示被选元素的排队函数 |
| show() | 显示被选元素 |
| slideDown() | 通过调整高度来滑动显示被选元素 |
| slideToggle() | slideUp() 和 slideDown() 方法之间的切换 |
| slideUp() | 通过调整高度来滑动隐藏被选元素 |
| stop() | 停止被选元素上当前正在运行的动画 |
| toggle() | hide() 和 show() 方法之间的切换 |
二、遍历
1、js的遍历方式
for(初始化值;循环结束条件;步长)
$(function () { var citys = $("#city li"); for (var i = 0; i < citys.length; i++) { if("上海" == citys[i].innerHTML){ //break; 结束循环 //continue; //结束本次循环，继续下次循环 } alert(i+":"+citys[i].innerHTML);//获取内容 }*/ });
2、jq的遍历方式
1）、jq对象.each(callback),即each()循环
语法：jquery对象.each(function(index,element){});
index:就是元素在集合中的索引
element：就是集合中的每一个元素对象
this：集合中的每一个元素对象(element==this)
回调函数返回值：
true:如果当前function返回为false，则结束循环(break)。
false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)
第一种方式：
$(function () { var citys = $("#city li"); citys.each(function () {//第一种方式this,在回调函数中不定义参数,不能获取索引 //alert(this.innerHTML);//this是js对象 //alert($(this).html());//使用jQuery方式 if("上海" == $(element).html()){ return false;//如果当前function返回为false，则结束循环(break)。 } alert(index+":"+$(element).html()); }); });
$(this):选取当前 HTML 元素.
第二种方式：
$(function () { var citys = $("#city li");//citys是一个元素在集合,有index,element citys.each(function (index,element) {//第二种方式 在回调函数中定义参数 //alert(index+":"+element.innerHTML);//element是js对象 //alert(index+":"+$(element).html());//使用jQuery方式 if("上海" == $(element).html()){ return true; //如果返回为true，则结束本次循环，继续下次循环(continue) } alert(index+":"+$(element).html()); }); });
2）、$.each(object, [callback])//全局遍历方式,(object可以传递js数组对象),也是each()循环
$(function () { var citys = $("#city li"); $.each(citys,function () { alert($(this).html()); });
3）、for..of: jquery 3.0 版本之后提供的方式,for循环
语法：for(元素对象 of 容器对象)
$(function () { var citys = $("#city li"); for(li of citys){ alert($(li).html()); } });
3、jQuery 遍历 方法
| 方法 | 描述 |
|---|---|
| add() | 把元素添加到匹配元素的集合中 |
| addBack() | 把之前的元素集添加到当前集合中 |
| andSelf() | 在版本 1.8 中被废弃。addBack() 的别名 |
| children() | 返回被选元素的所有直接子元素 |
| closest() | 返回被选元素的第一个祖先元素 |
| contents() | 返回被选元素的所有直接子元素（包含文本和注释节点） |
| each() | 为每个匹配元素执行函数 |
| end() | 结束当前链中最近的一次筛选操作，并把匹配元素集合返回到前一次的状态 |
| eq() | 返回带有被选元素的指定索引号的元素 |
| filter() | 把匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素 |
| find() | 返回被选元素的后代元素 |
| first() | 返回被选元素的第一个元素 |
| has() | 返回拥有一个或多个元素在其内的所有元素 |
| is() | 根据选择器/元素/jQuery 对象检查匹配元素集合，如果存在至少一个匹配元素，则返回 true |
| last() | 返回被选元素的最后一个元素 |
| map() | 把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象 |
| next() | 返回被选元素的后一个同级元素 |
| nextAll() | 返回被选元素之后的所有同级元素 |
| nextUntil() | 返回介于两个给定参数之间的每个元素之后的所有同级元素 |
| not() | 从匹配元素集合中移除元素 |
| offsetParent() | 返回第一个定位的父元素 |
| parent() | 返回被选元素的直接父元素 |
| parents() | 返回被选元素的所有祖先元素 |
| parentsUntil() | 返回介于两个给定参数之间的所有祖先元素 |
| prev() | 返回被选元素的前一个同级元素 |
| prevAll() | 返回被选元素之前的所有同级元素 |
| prevUntil() | 返回介于两个给定参数之间的每个元素之前的所有同级元素 |
| siblings() | 返回被选元素的所有同级元素 |
| slice() | 把匹配元素集合缩减为指定范围的子集 |
三、事件绑定
1、 jquery标准的绑定方式
语法：jq对象.事件方法(回调函数)；
注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
表单对象.submit();//让表单提交
$("#name").mouseover(function () {//链式编程 alert("鼠标来了...") }).mouseout(function () { alert("鼠标走了...") });*/ $("#name").focus();//让文本输入框获得焦点 $("form:first").submit();//让表单提交
2、on绑定事件/off解除绑定
jq对象.on("事件名称",回调函数)(多个事件名称用空格分隔)
jq对象.off("事件名称")
如果off方法不传递任何参数，则将组件上的所有事件全部解绑
$(function () { $("#btn").on("click mouseout",function () { alert("我被点击了。。。") }) ; $("#btn2").click(function () { //$("#btn").off("click"); //解除btn按钮的单击事件 $("#btn").off();//将组件上的所有事件全部解绑 }); });
3、事件切换：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> $("#btn").toggle(function () { $("#myDiv").css("backgroundColor","green"); },function () { $("#myDiv").css("backgroundColor","pink"); });
