jQuery的位置信息和事件
Posted chenxi67
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery的位置信息和事件相关的知识，希望对你有一定的参考价值。
一.位置信息
1.宽度和高度
获取宽度: .width()
为匹配的元素集合中获取第一个元素的当前计算宽度值。这个方法不接受任何参数。.css(width) 和 .width()之间的区别是后者返回一个没有单位的数值（例如，400），前者是返回带有完整单位的字符串（例如，400px）。当一个元素的宽度需要数学计算的时候推荐使用.width() 方法 。
设置宽度: .width(value)
给每个匹配的元素设置CSS宽度。
获取高度: .height()
获取匹配元素集合中的第一个元素的当前计算高度值。
这个方法不接受任何参数。
设置高度: .height（value)
设置每一个匹配元素的高度值。
2.innerHeight() 和 innerWidth
获取内部宽: .innerWidth()
为匹配的元素集合中获取第一个元素的当前计算宽度值,包括padding，但是不包括border。
这个方法不适用于window 和 document对象，对于这些对象可以使用.width()代替。
设置内部宽: .innerWidth(value);
为匹配集合中的每个元素设置CSS内部宽度。如果这个“value”参数提供一个数字，jQuery会自动加上像素单位（px）
获取内部高: .innerHeight()
为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding，但是不包括border。
这个方法不适用于window 和 document对象，对于这些对象可以使用.height()代替。
设置内部高: .innerHeight(value);
为匹配集合中的每个元素设置CSS内部高度。如果这个“value”参数提供一个数字，jQuery会自动加上像素单位（px）
3.outerWidth 和 outerHeight()
获取外部宽: .outerWidth( [includeMargin] )
获取匹配元素集合中第一个元素的当前计算外部宽度（包括padding，border和可选的margin）
includeMargin (默认: false) 类型： Boolean 一个布尔值，表明是否在计算时包含元素的margin值。
这个方法不适用于window 和 document对象，可以使用.width()代替
设置外部宽: outerWidth( value )
为匹配集合中的每个元素设置CSS外部宽度。
获取外部高: .outerHeight( [includeMargin ] )
获取匹配元素集合中第一个元素的当前计算外部高度（包括padding，border和可选的margin）
includeMargin (默认: false) 类型： Boolean
这个方法不适用于window 和 document对象，可以使用.width()代替
设置外部高: .outerHeight( value )
为匹配集合中的每个元素设置CSS外部高度。
4.偏移
获取: .offset()
返回值：Object 。.offset()返回一个包含top 和 left属性的对象 。
在匹配的元素集合中，获取的第一个元素的当前坐标，坐标相对于文档。
设置: .offset ( coordinates )
设置匹配的元素集合中每一个元素的坐标， 坐标相对于文档。
top 和 left属性的对象，用整数指明元素的新顶部和左边坐标。$("p").offset({ top: 10, left: 30 });
5.元素坐标
.position()
返回值：Object{top,left}
描述获取匹配元素中第一个元素的当前坐标，相对于offset parent的坐标。(offset parent指离该元素最近的而且被定位过的祖先元素 )
当把一个新元素放在同一个容器里面另一个元素附近时，用.position()更好用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin: 0; } .father{ width: 400px; height: 400px; background-color:yellow; position: relative; top: 20px; } .box{ width: 200px; height: 200px; padding: 10px; border: 1px solid yellow; background-color: red; position: absolute; top:10px; left: 100px; } </style> </head> <body> <div class="father"> <div class="box"></div> </div> <ul> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> </ul> <script src="jquery.js"></script> <script> $(function () { //1.获取内容宽和高 // console.log($(‘.box‘).width()); // console.log($(‘.box‘).height()); //当2秒之后 让div的盒子的宽度变成400 // delay() 必须要结合动画的方法 // $(‘.box‘).delay(2000).hide(3000); // setTimeout(function (argument) { // // 设置宽 // $(‘.box‘).width(400); // },2000); //2.innerWidth() innerHeight() 内部的宽和高 包含内容的宽+ padding 不包含border // console.log($(‘.box‘).innerWidth()); // $(‘.box‘).innerWidth(400); // //3.outerWidth() outerHeight() 外部的宽和高 包含内容的宽+padding+border 整个盒模型的大小 // console.log($(‘.box‘).outerWidth()); // console.log($(‘.box‘).offset().top); // $(document).scroll(function(event) { // // console.log(1111); // console.log($(this).scrollTop()); // }); }); </script> </body> </html>
6.滚动距离
水平方向
获取：
.scrollLeft()
描述：获取匹配的元素集合中第一个元素的当前水平滚动条的位置（页面卷走的宽度）
设置：
.scrollLeft( value )
描述：设置每个匹配元素的水平方向滚动条位置。
垂直方向
获取：
.scrollTop()
描述：获取匹配的元素集合中第一个元素的当前迟滞滚动条的位置（页面卷走的高度）
设置：
.scrollLeft( value )
描述：设置每个匹配元素的垂直方向滚动条位置。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } .fixTop{ position: fixed; bottom: 20px; right: 30px; width: 100px; height: 100px; line-height: 100px; text-align: center; color: #fff; background-color: #000; cursor: pointer; } </style> </head> <body> <ul> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> <div class="fixTop">回到顶部</div> <script src="jquery.js"></script> <script> $(function () { $(‘.fixTop‘).click(function(event) { $(‘html,body‘).animate({ ‘scrollTop‘:0 },1000) }); }); </script> </body> </html>
二.js的事件流的概念
HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件
事件流的概念
1、DOM事件流
“DOM2级事件”规定的事件流包括三个阶段：
① 事件捕获阶段；
② 处于目标阶段；
③ 事件冒泡阶段
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button id="btn">按钮</button> <script> // document.getElementById(‘btn‘).addEventListener(‘click‘, function () { // alert(1); // },false); window.onload = function(){ var oBtn = document.getElementById(‘btn‘); //1. document.addEventListener(‘click‘,function(){ console.log(‘document处于事件捕获阶段‘); }, true); //2. document.documentElement.addEventListener(‘click‘,function(){ console.log(‘html处于事件捕获阶段‘); }, true); //3 document.body.addEventListener(‘click‘,function(){ console.log(‘body处于事件捕获阶段‘); }, true); //4. oBtn.addEventListener(‘click‘,function(){ console.log(‘btn处于事件捕获阶段‘); }, true); // oBtn.addEventListener(‘click‘,function(){ console.log(‘btn处于事件冒泡阶段‘); }, false); //5 document.body.addEventListener(‘click‘,function(){ console.log(‘body处于事件冒泡阶段‘); }, false); //6 document.documentElement.addEventListener(‘click‘,function(){ console.log(‘html处于事件冒泡阶段‘); }, false); //7. document.addEventListener(‘click‘,function(){ console.log(‘document处于事件冒泡阶段‘); }, false); }; </script> </body> </html>
jQ的常用事件
1.事件冒泡
阻止事件冒泡
阻止默认行为
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .father{ width: 300px; height: 300px; background-color:red; } </style> </head> <body> <div class="father"> <button class="child">按钮</button> </div> <script src="jquery.js"></script> <script> $(function () { //默认传过来 一个event $(‘.child‘).click(function(event) { console.log(‘按钮被点击了‘); console.log(this); // console.log(event.currentTarget); console.log(event.target); //阻止事件冒泡 // event.stopPropagation() }); $(‘.father‘).mouseenter(function(event) { console.log(event.type) console.log(‘父盒子被点击了‘); console.log(this); // console.log(event.currentTarget); console.log(event.target); // event.stopPropagation() }); $(‘body‘).click(function(event) { console.log(this); // console.log(event.currentTarget); // event.target 如果没有事件冒泡，指的点击的目标对象 console.log(event.target); console.log(‘body被点击了‘) }); }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } .fu{ position: fixed; top:0; left: 0; width: 100%; height: 320px; background-color: red; display: none; } .up{ cursor: pointer; } </style> </head> <body style="height: 2000px"> <!-- <form action=""></form> --> <a href=‘http://www.baidu.com‘ id="changeFu">换肤</a> <div class="fu"> <ul> <li> <a href="javascript:void(0)">女神降临</a> </li> <li> <a href="javascript:void(0)">明星</a> </li> <span class="up">收起</span> </ul> </div> <script src="jquery.js"></script> <script> $(function () { $(‘#changeFu‘).click(function(e) { //阻止当前默认的事件 // e.preventDefault(); // //阻止冒泡 // e.stopPropagation(); console.log(111); $(‘.fu‘).slideDown(1000); // 相当于即阻止了默认事件 又阻止冒泡 return false; }); $(‘body,.up‘).click(function(event) { $(‘.fu‘).slideUp(1000); }); $(‘.fu ul li a‘).click(function(event) { event.stopPropagation(); $(this).css(‘color‘,‘green‘).parent(‘li‘).siblings(‘li‘).find(‘a‘).css(‘color‘,‘blue‘); }); $(‘.fu‘).click(function(event) { return false; }); }); </script> </body> </html>
1.鼠标事件
|
click |
鼠标单击触发事件，参数可选（data,fn）
|
|
|
dblclick |
鼠标双击触发事件，参数可选（data,fn） | |
|
mousedown()/up() |
鼠标按下/弹起触发事件
|
|
|
mousemove() |
鼠标移动事件
|
|
|
mouseover()/out() |
鼠标移入/移出触发事件
|
鼠标指针穿过/离开被选元素或者当前元素的子元素，会触发事件
|
|
mouseenter()/leave() |
鼠标进入/离开触发事件
|
鼠标指针只在穿过/离开被选元素触发事件
|
|
focus()/blur() |
鼠标聚焦/失去焦点触发事件（不支持冒泡）
|
|
|
keydown()/up() |
键盘按键按下/弹起触发
|
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <button>按钮</button> <script src="jquery.js"></script> <script> $(function () { /* $(‘button‘).mouseenter(function(event) { }); $(‘button‘).mouseleave(function(event) { }); */ $(‘button‘).hover(function() { /* Stuff to do when the mouse enters the element */ console.log(‘进入‘); }, function() { /* Stuff to do when the mouse leaves the element */ console.log(‘离开‘); }); }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <button>按钮</button> <script src="jquery.js"></script> <script> $(function () { // 单双击 的时间 间隔 是300ms // 如果解决 单双击冲突 当做作业 $(‘button‘).click(function(event) { console.log(‘单机了‘); // 定时器 300ms 一次性定时器 }); $(‘button‘).dblclick(function(event) { console.log(‘双机了‘); }); }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="text"> <script src="jquery.js"></script> <script> //加载页面的时候 获取到焦点 // $(‘input[type=text]‘).focus(); // $(‘input[type=text]‘).focus(function () { // console.log(1); // }); // $(‘input[type=text]‘).keydown(function(event) { // console.log(1); /* console.log(event.keyCode); switch (expression) { case label_1: // statements_1 break; case label_1: // statements_1 break; case label_1: // statements_1 break; case label_1: // statements_1 break; default: // statements_def break; } */ // }); // $(‘input[type=text]‘).change(function(event) { // console.log(1111); // }); // $(‘input[type=text]‘).select(function(event) { // console.log(1111); // }); </script> </body> </html>
2.表单事件
change() 表单元素发生改变时触发事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 交互 接收不到 后端返回回来的数据--> <div> <input type="text" name="user"> <input type="submit"> </div> <script src="jquery.js"></script> <script> //在公司 中 前后端分离的项目 分工明确 开发效率高 // django 模板引擎 /* $(‘input[type=submit]‘).click(function(event) { var userName = $(‘input[type=text]‘).val(); //发送ajax交互 $.ajax({ url:`http://127.0.0.1:8800/?user=${userName}`, type:‘get‘, success:function(data){ }, error:function (err) { console.log(err) } }); }); */ /* $(‘form‘).submit(function(event) { event.preventDefault(); console.log(1111); // 发送ajax $.ajax({ url:`https://free-api.heweather.com/s6/weather/now?location=beijing&key=4693ff5ea653469f8bb0c29638035976`, type:‘get‘, success:function (data) { console.log(data); }, error:function (err) { console.log(err); } }); }); */ </script> </body> </html>
三.事件对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
- 什么时候会产生Event 对象呢?
例如: 当用户单击某个元素的时候,我们给这个元素注册的事件就会触发,该事件的本质就是一个函数,而该函数的形参接收一个event对象
2.事件通常与函数结合使用，函数不会在事件发生前被执行！
关于event对象
| 属性 | 描述 |
|---|---|
| altKey | 返回当事件被触发时，”ALT” 是否被按下。 |
| button | 返回当事件被触发时，哪个鼠标按钮被点击。 |
| clientX | 返回当事件被触发时，鼠标指针的水平坐标。 |
| clientY | 返回当事件被触发时，鼠标指针的垂直坐标。 |
| ctrlKey | 返回当事件被触发时，”CTRL” 键是否被按下。 |
| metaKey | 返回当事件被触发时，”meta” 键是否被按下。 |
| relatedTarget | 返回与事件的目标节点相关的节点。 |
| screenX | 返回当某个事件被触发时，鼠标指针的水平坐标。 |
| screenY | 返回当某个事件被触发时，鼠标指针的垂直坐标。 |
| shiftKey | 返回当事件被触发时，”SHIFT” 键是否被按下 |
IE 属性(除了上面的鼠标/事件属性，IE 浏览器还支持下面的属性)| 属性 | 描述 |
|---|---|
cancelBubble |
如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。 |
| fromElement | 对于 mouseover 和 mouseout 事件，fromElement 引用移出鼠标的元素。 |
| keyCode | 对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup |
| offsetX,offsetY | 发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。 |
returnValue |
如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 |
srcElement |
对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。 |
| toElement | 对于 mouseover 和 mouseout 事件，该属性引用移入鼠标的元素。 |
| x,y | 事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素。 |
标准Event属性
| 属性和方法 | 描述 |
|---|---|
| bubbles | 返回布尔值，指示事件是否是起泡事件类型。 |
cancelable |
返回布尔值，指示事件是否可拥可取消的默认动作。 |
currentTarget |
返回其事件监听器触发该事件的元素。 |
| eventPhase | 返回事件传播的当前阶段。 |
target |
返回触发此事件的元素（事件的目标节点）。 |
| timeStamp | 返回事件生成的日期和时间。 |
type |
返回当前 Event 对象表示的事件的名称。 |
| initEvent() | 初始化新创建的 Event 对象的属性。 |
preventDefault() |
通知浏览器不要执行与事件关联的默认动作。 |
stopPropagation() |
不再派发事件。 |
四.jQuery的事件绑定和解绑
1、绑定事件
语法：
bind(type,data,fn)
描述：为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数。
参数解释：
type (String) : 事件类型
data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象
fn ( Function) : 绑定到每个匹配元素的事件上面的处理函数
示例：
当每个p标签被点击的时候，弹出其文本
$("p").bind("click", function(){
alert( $(this).text() );
});
你可以在事件处理之前传递一些附加的数据。
function handler(event) {
//event.data 可以获取bind()方法的第二个参数的数据
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
通过返回false来取消默认的行为并阻止事件起泡。
$("form").bind("submit", function() { return false; })
通过使用 preventDefault() 方法只取消默认的行为。
$("form").bind("submit", function(event){
event.preventDefault();
});
2、解绑事件
语法：
unbind(type,fn);
描述：
如果没有参数，则删除所有绑定的事件。
如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。
参数解释：
type (String) : (可选) 事件类型
fn(Function) : (可选) 要从每个匹配元素的事件中反绑定的事件处理函数
示例：
把所有段落的所有事件取消绑定
$("p").unbind()
将段落的click事件取消绑定
$("p").unbind( "click" )
删除特定函数的绑定，将函数作为第二个参数传入
var foo = function () {
//绑定事件和解绑事件的事件处理函数
};
$("p").bind("click mouseenter", foo); // 给p段落绑定click mouseenter事件
$("p").unbind("click", foo); // 只解绑了p段落标签的click事件
3.自定义事件
其实事件的绑定和解绑，都是我为了自定义事件做准备（大家把jQuery的提供的事件熟记在心），以后对jquery熟了以后，可以玩一下自定义事件
语法：
trigger(type,data);
描述：在每一个匹配的元素上触发某类事件，它触发的是由bind()注册的自定义事件。
参数解释：
type (String) : 要触发的事件类型
data (Array) : (可选)传递给事件处理函数的附加参数
示例：
给一个按钮添加自定义的事件
$(‘button‘).bind(‘myClick‘,function(ev,a,b){
//给button按钮添加的自定义事件myClick事件
})
然后通过trigger()触发自定义的事件
$(‘button‘).trigger(‘myClick‘,[1,2])
4.补充 一次性事件
语法：
one(type,data,fn)
描述：
为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同
参数解释：
type (String) : 事件类型
data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象
fn (Function) : 绑定到每个匹配元素的事件上面的处理函数
示例：
当所有段落被第一次点击的时候，显示所有其文本。
$("p").one("click", function(){
//只有第一次点击的时候才会触发，再次点击不会触发了
alert( $(this).text() );
});
五.事件委托(事件代理)
1.概念
通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。
原理:
利用冒泡的原理，把事件加到父级上，触发执行效果。
作用:
性能要好
针对新创建的元素,直接可以拥有事件
事件源:
跟this作用一样(他不用看指向问题，谁操作的就是谁),event对象下的
使用情景:
为DOM中的很多元素绑定相同事件；
为DOM中尚不存在的元素绑定事件；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <ul> <li class="item1"> <a href="javascript:void(0);" id="a">alex</a> </li> <!-- <li>武sir</li> --> </ul> <script src="jquery.js"></script> <script> $(function () { // 绑定事件 如果使用事件委托的方式 以后的页面不会出现问题 // 第二个参数 表示的是后代的选择器 // 事件委托（代理） 很重要 如果未来 出现 未来添加的元素 优先考虑事件委托 $(‘ul‘).on(‘click‘,‘#a‘,function () { alert(this.innerText); }); // $(‘ul li‘).click(function () { // alert(this.innerText); // }); $(‘ul‘).append(‘<li><a href="javascript:void(0);">wusir</a></li>‘); }) </script> </body> </html>
语法:
on(type,selector,data,fn);
在选定的元素上绑定一个或多个事件处理函数
event.data。以上是关于jQuery的位置信息和事件的主要内容，如果未能解决你的问题，请参考以下文章
jQuery框架使用，jq选择器，jq操作页面内容， jq操作类名，jq操作全局属性,jq获取盒子信息,jq获取位置信息，js/jq页面加载完毕事件，jq事件