JQuery --- 第三期 (jQuery事件相关)
个人学习笔记
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: ;
padding: ;
}
.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: ;
padding: ;
}
html,body{
width: %;
height: %; }
.mask{
width: %;
height: %;
position: fixed;
top: ;
left: ;
background: rgba(,,,0.5);
}
.login{
width: 400px;
height: 300px;
margin: 100px auto;
background: green;
position: relative;
}
.p{
padding-top: %;
font-size: 58px;
}
button {
position: absolute;
width: 50px;
height: 30px;
right: ;
top: ;
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: ;
padding: ;
}
.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: ;
padding: ;
}
.box{
margin: 50px auto;
width: 300px;
height: 500px;
border: 1px solid #;
}
.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 #;
}
.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>
<div class="content">
<img /> <p>Hello</p>
</div>
</li>
<li>
<div class="content">
<img /> <p>Hello</p>
</div>
</li>
<li>
<div class="content">
<img /> <p>Hello</p>
</div>
</li>
<li>
<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: ;
padding: ;
}
.box{
width: 500px;
height: 400px;
border: 1px solid #;
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"></li>
<li></li>
<li></li>
<li></li>
<li></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>
JQuery --- 第三期 (jQuery事件相关)的更多相关文章
- jQuery不支持hashchange事件？
$(window) .bind( 'hashchange', onHashchange ) .trigger( 'hashchange' ); jQuery版本是1.9.1的,去源码里没找到hashc ...
- 从jQuery的缓存到事件监听
不知道大家有没有发现,用jQuery选择器"选择"之后的DOM上会添加jQuery*********属性. <DIV id=d1 jQuery1294122065250=&q ...
- 从零开始学 Web 之 jQuery（七）事件冒泡，事件参数对象，链式编程原理
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- js便签笔记（6）——jQuery中的ready()事件为何需要那么多代码？
前言: ready()事件的应用,是大家再熟悉不过的了,学jQuery的第一步,最最常见的代码: jQuery(document).ready(function () { }); jQuery(fun ...
- 【jQuery源码】事件存储结构
a. jQuery事件原型——Dean Edwards的跨浏览器AddEvent()设计 源码解读 重新梳理一下数据结构,使用一个例子 <input type="text" ...
- jQuery监控文本框事件并作相应处理的方法
本文实例讲述了jQuery监控文本框事件并作相应处理的方法.分享给大家供大家参考.具体如下: //事情委托 $(document) .on('input propertychange', '#que ...
- jquery-10 jquery中的绑定事件和解绑事件的方法是什么
jquery-10 jquery中的绑定事件和解绑事件的方法是什么 一.总结 一句话总结:bind(); unbind(); one(); 1. jquery中的绑定事件和解绑事件的方法是什么? bi ...
- 前端09 /jQuery标签操作、事件、补充
前端09 /jQuery标签操作.事件.补充 目录 前端09 /jQuery标签操作.事件.补充 1.标签内文本操作 1.1 html标签元素中的所有内容 1.2 text 标签元素的文本内容 2.文 ...
- Jquery的点击事件，三句代码完成全选事件
先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
随机推荐
- 第六章之S5PV210正确启动u-boot
1,根据上一章最后一步生成u-boot写入到板子上,生成如下代码 UARU 0x43110220 DDR IS OK! 0x12345678 0xEA000014 U-Boot - ::) CPU: ...
- 字符串转json以及获取域名的参数
本例将通过location.search来进行字符串拼接成json以及查询域名参数的value console.log(request('id')); function request(obj){ v ...
- Maven安装和使用
一.安 装 1.解压好后,添加系统环境变量 变量名:MAVEN_HOME 属性值:D:\apache-maven-3.3.3 //也就是解压的路径 path中添加:%MAVEN_HOME%\bi ...
- 你可能不知道的 JavaScript 中数字取整
网上方法很多,标题党一下,勿拍 ^_^!实际开发过程中经常遇到数字取整问题,所以这篇文章收集了一些方法,以备查询. 常用的直接取整方法 直接取整就是舍去小数部分. 1.parseInt() parse ...
- map和set的原理
1)map:经过排序了的二元组的集合,map中的每个元素都是由两个值组成,其中的key(键值,一个map中的键值必须是唯一的) 是在排序或搜索时使用,它的值可以在容器中重新获取:而另一个值是该元素关联 ...
- CentOS 7安装Python3.6过程（让linux系统共存Python2和Python3环境）
CentOS 7系统自带了python2,不过可以不用2版本,直接使用python3运行python脚本就可以,但是千万别去动系统自带的python2,因为有程序依赖目前的python2环境,比如yu ...
- Java描述数据结构之链表的增删改查
链表是一种常见的基础数据结构,它是一种线性表,但在内存中它并不是顺序存储的,它是以链式进行存储的,每一个节点里存放的是下一个节点的"指针".在Java中的数据分为引用数据类型和基础 ...
- Java开源生鲜电商平台-售后模块的设计与架构(源码可下载）
Java开源生鲜电商平台-售后模块的设计与架构(源码可下载) 说明:任何一个的电商平台都有售后服务系统,那么对于我们这个生鲜的电商平台,售后系统需要思考以下几个维度. 1. 买家的需求维度 说明:买家 ...
- [爬虫]爬虫时碰到的IOError: [Errno ftp error] [Errno 10060]错误的原因以及解决方法
IOError: [Errno ftp error] [Errno 10060] 原因是爬取页面过快造成暂时被网站ban掉的情况,设置time.sleep(1)就好,后来发现ban的时间不定,就自己动 ...
- SSE图像算法优化系列十八：三次卷积插值的进一步SSE优化。
本文是在学习https://blog.csdn.net/housisong/article/details/1452249一文的基础上对算法的理解和重新整理,再次非常感谢原文作者的深入分析以及分享. ...