JQuery高级

JQuery高级

1.动画
    1.三种方式显示和隐藏元素
        speed：动画速度 三个预定义的值(slow, normal, fast)或自定义毫秒值
        easing：切换效果 默认swing，可用linear
            swing执行时的效果先慢再快最后慢
            linear执行匀速
        fn：动画完成执行的函数，每个元素执行一次
        1.默认显示和隐藏方式
            1.show([speed,[easing],[fn]])
            2.hide([speed,[easing],[fn]])
            3.toggle([speed],[easing],[fn])
        2.滑动显示和隐藏方式
            1.slideDown([speed],[easing],[fn])
            2.slideUp([speed],[easing],[fn])
            3.slideToggle([speed],[easing],[fn])
        3.淡入淡出显示和隐藏方式
            1.fadeIn([speed],[easing],[fn])
            2.fadeOut([speed],[easing],[fn])
            3.fadeToggle([speed],[easing],[fn])
2.遍历
    1.js的遍历方式
        for(初始化值;循环条件;步长){}
            // 1.获取所有的ul下的li
            var citys = $("#city li");
            // 2.遍历li
            for (var i = 0; i< citys.length; i++) {
                // 获取内容
                alert((i+1) + "：" + citys[i].innerText);
            }
    2.jquery的遍历方式
        1.对象.each(callback)
            $("#city li").each(function (index,element) {
            //3.1 获取li对象 第一种方式 this
            alert(this.innerHTML);
            alert($(this).html());
            //3.2 获取li对象 第二种方式 在回调函数中定义参数   index（索引） element（元素对象）
            alert(index+":"+element.innerHTML);
            alert(index+":"+$(element).html());

            //判断如果是上海，则结束循环
            if("上海" == $(element).html()){
                //如果当前function返回为false，则结束循环(break)。
                //如果返回为true，则结束本次循环，继续下次循环(continue)
                return true;
            }
            alert(index+":"+$(element).html());
        });
        2.$.each(Object, [callback])
            $.each($("#city li"), function() {
                alert($(this).html());
            });
        3.for..of  3.0之后出现的
            for(li of $("#city li")) {
                alert($(li).html());
            }
3.事件绑定
    1.jQuery标准的绑定方式
        对象.事件方法(回调函数)
        注意：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为
            表单对象.submit(),让表单提交，如果回调函数中返回false则阻止提交表单
    2.on绑定事件/off解绑事件
        jq对象.on("事件名称", 回调函数)
        jq对象.off("事件名称")
            注意：如果off中不传递任何事件，则与该对象相关的所有事件全部解绑
    3.事件切换：toggle
        对象.toggle(fn1, fn2, ...)
        注意：1.9之后移除该功能，需要导入插件migrate