JavaWeb——JQuery之高级操作应用及实践案例总结（动画、遍历、事件绑定）

目录

1 JQuery动画

2 JQuery遍历

3 JQuery事件绑定

---

1 JQuery动画

JQuery有三种方式显示和隐藏元素：

• 1）默认显示和隐藏方式：
        --show([speed, [easing], [fn]])
        --hide([speed, [easing], [fn]])
        --toogle([speed, [easing], [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]])

【注意】：以上方法的参数

• 1）speed：动画的速度，三个预定的值（"fast"、"normal"、"slow"）或表示动画时长的毫秒值；
• 2）easing：用来指定切换效果，默认是"swing"，效果是先慢，中间快，最后又慢；参数"linear"，匀速；
• 3）fn：在动画完成时执行的函数，每个元素执行一次。

【练习案例】：

    
    
    

    








    div显示和隐藏

2 JQuery遍历

js的遍历方式是使用for循环，JQuery提供了三种遍历方式：

• 1）JQuery对象.each(callback)：回调函数中的参数 index（索引） element（元素对象）；
• 2）$.each(object,[callback])：
• 3）for..of：JQuery3.0 版本之后提供的方式

【注意】：如果遍历中加判断条件，当前function返回为false，则结束循环(相当于js中使用的break)，如果返回为true，则结束本次循环，继续下次循环(相当于js中使用的continue)；

【练习案例】：

    
    
    
    


    

        
北京
        
上海
        
天津
        
重庆
    

3 JQuery事件绑定

JQuery事件绑定方式包括：

• 1）JQuery标准的绑定方式：JQuery对象.事件方法（回调函数）；注意：如果调用事件方法，不传递回调参数，会触发浏览器默认行为；
• 2）on绑定事件、off解除绑定：JQuery对象.on("事件名称"，回调函数)、JQuery对象.off("事件名称")；注意：若off方法不传递任何参数，则会将组件上所有的事件解除；
• 3）事件切换toggle：JQuery对象.toggle(fn1,fn2...)，当点击对应组件时，会执行fn1，再次点击会执行fn2...，若只有2个，则循环执行。注意：JQuery1.9后该功能删除了，要使用的话引入jquery-migrate-1.0.0.js插件。

【练习案例1】：JQuery标准的绑定方式

【练习案例2】：on绑定事件、off解除绑定

【练习案例3】：事件切换toggle

    
    
    
    

    



    
    

        点击按钮变成绿色，再次点击红色
    

 

———————————————————————————————————————

本文为博主原创文章，转载请注明出处！

若本文对您有些许帮助，轻抬您发财的小手，关注/评论/点赞/收藏，就是对我最大的支持！

祝君升职加薪，鹏程万里！