jQuery学习笔记01

搬砖第一天

没有安排我干活，自己学习jQuery中

常见jQuery事件

• click()鼠标单击:在点击后松开时触发。
  与mousedown()绑定同一元素，则只触发mousedown()
  与mouseup()绑定同一元素，则先触发mouseup(),再触发click()
• dblclick()鼠标双击
• mouseenter()鼠标移入
• mouseleave()鼠标移出
• dblclick()鼠标双击
• mousedown()鼠标按下
• mouseup()鼠标松开
• hover()模拟光标悬停，鼠标移入移出：有两个事件，只写一个则默认触发同一函数；
• blur()失去焦点；
• focus()获取焦点

jQuery效果

隐藏显示

• hide()隐藏HTML元素

• show()显示HTML元素

• toggle()来切换hide()和show()。隐藏或显示完成后执行回调函数。

  第一个参数：规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

  第二个参数：可选，表示过渡使用哪种缓动函数（jQuery自身提供"linear" 和 "swing"，其他可以使用相关的插件）。

  第三个参数：可选， callback 参数是隐藏或显示完成后所执行的函数名称。

淡入淡出

• fadeIn() 用于淡入已隐藏的元素。若元素原来就显示，则直接执行回调函数

• fadeOut() 方法用于淡出可见元素。淡出后display为none

• fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

• fadeTo()

  第一个参数：必需，规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

  第二个参数：必需，允许渐变为给定的不透明度（值介于 0 与 1 之间）。

  第三个参数：可选，结束后执行的回调函数

滑动

slide可选参数：速度、回调函数

• slideDown() 方法用于向下滑动元素。
• slidUp() 方法用于向上滑动元素。
• slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

动画

注意！

1. 要对位置进行改变，先设置position定位
2. 使用animate()时，必须使用Camel标记法的属性名。
3. 大部分属性都可实现，颜色不可以
4. 回调函数在动画执行完毕时执行

• 定义相对值（该值相对于元素的当前值）。

  需要在值的前面加上 += 或 -=

• 使用预定义的值

  属性的动画值设置可为 "show"、"hide" 或 "toggle"

• 使用队列功能

• stop停止动画

​ 可选的 stopAll 参数规定是否应该清除动画队列。

​ 默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

​ 可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

• 链接

​ 允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

如： $("div").stop().slideUp(2000);

jQuery中箭头函数的使用

箭头函数this指向外层代码块的this，在jquery中即指向document对象，

所以，在jquery中最好不要使用箭头函数

若一定要使用，要传递一个参数（如：e)，作为this的指向

则e.target 是你当前点击的元素

e.currentTarget 是你绑定事件的元素

DOM事件中target和currentTarget的区别

• target是事件触发的真实元素

• currentTarget是事件绑定的元素

• 事件处理函数中的this指向是中为currentTarget

• currentTarget和target，有时候是同一个元素，有时候不是同一个元素 （因为事件冒泡）

  • 当事件是子元素触发时，currentTarget为绑定事件的元素，target为子元素。

    如ul列表中事件的绑定，绑定事件到ul上，触发子元素li时。

  • 当事件是元素自身触发时，currentTarget和target为同一个元素。