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() 方法之间进行切换。
动画
注意!
- 要对位置进行改变,先设置position定位
- 使用animate()时,必须使用Camel标记法的属性名。
- 大部分属性都可实现,颜色不可以
- 回调函数在动画执行完毕时执行
-
定义相对值(该值相对于元素的当前值)。
需要在值的前面加上 += 或 -=
-
使用预定义的值
属性的动画值设置可为 "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
为同一个元素。
-
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· 手把手教你更优雅的享受 DeepSeek
· 腾讯元宝接入 DeepSeek R1 模型,支持深度思考 + 联网搜索,好用不卡机!
· AI工具推荐:领先的开源 AI 代码助手——Continue
· 探秘Transformer系列之(2)---总体架构
· V-Control:一个基于 .NET MAUI 的开箱即用的UI组件库