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 ...
随机推荐
- 【方案】mvc 保证定时器回收限制
在项目中我们或多或少的遇到一些需要定时触发或者计算的东西,这个时候我们就需要定时器来作为解决方案.非常好思路清晰,业务逻辑完好,定时器也开好了,当我们信心满满的挂到IIS服务器的时候,发现写的定时器在 ...
- 读《图解HTTP》有感-（与HTTP协作的WEB服务器）
写在前面 Web服务器一般指网站服务器,是指驻留于因特网上某种类型计算机的程序,可以向浏览器等Web客户端提供文档: 一台web服务器可以搭建多个独立域名的web网站,也可以作为通信路径(路由)上的中 ...
- TensorFlow源码安装
前言 TensorFlow如果能二进制包安装,我真的不想选择自己编译,但是情况不由人,好不容易找到一台服务器,CPU不支持AVX指令集,安装的release版本运行到import tensorflow ...
- 50行ruby代码开发一个区块链
区块链是什么?作为一个Ruby开发者,理解区块链的最好办法,就是亲自动手实现一个.只需要50行Ruby代码你就能彻底理解区块链的核心原理! 区块链 = 区块组成的链表? blockchain.ruby ...
- 升讯威微信营销系统开发实践：（4）源代码结构说明 与 安装部署说明（ 完整开源于 Github）
GitHub:https://github.com/iccb1013/Sheng.WeixinConstruction因为个人精力时间有限,不会再对现有代码进行更新维护,不过微信接口比较稳定,经测试至 ...
- java基础-学java util类库总结
JAVA基础 Util包介绍 学Java基础的工具类库java.util包.在这个包中,Java提供了一些实用的方法和数据结构.本章介绍Java的实用工具类库java.util包.在这个包中,Java ...
- Ubuntu安装和卸载.bundle格式的VMware
本文由荒原之梦原创,原文链接:http://zhaokaifeng.com/?p=628 前言: 本文中用于演示的.bundle文件是VMware-Workstation-Full-14.1.1-75 ...
- Kali Linux图形界面与命令行界面的切换
前言: 有时候为了节约系统资源,使用命令行界面能够让Linux系统的运行更加流畅,处理任务的速度也更加快.现在的Kali安装完成后默认是开机就启动图形化界面.本文将介绍通过编辑Kali启动引导文件的方 ...
- codeforces 982D Shark
题意: 给出一个数组,删除大于等于k的数字,使得其满足以下条件: 1.剩余的连续的段,每一段的长度相等: 2.在满足第一个条件的情况下,段数尽可能多: 3.在满足前两个条件的情况下,k取最小的. 求k ...
- 关于python中phantomjs无法访问网页的处理
笔者使用的系统是linux ubuntu,最近在学习爬虫的过程中遇到了一个抓狂的问题,我尝试使用selenium加phantomjs来登陆网页的时候,Pythony一直提示selenium无法找到元素 ...