jQuery入门

第一章 了解jQuery

官网：http://jquery.com/

1.1 常见框架介绍

1.1.1 什么是框架？

框架这个词在不同行业都有出现，如：土木工程，建筑工程，软件工程等等。我们今天以及以后的讲的框架都是指在软件行业中出现的框架。软件行业的中的框架出有很多类。如JAVA中的框架，PHP中的框架，C#中的框架..... 我们学习的框架是指js框架，或都Web中的框架。

软件工程中的框架是对种种功能的封装和抽象，使其在使用的时候，具有简便性和兼容，并且可以扩展框架中的内容。

1.1.2 常见框架

框架有很多，我们只讨论大前端中的框架，大前端的中框架也有很多，如下：

国外的框架有：

JQuery

Bootstrap

angular.js

Vue

prototype

......

国内的框架有：

JX（腾讯的）

KISSY(淘宝的)

Tangram(百度的)

NEJ(网易的)

.....

http://www.open-open.com/lib/view/open1406019235132.html

1.1.3 为什么要选择jQuery？

回顾前面学到的js我们遇到的一些不足之处：

ü  1，实现一个小功能要写很多代码

ü  2，获取页面元素不方便

ü  3，兼容性问题

ü  4，window.onload事件会覆盖，我们只能写一个

ü  5，动画效果，不好实现

.......

 

我们之所以选择JQuery，就是为了解决以上的问题的。

 

 

1.2 什么是jQuery

1.2.1 定义

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

 

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

 

用一句话来说：JQuery就是一个JavaScript框架（库），把我们常用的一些功能进行了封装，方便我们来使用，提高我们的开发效率。

 

 

Javascipt跟jQuery的区别：

ü  JS是一门运行在浏览器端的脚本语言，我们用它是编写客户端浏览器脚本的

ü  JQeury是JS的一个库，包含多个可重用的函数，用来辅助我们简化JS开发。

ü  JQeury能做的事，JS一定能做， JS能做的事，JQuery不一定能做。

它们之间的关系如下：

 

1.2.2 理念

write less , do more

1.2.3 作者

http://baike.baidu.com/link?url=lgTE3Jltkw3ywUCdkR-6ySCWpYBk4aIkzBqniE1YmQhQ1qom_IZR5ZqU7BBGzqLOqBot2yIHzIexiU8iE9jM7K2VNisOymB7c005pBjVZTC

 

JQeury的作者是：John Resig

 

1.3 jQuery特点

ü  具有独特的链式语法和短小清晰的多功能接口；

ü  具有高效灵活的css选择器，并且可对CSS选择器进行扩展；

ü  拥有便捷的插件扩展机制和丰富的插件。

ü  jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

ü  轻量级

ü  出色的浏览器兼容性

ü  出色的DOM操作封装

ü  完善的ajax

ü  链式编程

ü  隐式迭代（无需for循环遍历dom对象）

ü  完善的文档、强大的社区

ü  丰富的插件

第二章 jQuery入门

2.1 jQuery的基本使用

JQuery对应的源文件如下：

ü  带min的：压缩过的

ü  不带min的：没有压缩的

 

区别：我们在开发过程中，用没有压缩的，压缩的也可以

   我们在项目上线时，用压缩的

版本问题：

ü  1.x.x版本，支持IE6，7，8

ü  2.x.x版本，不再支持IE6，7，8

 

我们学习时，就学习就学习jquery-1.11.3.js这个版本。

2.1.1  引包

1，把JQ源文件，拿到我们项目中去。

2，在我们的页面中引入JQuery。

如果我们没有引入，仍使用JQ中的语法，肯定会报错，如下：

我们需要在使用JQuery之前，先去引入JQeury， 然后，再去写JQ代码。

2.1.2  入口函数

ü  $(function(){   });

ü  $(document).ready(function(){ });

注意的问题：JQ中的入口函数没有覆盖。

