jQuery04

「已注销」

已于 2022-03-24 11:58:31 修改

阅读量529

点赞数 2

文章标签： jquery

于 2022-03-23 23:46:42 首次发布

本文链接：https://blog.youkuaiyun.com/qq_64164870/article/details/123699833

版权

jQuery 事件绑定动画效果事件传播 DOM加载

关键词由优快云通过智能技术生成

这篇博客详细介绍了jQuery中的DOM加载、事件绑定、事件传播、事件坐标以及动画效果的实现。包括window.onload和jQuery方式的DOM加载，元素级事件绑定及合成事件如hover和toggle，事件传播的阻止以及事件坐标的不同属性。此外，还展示了jQuery中的动画效果，如show/hide/toggle用于显示和隐藏元素，slideUp/slideDown/slideToggle的滑动效果，以及fadeIn/fadeOut/fadeToggle的淡入淡出动画。文中通过实例演示了如何应用这些概念，包括点击按钮实现元素的显示隐藏，以及鼠标移动时元素的位置和大小变化。同时，还涉及到表格中删除按钮的事件处理和自定义动画效果的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.事件

加载Dom两种方式

window.onload方式

jQuery方式

绑定事件两种方式

元素.on("事件名",function(){})

元素.事件名(function(){})

合成事件/事件切换

hover()：鼠标悬停合成事件

toggle()：鼠标点击合成事件

事件传播(事件冒泡)

传播：小-->中-->大

阻止传播：事件后面加上return false

事件坐标

offsetX：当前元素左上角

clientX：窗口左上角

pageX：网页左上角

移除事件

元素.unbind("事件名")

二.动画效果

基本

显示：show(Time)

隐藏：hide(Time)

切换：toggle(Time)

滑动

slideUp(Time)：动画收缩（向上滑动）-->隐藏

slideDown(Time)：动画展开（向上滑动）-->显示

slideToggle(Time)：动画切换

淡入淡出（透明度）

fadeIn(Time)：淡入（透明度减少）

fadeOut(Time)：淡出（透明度增大）

fadeToggle(Time)：切换

自定义动画

元素.animate({属性：属性值},Time)

缩放 width ， height

移动 top，left

移动 (本元素),距离 top="+="，left="-="

——————————————————————

案例

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
       div{
           width: 100px;
           height: 100px;
           display: inline-block;
           background: red;
           //position:absolute
           margin:auto
       }
       </style>
   </head>
   <body>
       <script src="js/jquery-3.5.1.js"></script>
       <div></div>
       <a href="https://www.baidu.com">
           <p>hd</p>
       </a>
       <button οnclick="$('div').toggle(1000)">点我</button>
       <script>
       $("p").click(()=>{
           return false //阻止事件的冒泡
       })
           //事件
           //点击 onclick
           //鼠标 onmouseover onmouseout onmousemove onmouseleave
           //键盘 onkeydown onkeyup onkeypress
           //onsubmit 表格提交 onreset
           //onchange 输入框的值发生改变的时候
           //onblur 失去/onfocus 得到
           //jquery的事件就是js去掉on
           //js的事件只有一个
           //jquery能有多个事件
           $(() => {
               $("table").on("click", "button", function() {
                   $(this).parents("tr").remove()
               })
               $("#add").click(function() {
                   let str = `<tr>
               <td>苹果</td>
               <td><button>删除</button></td>
           </tr>`
                   $("table").append(str)
               })
               $("body").mousemove(e=>{
                   //e就是事件对象
                   console.log(e.clientX,e.pageX,e.offsetX)
               })
               $("body").unbind("mousemove")

               $("div").mouseover(function (){
                   $(this).animate({
                       width:"300px",
                       height:"300px",
                       left:"30px",
                       top:"30px"
                   })
               })
           })
       </script>

       <table border="">
           <tr>
               <td>苹果</td>
               <td><button>删除</button></td>
           </tr>
       </table>
       <button id="add">增加</button>
   </body>
</html>