jQuery高级使用

目录

1、动画

1）默认显示和隐藏方式

2）滑动显示和隐藏方式

3）淡入淡出显示和隐藏方式

2、遍历

JS的遍历方式：

jQuery的遍历方式：

方式一：jQuery对象.each(callback) 

方式二：$.each(object, [callback])

方式三：for..of

3、事件绑定

1）jQuery标准的绑定方式

2）on绑定事件/off解除绑定

3）事件切换：toggle

4、 插件：增强JQuery的功能

1、动画

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

1）默认显示和隐藏方式

• show([speed,[easing],[fn]])
  1. speed：表示动画的速度，可以是一个字符串（如 "slow"、"fast"）或一个毫秒数。
  2. easing：动画的缓动函数，默认"swing"（慢-快-慢），也可用"linear"（匀速）。
  3. fn：动画完成后执行的回调函数，每个元素执行一次。
• hide([speed,[easing],[fn]])
• toggle([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]])

2、遍历

JS的遍历方式：

for(初始化值;循环结束条件;步长)

jQuery的遍历方式：

方式一：jQuery对象.each(callback) 

jQuery对象.each(function(index,element){});  参数：index：索引、element元素对象；this：集合中的每一个元素对象
回调函数返回值：
true:如果当前function返回为false，则结束循环(break)。
false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)

方式二：$.each(object, [callback])

方式三：for..of

for(元素对象 of 容器对象)，jQuery3.0 版本之后

3、事件绑定

1）jQuery标准的绑定方式

• jQuery对象.事件方法(回调函数)；

注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
表单对象.submit(); //提交表单

2）on绑定事件/off解除绑定

• jQuery对象.on("事件名称",回调函数)
• jQuery对象.off("事件名称")

如果off方法不传递任何参数，则将组件上的所有事件全部解绑

3）事件切换：toggle

• jQuery对象.toggle(fn1,fn2...)

当单击jQuery对象对应的组件后，会执行fn1.第二次点击会执行fn2

4、 插件：增强JQuery的功能

实现方式：

• $.fn.extend(object) ：增强通过jQeury获取的对象的功能  $("#id")
• $.extend(object)：增强jQeury对象自身的功能  $/jQuery