jQuery的动画、遍历和事件绑定怎么实现

这篇"jQuery的动画、遍历和事件绑定怎么实现"文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇"jQuery的动画、遍历和事件绑定怎么实现"文章吧。

学习内容：

一、jQuery高级

1、动画：三种方式显示和隐藏元素

• 默认显示和隐藏元素show([speed,[easing],[fn]])hide([speed,[easing],[fn]])toggle([speed,[easing],[fn]])

• 滚动显示和隐藏元素slideDown([speed,[easing],[fn]])slideUp([speed,[easing],[fn]])slideToggle([speed,[easing],[fn]])

• 淡入淡出显示和隐藏元素fadeIn([speed,[easing],[fn]])fadeOut([speed,[easing],[fn]])fadeToggle([speed,[easing],[fn]])

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

2、遍历

• js遍历方式for(初始化值;循环结束条件;步长)

• jq遍历方式jq对象.each(callback)$.each(object,[callback])for…of jQuery3.0之后提供的版本

3、事件绑定

• jQuery标准的绑定方式jq对象.事件方法(回调函数);如果调用事件方法，不传递回调函数，则触发浏览器默认行为表单对象.submit(); // 让表单提交

• on绑定事件/off解绑事件jq对象.on(事件,回调函数);jq对象.off(事件); 如果不传递事件名称，则解绑所有的事件

• 事件切换：togglejq对象.toggle(fn1,fn2…); 多次点击依次执行传递的函数

4、案例

• 广告显示和隐藏需求当页面加载完成后，3秒后，自动显示广告广告显示5秒后，自动消失分析使用定时器来完成 setTimeOut()执行一次的定时器jQuery的显示和隐藏的动画效果其实就是控制display属性使用show/hide相关方法完成广告的显示

• 抽象需求点击开始，小相框快速切换点击停止，小相框停止切换分析给开始按钮绑定单击事件定义循环定时器切换小相框的src属性定义数组，存放图片资源路径生成随机数，数组索引给结束按钮绑定单击事件停止定时器给大相框设置src属性

5、插件：增强jQuery功能

• 实现方式$.fn.extend(object);增强通过jQuery获取对象的功能 $("#id")$.extend(object);增强jQuery对象自身的功能 $/jQuery

学习产出：

1、 动画

                
    div显示和隐藏

2、遍历

                
    
北京
    
上海
    
天津
    
重庆

3、 事件绑定与解绑

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

4、案例1：广告显示和隐藏

                        
        
            
        
        正文部分    

5、案例2：抽奖

6、01-jQuery对象进行方法扩展

                
足球篮球排球

7、02-jQuery全局进行方法扩展

以上就是关于"jQuery的动画、遍历和事件绑定怎么实现"这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注行业资讯频道。