正文

动画

就是网页中的动态效果，这里就简单演示一下隐藏和显示元素

<script>
/*
    show([speed],[easing],[fn])
    hide([speed,[easing],[fn]])
    toggle([speed],[easing],[fn])
        speed：动画的速度。三个预定义的值("slow","normal", "fast")或
        表示动画时长的毫秒数值(如：1000)
        easing：用来指定切换效果，默认是"swing"，可用参数"linear"
            swing：动画执行时效果是 先慢，中间快，最后又慢
            linear：动画执行时速度是匀速的
        fn：在动画完成时执行的函数，每个元素执行一次。
    */
function hideFn(){
  
    //淡入淡出方式的动画
    $("#showDiv").fadeOut("slow","swing",function () {
        alert("xiaoshile ")
    });
  
    //滑动方式的动画
    $("#showDiv").slideUp("slow","swing",function () {
        alert("xiaoshile ")
    });
  
		//默认方式动画
  $("#showDiv").hide(8000,"swing",function () {
        alert("消失了！！！")
    })
}
function showFn(){
  
  //默认方式动画
    $("#showDiv").show("slow","swing",function () {
        alert("出现了！！！")
    })
  
    //滑动方式动画
    $("#showDiv").slideDown("slow","swing",function () {
        alert("出现了！！！ ")
    });
  
    //淡入淡出方式动画
    $("#showDiv").fadeIn("slow","swing",function () {
        alert("出现了！！！ ")
    });
}
function toggleFn(){
  
    //默认方式动画
    $("#showDiv").toggle("slow","swing",function () {
        alert("改变了！！！")
    });
  
    // 滑动方式动画
    $("#showDiv").slideToggle("slow","swing",function () {
        alert("改变了！！！")
    });
  
    // 淡入淡出方式动画
    $("#showDiv").fadeToggle("slow","swing",function () {
        alert("改变了！！！")
    });
}
</script>

遍历

JS的遍历和java的循环遍历几乎一样，所以在这里就不做解释了

JQ的遍历有三种：

jq对象.each(callback)
$.each(object, [callback])

for...of: jquery 3.0 版本之后提供的方式（类似与java中的增强for循环即for...earch）

- for(元素对象 of 容器对象)

代码演示：

<script>
//js遍历
    $(function () {
       // 1.获取ul下的所有的li
       var $city = $("#city li");
       // 2.遍历li
        for (var i = 0 ;i<$city.length;i++){
            alert(i+":"+$city[i].innerHTML);
        }
//jq遍历之     jq对象.each(callback)
        $city.each(function (index,element) {
        // 1.1获取li对象，第一种方式 this
         alert(this.innerHTML);
         alert($(this).html())
        // 1.2获取li对象，第二种方式 在回调函数中定义参数 index索引 和 element元素对象
        alert(index+":"+element.innerHTML);
        alert(index+":"+$(element).htlml());
    });
//jq遍历之     $.each(object, [callback])
        $.each($city,function () {
            alert($(this).html())
        })
//jq遍历之     for...of
        for (li of $city) {
            alert($(li).html())
        }
    });
</script>

break结束循环

continue结束本次循环，继续下次的循环

特殊写法：

事件绑定

不同种类事件绑定的代码演示：

<script>
/*    jquery标准的绑定方式
    jq对象.实践方法（回调函数）；*/

    $(function(){
       $("#name").click(function () {
           alert("我被点击了！！！")
       })
    });

// 链式编程
    $(function () {
        $("#name").mouseover(function () {
            alert("鼠标来了！！！")
        }).mouseout(function () {
            alert("鼠标溜了！！！")
        });
    });

/*		jq对象.on("事件名称",回调函数)
		jq对象.off("事件名称")
		*/

    $(function () {
        $("#btn").on("click",function () {
            alert("我被on了！！！")
        });

        $("#btn2").click(function () {
            //接触btn按钮的单击事件
            $("#btn1").off("click");
            $("#btn").off();    //将组建上所有事件全部解绑
        });
    });
</script>

不是太懂回调函数是什么东西，查了些资料，找到了个通俗易懂的说法：

回调函数

打个比方，有一家旅馆提供叫醒服务，但是要求旅客自己决定叫醒的方法。可以是打客房电话，也可以是派服务员去敲门，睡得死怕耽误事的，还可以要求往自己头上浇盆水。这里，“叫醒”这个行为是旅馆提供的，相当于库函数，但是叫醒的方式是由旅客决定并告诉旅馆的，也就是回调函数。而旅客告诉旅馆怎么叫醒自己的动作，也就是把回调函数传入库函数的动作，称为登记回调函数（to register a callback function）。

事件切换：toggle

注意：1.9版本 .toggle() 方法删除，所以在1.9之后的高版本中将无法使用toggle，但是jQuery Migrate（迁移）插件可以恢复此功能

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

插件

增强JQuery的功能

实现方式：

$.fn.extend(object) ：

增强通过Jquery获取的对象的功能 $("#id")

$.extend(object) ：

增强JQeury对象自身的功能 $/jQuery

拓展

JS中有好多方法遗忘了，这节课又提到了所以就顺手记一下增强记忆

setTimeout：只执行一次的定时器
setInterval：循环的定时器

Math.floor()：向下取整
Math.random()：随机生成0.000 ---> 0.999之间的小数

JS中方法的定义：function 方法名(参数){方法体}
处理按钮是否可以使用的效果：

按钮对象.prop("disabled",true) 按钮不可用
按钮对象.prop("disabled",false) 按钮可用

总结

今天学习JQuery高级，本身这部分知识还是很轻松的，但是这几节课的demo有好多综合了前面的知识，我发现自己遗忘了好多。JQuery的语法特别简略，今天的重点是事件的绑定，因为它是这几节课中最通用的，以后写代码也会时常用到JQ的事件绑定和遍历，而这几节课学习的其他比如说动画和插件都是起到画龙点睛的作用，常规掌握即可

JQuery进阶

正文

动画

遍历

事件绑定

插件

拓展

总结