一、jQuery的位置信息

jQuery的位置信是JS的client系列、offset系列、scroll系列封装好的一些简便api。

1、宽度和高度

a、获取宽度和高度,例如:

  .width()  // 获取匹配元素集合中的第一个元素的宽度值,内容宽度,不含padding
  .height() // 获取匹配元素集合中的第一个元素的高度值,内容高度,不含padding

注意:这个方法不接受任何参数。.css(‘width’)(或.css(‘height’))和 .width()(或.height())之间的区别是后者返回一个没有单位的数值(例如,400),前者是返回带有完整单位的字符串(例如,400px)。当一个元素的宽度(或高度)需要数学计算的时候推荐使用.width()(或.height()) 方法。

b、设置宽度和高度,例如:

  .width(value)  // 给每个匹配的元素设置宽度,value为数字,不带单位
  .height(value) //给每个匹配的元素设置高度,value为数字,不带单位

2、innerWidth()和innerHeight()

a、获取内部宽和高,例如:

  .innerWidth()  // 获取匹配元素集合中第一个元素的宽度值,含padding,不含border
  .innerHeight() // 获取匹配元素集合中第一个元素的高度值,含padding,不含border

注意:这种方法不适用于window 和 document对象,对于这些对象可以使用.width()和.height()代替。

b、设置内部宽和高,例如:

    .innerWidth(value)  // 给每个匹配的元素设置内部宽度,value为数字,不带单位
.innerHeight(value) //给每个匹配的元素设置内部高度,value为数字,不带单位

3、outerWidth()和outerHeight()

a、获取外部宽和高

  // 获取匹配元素集合中第一个元素的外部宽度(包括padding,border和可选的margin)
  .outerWidth([includeMargin])
  // 获取匹配元素集合中第一个元素的外部高度(包括padding,border和可选的margin)
  .outerHeight([includeMargin])

参数includeMargin:类型是布尔值,默认为false,表示不包含margin值。

注意:这个方法不适用于window 和 document对象,对于这些对象可以使用.width()和.height()代替。

b、设置外部宽和高

  .outerWidth(value)  // 给每个匹配的元素设置内部宽度,value为数字,不带单位
  .outerHeight(value) //给每个匹配的元素设置内部高度,value为数字,不带单位

4、偏移

a、获取偏移量,例如:

  .offset()  // 返回一个包含top和left属性的Object对象

描述:在匹配的元素集合中,获取的第一个元素的当前坐标,坐标相对于文档,与父相子绝无关。

注意:jQuery不支持获取通过display:none隐藏元素的偏移坐标。同样的,也无法取得隐藏元素的 border, margin, 或 padding 信息。若元素的属性设置的是 visibility:hidden,那么我们依然可以取得它的坐标。

b、设置偏移量,例如:

  .offset({ top: 10, left: 30});  // 设置匹配的元素集合中每一个元素的坐标,坐标相对于文档

5、元素坐标  

  .position()  // 返回一个包含top和left属性的Object对象

描述:描述获取匹配元素中第一个元素的当前坐标,相对于offset parent的坐标 (offset parent指离该元素最近的而且被定位过的祖先元素 )。

注意:当把一个新元素放在同一个容器里面另一个元素附近时,用.position()更好用。

6、滚动距离

a、获取水平方向滚动距离和垂直方向滚动距离,例如:

  .scrollLeft() // 获取匹配元素集合中第一个元素的当前水平滚动条的位置(页面卷走的宽度)
  .scrollTop() // 获取匹配的元素集合中第一个元素的当前迟滞滚动条的位置(页面卷走的高度)

b、设置水平方向滚动距离和垂直方向滚动距离,例如:  

  .scrollLeft(value)  // 设置每个匹配元素的水平方向滚动条位置
  .scrollLeft(value) // 设置每个匹配元素的垂直方向滚动条位置

二、JS的事件流的概念

1、事件的概念

HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件onclick、页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的,就需要了解一下“事件流”的概念。

2、什么是事件流

事件流描述的是从页面中接收事件的顺序。

3、事件流的由来(了解)

