Js，jQuery事件、效果大全------Sestid

我就是我 2024-04-18 21:48 63阅读 0赞

# JavaScript 事件 #

<table style="width:580px;"> 
 <tbody> 
  <tr> 
   <th style="width:191px;">属性</th> 
   <th style="width:388px;text-align:left;">当以下情况发生时，出现此事件</th> 
  </tr> 
  <tr> 
   <td style="width:191px;">onabort</td> 
   <td style="width:388px;">图像加载被中断</td> 
  </tr> 
  <tr> 
   <td style="width:191px;">onblur</td> 
   <td style="width:388px;">元素失去焦点</td> 
  </tr> 
  <tr> 
   <td style="width:191px;">onchange</td> 
   <td style="width:388px;">用户改变域的内容</td> 
  </tr> 
  <tr> 
   <td style="width:191px;">onclick</td> 
   <td style="width:388px;">鼠标点击某个对象</td> 
  </tr> 
  <tr> 
   <td style="width:191px;">ondblclick</td> 
   <td style="width:388px;">鼠标双击某个对象</td> 
  </tr> 
  <tr> 
   <td style="width:191px;">onerror</td> 
   <td style="width:388px;">当加载文档或图像时发生某个错误</td> 
  </tr> 
  <tr> 
   <td style="width:191px;">onfocus</td> 
   <td style="width:388px;">元素获得焦点</td> 
  </tr> 
  <tr> 
   <td style="width:191px;">onkeydown</td> 
   <td style="width:388px;">某个键盘的键被按下</td> 
  </tr> 
  <tr> 
   <td style="width:191px;">onkeypress</td> 
   <td style="width:388px;">某个键盘的键被按下或按住</td> 
  </tr> 
  <tr> 
   <td style="width:191px;">onkeyup</td> 
   <td style="width:388px;">某个键盘的键被松开</td> 
  </tr> 
  <tr> 
   <td style="width:191px;">onload</td> 
   <td style="width:388px;">某个页面或图像被完成加载</td> 
  </tr> 
  <tr> 
   <td style="width:191px;">onmousedown</td> 
   <td style="width:388px;">某个鼠标按键被按下</td> 
  </tr> 
  <tr> 
   <td style="width:191px;">onmousemove</td> 
   <td style="width:388px;">鼠标被移动</td> 
  </tr> 
  <tr> 
   <td style="width:191px;">onmouseout</td> 
   <td style="width:388px;">鼠标从某元素移开</td> 
  </tr> 
  <tr> 
   <td style="width:191px;">onmouseover</td> 
   <td style="width:388px;">鼠标被移到某元素之上</td> 
  </tr> 
  <tr> 
   <td style="width:191px;">onmouseup</td> 
   <td style="width:388px;">某个鼠标按键被松开</td> 
  </tr> 
  <tr> 
   <td style="width:191px;">onreset</td> 
   <td style="width:388px;">重置按钮被点击</td> 
  </tr> 
  <tr> 
   <td style="width:191px;">onresize</td> 
   <td style="width:388px;">窗口或框架被调整尺寸</td> 
  </tr> 
  <tr> 
   <td style="width:191px;">onselect</td> 
   <td style="width:388px;">文本被选定</td> 
  </tr> 
  <tr> 
   <td style="width:191px;">onsubmit</td> 
   <td style="width:388px;">提交按钮被点击</td> 
  </tr> 
  <tr> 
   <td style="width:191px;">onunload</td> 
   <td style="width:388px;">用户退出页面</td> 
  </tr> 
 </tbody> 
</table>

# jQuery事件 #

