-
事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; } div{ width: 200px; height: 200px; background-color: red; margin-left: 100px; } </style> <script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script> <script> /** * JS获取元素节点的时候 动作写在head中 * 必须把这个动作放在 文档加载完成的事件中才可以 * 否则 获取节点会失败 */ window.onload = function(){ console.log("页面加载完成") } // JQ $(document).ready(function(){ console.log("JQ页面加载完成") }) //简化 $(function(){ console.log("JQ简化页面加载完成") }) </script> </head> <body> <img src="../img/pic15.jpg" /> <br /><br /> <button>this is a button</button> <br /><br /> <button class="btn">one event</button> <div></div> <script> /** * 事件的语法 * $(选择器).事件名(触发事件执行的函数) */ // 鼠标悬浮的事件 : 包含两个函数 鼠标进入的时候执行的函数 鼠标离开的时候执行的函数 只给一个函数的话 两个鼠标的动作都会执行这个函数 // $("img").hover(function(e){ // console.log("鼠标悬浮 ------ 离开") // }) $("img").hover( // 鼠标悬浮指定的动作 function(e){ $(this).css("border", "solid 2px red") }, // 鼠标离开执行的动作 function(e){ $(this).css("border", "0") } ) // 绑定事件 on 可以绑定多个事件 $("button").on({ "click": function(e){ console.log("哎呀 我不知道被谁点了一下") }, "mouseover":function(e){ console.log("哎呀 有只小老鼠爬上来了") }, "mouseleave":function(e){ console.log("哎呀 小老鼠终于走了") } }) // 移除事件 可以移除多个事件 每个事件之间使用空格隔开 $("button").off("click mouseleave") // 一次性事件 // $(".btn").click(function(){ // console.log("我被点击了") // }) $(".btn").one("click", function(e){ console.log("我被点击了") }) // 事件对象及其属性 $("div").mousedown(function(e){ //console.log(e) // 获取鼠标相对与浏览器客户区的间隙 console.log("获取鼠标相对与浏览器客户区的间隙" + e.clientX + "-----" + e.clientY) // 标签相当于body的左边间隙和上边间隙 console.log("标签相当于body的左边间隙和上边间隙" + this.offsetLeft + "-----" + this.offsetTop) // 获取鼠标相当于标签的位置 --- 要完成的需求 console.log("获取鼠标相当于标签的位置" + (e.clientX - this.offsetLeft) + "----" + (e.clientY - this.offsetTop)) }) </script> </body> </html>
HTML——jQuery—事件
最新推荐文章于 2023-05-30 15:09:20 发布