由于微软和网景乱搞,后来必须要为事件传播机制,制定一个标准,因为事件捕获是网景公司开发出来的,而事件冒泡是由微软公司开发出来的,它们都想要自己的技术成为标准,所以导致这两个公司老是干架,制定标准的人为了不让它们干架,所以研发了事件流。

4、”DOM2级事件”规定的事件流包括三个阶段:

  ①事件捕获阶段:事件捕获和事件冒泡是相反的,也就是说,当用户触发了一个事件的时候,这个事件是从DOM树的最上层开始触发一直到捕获到事件源;

  ②处于目标阶段:事件在目标元素上发生并处理,但是事件处理会被看成是冒泡阶段的一部分;

  ③事件冒泡阶段:官方的定义就是从最特定的事件目标到最不特定的事件目标,意思就是说,加入用户单击了一个元素,,该元素拥有一个click事件,那么同样的事件也将会被它的祖先触发,这个事件从该元素开始一直冒泡到DOM树的最上层,这一过程称为事件冒泡;

5、事件流的写法以及实现方式

a、标准实现方式是使用关键词addEventListener,假如你想给某元素添加/删除事件,可以这样写:

  element.addEventListener(eventType, fn, false);
  element.removeEventListener(eventType, fn, false);

  参数解释:

    eventType:表示要使用哪种事件类型,比如click;

    fn:回调函数,里面写触发此事件你要做什么事情;

    false:事件机制,分为冒泡和捕获,false表示事件冒泡,true表示事件捕获;

b、既然有标准的实现方式,那么肯定也存在着非标准的写法,如下:

  element.attachEvent(eventType, fn);   // 这种写法兼容IE, IE没有实现事件捕获
  element.detachEvent(eventType, fn);

  参数解释:

    eventType:事件类型;

    fn:回调函数;

c、冒泡和捕获的示例,如下:

<button id="btn">按钮</button>
  <script>
    window.onload = function(){
      var oBtn = document.getElementById('btn'); document.addEventListener('click',function(){
  console.log('document处于事件捕获阶段');
}, true); document.documentElement.addEventListener('click',function(){
console.log('html处于事件捕获阶段');
}, true); document.body.addEventListener('click',function(){
console.log('body处于事件捕获阶段');
}, true); oBtn.addEventListener('click',function(){
console.log('btn处于事件捕获阶段');
}, true); oBtn.addEventListener('click',function(){
console.log('btn处于事件冒泡阶段');
}, false); document.body.addEventListener('click',function(){
console.log('body处于事件冒泡阶段');
}, false); document.documentElement.addEventListener('click',function(){
console.log('html处于事件冒泡阶段');
}, false); document.addEventListener('click',function(){
console.log('document处于事件冒泡阶段');
}, false);
};
</script>
<!--
控制台输出结果如下:
document处于事件捕获阶段
html处于事件捕获阶段
body处于事件捕获阶段
btn处于事件捕获阶段
btn处于事件冒泡阶段
body处于事件冒泡阶段
html处于事件冒泡阶段
document处于事件冒泡阶段
-->

三、事件对象

什么是事件对象?在触发DOM上的事件时都会产生一个对象。

1、认识事件对象

事件在浏览器中是以对象的形式存在的,即event。触发一个事件,就会产生一个事件对象event,该对象包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。

例如:鼠标操作产生的event中会包含鼠标位置的信息;键盘操作产生的event中会包含与按下的键有关的信息。

所有浏览器都支持event对象,但支持方式不同,在DOM中event对象必须作为唯一的参数传给事件处理函数,在IE中event是window对象的一个属性。

2、什么时候产生事件对象?

当触发某个事件的时候,这个事件的回调函数的形参会默认接收一个event事件对象。

3、DOM中的事件对象

DOM0级和DOM2级事件处理程序都会把event作为参数传入。

根据习惯:可以用e,或者ev或者event。

DOM中事件对象重要属性和方法:

属性

描述

type

用于获取事件类型

target

用于获取事件目标,即事件加在哪个元素上

方法

描述

stopPropagation()

用于阻止事件冒泡

preventDefault()

阻止事件的默认行为(移动端用的多)

4、IE中的事件对象

第一种情况: 通过DOM0级方法添加事件处理程序时,event对象作为window对象的一个属性存在。

第二种情况:通过attachEvent()添加的事件处理程序,event对象作为参数传入。

