JQuery --- 第三期 (jQuery事件相关)
2024-06-14 23:49:20
个人学习笔记
1.JQuery事件绑定
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQuery事件绑定</title><script src="../jquery-1.12.4.js"></script><script>$(function () {alert("hello");// JQuery中有两种绑定方式/*** 1. eventName(fn)* 编码效率略高,但是部分时间JQuery没有实现,所以不能实现* 可以为元素绑定多个相同或不相同的事件,事件之间不会相互覆盖*/$(".button1").click(function () {alert("click1");});$(".button1").click(function () {alert("click2");});$(".button2").mouseenter(function () {alert("mouseenter");});$(".button2").mouseleave(function () {alert("mouseleave");});/*** 2. on(eventName,fn)* 编码效率略低,但是所有js事件都可以添加* 可以为元素绑定多个相同或不相同的事件,事件之间不会相互覆盖*/$(".button3").on("click",function () {alert("click3");});$(".button3").on("click",function () {alert("click4");});$(".button4").on("mouseenter",function () {alert("mouseenter");});$(".button4").on("mouseleave",function () {alert("mouseleave");});});</script>
</head>
<body>
<button class="button1">按钮1</button>
<button class="button2">按钮2</button>
<button class="button3">按钮3</button>
<button class="button4">按钮4</button>
</body>
</html>2.JQuery事件解绑
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件解绑</title><script src="../jquery-1.12.4.js"></script><script>$(function () {function click1() {alert("click1");};function click2() {alert("click2");};function mouseenter1() {alert("mouseenter");};function mouseleave1() {alert("mouseleave");};$(".button1").click(click1);$(".button1").click(click2);$(".button2").mouseenter(mouseenter1);$(".button2").mouseleave(mouseleave1);//移除事件/*** 适用off方法进行事件移除* 如果不传递任何参数,则会移除全部事件*/$(".button2").off();/*** 如果传递一个参数,则会移除这一类事件*/$(".button1").off("click");/*** 如果传递两个参数,则会移除这类事件的某个事件*/$(".button1").off("click",click1);});</script>
</head>
<body>
<button class="button1">按钮1</button>
<button class="button2">按钮2</button>
</body>
</html>3.JQuery事件冒泡和默认行为和事件的自动触发
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQuery事件冒泡和默认行为和事件的自动触发</title><style>*{margin: 0;padding: 0;}.father{width: 200px;height: 200px;background: green;}.son{width: 100px;height: 100px;background: blue;}</style><script src="../jquery-1.12.4.js"></script><script>$(function () {/*什么是事件冒泡怎样阻止事件冒泡什么是默认行为怎样阻止默认行为*/$(".father").click(function () {alert("father");});$(".son").click(function (event) {alert("son");// return false;//阻止事件冒泡 方法一// event.stopPropagation();//阻止事件冒泡 方法二
});$(".a").click(function (event) {alert("阻止跳转!");// return false;//阻止默认事件 方法一event.preventDefault();});$(".sub").click(function (event) {alert("阻止跳转!");// return false;//阻止默认事件 方法一event.preventDefault();});/*** 自动触发事件,方法一,触发事件的同时会触发冒泡事件或者默认行为* 特别的,当想将a标签设置自动触发和触发默认事件的时候,需要在a中将a的内容进行包裹,然后触发a的内容*/$(".son").trigger("click");/*** 自动触发事件,方法二,触发事件的同时不会触发冒泡事件或者默认行为*/$(".son").triggerHandler("click");});</script>
</head>
<body>
<div class="father"><div class="son"></div>
</div>
<a href="http://www.baidu.com" class="a">我是百度</a>
<form action="http://www.taobao.com"><input type="text"><input type="submit" class="sub">
</form>
</body>
</html>4.JQuery自定义事件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQuery自定义事件</title><script src="../jquery-1.12.4.js"></script><script>$(function () {/*** 自定义事件必须满足两个条件* 1.事件必须是通过on绑定的* 2.事件必须通过trigger来触发(必须设置为trigger方式的自动触发)*/$("button").on("myClick", function () {alert("myClick");});$("button").trigger("myClick");});</script>
</head>
<body>
<button>按钮</button>
</body>
</html>5.JQuery事件的命名空间
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQuery事件的命名空间</title><script src="../jquery-1.12.4.js"></script><script>$(function () {/*** 想要事件的命名空间有效,必须满足两个条件* 1.事件是通过on来绑定* 2.通过trigger或者triggerHandler来触发事件** 注意* 1.利用trigger触发子元素的带命名空间的事件,那么父元素带相同命名空间的事件也会被触发,而父元素* 没有带命名空间的事件不会被触发* 2.利用trigger触发子元素不带命名空间的事件,那么子元素所有相同类型的事件和父元素所有相同类型的* 事件都会被触发(不管带不带命名空间)*/$("button").on("click.xw", function () {alert("click1");});$("button").on("click.moti", function () {alert("click2");});// $("button").trigger("click.xw");$("button").trigger("click.moti");});</script>
</head>
<body>
<button>按钮</button>
</body>
</html>6.JQuery事件委托
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQuery事件委托</title><script src="../jquery-1.12.4.js"></script><script>$(function () {/*什么是事件委托?请别人帮忙,然后将做完的结果反馈给我们*/$("button").click(function () {$("ul").append("<li>我是新增的li</li>");});/*** 在JQuery中,如果通过核心函数找到的元素不止一个,那么在添加事件的时候,JQuery会遍历所有找的元素* 给所有找到的元素添加事件* 找不到新增的li,无法添加事件*/// $("ul>li").click(function () {// console.log($(this).html());// });/*** 使用事件委托:找到一个在入口函数执行之前就有的元素来监听动态添加元素的某些事件* 有事件冒泡的原理*/$("ul").delegate("li","click",function () {console.log($(this).html());});});</script>
</head>
<body>
<ul><li>我是第1个li</li><li>我是第2个li</li><li>我是第3个li</li>
</ul>
<button>新增li</button>
</body>
</html>7.JQuery事件委托练习
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQuery事件委托练习</title><style>*{margin: 0;padding: 0;}html,body{width: 100%;height: 100%;}.mask{width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: rgba(0,0,0,0.5);}.login{width: 400px;height: 300px;margin: 100px auto;background: green;position: relative;}.p{padding-top: 20%;font-size: 58px;}button {position: absolute;width: 50px;height: 30px;right: 0;top: 0;background: red;}</style><script src="../jquery-1.12.4.js"></script><script>$(function () {$("a").click(function () {var $mask = $("<div class=\"mask\">\n" +" <div class=\"login\">\n" +" <button>关闭</button>\n" +" <p class=\"p\">HELLO!</p>\n" +" </div>\n" +"</div>");$("body").append($mask);$("body").delegate(".login>button", "click",function () {$mask.remove();});return false;});});</script>
</head>
<body>
<a href="http://www.baidu.com">点击登录</a>
</body>
</html>8.JQuery的事件移入和移出
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQuery事件的移入和移除</title><script src="../jquery-1.12.4.js"></script><script>$(function () {/*1.mouseover/mouseover注意:子元素被移入和移除也会触发父元素事件*/$(".father").mouseover(function () {console.log("father被移入了");});$(".father").mouseover(function () {console.log("father被移出了");});/*2.mouseenter/mouseleave(推荐使用)注意:子元素被移入和移除不会会触发父元素事件*/$(".father").mouseenter(function () {console.log("father被移入了");});$(".father").mouseleave(function () {console.log("father被移出了");});/*** 3.hover方法* 注意:子元素被移入和移除不会会触发父元素事件* 接收两个方法参数:* 第一个参数是被移入的时候执行的回调函数* 第二个参数是被移出的时候执行的回调函数*/$(".father").hover(function () {console.log("father被移入了");},function () {console.log("father被移出了");});/*** 接收一个方法参数:同时监听移入和移出,执行相同的回调函数*/$(".father").hover(function () {console.log("被移入或者移出了!");});});</script><style>*{margin: 0;padding: 0;}.father{width: 200px;height: 200px;background: red;}.son{width: 100px;height: 100px;background: blue;}</style>
</head>
<body>
<div class="father"><div class="son"></div>
</div>
</body>
</html>9.移入移出练习一
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQuery事件移入移出练习</title><script src="../jquery-1.12.4.js"></script><script>$(function () {$("li").hover(function () {$(this).addClass("current");},function () {$(this).removeClass("current");});});</script><style>*{margin: 0;padding: 0;}.box{margin: 50px auto;width: 300px;height: 500px;border: 1px solid #000;}.box>h1{font-size: 35px;line-height: 35px;color: palevioletred;padding-left: 120px;}ul{margin-top: 20px;}ul>li{list-style: none;padding: 5px 5px;border: 1px dashed #000;}.content>img{width: 100px;height: 100px;background: darkturquoise;float: left;margin-top: 10px;margin-right: 10px;margin-left: 10px;}.content>p{font-size: 40px;margin-top: 30px;}.content{overflow: hidden;display: none;}.current>div{display: block;}</style>
</head>
<body><div class="box"><h1>莫提</h1><ul><li>1<div class="content"><img /> <p>Hello</p></div></li><li>2<div class="content"><img /> <p>Hello</p></div></li><li>3<div class="content"><img /> <p>Hello</p></div></li><li>4<div class="content"><img /> <p>Hello</p></div></li></ul></div>
</body>
</html>10.移入移出练习二
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQuery事件移入移出练习2</title><script src="../jquery-1.12.4.js"></script><script>/*第一种方法,效果不好,推荐用第二种方法*/// $(function () {// $(".nav>li").hover(function () {// $(this).addClass("current");// var indexIn =$(this).index();// $(".content>li").eq(indexIn).addClass("show");// },function () {// $(this).removeClass("current");// var indexOut =$(this).index();// $(".content>li").eq(indexOut).removeClass("show");// });// });/*第二种方法,使用siblings方法,获得没有被选中的同级别的其他元素*/$(function () {$(".nav>li").mouseenter(function () {$(this).addClass("current");$(this).siblings().removeClass("current");$(".content>li").eq($(this).index()).addClass("show");$(".content>li").eq($(this).index()).siblings().removeClass("show");});});</script><style>*{margin: 0;padding: 0;}.box{width: 500px;height: 400px;border: 1px solid #000;margin: 50px auto;}.nav>li{width: 100px;height: 50px;list-style: none;text-align: center;line-height: 50px;float: left;background: orange;}.nav>.current{background: gray;}.content>li{background: green;width: 500px;height: 400px;list-style: none;display: none;}.content>.show{display: block;}.content>li>p{text-align: center;font-size: 50px;line-height: 250px;}</style>
</head>
<body>
<div class="box"><ul class="nav"><li class="current">1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><ul class="content"><li class="show"><p>第一张图片</p></li><li><p>第二张图片</p></li><li><p>第三张图片</p></li><li><p>第四张图片</p></li><li><p>第五张图片</p></li></ul>
</div>
</body>
</html>转载于:https://www.cnblogs.com/cnmoti/p/10762293.html
JQuery --- 第三期 (jQuery事件相关)相关推荐
- JQuery属性、事件相关操作
JQuery属性相关操作 文章目录 JQuery属性相关操作 一.尺寸相关.滚动事件 1.获取和设置元素的尺寸 2.获取元素相对页面的绝对位置 3.获取浏览器可视区宽度高度 4.获取页面文档的宽度高度 ...
- 从jQuery的缓存到事件监听
很久以前,我还在cnblogs里面逛的时候就提出过一个问题(刚找了半天没找到).不知道大家有没有发现,用jQuery选择器"选择"之后的DOM上会添加jQuery********* ...
- jquery input值改变事件_前端技术--JQuery
JQuery 一.引言 1.JQuery是一个基于javascript语言的框架 --- 是对js代码的合理封装 2.js缺点,jquery优点 1)js代码比较复杂 var tag = docum ...
- jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据，表单序列化（异步获取表单内容）
jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...
- jQuery对象，jQuery查找标签，层级选择器，属性选择器，表单筛选器，操作节点标签事件...
目录 jQuery jQuery介绍 jQuery的优势 jQuery版本 jQuery内容: jQuery对象 jQuery基础语法 查找标签 基本选择器 层级选择器: 基本筛选器: 属性选择器 表 ...
- php 文本框事件,jQuery监控文本框事件并处理步骤详解
这次给大家带来jQuery监控文本框事件并处理步骤详解,使用jQuery监控文本框事件的注意事项有哪些,下面就是实战案例,一起来看一下.//事情委托 $(document) .on('input pr ...
- 深入了解jquery中的键盘事件
很多时候,我们需要获取用户的键盘事件,下面就一起来看看jquery是如何操作键盘事件的. 一.首先需要知道的是: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() k ...
- jquery的实时触发事件(textarea实时获取中文个数)
jquery的实时触发事件(textarea实时获取中文个数) (2014-09-16 11:49:50) 转载▼ 标签: 实时触发事件 中文个数 onpropertychange oninput o ...
- jquery为图片添加事件
在用jquery 为图片添加事件的时候会遇到一个问题,你添加的图片是通过javascript函数添加上去的所以你直接这样 $(img).click(function(){DoSomeThing();} ...
最新文章
- 构建JSE 开发环境(图文并茂)
- 日常工作部门及体系相关单词
- Python 中的匿名函数，你滥用了吗？
- mysql inner join
- 响应式网格项目动画布局_响应式网格及其实际使用方式：常见的UI布局
- extjs 月份选择控件_ExtJs日期控件案例（可控制时间的选择） | 学步园
- 将dll制作成控件_如何将皮料剪切成想要的大小？制作皮具几种裁剪工具和使用方法...
- mysql 定期删除表中无用数据
- （通用版）salesforce中soql及sosl的伪‘Like’模糊检索
- JDK官方文档（包含所有版本）
- matlab中根号的表示方法,Matlab中根号表示方法分享
- WPF实现炫酷趋势图
- android 11.0 去掉音量键电源键组合键的屏幕截图功能
- python turtle笛卡尔心形线_用MATLAB实现心形线
- 解决ctrl+win+left/right失效问题（windows10桌面切换快捷键）
- 基于MATLAB对低照度图像进行直方图均衡化和同态滤波操作
- 计算机等级良好和优秀是什么意思？
- Webpack打包css文件-css-loader+style-loader
- 2021-10-28 MyBatis学习
- Java编写圆形三角形长方形等面积与周长