jQuery高级应用及动画

高级应用

1.动画:
    1.默认显式和隐式方式
        *show([speed],[easing],[fn]]);
        *hide([speed],[easing],[fn]]);
        *toggle([speed],[easing],[fn]]);
        参数：
            *speed:动画速度，三个预定义("slow","normal","fast")
            *easing:切换效果，默认swing,可选liner
                *swing:开始慢，中间块，结尾慢
                *liner:匀速
            *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]])

jQuery遍历

jQuery对象本身就是数组对象，通过jQuery选择器获得的都是满足该选择器条件的元素对象的集合体。因此在常常需要对jQuery对象进行遍历。
1.JS遍历方式
    for (初始化值; 循环结束条件; 步长);
2.jQuery遍历方式
    1.jq对象.each(回调函数)
        1.语法:jq对象.each(function(index,element){})
            *index:元素在集合中的索引
            *element:集合中每一个元素对象
        2.回调函数返回值:
            *true:结束循环（break）
            *false:结束本次循环，继续下次循环（continue）   
    2.$.each(object,回调函数)
        *此方法为JQuery对象特有的遍历方式，与1方法享受，但这里的$不是指特有对象，而是指全局对象的each方法,名字和功能虽然相同，但语法不同。
    3.for...of
        for (元素对象 of 容器对象);

jQuery事件绑定

事件名称    事件说明
blur        失焦
click       单击
change      内容改变
keydown     接受键盘所有的键
keypress    键盘按下
keyup       键盘松开
mouseover   鼠标悬停
mouseout    鼠标离开

1.jquery标准的绑定方式
    1.jq对象.事件方法(回调函数)；
    *注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
        *表单对象.submit();//让表单提交
    2.on绑定事件/off解除绑定
    * jq对象.on("事件名称",回调函数)
    *jq对象.off("事件名称")
        *如果off方法不传递任何参数，则将组件上的所有事件全部解绑
    3.事件切换：toggle
        *jq对象.toggle(fn1,fn2...)
        *当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2.....