页面加载

本文详细介绍了jQuery中事件绑定(bind, on, off, one, unbind, trigger, triggerHandler)的高级用法,包括live/die、hover/toggle、阻止冒泡与默认行为,以及展示、隐藏、滑动、切换和自定义动画的实例。深入理解并实践这些技术,提升前端交互能力。
摘要由CSDN通过智能技术生成

事件
一:简单处理事件
bind 为每个匹配元素的特定事件绑定事件处理函数。

on 在选择元素上绑定一个或多个事件的事件处理函数。

off 在选择元素上移除一个或多个事件的事件处理函数

one 为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。

unbind bind()的反向操作,从每一个匹配的元素中删除绑定的事件。

trigger 在每一个匹配的元素上触发某类事件。

triggerHandler 这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作,也不会产生事件冒泡。
二:高级处理事件
live jQuery 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。

die 从元素中删除先前用.live()绑定的所有事件.(此方法与live正好完全相反。)

hover 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法

toggle 用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。

阻止事件冒泡
阻止事件冒泡使用stopPropagation 方法
在这里插入图片描述

阻止默认行为使用preventDefault方法
在这里插入图片描述
效果
*show
显示隐藏的匹配元素。

HTML 代码:
<p style="display: none">Hello</p>
jQuery 代码:
$("p").show()

hide
隐藏所有段落

jQuery 代码:
$(“p”).hide()

toggle
用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。

如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。

slideDown
通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来
slideUp
通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。

返回值:jQueryslideToggle
通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。

*animate
用于创建自定义动画的函数

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值