IE中事件对象重要属性和方法:

属性

描述

type

用于获取事件类型

srcElement

用于获取事件目标,即事件加在哪个元素上

cancelBubble

用于阻止事件冒泡,是属性(true表示阻止)

returnValue

用于阻止事件的默认行为,是属性(false表示阻止)

5、Event对象的一些兼容性写法(了解)

a、获得event对象兼容性写法,如下:

    event || (event = window.event);

b、获得target兼容型写法,如下:  

    event.target||event.srcElement;

d、阻止冒泡兼容性写法,如下:  

    event.stopPropagation ? event.stopPropagation() : (event.cancelBubble =true);

c、阻止浏览器默认行为兼容性写法,如下:  

    event.preventDefault ? event.preventDefault() : (event.returnValue = false);

四、事件委托(事件代理)

通俗的讲,onclick、onmouseover、onmouseout等就是事件,委托,就是让别人来做,这个事件本来是加在某些元素上的,然而我们可以加到别人身上,来完成这个事件。

1、原理

利用冒泡的原理,把事件加到父级上,触发执行效果。

2、作用

a、性能要好;

b、针对新创建的元素,直接可以拥有事件;

3、事件源

跟this作用一样(他不用看指向问题,谁操作的就是谁),event对象下的。

4、使用情景

a、为DOM中的很多元素绑定相同事件;

b、为DOM中尚不存在的元素绑定事件;

5、语法:.on( events [, selector ] [, data ], handler(eventObject))

  参数解释:

    events:String类型,一个或多个空格分隔的事件类型;

    selector:String类型,选择器字符串,用于过滤出被选中的元素中能触发事件的后代元素;

    data:任意类型,当一个事件被触发时,要传递给事件处理函数的event.data;

    handler(eventObject):Function类型,事件被触发时,执行的函数;

  描述:在选定的元素上绑定一个或多个事件处理函数。

  示例:

  <ul>
<li>第一项</li>
<li>第二项</li>
</ul> <script>
$(function () {
// 现有的li和未来添加的li都能做事件操作
$('ul').on('click','li',function () {
alert(this.innerText);
});
$('ul').append('<li>第三项</li>');
})
</script>

五、jquery常用的事件

jquery常用的事件,大家一定要熟记在心,如下:

事件

描述

click()

鼠标单击触发事件

dblclick()

鼠标双击触发事件

mousedown()/mouseup()

鼠标按下/弹起触发事件

mousemove()

鼠标移动

mouseover()/mouseout()

鼠标移入/移出触发(包含被选元素和其子元素)

mouseenter()/mouseleave()

鼠标移入/移出触发(只在穿过/离开被选元素时触发)

hover()

hover(fn1,fn2)分别当鼠标指针进入和离开元素时执行

focus()/blur()

表单控件聚焦/失去焦点时触发

keydown()/keyup()

键盘按下/弹起时触发

change()

表单元素发生改变时触发

select()

文本元素发生改变时触发事件

submit()

表单提交时触发

六、解决单双击冲突问题

知识铺垫:两次点击间隔小于300ms为双击,所以考虑利用定时器解决,如下:

  <button>按钮</button>

  <script>
var timer = null;
$('button').click(function () {
clearTimeout(timer); // 开定时器之前先关定时器
timer = setTimeout(function () {
console.log('单击了');
},300)
}); $('button').dblclick(function () {
clearTimeout(timer);
console.log('双击了');
});
  </script>

七、应用:回到顶部代码示例:  

  <div class="fixTop">回到顶部</div>

  <script>
$(function () {
$('.fixTop').click(function(event) {
$('html,body').animate({
'scrollTop':0
},1000)
});
});
  </script>

