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 ...
随机推荐
- mysql数据库死锁的产生原因及解决办法
这篇文章主要介绍了mysql数据库锁的产生原因及解决办法,需要的朋友可以参考下 数据库和操作系统一样,是一个多用户使用的共享资源.当多个用户并发地存取数据 时,在数据库中就会产生多个事务同时存取同 ...
- PAT1106:Lowest Price in Supply Chain
1106. Lowest Price in Supply Chain (25) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CH ...
- Linux时间子系统之八：动态时钟框架（CONFIG_NO_HZ、tickless）
在前面章节的讨论中,我们一直基于一个假设:Linux中的时钟事件都是由一个周期时钟提供,不管系统中的clock_event_device是工作于周期触发模式,还是工作于单触发模式,也不管定时器系统是工 ...
- 为什么选择Spring Boot作为微服务的入门级微框架
摘要:1. Spring Boot是什么,解决哪些问题 1) Spring Boot使编码变简单 2) Spring Boot使配置变简单 3) Spring Boot使部署变简单 4) Spring ...
- SSH概念及常用操作汇总
工作有一段时间了,经常用SSH登录远程机器,但对原理一直不是很了解,所以查阅了一些资料,写个小结. 一. SSH是什么? SSH的全称是Secure Shell, 是一种“用来在不安全的网络上安全地运 ...
- pdf在线加载·
https://yq.aliyun.com/articles/40197 在线例子是这个
- Layer组件多个iframe弹出层打开与关闭及参数传递
一.Layer简介 Layer是一款近年来备受青睐的web弹层组件,基于jquery,易用.实用,兼容包括IE6在内的所有主流浏览器,拥有丰富强大的可自定义的功能. Layer官网地址:http:// ...
- app后端设计(7)-- 项目管理
移动互联网行业是个快速发展的行业,需求不断变化,产品更新快.基于移动互联网的以上特点,在开发产品的过程中,我们放弃了传统的瀑布流开发模型,引入了精益的理念和scrum这个敏捷开发框架,下面谈谈实施过程 ...
- Android 不规则封闭区域填充 手指秒变油漆桶
转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/45954255: 本文出自:[张鸿洋的博客] 一.概述 在上一篇的叙述中,我们通 ...
- celery学习笔记1
生产者消费者模式 在实际的软件开发过程中,经常会碰到如下场景:某个模块负责产生数据,这些数据由另一个模块来负责处理(此处的模块是广义的,可以是类.函数.线程.进程等).产生数据的模块,就形象地称为生产 ...