jQuery高级

一、动画

三种方式显示和隐藏元素

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");
});