jQuery基础(4)- 位置信息、事件流、事件对象、事件代理、jquery事件的更多相关文章

  1. Java基础(八)——IO流3_对象流

    一.对象流 1.序列化与反序列化 序列化:将内存中的Java对象保存到磁盘中或通过网络传输出去. 反序列化:将磁盘文件中的对象还原为内存中的一个Java对象. 用途: (1)将对象保存到物理硬盘:比如 ...

  2. JQuery框架2.位置属性|筛选方法|事件

    1.位置属性 jquery的css position获取匹配元素相对父元素的偏移位置:offset获取匹配元素在当前视口的相对偏移,返回的对象包含两个整型属性:top 和 left $("p ...

  3. .27-浅析webpack源码之事件流make(2)

    上一节跑到了NormalModuleFactory模块,调用了原型方法create后,依次触发了before-rsolve.factory.resolver事件流,这节从resolver事件流开始讲. ...

  4. HTML 事件(三) 事件流与事件委托

    本篇主要介绍HTML DOM中的事件流和事件委托. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流与事件委托 4 ...

  5. JavaScript事件流

    什么是JS事件流 早期的IE事件传播方向为由上至下,即从document逐级向下传播到目标元素:而Netscape公司的Netscape Navigator则是朝相反的方向传播, 也就是从目标元素开始 ...

  6. JS Event事件流(冒泡机制、捕获机制、事件绑定)

    1.事件流 事件流:从页面中接收事件的顺序.也就是说当一个事件产生时,这个事件的传播过程,就是事件流. IE的事件流 IE中的事件流叫事件冒泡:事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播 ...

  7. [JavaScript] JavaScript事件注册,事件委托,冒泡,捕获,事件流

    面试题 event 事件 事件委托是什么? 如何阻止事件冒泡,阻止默认事件呢? Javascript 的事件流模型都有什么? 事件绑定和普通事件有什么区别? Event 对象 Event 对象,当事件 ...

  8. 09-JS的事件流的概念(重点)

    在学习jQuery的事件之前,大家必须要对JS的事件有所了解.看下文 事件的概念 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以 ...

  9. 前端 ----js的事件流的概念(重要)

    09-JS的事件流的概念(重点)   在学习jQuery的事件之前,大家必须要对JS的事件有所了解.看下文 事件的概念 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页 ...

随机推荐

  1. 使用delphi 10.2 开发linux 上的Daemon

    delphi 10.2 支持linux, 而且官方只是支持命令行编程,目地就是做linux 服务器端的开发. 既然是做linux服务器端的开发,那么普通的命令行运行程序,然后等待开一个黑窗口的方式就 ...

  2. 2019.02.09 codeforces gym 100548F. Color(容斥原理)

    传送门 题意简述:对n个排成一排的物品涂色,有m种颜色可选. 要求相邻的物品颜色不相同,且总共恰好有K种颜色,问所有可行的方案数.(n,m≤1e9,k≤1e6n,m\le1e9,k\le1e6n,m≤ ...

  3. JSON_FORCE_OBJECT 数字索引数组 强转对象

    $abc = array('a','b','c','d','e','f','g'); echo '<pre>'; var_dump($abc); echo json_encode($abc ...

  4. linux 下安装安装mysql 5.6. 5.7

    linux版本:CentOS7 64位 5.7.20 安装请看 他人博客 我已经安装成功了 https://www.cnblogs.com/cz-xjw/p/8006904.html 5.6安装 前提 ...

  5. 03 编写URL规则

    3-1 URL编写规则 # 在每个App中设置独立的静态资源和模板文件并添加一个空白内容的urls.py文件. # 当程序收到用户请求的时候,首先在根目录的urls.py查找该URL属于哪个APP,然 ...

  6. C++ 中 new 操作符内幕:new operator、operator new、placement new

    一.new 操作符(new operator) 人们有时好像喜欢有益使C++语言的术语难以理解.比方说new操作符(new operator)和operator new的差别. 当你写这种代码: st ...

  7. C++STL 算法

    算法部分主要由头文件<algorithm>,<numeric>和<functional>组成. <algorithm>是所有STL头文件中最大的一个,其 ...

  8. 音频管理器(AudioManager)

    MainActivity.java package com.wwj.serviceandboardcast;   import android.app.Activity; import android ...

  9. hashchange事件

    h5新增了hashchange事件,以便在URL参数列表(及URL中‘#’号后面的所有字符串),发生变化时通知开发人员. 之所以要添加这个事件,是因为在Ajax应用中,开发人员经常要利用URL参数列表 ...

  10. 2.2.11同步synchronized方法无限等待与解决

    同步方法容易造成死循环. package com.cky.bean; /** * Created by edison on 2017/12/8. */ public class Service { s ...