<table> 
 <tbody> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_bind.asp" rel="nofollow">bind()</a></td> 
   <td>向匹配元素附加一个或更多事件处理器</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_blur.asp" rel="nofollow">blur()</a></td> 
   <td>触发、或将函数绑定到指定元素的 blur 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_change.asp" rel="nofollow">change()</a></td> 
   <td>触发、或将函数绑定到指定元素的 change 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_click.asp" rel="nofollow">click()</a></td> 
   <td>触发、或将函数绑定到指定元素的 click 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_dblclick.asp" rel="nofollow">dblclick()</a></td> 
   <td>触发、或将函数绑定到指定元素的 double click 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_delegate.asp" rel="nofollow">delegate()</a></td> 
   <td>向匹配元素的当前或未来的子元素附加一个或多个事件处理器</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_die.asp" rel="nofollow">die()</a></td> 
   <td>移除所有通过 live() 函数添加的事件处理程序。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_error.asp" rel="nofollow">error()</a></td> 
   <td>触发、或将函数绑定到指定元素的 error 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_isdefaultprevented.asp" rel="nofollow">event.isDefaultPrevented()</a></td> 
   <td>返回 event 对象上是否调用了 event.preventDefault()。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_pagex.asp" rel="nofollow">event.pageX</a></td> 
   <td>相对于文档左边缘的鼠标位置。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_pagey.asp" rel="nofollow">event.pageY</a></td> 
   <td>相对于文档上边缘的鼠标位置。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_preventdefault.asp" rel="nofollow">event.preventDefault()</a></td> 
   <td>阻止事件的默认动作。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_result.asp" rel="nofollow">event.result</a></td> 
   <td>包含由被指定事件触发的事件处理器返回的最后一个值。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_target.asp" rel="nofollow">event.target</a></td> 
   <td>触发该事件的 DOM 元素。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_timeStamp.asp" rel="nofollow">event.timeStamp</a></td> 
   <td>该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_type.asp" rel="nofollow">event.type</a></td> 
   <td>描述事件的类型。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_which.asp" rel="nofollow">event.which</a></td> 
   <td>指示按了哪个键或按钮。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_focus.asp" rel="nofollow">focus()</a></td> 
   <td>触发、或将函数绑定到指定元素的 focus 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_keydown.asp" rel="nofollow">keydown()</a></td> 
   <td>触发、或将函数绑定到指定元素的 key down 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_keypress.asp" rel="nofollow">keypress()</a></td> 
   <td>触发、或将函数绑定到指定元素的 key press 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_keyup.asp" rel="nofollow">keyup()</a></td> 
   <td>触发、或将函数绑定到指定元素的 key up 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_live.asp" rel="nofollow">live()</a></td> 
   <td>为当前或未来的匹配元素添加一个或多个事件处理器</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_load.asp" rel="nofollow">load()</a></td> 
   <td>触发、或将函数绑定到指定元素的 load 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_mousedown.asp" rel="nofollow">mousedown()</a></td> 
   <td>触发、或将函数绑定到指定元素的 mouse down 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_mouseenter.asp" rel="nofollow">mouseenter()</a></td> 
   <td>触发、或将函数绑定到指定元素的 mouse enter 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_mouseleave.asp" rel="nofollow">mouseleave()</a></td> 
   <td>触发、或将函数绑定到指定元素的 mouse leave 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_mousemove.asp" rel="nofollow">mousemove()</a></td> 
   <td>触发、或将函数绑定到指定元素的 mouse move 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_mouseout.asp" rel="nofollow">mouseout()</a></td> 
   <td>触发、或将函数绑定到指定元素的 mouse out 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_mouseover.asp" rel="nofollow">mouseover()</a></td> 
   <td>触发、或将函数绑定到指定元素的 mouse over 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_mouseup.asp" rel="nofollow">mouseup()</a></td> 
   <td>触发、或将函数绑定到指定元素的 mouse up 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_one.asp" rel="nofollow">one()</a></td> 
   <td>向匹配元素添加事件处理器。每个元素只能触发一次该处理器。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_ready.asp" rel="nofollow">ready()</a></td> 
   <td>文档就绪事件（当 HTML 文档就绪可用时）</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_resize.asp" rel="nofollow">resize()</a></td> 
   <td>触发、或将函数绑定到指定元素的 resize 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_scroll.asp" rel="nofollow">scroll()</a></td> 
   <td>触发、或将函数绑定到指定元素的 scroll 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_select.asp" rel="nofollow">select()</a></td> 
   <td>触发、或将函数绑定到指定元素的 select 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_submit.asp" rel="nofollow">submit()</a></td> 
   <td>触发、或将函数绑定到指定元素的 submit 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_toggle.asp" rel="nofollow">toggle()</a></td> 
   <td>绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_trigger.asp" rel="nofollow">trigger()</a></td> 
   <td>所有匹配元素的指定事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_triggerhandler.asp" rel="nofollow">triggerHandler()</a></td> 
   <td>第一个被匹配元素的指定事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_unbind.asp" rel="nofollow">unbind()</a></td> 
   <td>从匹配元素移除一个被添加的事件处理器</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_undelegate.asp" rel="nofollow">undelegate()</a></td> 
   <td>从匹配元素移除一个被添加的事件处理器，现在或将来</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_unload.asp" rel="nofollow">unload()</a></td> 
   <td>触发、或将函数绑定到指定元素的 unload 事件</td> 
  </tr> 
 </tbody> 
</table>

# jQuery效果 #

<table> 
 <tbody> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/effect_animate.asp" rel="nofollow">animate()</a></td> 
   <td>对被选元素应用“自定义”的动画</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/effect_clearqueue.asp" rel="nofollow">clearQueue()</a></td> 
   <td>对被选元素移除所有排队的函数（仍未运行的）</td> 
  </tr> 
  <tr> 
   <td>delay()</td> 
   <td>对被选元素的所有排队函数（仍未运行）设置延迟</td> 
  </tr> 
  <tr> 
   <td>dequeue()</td> 
   <td>运行被选元素的下一个排队函数</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/effect_fadein.asp" rel="nofollow">fadeIn()</a></td> 
   <td>逐渐改变被选元素的不透明度，从隐藏到可见</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/effect_fadeout.asp" rel="nofollow">fadeOut()</a></td> 
   <td>逐渐改变被选元素的不透明度，从可见到隐藏</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/effect_fadeto.asp" rel="nofollow">fadeTo()</a></td> 
   <td>把被选元素逐渐改变至给定的不透明度</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/effect_hide.asp" rel="nofollow">hide()</a></td> 
   <td>隐藏被选的元素</td> 
  </tr> 
  <tr> 
   <td>queue()</td> 
   <td>显示被选元素的排队函数</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/effect_show.asp" rel="nofollow">show()</a></td> 
   <td>显示被选的元素</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/effect_slidedown.asp" rel="nofollow">slideDown()</a></td> 
   <td>通过调整高度来滑动显示被选元素</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/effect_slidetoggle.asp" rel="nofollow">slideToggle()</a></td> 
   <td>对被选元素进行滑动隐藏和滑动显示的切换</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/effect_slideup.asp" rel="nofollow">slideUp()</a></td> 
   <td>通过调整高度来滑动隐藏被选元素</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/effect_stop.asp" rel="nofollow">stop()</a></td> 
   <td>停止在被选元素上运行动画</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/effect_toggle.asp" rel="nofollow">toggle()</a></td> 
   <td>对被选元素进行隐藏和显示的切换</td> 
  </tr> 
 </tbody> 
</table>