jQuery的事件机制和其他知识
jQuery 设置宽度和高度
宽度操作：
$(selector).height(); //不带参数表示获取高度
$(selector).height(200); //带参数表示设置高度
宽度操作：
$(selector).width(); //不带参数表示获取宽度
$(selector).width(200); //带参数表示设置高宽度
问题：jQuery的css()获取高度，和jQuery的height获取高度，二者的区别？
答案：
$("div").css(); //返回的是string类型，例如：30px
$("div").height(); //返回得失number类型，例如：30。常用于数学计算。
如上方代码所示，$("div").height();返回的是number类型，常用于数学计算。
#jQuery 的坐标操作
#offset()方法
$(selector).offset();
$(selector).offset({left:100, top: 150});
作用：获取或设置元素相对于 document 文档的位置。参数解释：
无参数：表示获取。返回值为：{left:num, top:num}。返回值是相对于document的位置。
有参数：表示设置。参数建议使用 number 数值类型。
注意：设置offset后，如果元素没有定位(默认值：static)，则被修改为relative。
#position()方法
$(selector).position();
作用：获取相对于其最近的带有定位的父元素的位置。返回值为对象：{left:num, top:num}。
注意：只能获取，不能设置。
#scrollTop()方法
scrollTop();
$(selector).scrollTop(100);
作用：获取或者设置元素被卷去的头部的距离。参数解释：
无参数：表示获取偏移。
有参数：表示设置偏移，参数为数值类型。
#scrollLeft()方法
scrollLeft();
$(selector).scrollLeft(100);
作用：获取或者设置元素水平方向滚动的位置。参数解释：
无参数：表示获取偏移。
有参数：表示设置偏移，参数为数值类型。
代码示范：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
height: 5000px;
}
.box1 {
width: 300px;
height: 300px;
position: relative;
margin: 10px;
overflow: auto;
background-color: pink;
}
.box2 {
width: 200px;
height: 400px;
position: absolute;
top: 50px;
left: 50px;
background-color: yellow;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
//距离页面最顶端或者最左侧的距离和有没有定位没有关系
$("button").eq(0).click(function () {
alert($(".box2").offset().top);
})
//距离页面最顶端或者最左侧的距离和有没有定位没有关系
$("button").eq(1).click(function () {
$(".box2").offset({"left": 1000, "top": 1000});
})
//距离父系盒子中带有定位的盒子的距离(获取的就是定位值，和margin/padding无关)
$("button").eq(2).click(function () {
alert($(".box2").position().top);
})
//距离父系盒子中带有定位的盒子的距离(获取的就是定位值，和margin/padding无关)
$("button").eq(3).click(function () {
$(".box2").position().top = "100px";
})
//获取被选取的头部
$("button").eq(4).click(function () {
alert($(window).scrollTop());
})
//获取被选取的头部
$("button").eq(5).click(function () {
$(window).scrollTop(100);
})
})
</script>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<button>offset().top获取</button>
<button>offset().top设置</button>
<button>position().top获取</button>
<button>position().top设置</button>
<button>scrollTop()</button>
<button>scrollTop()</button>
</body>
</html>
#jQuery的事件机制
#常见的事件绑定
click(handler) 单击事件。
blur(handler) 失去焦点事件。
mouseenter(handler) 鼠标进入事件。
mouseleave(handler) 鼠标离开事件。
dbclick(handler) 双击事件。
change(handler) 改变事件，如：文本框值改变，下拉列表值改变等。
focus(handler) 获得焦点事件。
keydown(handler) 键盘按下事件。
参考链接：http://www.w3school.com.cn/jquery/jquery_ref_events.asp
#on方式绑定事件
最早采用的是 bind、delegate等方式绑定的。jQuery 1.7版本后，jQuery用on统一了所有的事件处理的方法，此方法兼容zepto(移动端类似于jQuery的一个库)。
格式举例：
$(document).on("click mouseenter", ".box", {"name": 111}, function (event) {
console.log(event.data); //event.data获取的就是第三个参数这个json。
console.log(event.data.name); //event.data.name获取的是name的值。
});
参数解释：
第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）。上方代码绑定的是单击事件和鼠标进入事件。
第二个参数：selector, 执行事件的后代元素。
第三个参数：data，传递给事件处理函数的数据，事件触发的时候通过event.data来使用（也就是说，可以通过event拿到data）
第四个参数：handler，事件处理函数。
简单点的写法：
$(document).on("click",".box", function () {
alert(1);
});
#off方式解绑事件
$(selector).off(); // 解绑匹配元素的所有事件
$(selector).off("click"); // 解绑匹配元素的所有click事件
$(selector).off( "click", "**" ); // 解绑所有代理的click事件，元素本身的事件不会被解绑
#jQuery的事件对象
event.data 传递给事件处理程序的额外数据
event.currentTarget 等同于this，当前DOM对象
event.pageX 鼠标相对于文档左部边缘的位置
event.target 触发事件源，不一定===this
event.stopPropagation()； 阻止事件冒泡
event.preventDefault(); 阻止默认行为
event.type 事件类型：click，dbclick…
event.which 鼠标的按键类型：左1 中2 右3
event.keyCode 键盘按键代码
代码演示：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
$(document).on("click", {}, function (event) {
console.log(event.data);
console.log(event.currentTarget);
console.log(event.target);
console.log(event.pageX);
console.log(event.type);
console.log(event.which);
console.log(event.keyCode);
});
})
</script>
</head>
<body>
</body>
</html>
上方代码中，我们通过event参数，获取了点击事件的各种event里的属性。
单击网页后，打印结果为：
举例：键盘上对的按键按下时，变色
这个时候就要用到event参数，因为要获取event.keyCode，才能知道按下的是键盘上的哪个按键。
代码实现：
<!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="jquery-1.11.1.js"></script>
<script>
$(function () {
//需求：在页面上，按键.是哪个颜色的首写字母div就改变为该颜色，然后span内容赋值。
//步骤：
//1.给document绑定keyup事件
//2.获取值，根据此值，给div和span上色和内容
var div = $("#bgChange");
var span = $("#keyCodeSpan");
//绑定事件
$(document).keyup(function (e) { //键盘弹出时，触发事件
//调用方法
setColor(e.keyCode);
});
function setColor(keyCode) {
//alert(e.keyCode);
//2.获取值，根据此值，给div和span上色和内容
switch (keyCode) {
case 80:
//修改内容pink
setEle("pink", keyCode);
break;
case 66:
//修改内容blue
setEle("blue", keyCode);
break;
case 79:
//修改内容orange
setEle("orange", keyCode);
break;
case 82:
//修改内容red
setEle("red", keyCode);
break;
case 89:
//修改内容yellow
setEle("yellow", keyCode);
break;
default :
alert("系统没有设置该颜色！");
}
function setEle(a, b) {
div.css("background-color", a);
span.text(b);
}
}
//1.给document绑定keyup事件
// $(document).keyup(function (e) {
// //alert(e.keyCode);
// //2.获取值，根据此值，给div和span上色和内容
// switch (e.keyCode){
// case 80:
// //修改内容pink
// div.css("background-color","pink");
// span.text(e.keyCode);
// break;
// case 66:
// //修改内容blue
// div.css("background-color","blue");
// span.text(e.keyCode);
// break;
// case 79:
// //修改内容orange
// div.css("background-color","orange");
// span.text(e.keyCode);
// break;
// case 82:
// //修改内容red
// div.css("background-color","red");
// span.text(e.keyCode);
// break;
// case 89:
// //修改内容yellow
// div.css("background-color","yellow");
// span.text(e.keyCode);
// break;
// default :
// alert("系统没有设置该颜色！");
// }
// });
})
</script>
</head>
<body>
<div class="wrap">
<h1>按键改变颜色</h1>
<div id="bgChange">
keyCode为：
<span id="keyCodeSpan">80</span>
</div>
</div>
</body>
</html>
#jQuery 的两大特点
（1）链式编程：比如.show()和.html()可以连写成.show().html()。
链式编程原理：return this。
通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 this。
end(); // 结束当前链最近的一次过滤操作，并且返回匹配元素之前的状态。
（2）隐式迭代：隐式 对应的是 显式。隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。
如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。
**举例：**五角星评分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五角星评分案例</title>
<style>
* {
padding: 0;
margin: 0;
}
.comment {
font-size: 40px;
color: #ff3100;
}
.comment li {
float: left;
cursor: pointer;
}
ul {
list-style: none;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
var star_none = '☆'; // 空心五角星
var star_sel = '★'; // 实心五角星
//需求1：鼠标放悬停时，当前的li和之前所有的li内容全部变为实心五角星，移开变为空心。
$(".comment li").on("mouseenter", function () {
//当前五角星，和之前的所有五角星，全部是实心的，其他的为空心
//写法一：分两次写
// $(this).text(star_sel).prevAll("li").text(star_sel);
// $(this).nextAll("li").text(star_none);
//写法二：一次性写完，但要用到end()，否则会出问题。【重要】
$(this).text(star_sel).prevAll("li").text(star_sel).end().nextAll("li").text(star_none);
});
$(".comment li").on("mouseleave", function () {
//bug：如果没有点击过li，那么会出现无法清除的现象，处理办法就是先判断，看看是否有current类
if ($("li.current").length === 0) {
$(".comment li").text(star_none);
} else {
//当鼠标移开的时候，谁有current类名，那么当前和之前所有的li前部是实心五角星，后面的所有li都是空心
$("li.current").text(star_sel).prevAll("li").text(star_sel).end().nextAll("li").text(star_none);
}
});
//需求2：鼠标点击那个li，当你前li和之前所有的li都变成实心五角星，其他变为空心。
$(".comment li").on("click", function () {
//点击哪个li给他加一个类名。清空其他所有的li的类名
$(this).attr("class", "current").siblings("li").removeAttr("class");
});
});
</script>
</head>
<body>
<ul class="comment">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</body>
</html>
上方代码中，注意end的用法，很巧妙。
实现效果：
#each的用法
大部分情况下是不需要使用each方法的，因为jQuery的隐式迭代特性。
但是，如果要对每个元素做不同的处理，这时候就用到了each方法。
格式如下：
$(selector).each(function(index,element){});
参数解释：
参数一：表示当前元素在所有匹配元素中的索引号
参数二：参数二表示当前元素（是js 中的DOM对象，而不是jQuery对象）
举例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
li {
width: 100px;
height: 100px;
margin: 20px;
float: left;
list-style: none;
text-align: center;
font: 50px/100px "simsun";
color: white;
background-color: black;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
jQuery(function () {
//设置每个不一样的盒子透明度逐渐递增
$("ul li").each(function (index, element) {
$(element).css("opacity", (index + 1) / 10);
console.log(index+"---"+element.tagName);
});
});
</script>
</head>
<body>
<ul>
<li class="aaa1">1</li>
<li class="aaa2">2</li>
<li class="aaa3">3</li>
<li class="aaa4">4</li>
<li class="aaa5">5</li>
<li class="aaa6">6</li>
<li class="aaa7">7</li>
<li class="aaa8">8</li>
<li class="aaa9">9</li>
<li class="aaa10">10</li>
</ul>
</body>
</html>
效果如下：
#多库共存
多库共存指的是：jQuery占用了 $ 和 jQuery 这两个变量。当在同一个页面中引用了 jQuery 库以及其他的库（或者其他版本的jQuery库），恰好其他的库中也用到了 $ 或者jQuery变量.那么，要保证每个库都能正常使用，就产生了多库共存的问题。
温馨提示：我们可以通过以下方式获取 jQuery 库的版本号。
console.log($.fn.jquery); //打印 jQuery 库的版本号
办法一：让 jQuery 放弃对 $ 的使用权：
$.noConflict();
效果如下：
上图中，代码中同时包含了两个版本的库。1.11.1版本放弃了对 $ 的使用权，交给了1.8.2版本；但是1.11.1版本并没有放弃对 jQuery关键字的使用权。
办法二：同时放弃放弃两个符号的使用权，并定义一个新的使用权（如果有三个库时，可以这样用）
$.noConflict(true); //返回值是新的关键字
效果如下：
#jQuery 的插件机制
jQuery 库，虽然功能强大，但也不是面面俱到。jQuery 是通过插件的方式，来扩展它的功能：
当你需要某个插件的时候，你可以“安装”到jQuery上面，然后使用。
当你不再需要这个插件，那你就可以从jQuery上“卸载”它。
#插件之改变颜色
jQuery的自定义动画方法animate()，在执行动画时，是不支持设置背景色这个属性的。这个时候可以借助jQuery.color.js这个插件。
举例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script src="jquery.color.js"></script>
<script>
$(function () {
//点击按钮，改变盒子的宽度和背景色
$("button").on("click", function () {
$("div").animate({"width": 200, "background-color": "red"}, 2000, function () {
alert("动画结束");
});
});
})
</script>
</head>
<body>
<button>变色</button>
<div></div>
</body>
</html>
效果：
上方代码中，因为加入了一行插件：（注意顺序是放在jQuery插件之后）
<script src="jquery.color.js"></script>
否则的话，在动画执行的过程中，是无法设置背景色的。
#插件之懒加载
懒加载：当打开一个网页时，只有当我看到某个部分，再加载那个部分；而不是一下子全部加载完毕。这样可以优化打开的速度。
比如说，我可以设置一张图片为懒加载，于是，这张图片会等我宠幸到它的时候，它再打开。
代码举例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
height: 3000px;
background-color: pink;
}
</style>
<script src="jquery-1.11.1.js"></script>
<!--懒加载的使用。第一步：导包(必须在jquery库的下方）-->
<script src="jquery.lazyload.js"></script>
<script>
$(function () {
//第二步骤：调用懒加载的方法实现功能。参数的不同，功能也不同。
$("img.lazy").lazyload();
})
</script>
</head>
<body>
<div></div>
<!--需要实现将图片设置为懒加载模式-->
<img class="lazy" data-original="images/01.jpg" width="640" height="480">
</body>
</html>jQuery的事件机制和其他知识的更多相关文章
- jquery的事件命名空间详解
jquery现在的事件API:on,off,trigger支持带命名空间的事件,当事件有了命名空间,就可以有效地管理同一事件的不同监听器,在定义组件的时候,能够避免同一元素应用到不同组件时,同一事件类 ...
- jQuery中的事件机制深入浅出
昨天呢,我们大家一起分享了jQuery中的样式选择器,那么今天我们就来看一下jQuery中的事件机制,其实,jQuery中的事件机制与JavaScript中的事件机制区别是不大的,只是,JavaScr ...
- JQuery操作样式以及JQuery事件机制
1.操作样式 1.1 css的操作 功能:设置或者修改样式,操作的是style属性 操作单个样式 // name:需要设置的样式名称 // value:对应的样式值 // $obj.c ...
- JS与Jquery的事件委托机制
传送:http://www.ituring.com.cn/article/467 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委 ...
- python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- Ext JS学习第十六天 事件机制event（一） DotNet进阶系列(持续更新) 第一节：.Net版基于WebSocket的聊天室样例 第十五节：深入理解async和await的作用及各种适用场景和用法 第十五节：深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G
code&monkey Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...
- 【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）
前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...
- JavaScript事件详解-jQuery的事件实现（三）
正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...
- [解惑]JavaScript事件机制
群里童鞋问到关于事件传播的一个问题:“事件捕获的时候,阻止冒泡,事件到达目标之后,还会冒泡吗?”. 初学 JS 的童鞋经常会有诸多疑问,我在很多 QQ 群也混了好几年了,耳濡目染也也收获了不少,以后会 ...
随机推荐
- 鸿蒙OS的系统调用是如何实现的？ | 解读鸿蒙源码
本文将首先带您回顾"系统调用"的概念以及它的作用,然后从经典的Hello World开始,逐行代码层层分析--鸿蒙OS的系统调用是如何实现的. 写在前面 9月10号 华为开发者大会 ...
- pytest的setup和teardown
学过unittest的setup和teardown,前置和后置执行功能.pytest也有此功能并且功能更强大,今天就来学习一下吧. 用例运行级别: 模块级(setup_module/teardown_ ...
- 09_消息通知Toast和Notification
1. Toast 学习创建长短不一的Toast提示,并自定义Toast在屏幕上的位置以及Toast的外观. 1 package com.example.toastdemo; 2 3 import an ...
- 上传视频到七牛云Django后端实现
1.上传视频到七牛云django端实现 1.1 获取七牛云秘钥 https://portal.qiniu.com/user/key 1.2 在syl/settings.py中配置七牛云上传 参考官方 ...
- 【2020.11.28提高组模拟】T2 序列(array)
序列(array) 题目描述 给定一个长为 \(m\) 的序列 \(a\). 有一个长为 \(m\) 的序列 \(b\),需满足 \(0\leq b_i \leq n\),\(\sum_{i=1}^ ...
- 适合 JS 新手学习的开源项目——在 GitHub 学编程
作者:HelloGitHub-小鱼干 这里是 HelloGitHub 的<GitHub 上适合新手的开源项目>系列的最后一篇,系列文章: C++ 篇 Python 篇 Go 篇 Java ...
- 日志聚合工具之 Loki
本文使用的 Loki 和 Promtail 版本为 1.6.1,Grafana 版本为 7.2.0:部署在 Linux 服务器 Loki 负责日志的存储和查询:Promtail 负责日志的采集并推送给 ...
- 饱含辛酸开发 WPF CustomControl
引言 不知不觉间WPF开发已有两年光景,或许有很多人会问WPF还需要学习吗?WPF还有前途吗?其实我也很担心这个问题. .Net Core3.x已经支持WPF开发,.Net 5也宣布要支持WPF.是否 ...
- git全流程
服务器:Ubuntu 使用git前准备工作: 下载git之前先更新: apt-get update 安装git: apt-get install git 创建本地仓库: mkdir test git初 ...
- Log4net 的 ASP.NET Core 扩展库
给大家安利一款 log4net 的 ASP.NET Core 扩展库,它是基于 log4net 开发的. 简单易用,开源免费,使用ASP.NET Core自身提供的DI容器来实现服务的注册和消费.直接 ...