Web前端学习笔记—— jQuery之事件机制、补充、插件
程序员文章站
2022-03-03 07:50:12
...
jQuery事件机制
- JavaScript中已经学习过了事件，jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。
jQuery事件发展历程(了解)
简单事件绑定–bind事件绑定–delegate事件绑定–on事件绑定(推荐)
- 简单事件注册
click(handler) 单击事件
mouseenter(handler) 鼠标进入事件
mouseleave(handler) 鼠标离开事件
缺点：不能同时注册多个事件
- bind方式注册事件
// 第一个参数：事件类型
// 第二个参数：事件处理程序
$('p').bind('click mouseenter', function(){
// 事件响应方法
});
缺点：不支持动态事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
//为按钮绑定鼠标进入,鼠标离开,点击事件
//第一种写法
// $("#btn").mouseenter(function () {
// $(this).css("backgroundColor","red");
// });
// $("#btn").mouseleave(function () {
// $(this).css("backgroundColor","green");
// });
// $("#btn").click(function () {
// alert("啊~我被点了");
// });
//第二种写法:链式编程
// $("#btn").mouseenter(function () {
// $(this).css("backgroundColor","red");
// }).mouseleave(function () {
// $(this).css("backgroundColor","green");
// }).click(function () {
// alert("啊~我被点了");
// });
//第三种写法:bind方法绑定事件
// $("#btn").bind("click",function () {
// alert("哦买雷电嘎嘎闹");
// });
// $("#btn").bind("mouseenter",function () {
// $(this).css("backgroundColor","red");
// });
// $("#btn").bind("mouseleave",function () {
// $(this).css("backgroundColor","green");
// });
//第四种写法:链式编程
// $("#btn").bind("click",function () {
// alert("哦买雷电嘎嘎闹");
// }).bind("mouseenter",function () {
// $(this).css("backgroundColor","red");
// }).bind("mouseleave",function () {
// $(this).css("backgroundColor","green");
// });
//第五种写法:使用键值对的方式绑定事件
// $("#btn").bind({"click":function () {
// alert("哦买雷电嘎嘎闹");
// },"mouseenter":function () {
// $(this).css("backgroundColor","red");
// },"mouseleave":function () {
// $(this).css("backgroundColor","green");
// }});
});
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn" />
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
//为按钮绑定多个相同事件
// $("#btn").click(function () {
// console.log("小苏好猥琐哦");
// }).click(function () {
// console.log("小苏好美啊");
// }).click(function () {
// console.log("天冷了,注意身体");
// });
// $("#btn").bind("click",function () {
// console.log("哈哈,我又变帅了");
// }).bind("click",function () {
// console.log("我轻轻来,正如我轻轻走,挥一挥手,不带走一个妹子");
// });
//bind方法绑定多个相同的事件的时候,如果使用的是键值对的方式,只能执行最后一个
$("#btn").bind({"click":function () {
console.log("如果有一天我邪恶了");
},"click":function () {
console.log("请记住,我曾纯洁过");
}});
});
//bind方法内部是调用的另一个方法绑定的事件
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
</body>
</html>
- delegate注册委托事件
// 第一个参数：selector，要绑定事件的元素
// 第二个参数：事件类型
// 第三个参数：事件处理函数
$('.parentBox').delegate('p', 'click', function(){
// 为 .parentBox下面的所有的p标签绑定事件
});
缺点：只能注册委托事件，因此注册时间需要记得方法太多了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div{
width: 200px;
height: 100px;
border: 2px solid green;
}
p{
width: 150px;
height: 50px;
border: 1px solid red;
cursor: pointer;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
//点击按钮为div中的p标签绑定事件
$(function () {
$("#btn").click(function () {
//为父级元素绑定事件,父级元素代替子级元素绑定事件
//子级元素委托父级绑定事件
//父级元素调用方法,为子级元素绑定事件
$("#dv").delegate("p","click",function () {
alert("啊!~,被点了");
});
});
});
//为元素绑定事件三种方式
/*
* 对象.事件名字(事件处理函数);---$("#btn").click(function(){});
* 对象.bind("事件名字",事件处理函数);---$("#btn").bind("click",function(){});
* 父级对象.delegate("子级元素","事件名字",事件处理函数);---->$("#dv").delegate("p","click",function(){});
*
*
* */
</script>
</head>
<body>
<input type="button" value="为div绑定事件" id="btn" />
<div id="dv">
<p>这是p</p>
</div>
</body>
</html>
- on注册事件
on注册事件(重点)
- jQuery1.7之后，jQuery用on统一了所有事件的处理方法。
- 最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用。
on注册简单事件
// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。
$(selector).on( 'click', function() {});
on注册事件委托
// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on( 'click','span', function() {});
事件委托原理
// 事件委托的原理
var ul = document.querySelector('#ul');
ul.onclick = function (e) {
// console.log(e.target.tagName);
if (e.target.tagName.toLowerCase() === 'li') {
console.log(e.target);
}
}
on注册事件的语法：
// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
// 第四个参数：handler，事件处理函数
$(selector).on(events[,selector][,data],handler);
- 通过源码查看 bind click delegate on 注册事件的区别
事件解绑
- unbind方式（不用）
$(selector).unbind(); // 解绑所有的事件
$(selector).unbind('click'); // 解绑指定的事件
- undelegate方式（不用）
$( selector ).undelegate(); // 解绑所有的delegate事件
$( selector).undelegate( 'click' ); // 解绑所有的click事件
- off方式（推荐）
// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off('click');
触发事件
$(selector).click(); // 触发 click事件
$(selector).trigger('click');
jQuery事件对象
jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。
// screenX和screenY 对应屏幕最左上角的值
// clientX和clientY 距离页面左上角的位置（忽视滚动条）
// pageX和pageY 距离页面最顶部的左上角的位置（会计算滚动条的距离）
// event.keyCode 按下的键盘代码
// event.data 存储绑定事件时传递的附加数据
// event.stopPropagation() 阻止事件冒泡行为
// event.preventDefault() 阻止浏览器默认行为
// return false:既能阻止事件冒泡，又能阻止浏览器默认行为。
案例
- 按键变色 [19-按键变色.html]
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.wrap {
width: 400px;
height: 400px;
margin: 100px auto 0;
}
.wrap h1 {
text-align: center;
}
.wrap div {
width: 400px;
height: 300px;
background: pink;
font-size: 30px;
text-align: center;
line-height: 300px;
}
</style>
<script src="vendor/jquery.js"></script>
<script>
$(function () {
//需求：在页面中按下键盘上的键的时候，获取他的Unicode编码给定body背景色；
$(document).keyup(function (event) {
//alert(event.keyCode);
//r:82; p:80; b:66; o:79; y:89; s:83;
$("#keyCodeSpan").text(event.keyCode);
changeDivBackground(event.keyCode);
});
//封装一个方法，根据传递的参数值，改变div的背景色；
function changeDivBackground(num){
switch (num){
case 82:
$("#bgChange").css("background-color","red");
break;
case 80:
$("#bgChange").css("background-color","purple");
break;
case 66:
$("#bgChange").css("background-color","blue");
break;
case 79:
$("#bgChange").css("background-color","orange");
break;
case 89:
$("#bgChange").css("background-color","yellow");
break;
case 83:
$("#bgChange").css("background-color","skyblue");
break;
default :
$("#bgChange").css("background-color","pink");
$("#keyCodeSpan").text("查无此键");
}
}
});
</script>
</head>
<body>
<div class="wrap">
<h1>按键改变颜色</h1>
<div id="bgChange">
keyCode为：
<span id="keyCodeSpan"></span>
</div>
</div>
</body>
</html>
jQuery补充知识点
链式编程
- 通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 jQuery对象。
end(); // 筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。
each方法
- jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候，就需要自己进行迭代了。
作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数
// 参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素（DOM对象）
$(selector).each(function(index,element){});
多库共存
- jQuery使用冲突时，jQuery可以释放$符的控制权.
var c = $.noConflict();// 释放$的控制权,并且把$的能力给了c
案例
- 五角星评分案例 [20-五角星评分案例.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五角星评分案例</title>
<style>
* {
padding: 0;
margin: 0;
}
.comment {
font-size: 40px;
color: red;
}
.comment li {
float: left;
cursor: pointer;
}
ul {
list-style: none;
}
</style>
<script src="vendor/jquery.js"></script>
<script>
jQuery(function () {
//设置两个五角星
var SXWJX = "★";
var KXWJX = "☆";
//需求1: 鼠标进入哪个li，让当前的li和之前的所有li内容设置为实心五角星，后面的设置为空心五角星；
//需求2: 鼠标移开当前li，让之前记录位置(默认没有)的li和之前的所有li内容设置为实心五角星，后面的设置为空心五角星；
//需求3: 鼠标点击哪个li，这个li就变成别记录的五角星，然后设置一个类名，方便下次获取，其他的去掉类名；
//需求1: 鼠标进入哪个li，让当前的li和之前的所有li内容设置为实心五角星，后面的设置为空心五角星；
$(".comment li").mouseenter(function () {
//让当前的li和之前的所有li内容设置为实心五角星，后面的设置为空心五角星；
$(this).text(SXWJX).prevAll("li").text(SXWJX).end().nextAll("li").text(KXWJX);
});
//需求2: 鼠标移开当前li，让之前记录位置(默认没有)的li和之前的所有li内容设置为实心五角星，后面的设置为空心五角星；
$(".comment li").mouseout(function () {
//判断：有记录以记录位置为基准，没有记录位置，全部设置空五角星；
$(".comment li").text(KXWJX);
//有就覆盖掉
if($(".current").length === 1){
//让之前记录位置(默认没有)的li和之前的所有li内容设置为实心五角星，后面的设置为空心五角星；
$(".current").text(SXWJX).prevAll("li").text(SXWJX).end().nextAll("li").text(KXWJX);
}
});
//需求3: 鼠标点击哪个li，这个li就变成别记录的五角星，然后设置一个类名，方便下次获取，其他的去掉类名；
$(".comment li").click(function () {
$(this).addClass("current").siblings("li").removeClass("current");
});
});
</script>
</head>
<body>
<ul class="comment">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</body>
</html>
插件
常用插件
- 弹出层插件 layer
- 放大镜插件
- 轮播图插件
- 图片懒加载插件
- jQueryUI
- 常用的2-3个功能演示
- 查看jQuery插件的源码
自己探索插件
jQuery插件开发
- 给jQuery增加方法的两种方式
$.method = fn 静态方法
$.fn.method = fn 实例方法
- 增加一个静态方法，实现两个数的和，插件
(function ($) {
$.add = function (a, b) {
return a + b;
}
}(jQuery))
$.add(5, 6);
- tab栏插件 [21-tab栏插件.html]
(function ($) {
// {tabMenu: '#aa'}
$.tab = function (options) {
// 默认参数
var defaults = {
tabMenu: '#tab',
activeClass: 'active',
tabMain: '#tab-main',
tabMainSub: '.main',
selectedClass: 'selected'
}
// 把options中的属性，把对应属性的值赋给defaults对应的属性
// defaults.tabMenu = options.tabMenu || defaults.tabMenu;
// for(var key in options) {
// defaults[key] = options[key];
// }
$.extend(defaults, options);
$(defaults.tabMenu).on('click', 'li', function () {
$(this)
.addClass(defaults.activeClass)
.siblings()
.removeClass(defaults.activeClass);
//
var index = $(this).index();
//
$(defaults.tabMain + ' ' + defaults.tabMainSub)
.eq(index)
.addClass(defaults.selectedClass)
.siblings()
.removeClass(defaults.selectedClass);
})
}
}(window.jQuery))
- 表格插件 [22-表格插件.html]
(function($) {
// 内部的变量，外部无法访问，防止变量名冲突
var a = 0;
// 给$增加了一个实例方法
$.fn.table = function (header, data) {
var array = [];
array.push('<table>');
array.push('<tr>');
// 生成表头
$.each(header, function () {
array.push('<th>' + this + '</th>');
})
array.push('</tr>');
// 生成数据行
$.each(data, function (index) {
// this是当前遍历到的数组中的每一个对象
// 拼数据行
array.push('<tr>');
array.push('<td>' + (index + 1) + '</td>');
// 遍历对象，拼表格
for (var key in this) {
array.push('<td>' + this[key] + '</td>');
}
array.push('</tr>');
})
array.push('</table>');
this.append(array.join(''));
}
}(window.jQuery))
- 插件开发的原理
上一篇： 求逆序对个数
下一篇： PyCharm中调试Scrapy单个爬虫