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 ...
随机推荐
- 终于等到你: 图形化开源爬虫Hawk 3发布!
超级图形化爬虫Hawk已经发布两年半时间了,2015年升级到第二版,收到上千条用户反馈(tucao),100多个红包,总共666块五毛~一直想攒着这笔钱,去北境之王天通苑的龙德商场买最心爱的阿迪王! ...
- [已解决]pycharm的debugger模式不显示调试结果?
由于朋友遇到这个问题,特意上网搜索了很久,没有相关答案,后来自己尝试与能正常显示的做设置对比,才找到控制开关,在此做个记录,分享给遇到这个问题的朋友. 问题如下图: 解决办法: 左上角File--&g ...
- mysql由于权限问题看不到用户数据库
一.登录数据库 [root@localhost ~]# mysql -u root mysql > show databases; +--------------------+| Databas ...
- PAT1133:Splitting A Linked List
1133. Splitting A Linked List (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Y ...
- Js的String对象
Js的String对象常用方法: 方法一.得到某字符在字符串中的索引位置. str.indexOf(findStr,[index])--返回的是要查找字符在字符串中的位置索引 ,index开始查找 ...
- Linux共享库、静态库、动态库详解
1. 介绍 使用GNU的工具我们如何在Linux下创建自己的程序函数库?一个“程序函数库”简单的说就是一个文件包含了一些编译好的代码和数据,这些编译好的代码和数据可以在事后供其他的程序使用.程序函数库 ...
- Kali Linux中下载工具Axel的安装和使用
前言: Axel是一个多线程的HTTP/FTP下载工具,支持断点续传. Axel的安装 apt-get install axel Axel的卸载 apt remove axel 安装完成之后输入 ax ...
- 磁盘上没有足够的空间完成此操作的解决办法_Windows小知识
前言: 我们有时候调整系统分区时会遇到"磁盘上没有足够的空间完成此操作"的情况导致我们的分区无法完成,然而我们的磁盘上明明有未分配的空间,为什么不能创建磁盘分区呢?本文将介绍通过把 ...
- 架构选型之Nodejs与Java
前言: 身边越来越多的同事谈论Nodejs,谈其异步IO.事件回调.前后台统一一门语言,创业的朋友的第一个创业项目也选择了Nodejs,期望能够使用一种语言节省成本快速完成需求开发.与其他项目组的同事 ...
- Access Logging Tomcat
73.6 Configure Access Logging server.tomcat.accesslog.buffered=true # Buffer output such that it is ...