jQuery知识梳理20190818
jQuery知识梳理20190818
目录
1. 时间绑定和解绑
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>18_事件绑定与解绑</title>
</head>
<style type="text/css">
* {
margin: 0px;
}
.out {
position: absolute;
width: 200px;
height: 200px;
top: 20px;
left: 10px;
background: blue;
}
.inner {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
background: red;
}
.divBtn {
position: absolute;
top: 250px;
}
</style>
<body style="height: 2000px;">
<div class="out">
外部DIV
<div class="inner">内部div</div>
</div>
<div class='divBtn'>
<button id="btn1">取消绑定所有事件</button>
<button id="btn2">取消绑定mouseover事件</button>
<button id="btn3">测试事件坐标</button>
<a href="http://www.baidu.com" id="test4">百度一下</a>
</div>
<!--
1. 事件绑定(2种)：
* eventName(function(){})
绑定对应事件名的监听, 例如：$('#div').click(function(){});
* on(eventName, funcion(){})
通用的绑定事件监听, 例如：$('#div').on('click', function(){})
* 优缺点:
eventName: 编码方便, 但只能加一个监听, 且有的事件监听不支持
on: 编码不方便, 可以添加多个监听, 且更通用
2. 事件解绑：
* off(eventName)
3. 事件的坐标
* event.clientX, event.clientY 相对于视口的左上角
* event.pageX, event.pageY 相对于页面的左上角
* event.offsetX, event.offsetY 相对于事件元素左上角
4. 事件相关处理
* 停止事件冒泡 : event.stopPropagation()
* 阻止事件默认行为 : event.preventDefault()
-->
<script src="js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
// 1.给class为out的div的点击事件绑定监听函数，打印'out clicked'(用两种方法绑定)
/*$('.out').click(function () {
console.log('out click1')
})*/
$('.out').on('click', function () {
console.log('out clicked2')
})
//2.给class为inner的div的鼠标移入和鼠标移出事件绑定监听函数
/*$('.inner')
.mouseenter(function () {
console.log('进入...')
})
.mouseleave(function () {
console.log('离开...')
})*/
$('.inner')
.on('mouseenter', function () {
console.log('进入...')
})
.on('mouseleave', function () {
console.log('离开...')
})
/*$('.inner').hover(function () {
console.log('进入...')
}, function () {
console.log('离开...')
})*/
//3. 点击btn1解除inner上的所有事件监听
$('#btn1').click(function () {
$('.inner').off()
})
//4.点击btn2解除inner上的mouseover事件
$('#btn2').click(function () {
$('.inner').off('mouseover')
})
//5. 点击btn3得到事件坐标
$('#btn3').click(function (event) { // event时间对象
console.log(event.offsetX, event.offsetY) // 原点为时间元素的左上角
console.log(event.clientX, event.clientY) // 原点为窗口的左上角
console.log(event.pageX, event.pageY) // 原点为页面的左上角
})
//6. 点击.inner区域, 外部点击监听不响应
$('.inner').click(function (event) {
console.log('click inner')
// 停止事件冒泡
event.stopPropagation()
})
//7. 点击链接, 如果当前时间是偶数不跳转
$('#test4').click(function () {
var time = Date.now(event)
alert(time)
if(time%2===0) {
// 阻止事件默认行为
event.preventDefault()
}
})
})
</script>
</body>
</html>
2. 区别mouseover与mouseenter
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>19_事件切换</title>
</head>
<style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 10px;
background: olive;
}
.div2 {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
background: red;
}
.div3 {
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 230px;
background: olive;
}
.div4 {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
background: yellow;
}
.divText{
position: absolute;
top: 330px;
left: 10px;
}
</style>
<body>
<div class="divText">
区分鼠标的事件
</div>
<div class="div1">
div1.....
<div class="div2">div2....</div>
</div>
<div class="div3">
div3.....
<div class="div4">div4....</div>
</div>
<!--
区别mouseover与mouseenter?
* mouseover: 在移入子元素时也会触发, 对应mouseout
* mouseenter: 只在移入当前元素时才触发, 对应mouseleave
hover()使用的就是mouseenter()和mouseleave()
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
$('.div1').mouseover(function () {
console.log('移入div1或其子元素')
}).mouseout(function () {
console.log('移出div1或其子元素')
})
$('.div3').mouseenter(function () {
console.log('移入div3元素')
}).mouseleave(function () {
console.log('移出div3元素')
})
$('.div3').hover(function () {
console.log('移入div33元素')
this.style.background = 'red'
}, function () {
console.log('移出div33元素')
this.style.background = 'blue'
})
</script>
</body>
</html>
3. 时间委托（委派/代理）
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>20_事件委托2</title>
</head>
<body>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
<li>22222</li><br>
<button id="btn1">添加新的li</button>
<button id="btn2">删除ul上的事件委托的监听器</button>
<!--
1. 事件委托（委派/代理）:
* 将多个子元素(li)的事件监听委托给父辈元素(ul)处理
* 监听回调是加在了父辈元素上
* 当操作任何一个子元素(li)时, 事件会冒泡到父辈元素(ul)
* 父辈元素不会直接处理事件, 而是根据event.target得到发生事件的子元素(li), 通过这个子元素调用事件回调函数
2. 事件委托的2方:
* 委托方: 业主 li
* 被委托方: 中介 ul
3. 使用事件委托的好处
* 添加新的子元素, 自动有事件响应处理
* 减少事件监听的数量: n==>1
4. jQuery的事件委托API
* 设置事件委托: $(parentSelector).delegate(childrenSelector, eventName, callback)
* 移除事件委托: $(parentSelector).undelegate(eventName)
-->
<script src="js/jquery-1.10.1.js"></script>
<script>
$(function () {
//事件委托
$('ul').delegate('li', 'click', function () {
console.log(this) // 点击发生事件的li
this.style.background = 'red'
})
$('#btn1').click(function () {
$('ul').append('<li>xxxxxxxxx</li>')
})
$('#btn2').click(function () {
// 移除事件委托
$('ul').undelegate()
})
})
</script>
</body>
</html>
4 . 多库共存
如果有2个库都有$, 就存在冲突。 jQuery库可以释放$的使用权, 让另一个库可以正常使用, 此时jQuery库只能使用jQuery了。
jQuery.noConflict()
5. window.onload与 $(document).ready()的区别
- window.onload：包括页面的图片加载完后才会回调(晚)， 只能有一个监听回调。
$(document).ready()：等同于: $(function(){})， 页面加载完就回调(早)，可以有多个监听回调。
6. 自定义插件
- 扩展jQuery的工具方法：
$.extend(obj)
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
- 扩展jQuery对象的方法：
$.fn.extend(object)
jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});
- 自定义文件：
my_jQuery_plugin.js
/*
扩展jQuery的工具方法 : $.extend(object)
min(a, b) : 返回较小的值
max(c, d) : 返回较大的值
leftTrim() : 去掉字符串左边的空格
rightTrim() : 去掉字符串右边的空格
*/
//正则
/*
^ 匹配字符串开始
\s 匹配空格
+ 匹配一次或者多次
$ 匹配字符串的末尾
*/
//扩展$
$.extend({
min: function (a, b) {
return (a < b) ? a : b
},
max: function (a, b) {
return (a > b) ? a : b
},
leftTrim: function (strToBeTrimed) {
return strToBeTrimed.replace(/^\s+/, '')
},
rightTrim: function (strToBeTrimed) {
return strToBeTrimed.replace(/\s+$/, '')
}
})
//扩展 $('#id').XXXXX
//$.fn.extend(object)
// checkAll() : 全选
// unCheckAll() : 全不选
// reverseCheck() : 全反选
$.fn.extend({
checkAll: function () {
// console.log('checkAll')
this.prop('checked', true)
},
unCheckAll: function () {
this.prop('checked', false)
},
reverseCheck: function () {
this.each(function () {
this.checked = !this.checked
})
}
})
- 使用自定义插件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>25_扩展插件</title>
<style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
left: 10px;
background: red;
}
</style>
</head>
<body>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球
<br/>
<input type="button" id="checkedAllBtn" value="全 选"/>
<input type="button" id="checkedNoBtn" value="全不选"/>
<input type="button" id="reverseCheckedBtn" value="反选"/>
<!--
1. 扩展jQuery的工具方法
$.extend(object)
2. 扩展jQuery对象的方法
$.fn.extend(object)
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script src="js/my_jQuery_plugin.js" type="text/javascript"></script>
<script type="text/javascript">
/*
需求：
1. 给 $ 添加4个工具方法:
* min(a, b) : 返回较小的值
* max(c, d) : 返回较大的值
* leftTrim() : 去掉字符串左边的空格
* rightTrim() : 去掉字符串右边的空格
2. 给jQuery对象 添加3个功能方法:
* checkAll() : 全选
* unCheckAll() : 全不选
* reverseCheck() : 全反选
*/
// 得到最大最小值
var a = 1
var b = 2
var result_min = $.min(a, b)
var result_max = $.max(a, b)
console.log(result_min)
console.log(result_max)
// 左trim 右trim
var str = ' 悟空 '
console.log('|' + str + '|')
var resultStrLeft = $.leftTrim(str)
console.log('|' + resultStrLeft + '|')
var resultStrRight = $.rightTrim(str)
console.log('|' + resultStrRight + '|')
//全选
$('#checkedAllBtn').click(function () {
$(':checkbox').checkAll()
})
//全不选
$('#checkedNoBtn').click(function () {
$(':checkbox').unCheckAll()
})
//反选
$('#reverseCheckedBtn').click(function () {
$(':checkbox').reverseCheck()
})
</script>
</body>
</html>
7. 使用插件
- 插件是基于jQuery编写的扩展库。jQuery官网上有很多插件：
http://plugins.jquery.com/。 - 常见插件：
- 表单校验插件：jquery-validation
- jquery UI
- 日期插件：laydate
- 根据文档和demo使用插件
jQuery知识梳理20190818的更多相关文章
- jQuery知识梳理20190817
目录 jQuery知识梳理20190817 1. jQuery的特征 2. jQuery的两把利器 2.1 jQuery核心函数 2.2 jQuery核心对象 3. jQuery核心函数详解 4. j ...
- [SQL] SQL 基础知识梳理（一）- 数据库与 SQL
SQL 基础知识梳理(一)- 数据库与 SQL [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5902856.html 目录 What's 数据库 ...
- [SQL] SQL 基础知识梳理（二） - 查询基础
SQL 基础知识梳理(二) - 查询基础 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5904824.html 序 这是<SQL 基础知识梳理( ...
- [SQL] SQL 基础知识梳理（三） - 聚合和排序
SQL 基础知识梳理(三) - 聚合和排序 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5926689.html 序 这是<SQL 基础知识梳理 ...
- [SQL] SQL 基础知识梳理（四） - 数据更新
SQL 基础知识梳理(四) - 数据更新 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5929786.html 序 这是<SQL 基础知识梳理( ...
- [SQL] SQL 基础知识梳理（五） - 复杂查询
SQL 基础知识梳理(五) - 复杂查询 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5939796.html 序 这是<SQL 基础知识梳理( ...
- solr DIH 知识梳理
solr DIH 知识梳理 web.xml中listener配置 <listener> <listener-class>org.apache.solr.handler.data ...
- Anliven - 基础知识梳理汇总 - 软件测试
基础知识梳理 - 软件测试 - 概念 基础知识梳理 - 软件测试 - 分类 基础知识梳理 - 软件测试 - 流程 基础知识梳理 - 软件测试 - 用例 基础知识梳理 - 软件测试 - 方法 基础知识梳 ...
- 最全的jQuery知识汇总
本帖最后由 断天涯大虾 于 2016-12-26 10:22 编辑<ignore_js_op> jQuery是什么? jQuery是javascript编写一个可重用的JavaScript ...
随机推荐
- Android NDK编译选项设置
Android NDK编译选项设置 网易加固关注 0.5472016.08.22 14:07:00字数 3,034阅读 6,805 在Android NDK开发中,有两个重要的文件:Android.m ...
- 谈谈RPC——golang中jsonrpc和grpc的使用
前言 不知从什么时候rpc这个东西开始进入我们的视野,一开始做开发的时候经常使用的都是http,偶尔使用的是socket进行通信,使用的是restful的方式.但是,一次偶然的机会你会发现RPC这个东 ...
- WebGL学习笔记（十一）：混合和透明
到目前为止我们绘制了不少模型,用到了不少颜色,颜色中有四个分量(RGBA),其中的A分量表示透明度,这个分量目前为止我们还没有真正的用到: A分量,表示的是当前的透明度,如果设定为 0.5 就会半透明 ...
- 查找算法(6)--Block search--分块查找
1. 分块查找 (1)说明分块查找又称索引顺序查找,它是顺序查找的一种改进方法. (2)算法思想:将n个数据元素"按块有序"划分为m块(m ≤ n).每一块中的结点不必有序,但块与 ...
- sublime的注册方法 非常好用
摘自:https://blog.csdn.net/weixin_42444922/article/details/81006107 转载 阿东的天空之城 发布于2018-07-11 20:03:43 ...
- php mysql 根据经纬度计算距离和排序
#.两点距离(1.4142135623730951) ,),point(,)); ORDER BY distance; mysql 5.6 添加 #.两点球面距离(.0357231545m) ,),p ...
- 生命游戏（python实现,pygame显示图形）
# 游戏规则:# 生命游戏(Game of Life),或者叫它的全称John Conway's Game of Life.是英国数学家约翰·康威在1970年代所发明的一种元胞自动机.# 1. 活细胞 ...
- （原）关于使用imagemagick将gif叠加到图片或者画布上的方法，以及疑难杂症
今天因为项目过程中,有一个小需求,需要将一个指定的gif按照指定大小,叠加到画布的指定位置上,本来对于熟悉这块的人,简直就是小菜一碟哈,但本人因为对imagemagick的不熟悉,导致在这个需求上摸索 ...
- BladeX 部署centos启动顺序
一:启动dockerservice docker start二:启动mysqldocker start mysql三:启动Harborsystemctl restart docker(如有修改daem ...
- ES6常用的新特性
1.Let&const <!DOCTYPE html> <html lang="en"> <head> <meta charset ...