2.1.3 事件处理程序（监听器）

事件源

JS：docoment.getElementById(“id”);

JQ: $(“#id”);

事件

JS:  docoment.getElementById(“id”).onclick

JQ: $(“#id”).click

事件处理程序（监听器）

JS：docoment.getElementById(“id”).onclick = function() {  // 语句  };

JQ：$(“#id”).click（function(){  // 语句}）;

 

2.1.4 体验jQuery:

 

遇见的问题：

1，没有引入JQ

2，入口函数的使用不正确

3，jq代码写在了引入JQ的script标签

4，$(button) 没有加引号

2.2 基础知识

2.2.1 jQuery控制CSS

核心方法：.css()

 

2.2.1.1 CSS的单属性修改

.css(参数1， 参数2)

参数1，表示要修改的css的属性名

参数2，表示要修改该属性的属性值

代码如下：

 

2.2.1.2 CSS的单属性访问

.css(参数1)

如果写一个参数，表示访问，如果写两个参数表示修改

 

2.2.1.3 CSS的多属性修改

.css({k1:’v1’,k2:’v2’, k3:’v3’, k4:’v4’, k5:’v5’.....})

键值对

ü  k  -->  key   键

ü  v  -->  value   值

 

代码如下：

 

注意细节：

1，如果value有px，需要去掉px

2，如果是数字的话，不需要加引号，其它需要加引号

3，如果属性名中有-，那么我们也需要给属性名加上引号

4，如果属性名中有-， 想去掉引号的话，需要写成驼峰命名法

5，属性名可以加引号，也可以不加引号

 

 

2.2.2 jQuery控制HTML

核心方法：html()

 

2.2.2.1 修改HTML

.html(参数1)

参数1表示要修改的html内容

 

 

2.2.2.2 访问HTML

.html()

没有参数表示访问

代码如下：

2.2.3 jQuery控制标签属性

核心方法：attr();  

如果attr()有两个参数，表示修改，第一个参数表示要修改的标签属性名，第二个参数表示要修改的标签属性值。

 

代码如下：

 

第三章 jQuery选择器

选择器，也叫选择符，是用来选择DOM元素的符号。

jQuery选择器分为三类：

ü  基本选择器；

ü  过滤选择器；

ü  筛选选择器

3.1 基本选择器

JQ中的基本选择器可以这样认为： =C2中的选择+C3中的子代选择器+C3中兄弟选择器

 

选择器

说明

p

选择所有的p标签

#box

选择id为box的元素

.item

选择class为item的元素

div.left

交集选择器，选择所有div，并且有class=”left”

h1, h2,h3,h4

分组选择器（并集），满足条件之一就行

ul li

后代选择器，选中所有ul的li

*

通配符选择器

> 

第一级子代选择器

+

后面的紧挨着的第一个兄弟

~

该元素后面的所有的兄弟

3.2 过滤选择器

3.2.1 基本过滤选择器

选择器

说明

:eq()

过滤指定索引的那一个

:first

过滤第一个

:last

过滤最后一个

:not()

取非，（）写选择器

:even

选择所有索引值为偶数的

:odd

选择所有索引值为奇数的

:gt()

选择所有索引值大于某个数，greater than

:lt()

选择所有索引值小于某个数，less than

:header

选择所有标题标签

:animated

选择所有运行中的元素

 

3.2.2 子元素过滤选择器

选择器

说明

:root

选中根标签，同html

:nth-child()

选中父亲的第几个孩子

:first-child

取出每家的第一个孩子

:last-child

取出每家的最后一个孩子

:nth-last-child()

取出每家倒数第几个孩子

:only-child

取出每家的独生子女

:nth-child(even) :nth-child(2n)

取出每家排行偶数的孩子

:nth-child(odd) :nth-child(2n+1)

取出每家排行奇数的孩子

:nth-of-type()

选择每家的同类孩子中的第几个

:first-of-type

选择每家的同类孩子中的第一个

:last-of-type

选择每家的同类孩子中的最后一个

:nth-last-of-type

选择每家的同类孩子中的倒数第几个

:only-of-type

选择每家的同类孩子中的唯一一个

 

 

3.2.3 内容过滤选择器

选择器

说明

:contains()

选择内容中包含某个字符串的元素

:has()

选择内容中有某个标签的元素

:empty

选择内容为空的元素

:parent

选择内容不为空的元素

 

3.2.4 可见性过滤选择器

选择器

说明

:hidden

选择隐藏的元素

:visible

选择显示的元素

 

3.2.5 属性过滤选择器

选择器

说明

e[alt]

选择具有alt属性的e元素

e[alt=”value”]

选择具有alt属性的e元素,且属性值为value

e[alt!=”value”]

选择alt属性值不为value的e元素

e[alt*=”value”]

选择alt属性值含有value的e元素

e[alt$=”value”]

选择alt属性值以value结尾的e元素

e[alt^=”value”]

选择alt属性值以value开头的e元素

 

3.2.6 表单元素属性过滤选择器

选择器

说明

:input

选中所有的表单元素

:text

选择所有的文本框

:password

选择所有的密码框

:radio

选择所有的单选框

:checkbox

选择所有的复选框

:submit

选择所有的提交按钮

:image

选择所有的图片按钮

:reset

选择重置按钮

:button

同标签选择器button

:file

选择文件上传按钮

input:hidden

选择隐藏的表单元素

:enabled

选择可用的表单元素

:disabled

选择不可用的表单元素

:checked

选择选中的单选框和复选框

:selected

选择选中的下拉列表的选项

 

3.3 筛选选择器

我们前面所讲的基本选择器和过滤选择器，是写在选择函数$()里面，我们现在学习的筛选选择器不是写在选择函数里面，是写在选择函数后面。

 

什么时候用筛选选择器？

当你的选择器不方便写在选择函数里面时，这个时候可以用筛选选择器。

3.3.1 过滤筛选选择器

选择器

说明

.filter(“选择器”)

如果基本选择器和过滤选择器不方便往选择函数中写，那么就写在.filter()方法中。

.filter(function(index){

 

})

.filter()中可以写筛选函数：function(index){}，其中index表示当前筛选函数的索引值。满足条件的元素，return true表示筛选出该元素。

$img.eq(1)

是$img.filter(':eq(1)')的快捷方式

$img.not(":eq(1)")

是$img.filter(':not(:eq(1))')的快捷方式

.slice(参数1,参数2)

筛选 参数1<= 索引值 <参数2

.is(“选择器”)

.filter()返回的是满足条件的元素集；.is()是用于判断该元素是否满足选择器的条件：如果是，返回true，否则返回false.

.hasClass(“类名”)

.is(“.类名”)的快捷方式

 

对于表单元素，.attr有一个bug，对于这个bug，JQ又专门提供了一个方法：prop(参数1，参数2)

 

 

3.3.2 查找筛选选择器

选择器

说明

.parent()

选择父

.children()

孩子

.sibling()

亲兄弟姐妹，亲同胞

.next()       

选择选中元素的紧挨着的亲弟弟或妹妹

.nextAll()

选择选中元素的所有亲弟弟妹妹

.prev()

选择选中元素的紧挨着的亲哥哥或姐姐

.prevAll() 

选择选中元素的所有的亲哥哥姐姐

.find(选择器)

选择选中元素的后代

 

3.3.3 串联筛选选择器

选择器

说明

.end()

返回到最近一次“破坏”之前的状态

.addBack()

表示加上自身

.index()

选中元素在其亲兄弟姐妹中的索引值

 

第四章 动画

4.1 隐藏/显示动画

动画

说明

.show()

显示动画

.hide()

隐藏动画

.toggle()

切换显示

注意细节：

1，对于这三个函数，如果没有写参数，那么动画是瞬间完成的，如果你想让它有过渡效果，你需要给它传递一个时间参数。

2，动画有一个排队的效果，上一个动画执行完毕才会去执行下一个动画。

3，如果动画排除构成了危害，想要阻止排队，这时候，可以在动画前面加上.stop()。

 

4.2 滑动动画

动画

说明

.slideUp()

向上滑动隐藏

.slideDown()

向下滑动显示

.slideToggle()

滑动切换

 

注意细节：

1，.slideUp(动画时长，缓冲曲线（默认：swing,需要加引号），function(){});

4.3 透明度动画

动画

说明

.fadeOut()

淡出

.fadeIn()

淡入

.fadeTo()

不透明到多少。两个参数：

参数1，表示动画的时长

参数2，表示表透明度  1:完全不透明的；0：完全透明的

 

注意细节：

1，.fadeOut(动画时长，缓冲曲线，回调函数);

2，.faseTo()里面多了第二个参数，也就是透明度的值，其它和faseOut一样。

4.4 自定义动画

jq是里面的自定义动画，有点类似于jq时里面的.css方法。

.css()如果想设置多个属性，需要这样写：.css({‘k’:’v’,‘k’:’v’,‘k’:’v’,‘k’:’v’,‘k’:’v’.....})

我们这里自定义动画，使用.animate()方法，这个方法就类似于

.css({‘k’:’v’,‘k’:’v’,‘k’:’v’,‘k’:’v’,‘k’:’v’.....})

 

注意细节：

1，.animate(键值对，动画时长，缓冲曲线，回调函数);

2，属性值是数字的，都可以用于自定义动画。

 

4.5 停止动画

.stop()

 

第五章 DOM操作

回顾一下，JS是由三部分组成：ECMAScript, BOM, DOM。

DOM：文档对象模型

D：Document 文档  就是html文档

O：Object 对象  html中的结点，都可以理解成对象

M：Model  模型  树模型   DOM树  常见的有两种结点，元素结点和文本结点

 

学习JQ中的DOM， DOM中常见的节点有三种：元素节点，属性节点，文本结点。那么我们这里面所说的DOM操作，就是对这三种结点的增删改查。

5.1 元素（元素节点）操作

5.1.1 查找元素

选择器选择的过程，就可以称之为查找元素。

5.1.2 增加元素

增加元素的步骤：

1，用$()方法创建一个任意的孤儿元素

2，把这个创建出来的元素保存到变量中，以方便后面使用

3，用追加的方法，把创建出来的元素追加到文档树中。

 

新元素作为孩子插入

 

追加方法

说明

.append()

在指定元素内部的最后追加一个新元素，已存在的元素的主导

.appendTo()

将新创建的元素追加到一个指定元素内部的最后。这里面新创建的元素是主导，已存在的元素是参数

.prepend()

在指定元素内部的最前追加一个新元素，已存在的元素的主导

.prependTo()

将新创建的元素追加到一个指定元素内部的最前面。新元素是主导，已存在的元素是参数

 

 

新元素作为兄弟插入

追加方法

说明

.before()

在指定元素的前面紧挨着的同级插入（已存在元素做主导，新元素作为参数）

.insertBefore()

将新元素插入到指定元素同级的紧挨着的前面。（新元素做主导，已存在元素作为参数）

.after()

在指定元素的后面紧挨着的同级插入（已存在元素做主导，新元素作为参数）

.insertAfter()

将新元素插入到指定元素同级的紧挨着的后面。（新元素做主导，已存在元素作为参数）

 

包裹元素

包裹的方法

说明

.wrap

用新创建的元素，分别包裹选中元素

.wrapAll

用新创建的元素，整个包裹住选中的元素

.wrapInner

用新创建的元素，包裹选中元素的内部

 

 

5.1.3 删除元素

删除的方法

说明

.remove()

删除选中的元素（连根拔起）

.empty()

清空选中元素的内部（留空壳子）

.detach()

把选中元素从指定的位置解开（不删除它附带的资源：例如绑定的事件等）

 

5.1.4 修改元素

修改的方法

说明

.replaceWith()

把选中元素替换为参数中的新元素

.replaceAll()

用新元素替换选中的元素（已存在的元素作为参数，新元素作为主导）

 

5.1.5 复制元素

复制的方法

说明

.clone()

复制选中的元素，已存在的元素是主导元素

 

5.2 属性（属性节点）操作

方法

说明

.attr(参数1, 参数2)

如果写一个参数，表示访问该元素的属性；

如果写两个参数，表示修改该元素的属性

.removeAttr(参数1)

删除选中元素的属性

.addClass(类名)

给选中元素添加类名；如果有该类名，则忽略；没有该类名，则添加。是attr(‘class’)的快捷方式

.removeClass(类名)

给选中元素去掉类名。是attr(‘class’)的快捷方式

.hasClass(类名)

判断选中元素有无该类名。有则返回true,无则返回false

.toggleClass(类名)

给选中元素切换类名。有则删除，无则添加。是addClass和removeClass的合体形式

.prop(参数1, 参数2)

如果写两个参数，表示修改：第一个参数表示修改的表单元素的属性名；第二个参数表示修改的表单元素的属性值。

如果写一个参数，表示访问。参数1，就是需要访问的属性名

.val()

是prop(‘value’)的快捷方式。如果传值表示修改，不传值表示访问。

 

attr()用于表单元素的时候，有bug。针对表单元素，jQuery提供了prop()方法。   (prop是property是前四个字母)

 

 

 

 

 

5.3 文本操作

方法

说明

.html()

如果填写一个参数，表示修改选中元素中的html。如果不写参数，表示访问选中元素中的html

.text()

如果填写一个参数，表示修改选中元素中的文本。如果不写参数，表示访问选中元素中的文本

 

5.4 样式操作

样式的方法

说明

.css()

包括单属性修改、单属性访问、多属性修改

.width()

修改或访问选中元素的内容宽度，是.css(‘width’)的快捷方式。如果传一个参数，表示修改；如果不传参数，表示访问。

.height()

修改或访问选中元素的内容高度，是.css(‘height’)的快捷方式。如果传一个参数，表示修改；如果不传参数，表示访问。

.innerWidth()

访问选中元素的内容宽度+左右padding

.innerHeight()

访问选中元素的内容高度+上下padding

.outerWidth()

获取选中元素的内容宽度+左右padding+左右边宽

.outerHeight()

获取选中元素的内容宽度+上下padding+上下边宽

.outerWidth(true)

获取选中元素的内容宽度+左右padding+左右边宽+左右margin

.outerHeight(true)

获取选中元素的内容宽度+上下padding+上下边宽+上下margin

 

5.4.1 元素的滚动坐标值

元素隐藏到上面的内容高度与 元素隐藏到左边的宽度， 我们称为滚动坐标值。就是我们前面接触的scrollTop和scrollLeft,  如下图：

滚动坐标值人用途：scrollTop是最常用的，scrollLeft几乎不用。

5.4.2 元素的文档坐标值

每一个元素都有一个文档坐标值，是相对于文档左上角而言。

 

怎么去获得一个元素的文档坐标值？

$(“div”).offset().left   得到该元素的文档坐标值的横坐标

$(“div”).offset().top   得到该元素的文档坐标值的纵坐标

 

一个绝对定位的元素，如果想获取它相对于参考点的坐标值，可以使用position():

$(“div”).position().left   得到元素相对于它绝对定位参考点的横向偏移量

$(“div”).position().top   得到元素相对于它绝对定位参考点的纵向偏移量

 

 

 

 

第六章 jQuery事件

回顾一下，学习原生的DOM中，事件（事件模型）都有哪些内容？

1，事件模型入门，把事件模型简称为事件

事件模型的三要素：事件源，事件，监听器（事件处理程序）

2，事件绑定

HTML事件绑定

DOM 0级的事件绑定

DOM 2级的事件绑定

IE事件绑定

3，事件类型

焦点事件，鼠标事件，键盘事件，表单事件，ui事件，拖拽事件...

4，事件对象

5，事件中的this

6，阻止默认事件

7，事件流和事件传播

 

 

6.1 标准DOM事件

6.1.1 UI事件

UI事件

说明

unload

表示窗口卸载的时候触发

scroll

当窗口或页面元素滚动时触发

resize

当窗口大小改变时触发

select

当文本框或文本域的内容被选中时触发

 

注意细节：

1，unload事件
                      具体来说，当发生以下情况时，会发出 unload 事件：
                                 1. 点击某个离开页面的链接
                                 2. 在地址栏中键入了新的URL 
                                 3. 使用前进或后退按钮 
                                 4. 关闭浏览器 
                                 5. 重新加载页面

2， scroll事件
                      当用户滚动指定的元素时，会发生 scroll 事件。
                      scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。

6.1.2 焦点事件

焦点事件

说明

focus

当表单元素获取焦点时触发

blur

当表单元素失去焦点时触发

 

6.2.3 鼠标事件

鼠标事件

说明

click

鼠标单击时触发

dbclick

鼠标双击时触发

mousedown

鼠标按下去时触发

mouseup

鼠标抬起时时触发

mouseover

鼠标移上去时触发

 

 

 

 

mouseout

鼠标离开时触发

mousemove

鼠标在元素上移动时就触发

 

6.2.4 键盘事件

键盘事件

说明

keydown

键盘被按下时触发

keyup

键盘抬起时触发

keypress

键盘被按下时触发,只对字符键起作用，包括enter键

 

6.2.5 表单事件

表单事件

说明

submit

当表单提交时触发

change

当文本框，文本域，下拉菜单，多选框，单选框的值发生改变时并且失去焦点时触发。

 

6.2 jQuery自定义事件

6.2.1 页面载入事件

ready 当页面中的DOM绘制完成时，就触发，它是在img, script, link等相关资源加载之前就触发。可以写多个。

window.onload 当页面中所有的元素都加载完毕，包括img, scirpt, link都加载完毕。

 

换句话说，window.onload与ready（JS中的入口和JQ中的入口函数的区别）的区别有两个：

ü 1，load是等所有资源加载完毕后触发，ready只需要等DOM加载完毕就触发。

ü 2，load只能写一个，写多个，后面的会覆盖前面的，read可以写多个。

 

页面载入事件的三种常见写法：

第一种：是第二种的一个简写形式

$(function(){});

第二种：

$(document).ready(function(){});

第三种：

$().ready(function(){})

6.2.2 鼠标事件

     mouseover与mouseout有一个问题：当某个元素中的子元素有定位时，鼠标移动到子元素时，首先触了mouseout事件，此后它会再去判断这个子元素是否属性这个元素，进而又它触发了mouseover事件。IE提出了一个觖决方案，引入了两个新的事件类型：mouseenter和mouseleave。这两个事件就可以去解决上面的问题。

键盘事件

说明

mouseenter

当鼠标指针穿过元素时

mouseleave

当鼠标指针离开元素时

hover

mouseenter和mouseleave的结合体

 

JQ提供了一个mouseenter和mouseleaver一个结合体，就是hover事件，hover中可以带两个监听器，第一个是mouseenter的监听器，第二个是mouseleaver的监听器。

当这两个监听器一样时，可以写一个。

 

6.2.3 焦点事件

 

焦点事件

说明

focusin

当元素获得焦点时，触发 focusin 事件。

focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。

focusout

当元素失去焦点时触发 focusout 事件。

focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。

 

 

6.2.4 事件绑定

回顾一下，.css()，对于.css()这个方法，jq提供很多快捷方式，如：widht(), height()....

 

我们学习过click(fn), dblclick(fn),mouseenter().....它们也是快捷方式， 它们是谁的快捷方式？

答：bind,    bind(“事件名”， 监听器);

 

事件绑定

说明

bind

给元素绑定事件

unbind

给选中的元素解绑事件

one()

给选中的元素绑定一次事件

error()

选中的元素出错时触发

 

可以给事件处理程序（监听器）传递参数，只要在bind()或快捷方式里面，在事件处理程序前面，加上{}， {}中以键值对的形式书写需要传递的参数。获取时，可以通过事件对象获取，也就是通过e.data可以获取传递过来的参数。

 

凡是用.bind方式绑定事件的，都可以用on代替。

.bind是绑定，它对应的解绑是：unbind()

.on也是绑定，它对应的解绑是：.off()

 

最后看一个图：

6.2.5 事件委托

绑定的事件，只对已经存在的元素起作用，对于新添加的元素，如果不重新绑定，就不起作用。如果我们想让绑定的事件对新添加的元素起作用，就使用事件委托。就是：把事件源委托给它的父级。委托方式：delegate, 解委托：undelegate。 delegate也可以使用on代替，但是它们两个的书写顺序不同。

 

delegate()   事件源需要交给它的父级，第一个参数代码原来的事件源。这样的话，新加入到该父级的元素，依然具有已经存在的兄弟一样的事件。

undelegate()   取消事件委托

 

凡是用快捷方式的事件类型，都可以使用bind()进行绑定，使用unbind()进行解绑。

凡是bind()进行绑定的，或用delegate()进行委托的，都可以使用on, on对应的是off

 

on进行的事件委托和delegate进行的事件委托它的基本上是一样的，不同的是它们的参数顺序不同。

6.2.6 事件触发

直接是：事件名（）  还可以这样写：trigger(事件名)

 

 

6.3 事件对象

在事件处理函数中，有一个形式参数，可以写成e, evt, event等，这个参数就是事件对象。

6.3.1 事件发生位置

事件对象里面保存着事件发生的坐标：

event.pageX表示事件发生地的横坐标， evnet.pageY 表示事件发生地的纵坐标

6.3.2 键盘信息(了解)

在事件对象中有一个which属性，它保存的就是我们按下去那个键的ASCII码。

 

如果你按了ctrl键，which.ctrlKey的值就是true, 否则，是false

如果你按了shift键，which.shiftKey的值就是true, 否则，是false

如果你按了alt键，which.altKey的值就是true, 否则，是false

 

 

 

6.3.3 阻止事件冒泡

event事件对象中有target， currentTarget

ü target: 最初触发的DOM元素

ü currentTarget：在事件冒泡中当前的DOM元素

 

第一种方式：

给所有的事件添加判断：if (event.target == event.currentTarget){}

第二种方式：

JQ中又提供了一个方法，是事件对象中的方式， stopPropagation()

 

第三种方式：

在事件处理程序最后，加上return false;

 

6.3.4 阻止默认事件

第一种方式：

在事件处理程序最后，加上：return false

第二种方式：

在事件处理函数中，添加event.preventDefault()

 

第七章 深入jQuery

7.1 jQuery对象与原生JS对象的转换

JQ对象都是以数组形式存在。

7.1.1 jQuery对象转原生JS对象

1，直接加上一个下标[0]

2，JQ对象后面加上.get(0)

7.1.2 原生JS对象转jQuery对象

给原生的js对象，加上$(), 就可以转化成JQ对象

7.2 $对象

$就是jQuery的代名词，$出现的地方，我们都可以使用jQuery代替。

 

当我们自己去定义了一个$函数，那么系统的就不能用了，怎么让系统继续使用？

我们可以把$作为参数，传给jQeury的事件处理函数

jQeury(function($){});

第八章 综合案例