jQuery事件与动态效果
一:阻止后续事件执行
1.推荐使用阻止事件
return false
2.未使用 阻止后续事件执行
<body>
<!--form表单-->
<form action="">
<span id="d1" style="color: red"></span>
<!--提交按钮 刷新页面 本质触发提交动作 把form表单数据打包发送到 后端 并且刷新-->
<input type="submit" id="d2">
</form>
<script>
<!--绑定点击事件--> <!--方式2 需要加参数-->
$('#d2').click(function (e) {
// 本身submit 还有一个事件需要执行 submit刷新 所有目前有两个事件 会停止该事件
$('#d1').text('宝贝 你能看到我吗？')
})
</script>
</body>
3.使用阻止后续事件执行
<body>
<!--form表单-->
<form action="">
<span id="d1" style="color: red"></span>
<!--提交按钮 刷新页面 本质触发提交动作 把form表单数据打包发送到 后端 并且刷新-->
<input type="submit" id="d2">
</form>
<script>
<!--绑定点击事件--> <!--方式2 需要加参数-->
$('#d2').click(function (e) {
// 本身submit 还有一个事件需要执行 submit刷新 所有目前有两个事件 会停止该事件
$('#d1').text('宝贝 你能看到我吗？')
// 阻止标签后续事件的执行 方式1 (推荐使用第一种)
return false
// 阻止标签默认的事件 方式2 (只能 阻止标签默认的事件)
// e.preventDefault()
})
</script>
</body>
二:阻止事件冒泡
1.什么是事件冒泡？
div包了p包了span
比喻介绍:
当span被点击事件执行->会向上一级p标签汇报自己被点击了 p标签会自己查看是否有点击事件
有则自动执行 在向上一级div标签汇报 div标签也会查看自己是否有点击事件 有则自动执行
该操作叫作 《事件冒泡》
2.未阻止事件冒泡
以下情况 称之为事件冒泡
3.阻止事件冒泡
<body>
<!--div包了p包了span-->
<!-- 当span被点击事件执行->会向上一级p标签汇报自己被点击了 p标签会自己查看是否有点击事件
有则自动执行 在向上一级div标签汇报 div标签也会查看自己是否有点击事件 有则自动执行
该操作叫作 《事件冒泡》-->
<div id="d1">div
<p id="d2">div>p
<span id="d3">span</span>
</p>
</div>
<script>
$('#d1').click(function () {
alert('div')
})
$('#d2').click(function () {
alert('p')
}) // 方式2 参数
$('#d3').click(function (e) {
alert('span')
})
</script>
</body>
4.2.阻止冒泡事件
return false : 阻止事件冒泡
<body>
<div id="d1">div
<p id="d2">div>p
<span id="d3">span</span>
</p>
</div>
<script>
$('#d1').click(function () {
alert('div')
})
$('#d2').click(function () {
alert('p')
}) // 方式2 参数
$('#d3').click(function (e) {
alert('span')
// 阻止事件冒泡 解决事件往上报 方式1
return false
// // 阻止事件冒泡 方式2
// e.stopPropagation()
})
</script>
</body>
三:事件委托
1.什么是事件委托？
在指定范围内 将事件委托给某个标签 无论该标签是事先写好的还是后面动态创建的。
<body>
<button>是兄弟 就来砍我！！！</button>
<script>
// 事件委托
// body内所有的点击事件委托给button触发
$('body').on('click','button',function () {
// 在指定范围内 将事件委托给某个标签 无论该标签是事先写好的还是后面动态创建的
alert('别砍了 疼！！！')
})
</script>
</body>
2.后面动态创建的演示
四:点赞动态展示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>点赞动画示例</title>
<!--bootstrap引入 CSS CDN-->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<!--jQuery引入 CDN-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!--Bootstrap引入 Js CDN-->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
body {
/*居中展示*/
text-align: center;
}
div {
position: relative;
display: inline-block;
}
div>i {
/*展示 让行内标签具备块级标签可以修改长宽的特性*/
/*也具备行内标签文本多大就占多大的特性*/
display: inline-block;
color: red;
position: absolute;
right: -16px;
top: -5px;
/*透明度*/
opacity: 1;
}
</style>
</head>
<body>
<div id="d1">点赞</div>
<script>
// 点击事件触发执行 《触发一次 div尾部增加一次i标签》
$("#d1").on("click", function () {
var newI = document.createElement("i");
newI.innerText = "+1";
// 将newI标签添加到 当前被操作标签尾部
$(this).append(newI);
// 当前被操作标签本身的孩子们 i标签都增加动画效果
$(this).children("i").animate({
opacity: 0 // 透明度
}, 1000) // 动态点赞显示时间
})
</script>
</body>
</html>
五:未读信息(徽章)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--bootstrap引入 CSS CDN-->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<!--jQuery引入 CDN-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!--Bootstrap引入 Js CDN-->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!--Font-Awesome引入 CSS-->
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<a href="#">Inbox <span class="badge"></span></a>
<script>
var spanEle = document.createElement("i")
var x = 1
$('a').on('click',function () {
spanEle.innerText = x
$(this).children().append(spanEle)
x++
})
</script>
</body>
</html>
六:页面加载
1.BOM js原生中 等待页面加载完毕再执行代码
window.onload = function(){
// js代码
}
2.jQuery中等待页面加载完毕
# 第一种
// document DOM文档 ,ready 准备
// 等待DOM文档加载等待完毕之后在触发下面js代码的运行
$(document).ready(function(){
// js代码
})
# 第二种
// 等待页面加载完毕在执行js代码
$(function(){
// js代码
})
# 第三种 (推荐使用)
"""直接写在body内部最下方"""
七：动画效果
$('#d1').hide(5000) // 5秒后 隐藏
w.fn.init [div#d1]
$('#d1').show(5000) // 5秒后 展示
w.fn.init [div#d1]
$('#d1').slideUp(5000) // 往上滑动
w.fn.init [div#d1]
$('#d1').slideDown(5000) // 往下滑动
w.fn.init [div#d1]
$('#d1').fadeOut(5000) // 渐变
w.fn.init [div#d1]
$('#d1').fadeIn(5000) // 渐显
w.fn.init [div#d1]
$('#d1').fadeTo(5000,0.4) // 渐变到某透明度不在变化
w.fn.init [div#d1]
jQuery事件与动态效果的更多相关文章
- JQuery选择器JQuery 事件
JQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") ...
- HTML Select 标签选择后触发jQuery事件代码实例
页面设计原由: 因为很多客户不知道如何来到我们公司,领导想让我在微信公众号上面做一个链接,客户可以直接通过微信公众号打开地图并导航到我们公司的办公地点. 实现起来并不难,但由于公司有很多办事处,所以需 ...
- jquery事件核心源码分析
我们从绑定事件开始,一步步往下看: 以jquery.1.8.3为例,平时通过jquery绑定事件最常用的是on方法,大概分为下面3种类型: $(target).on('click',function( ...
- 解密jQuery事件核心 - 委托设计（二）
第一篇 http://www.cnblogs.com/aaronjs/p/3444874.html 从上章就能得出几个信息: 事件信息都存储在数据缓存中 对于没有特殊事件特有监听方法和普通事件都用ad ...
- 解密jQuery事件核心 - 模拟事件（四）
前几章已经把最核心的实现都分解过了,这一章我们看看jQuery是如何实现事件模拟的 在Internet Explorer 8和更低,一些事件change 和 submit本身不冒泡,但jQuery修改 ...
- 深入学习jQuery事件对象
× 目录 [1]获取 [2]事件类型 [3]事件目标[4]当前元素[5]事件冒泡[6]默认行为[7]命名空间[8]返回值[9]键值 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event, ...
- 深入学习jQuery事件绑定
× 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...
- jquery 事件冒泡的介绍以及如何阻止事件冒泡
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级 ...
- jQuery源代码学习之九—jQuery事件模块
jQuery事件系统并没有将事件坚挺函数直接绑定在DOM元素上,而是基于事件缓存模块来管理监听函数的. 二.jQuery事件模块的代码结构 //定义了一些正则 // // //jQuery事件对象 j ...
随机推荐
- ImGUI 1.87 绘制D3D外部菜单
ImGUI 它是与平台无关的C++轻量级跨平台图形界面库,没有任何第三方依赖,可以将ImGUI的源码直接加到项目中使用,该框架通常会配合特定的D3Dx9等图形开发工具包一起使用,ImGUI常用来实现进 ...
- [题解] Atcoder ABC 213 H Stroll DP，分治FFT
题目 令\(dp_{i,j}\)表示从点1到达点i,路径长度为j的方案数.转移为\(dp_{i,j}=\sum_{(i,v,w)\in E}dp_{v,j-w}p_{i,v,w}\). 显然只能从长度 ...
- jq判断页面滚动条进行样式修改
$(window).scroll(function(){//窗口的滚动条 if($(window).scrollTop()>100){ //垂直滚动条钓offset 大于90时. $(" ...
- KTV和泛型（3）
泛型除了KTV,还有一个让人比较疑惑的玩意,而且它就是用来表达疑惑的:? 虽然通过泛型已经达到我们想要的效果了,例如: List<String> list = new ArrayList& ...
- js红宝书学习笔记（一）引用类型
一.引用类型 ECMAScript中,引用类型是一种数据结构称之为对象定义,,引用对象不同于传统面向对象语言所支持的类和接口等基本结构 创建Object 实例的两种方式: new操作符跟Object构 ...
- reportportal 集成 robotframework 自动化执行及结果可视化
前言: 最近领导想了个需求,想把目前组内在linux平台上执行的自动化脚本搞成可视化,如果是web站点相关日志可视化倒是简单了,ELK就是不错的选择,大部分可视化项目这种的,可以做的开起来很炫. 我们 ...
- 通过齐博fun函数实现调用每周赚取的积分排行使用
下面代码保存到fun函数目录即可 <?php namespace app\common\fun; use think\db; class Jfrank { /** * @param string ...
- HashMap基本使用方法
HashMap Map集合基于 键(key)/值(value)映射.每个键最多只能映射一个值.键可以是任何引用数据类型的值,不可重复:值可以是任何引用数据类型的值,可以重复:键值对存放无序. Hash ...
- 小菜鸡的学习笔记---<正则表达式(1)>
正则表达式学习笔记(1) (纯新手学习笔记,大佬绕路 QAQ) 一.简介 正则表达式就是一种文本模式用来匹配一系列满足特定条件的字符串,可以对比一下数学里面的表达式,比如我们要用一个表达式表示一串数字 ...
- Codeforces Round #786 (Div. 3) 补题记录
小结: A,B,F 切,C 没写 1ll 对照样例才发现,E,G 对照样例过,D 对照样例+看了其他人代码(主要急于看后面的题,能调出来的但偷懒了. CF1674A Number Transforma ...