第一章 认识jQuery

1.1 什么是jQuery

是一个组件库，简化JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。

优势

  1. 轻量级。采用Packer压缩后只有不到30kb
  2. 强大的选择器。使用CSS1到CSS3所有的选择器，以及jQueryz独创的高级选择器，还可以加入插件使其支持Xpath选择器，甚至自己的选择器。
  3. 出色的DOM操作封装。
  4. 可靠的事件处理机制。预留退路、循序渐进、非侵入式**
  5. 完善的Ajax。专心处理业务逻辑，无需关系复杂的浏览器兼容性和XMLHttpRequest对象创建和使用。
  6. 不污染的顶级遍历。只建立一个名为jQuery的对象。不会污染其他对象。可以与其他JavaScript库并存。
  7. 出色的浏览器兼容。
  8. 链式操作方式。发生在同一个jQuery对象上的一组动作
  9. 隐式迭代。当jQuery找到全部元素时，然后隐藏它们，无需循环遍历每一个返回的元素。
  10. 行为层和结构层的分离。可以直接使用jQuery选中元素，直接添加事件。
  11. 插件支持。
  12. 完善文档、
  13. 开源

库说明

名称 大学 说明
jquery-1.3.1.js 113KB 完整无压缩版本，用于测试、开发、学习
jquery-1.3.1.min.js 54KB/18KB 经过JSMin压缩/服务开启Gzip压缩
引入:
1
<script src="jquery-1.3.1.js" type="text/javascript"></script>

$是一个简单的写法

$.ajax === jQuery.ajax

对比：
windows.onload $(document).ready()
执行时机 必须等网页所有资源加载完毕（包括图片）才能执行 网页中所有DOM结构绘制完就可以执行。
编写个数 不能同时编写多个 能同时编写多个
简化写法 无 $(funtion(){});

1.2 jQuery对象和Dom对象

  1. DOM（文档操作模型）对象，每一份DOM都可以表示一棵树。可以通过JavaScript来获取元素节点。
  2. jquery对象，是通过jQuery包装DOM对象后产出的对象。是jQuery独有。只有jQuery对象可以使用jQuery的方法。jQuery对象无法使用DOM对象的方法

转换

1.jquery对象转化dom对象,两种方法[index]和get(index)

(1) jquery是一个数组对象，可以通过[index]得到相应的DOM对象

1
2
var $cr = $("cr");	//jquery对象
var cr = $cr[0];	//DOM对象

(2) jquery地下本身提供的，get(index)得到

1
2
var $cr = $("cr");		//jquery对象
var cr = $cr.get(0);	//DOM对象
2.dom对象转化.jquery对象

只需要用$()把DOM对象包装就可以得到

1
2
var cr = document.getElementById('cr');	//DOM对象
var $cr = $(cr);						//jquery对象

1.3 解决库冲突

jquery的所有插件都被限制在它的命名空间中。不会引起冲突

  1. jquery在其他库之后引入，使用函数将控制权移交给别的库

    1
    2
    3
    4
    jQuery.noConflict();
    jQuery(function(){
        
    })

    此外，如果想确保不会产生冲突，但又想定义一个快捷方式。

    1
    2
    3
    4
    var $j = jQuery.noConflict();	//自定义一个快捷方式
    $j(function(){					//使用jquery，利用自定义快捷方式
        
    })

  2. 如果在其他库之前引入，就不需要了。

第二章 jQuery选择器

2.1 jQuery选择器是什么

1. css选择器

将网页结构和表现样式完全分离。常用的css选择器：

选择器 语法 描述
标签选择器 E { css } 选择文档元素
ID选择器 #ID { css } 以文档元素唯一标识符选择
类选择器 E.class{ css } 以class选择
群组选择器 E1,E2,E3 { css } 多个同时应用相同样式
后代选择器 E F{ css } 元素E的任意后代F
通配选择器 * { css } 任意对象

2. jquery选择器

​ 完全继承CSS风格。涉及操作css样式非常强大，拥有浏览器兼容性。

2.2 选择器的优势

  1. 简洁写法。

  2. 支持css1到css3的全部。

  3. 完善的处理机制。可以避免很多错误。例如：如果使用dom选择一个没有的元素时会报错。使用jquery就不会。有了预防措施，即使删除某个网页上使用过的元素，也不用担心。

    但是需要注意：$()获取的永远是对象。即使没有，判断这个元素是否存在是就要使用:

    1
    2
    3
    4
    5
    //根据获取元素判断
    if ( $('#tt').length >0 ){}

    //转换为DOM
    if ( $('#tt')[0] ){}

2.3 jQuery选择器

基本选择器、层次选择器、过滤选择器、表单选择器。

1.基本选择器

通过元素的id、class、标签名来查找Dom

选择器 描述 返回
#id 根据id匹配 单个
.class 类名 集合
element 元素名 集合
* 所有 集合
selector1，… 将每个选择器匹配到的所有合并一起返回 集合

2.层次选择器

通过DOM元素之间层次关系来获得特定元素，例如后代、子元素、相邻元素、兄弟元素。

选择器 描述 返回
$(“ancestor descendant”) 获取ancestor元素的所有descendant后代元素 集合
$(“parent > child”) 选取parent元素下所有子元素，与上面有区别，上面是后代元素，这个只有子元素 集合
$(‘perv + next’) 选取紧接在prev后面的next元素 集合
$(‘perv ~ sibling’) 选择prev元素之后所有的sibling元素 集合

前2个较为常用。之后2个有代替

选择器 方法
$(‘.one + div’) $(‘.one’).next(‘div’)
$(‘#prev ~ div’) $(‘.one’).nextAll(‘div’)

$(‘#prev ~ div’)只能选择“#prev“之后的同辈<div>,但是siblings()方法与位置无关，只要是同辈就可以。

3.过滤选择器

通过特定的过滤规则筛选出所需DOM，选择器以冒号开头

基本过滤选择器

注意这里不加空格 element:first

选择器 描述 返回
:first 选取第一个元素 单个
:last 最后一个元素 单个
:not(selector) 去除给定选择器匹配的 集合
:even 选取索引是偶数的、从0开始 集合
:odd 选取索引是奇数的、从0开始 集合
eq(index) 选取索引等于index的元素、从0开始 单个
gt(index) 选取索引大于index的元素、从0开始 集合
lt(index) 选取索引小于index的元素、从0开始 集合
:header 选择所以标题元素,h1、h2等 集合
:animated 选取当前正在执行动画的所有元素 集合
内容过滤选择器

体现在所包含子元素或文本内容上,注意这里不加空格

选择器 描述 返回
:contains(text) 选择文本内容含有“text” 集合
:empty 选择不包含子元素或文本内容为空 集合
:has(selector) 含有选择器所匹配的元素的元素 集合
:parent 选择含有子元素或文本的元素 集合
可见性过滤选择器
选择器 描述 返回
:hidden 选择所以不可见的元素 集合
:visible 选择所以可见的元素 集合

:hidden不仅仅包含样式属性display为“none”的元素，也包含文本隐藏域<input type="hidden"/>和visible:hidden

属性选择过滤器

通过元素的属性来获取相应元素。

选择器 描述 返回
[attribute] 选择拥有属性的 集合
[attribute=value] 选择属性值为value 集合
[attribute!=value] 选择属性值不等于value的元素 集合
[attribute^=value] 选择属性值以value开头的元素 集合
[attribute$=value] 选择属性值以value结尾的元素 集合
[attribute*=value] 选择属性值含有value结尾的元素 集合
[selector1] [selector1] 属性选择器合并并成一个复合选择器，满足多个条件 集合
子元素过滤选择器
选择器 描述 返回
:nth-child(index/even/odd/equation) 选取父元素下第index个或奇偶（从1开始） 集合
:first-child 选取父元素第1个子元素 集合
:last-child 选取父元素最后1个子元素 集合
:only-child 选择某个元素是它父元素中唯一的子元素，如果还有其他不匹配 集合

:nth-child()是很常用的子元素选择器，详细功能如下：

  1. :nth-child(even)选取父元素下的索引值为偶数的。
  2. :nth-child(odd)选取父元素下的索引值为奇数的。
  3. :nth-child(2)选取父元素下的索引值为2的
  4. :nth-child(3n)选取父元素下的索引值为3的倍数的。（n从0开始）
  5. :nth-child(3n)选取父元素下的索引值为3n+1的。（n从0开始）

注意： eq(index)只匹配一个元素，而:nth-child 将每一个复合条件的父元素匹配子元素。同时应该注意nth-child(index)的index从1开始，而eq(index)从0开始。

表单对象属性过滤选择器

对表单进行过滤，例如选择被选中下拉框

选择器 描述 返回
:enable 选择可用的元素 集合
:disabled 选择不可用的 集合
:checked 选取所有被选中的（单选框、复选框） 集合
:selected 选择所有被选中的选项元素（下拉列表） 集合

4.表单选择器

方便用户灵活操作表单

选择器 描述 返回
:input <input><textarea><select><button> 集合
:text 文本 集合
:password 密码 集合
:radio 单选 集合
:checkbox 多选 集合
:submit 提交 集合
:image 图形 集合
:reset 重置 集合
:button 按钮 集合
:file 选择所以上传域 集合
:hidden 选取不可见 集合

2.4 注意事项

1. 带有特殊符号

选择器中包含“.”、”#”、“（”、“]”等

需要通过\来进行转移 \\#

属性选择器引号问题

@因为版本问题不能加入

2.选择器中含有空格

多一个空格会有不同效果

1
2
3
4
var $t_a = $('.text' :hidden);	//带空格
//选取class为text中的隐藏元素
var $t_b = $('.text':hidden);	//不带
//选取隐藏的class为"text"的元素

2.5 其他选择器

1.jQuery提供的

MoreSelectors for jquery

增加更多的选择器

Basic XPath

可以使用最基本的XPath

2.其他使用css的方法

  • document.getElementsBySelector() 通过选择器获取文档
  • cssQuery()
  • querySelectorAll()

第三章、jQuery中DOM的操作

DOM是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松的访问页面中所有的标准组件。

3.1 DOM操作的分类

1. DOM Core

任何支持DOM的程序都能使用，并非仅限于处理网页，处理任何一种标记语言写的文档，例如XML。

JavaScript中的getElementById()、getElementByTagName()、getAttribute()等等都是DOM Core的方法。

2. HTML_DOM

使用JavaScript和DOM为HTML编写脚本，有许多专属HTML-DOM的属性。例如:document.forms提供一个forms对象。只能用来处理Web文档。

3. CSS_DOM

针对CSS的操作，主要用于获取和设置style的各种属性。例如：element.style.color="red";

3.2 jQuery中的Dom操作

每一张网页都能用DOM表示出来，每一份DOM都可以看做一颗DOM树。

1. 查找节点

查找元素节点
1
2
var $li = $('ul li:eq(1)');
var $li_txt = $li.text();	//获取文本属性
查找属性节点
1
2
var $para = $('p');
var $p_txt = $para.attr("title");	//获取p节点属性title

2.创建节点

创建元素节点
1
$(html);	//根据传入的HTML创建一个DOM对象

创建<li>节点作为ul的子节点加入DOM中：

1
2
var $li = $('<li></li>');	//创建节点
$('ul').append($li);		//添加 可以采用链式写法添加多个
创建文本节点
1
2
var $li = $('<li>xxx</li>');	//创建节点
$('ul').append($li);		//添加 可以采用链式写法添加多个

无论html多复杂都使用相同的方式来创建。

创建属性节点

创建节点时一起创建：

1
2
var $li = $('<li title="x">xxx</li>');	//创建节点
$('ul').append($li);		//添加 可以采用链式写法添加多个

3.插入节点

动态创建HTML元素没有用，需要将创建元素加入文档。下面是插入的方法

方法 描述
append() 向每个匹配的元素追加内容,把B添加到A中
appendTo() 将所有匹配的匀速追加到指定元素中，把A添加到B中
prepend() 向每个匹配的元素内部前置内容
prependTo() 与上面颠倒
after() 在每个匹配的元素之后加入内容
insertAfter() 将所有匹配的元素插入到指定元素后面
before() 在每个匹配的元素之前插入内容
insetBefore() 将每个匹配的元素插入到指定元素前面

不仅仅可以将新创建的元素插入文档，也可以对原有的DOM元素进行移动。

4.删除节点

remove()

该方法会将所有后代节点同时删除。方法的返回值是指向被伤处元素的引用，可以在之后再使用这些元素。

remove()中也可以选择性的删除元素。

empty()

这个方法是清空节点，将元素所有后代节点清空。

5.复制节点

例如购物网站中，用户不仅仅可以通过单击商品下方选择购买相应产品，也可以通过鼠标拖到来放入购物车，这就是复制节点，将用户选择的商品所处的节点元素复制一份，并跟随鼠标一起移动。

1
2
3
$('ul il').click(funciton(){
	$(this).clone().appendTo('ul');//复制当今节点并添加到ul中
})

被复制的元素不具有任何行为。如果需要新元素也具有复制功能，可加入参数true,clone(true)

6.替换节点

方法 描述
replaceWith() 将所有匹配的元素都替换成指定的HTML或DOM元素
replaceAll() 将匹配元素放入指定的HTML

如果在替换之前，已经为元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失。

7.包裹节点

将某个节点用其他节点包裹起来

方法 描述
wrap() 将选择的节点用其他的标记包裹
wrapAll() 将所有匹配的元素用一个元素包裹起来，不同于wrap()，wrap()是将所有元素单独包装
wrapInner() 将每一个匹配的元素子内容用其他结构化标记包裹

8.属性操作

方法 描述
attr() 获取和设置属性，传递一个参数，根据参数获取，传递2个参数设置属性，也可以用object对象来设置属性
removeAttr() 删除属性

jQuery中很多多少用一个函数来实现获取和设置。例如html()、text() 、height() 、widht()、val()、css()。

9.样式操作

方法 描述
attr() 设置样式
addClass() 给元素追加类
removeClass() 移除样式
toggle(function(){}, function(){}) 切换样式 ，通过2个函数重复切换
toggleClass() 控制样式重复切换
hasClass() 判断是否含有某个元素，这个方法是为了可读性，内部使用了is()判断

10.设置和获取HTML、文本和值

方法 描述
html() 类似于innerHTML设置某个元素中HTML值，不穿参数，就获取值，也可以用于XHTML，XML。
text() 类似于innerText设置文本内容，不传参数，就获取值。对XHTML和XML都有效。
val() 类似于value属性，可以设置和获取元素的值，无论是文本框还是下拉框，如果是多选就放回一个值的数组。defaultValue属性可以获得默认属性，同时可以将下拉框和多选框和单选框的值被选中。是从最后一个往前读取，如果选项的value或者text有一项就会被选中。

11.遍历节点

方法 描述
children() 取得匹配元素的子元素结合。
next() 取得匹配元素之后的同辈元素。
prev() 取得匹配元素前面的同辈元素。
siblings() 取得元素前后的同辈元素。
closest() 取得最近的匹配元素，首先检查当前元素是否匹配，如果匹配直接返回本身，如果不匹配向上查找，如果没有找到就返回一个空的jQuery对象

除此之外还有find()、filter()、nextAll()、prevAll()、parent()、parents()

12.CSS-DOM操作

读取和设置style的各种属性

方法 描述
css() 获取属性，只有一个值；设置属性，通过两个参数，或者对象的方式。如果是数字，自动转换为像素。
height() 获取或设置高度。
offset() 获得当前元素在视窗的偏移，返回的结果包括top和left两个属性
position() 获取元素相对最近一个position样式属性设置为relative或absolute的祖父节点的相对偏移，包括top和left。
scrollTop() 获取元素滚动条距离顶端的距离。可以设定参数让元素滚动到指定位置。
scrollLeft() 左端元素滚动条距离顶端的距离。可以设定参数让元素滚动到指定位置。

第四章、jQuery中的事件和动画

当文档或某些元素发生变化或操作时，浏览器会生成一个事件。

4.1 jQuery中的事件

加载DOM

以浏览器加载文档为例，文档加载完毕，浏览器会通过JavaScript为DOM添加事件，通常用window.onload,而在jQuery中使用$(document).ready()，可以提高web查询的响应速度。

2这不同之处查看第一章

事件绑定

文档装载完毕后，为元素绑定事件，使用bind()

1
bing( type [, data] , fn);

第一个参数为事件类型，包括blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter 、mouseleave、change、select、submit、keydown、keypress、keyup和 error等，当然也可以是自定义名称。

第二个参数是可选，作为event.data属性传给事件对象。

第三个参数是处理函数。

jQuery的事件绑定比JavaScript少了“on”

在回调函数中可以使用$(this)将dom对象转换为jQuery对象

合成事件

有2个合成事件。

hover(fun1, fun2)

模拟鼠标光标悬停事件。当光标移到元素上时，会触发指定的第一哥函数；当光标移除这个元素时，会触发第二个函数。

（1）css中有伪类选择符，例如”:hover”,当用户悬停在元素上时，会改变元素的外观。

（2）hover()方法是代替bind("mouseenter")和bind("mouseleave")的，而不是bind(“mouseover”)和bind("mouseout")，因此需要触发第2 个函数时，需要用trigger("mouseleave")触发，而不是trigger("mouseout")。

toggle(fn1, …, fnN)

用于模拟鼠标连续点击事件，第一次点击触发第一个，第二次点击触发第二个，直到最后一个。随后的点击都是对这几个事件轮番调用。

toggle()方法还可以切换元素的可见状态。

事件冒泡

页面上可以有多个事件，也可以多个元素响应同一个事件。如果网页上有2个元素，一个元素嵌套另一个元素，同时绑定click事件，内部的点击事件也会触发外部的点击事件。事件会从内而外冒泡。

引发的问题

使用事件对象，需要内部的click事件需要为函数加一个参数。

1
2
3
$('element').bind('click',function(event){

})

当点击元素时，事件对象就被创建了。这个事件对象只有事件处理函数才能访问，执行完毕后，事件对象就被销毁。

可以停止事件冒泡在阻止其他对象的事件处理函数执行。

1
event.stopPropagation()	//阻止事件冒泡

可以阻止默认的行为。例如当点击超链接后会发生跳转、点击提交按钮表单会提交。

1
event.preventDefault()	//阻止元素的默认行为

如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false,这是这2中方法的一种简写模式。

jQuery不支持事件捕获。

事件对象的属性

方法 描述
type() 获取类型的类型，click…
preventDefault() 阻止默认的事件行为
stopPropagation() 阻止事件的冒泡
target() 获取触发事件的元素
pageX()/pageY() 获取光标相对于页面的x,y坐标
which() 鼠标点击事件中获取鼠标的左中右键1、2、3
metaKey() ctrl按键
originalEvent() 指向原始的事件对象

移除事件

1
unbind([type][,data])

第一个是事件类型，第二个是将要移除的函数。

只触发一次随后就立即解除绑定的情况。

1
one(type,[data],fn)

模拟操作

通过模拟用户操作来到达点击的效果。

1
$('#btn').trigger('click');

触发自定义事件

1
2
3
4
$('#btn').bind('myClick',function(){
    
});	
$('#btn').trigger('myClick');

4.2 jQuery中的动画

show()和hide()

修改display为none,hide()将内容的属性值设置为none,会记住之前的display属性值，当调用show时，会根据之前记住的方法来显示元素。

可以传递参数时间来控制隐藏和显示的速度。

fadeIn()和fadeOut()

只改变元素的不透明度。

slideUp()和slideDown()

只会改变元素的高度。如果一个元素的display属性值为none,slideDown()会让这个元素会由上至下延伸展示。

自定义动画animate()

1
2
3
4
animate(params. speed, callback)
//param:属性值的映射 {property1:"value",property2:"value2"...}
//speed:速度，可选
//callback:动画执行完成时调用的函数，可选

停止元素的动画和判断是否处于动画

1
stop([clearQueue] [,gotoEnd])

都是可选的参数没Boolean值，clear表示是否要清空未执行完的动画队列，goEnd表示是否直接跳转到末状态。

其他动画方法

方法 描述
toggle() 切换可见状态
slideToggle() 通过高度变化来切换匹配元素的可见性
fadeTo() 通过不透明度来渐进

第五章、jQuery与Ajax应用

Ajax全程“Asynchronous JavaScript and XML” (异步与XML)，是有机的利用了一系列交互式网页应用相关的技术形成的结合体

5.1 优势与不足

优势

  1. 不需要插件支持
  2. 优秀的用户体验：不刷新整个页面前提下更新数据。
  3. 提供web程序的性能，ajax在性能上最大的区别在于传输数据的模式，在传统模式中，数据提交通过表单来实现，数据获取靠全页面刷新来获取。
  4. 减去服务器和带宽的负担，相当于在用户和服务器之间加了一个中间层，使用户操作与服务器相应异步化。在客户端创建Ajax引擎，把传统方式下的一些服务器负担工作移到客户端。

不足

  1. 浏览器对于XMLHttpRequest对象支持不高，现在都支持了
  2. 破坏浏览器前进后退按键的正常功能。程序员不愿意在复杂的逻辑中去处理这个问题，但是用户习惯性的点击后退按键，这样就会发生不愿意看到是事情。
  3. 对搜索引擎支持不足，搜索引擎通过爬虫来对数据进行整理和交户
  4. 开发和调试工具缺乏。

5.2 Ajax和XMLHttpRequest对象

Ajax的核心是XMLHttpRequest对象，它是 Ajax实现的关键——发送异步请求、接收响应及执行回调都是通过它来完成的。XMLHttpRequest对象最早是在 Microsoft InternetExplorer 5.0 ActiveX组件中被引入的，之后各大浏览器厂商都以JavaScript内置对象的方式来实现XMLHttpRequest对象。

5.3 jQuery中的Ajax

对jquery进行了封装

方法

方法 说明
load(url [,data] [,callback]) 载入远程HTML代码并插入DOM,更改url可以很好的得到页面每个模块。传递方式是根据参数决定，无参get,有参post
$.get(url [,data] [,callback] [,type]) 通过get方式进行异步请求，多了一个类型是服务器返回内容的格式
$.post() post请求和get请求使用上一样
$.getScript() 在页面初次加载就取得全部的js是没有必要的
$.getJSON() 用于加载json
$.ajax(options) 下面细讲

浏览器返回的数据格式

  • HTML:HTML可以直接插入到页面中
  • XML：这个就需要进行数据处理，但是XML的可移植性很高，但是解析和操作速度慢
  • JSON：因为XML文档的体积到难以解析，就诞生了json,轻量级

get和post请求的区别

  • GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器。
  • GET 方式对传输的数据有大小限制（通常不能大于2KB)，而使用 POST方式传递的数据量要比GET方式大得多(理论上不受限制)。
  • GET 方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。在某种情况下，GET方式会带来严重的安全性问题，而POST方式相对来说就可以避免这些问题。
  • GET方式和 POST 方式传递的数据在服务器端的获取也不相同。在 PHP中，GET方式的数据可以用$S_GET[]获取，而POST方式可以用$_POST[]获取。两种方式都可以用$_REQUEST[]来获取。

$.ajax()

是最底层的Ajax实现，常用参数如下

参数名称 类型 说明
url String 发送请求地址
type String 请求类型(get/post)默认get,其他HTTP请求方法也支持例如put/delete
timeout Number 请求超时时间
data Object或String 发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。GET 请求中将附加在URL后。防止这种自动转换，可以查看processData选项。对象必须为key/value格式,例如{foo1 :”bar1”,foo2 :”bar2”}转换为&foo1=bar1&foo2=bar2。如果是数组，jQuery将自动为不同值对应同一个名称。例如{foo:[“bar1”,”bar2”}转换为&foo=bar1&foo=bar2
dataType String 预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包 MIME信息返回responseXML 或responseText，并作为回调函数参数传递。
可用的类型如下。
xml:返回 XML文档，可用jQuery 处理。
html:返回纯文本HTML信息;包含的script标签会在插入 DOM时执行。
script:返回纯文本 JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下），所有POST请求都将转为GET请求。
json:返回JSON数据。
jsonp: JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，jQuery 将自动替换后一个“?”为正确的函数名，以执行回调函数。
text:返回纯文本字符串
beforeSend Function 发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在 beforeSend中如果返回false可以取消本次Ajax 请求。XMLHttpRequest对象是惟一的参数。
function (XMLHttpRequest){
this;//调用本次Ajax请求时传递的options参数}
complete Function 请求完成后调用的回调函数（请求成功或失败时均调用）。
参数:XMLHttpRequest对象和一个描述成功请求类型的字符串。function (XMLHttpRequest, textStatus){
this;//调用本次Ajax请求时传递的options参数
success Function 请求成功后调用的回调函数，有两个参数。
(1）由服务器返回，并根据dataType参数进行处理后的数据。(2）描述状态的字符串。
function (data, textStatus){
// data可能是xmlDoc、jsonObj、html、text等等
this; //调用本次Ajax请求时传递的options参数}
error Function 请求失败时被调用的函数。该函数有3个参数，即
XMLHttpRequest对象、错误信息、捕获的错误对象(可选）。Ajax事件函数如下。
function (XMLHttpRequest, textStatus, errorThrown){
//通常情况下textStatus和 errorThown只有其中一个包含信息this; //调用本次Ajax请求时传递的options参数
global Boolean 默认为true.表示是否触发全局Ajax时间。设置为false不会茶法Ajax事件，AjaxStart或AjaxStop可用于控制各中Ajax事件。

5.4 序列化元素

方法 说明
serialize() 表单必不可少，经常用来提交数据。通过这个方法可以把数据序列化成字符串，用于Ajax请求
serializeArray() 将DOM元素序列化后返回JSON数据
param() 用来对一个数组或对象按照key/value进行序列化

5.5 Ajax全局事件

jQuery简化 Ajax操作不仅体现在调用Ajax方法和处理响应方面，而且还体现在对调用Ajax方法的过程中的HTTP请求的控制。通过jQuery提供了一些自定义全局函数，能够为各种与Ajax相关的事件注册回调函数。例如当Ajax请求开始时，会触发ajaxStart()方法的回调函数;当Ajax 请求结束时，会触发ajaxStop()方法的回调函数。这些方法都是全局的方法，因此无论创建它们的代码位于何处，只要有Ajax 请求发生时，就会触发它们。在前面例子中，远程读取网站的图片速度可能会比较慢，如果在加载的过程中，不给用户提供一些提示和反馈信息，很容易让用户误认为按钮单击无用，使用户对网站失去信心。

方法 说明
ajaxComplete(callback) Ajax请求完成时执行的函数
ajaxError(callback) Ajax 请求发生错误时执行的函数，捕捉到的错误可以作为最后一个参数传递
ajaxSend(callback) Ajax请求发送前执行的函数
ajaxSuccess(callback) Ajax请求成功时执行的函数

第六章、插件的使用和写法

jQuery的易扩展性,吸引了来自全球的开发者来共同编写jQuery的插件。最新最全的插件可以从jQuery官方网站的插件板块中获取，网站地址为: http:/plugins.jquery.com/。

6.1 表单验证插件-Validation

入门

有如下特点：

  • 内置验证规则:拥有必填、数字、E-Mail、URL 和信用卡号码等19类内置验证规则。
  • 自定义验证规则:可以很方便地自定义验证规则。
  • 简单强大的验证信息提示:默认了验证信息提示，并提供自定义覆盖默认提示信息的功能。
  • 实时验证:可以通过keyup或blur事件触发验证，而不仅仅在表单提交的时候验证。

下载地址：http://plugins.jquery.com/project/validate

使用：

1
$('#id').validate()

针对不同字段进行规则编码，

  • class=”required”必须填写、minlength=”2”最小长度为2
  • class=”required email”必须填写并且符合规范

不同写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//引入一个新插件
<script src="lib/jquery.metadata.js" type="text/javascript"></script>
$('#id').validate({meta: 'validate'})

//例如,为表单添加验证规则
$('#form').validate({
    rules: {
        username: {
            required: true,
            minlength: 2
        },
        email: {
            required:true,
            email: true
        }
        url:"url",
        comment: "required"
    }
})

自定义验证规则

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$.validator.addMethod(
	"formula",							//验证方法名称
    function(value, element, param){ 	//验证规则
        return value == eval(param)
    },	
    '请正确输入熟悉公式计算后的结果'			//验证提示信息
)
//使用
$('#form').validate({
    rules: {
        username: {
            required: true,
            minlength: 2
        },
        email: {
            required:true,
            email: true
        }
        url:"url",
        comment: "required"
        valcode: {formula: '7+9'}
    }
})

6.2 编写jquery插件

给已经有的一系列方法或函数进行一个封装，以便在其他地方重复使用。

6.2.1 插件的种类

1. 封装对象方法的插件

将对象封装起来，用于对通过选择器获取的jQuery对象进行操作。

2.封装全局函数的插件

将独立的函数加到jQuery的命名空间下。

3.选择器插件

个别情况下，会用到选择器插件。

6.2.2 插件的基本要点

  • jQuery 插件的文件名推荐命名为jquery.[插件名].js,以免和其他JavaScript库插件混绢。例如命名为jquery.color.js。

  • 所有的对象方法都应当附加到 jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象本身上。

  • 在插件内部，this指向的是当前通过选择器获取的jQuery对象，而不像一般的方法那样，例如 click()方法，内部的 this 指向的是DOM元素。

  • 可以通过this.each来遍历所有元素。

  • 所有的方法或函数插件，都应当以分号结尾，否则压缩的时候可能出现问题。为了更稳妥些,甚至可以在插件头部先加上一个分号，以免他人的不规范代码给插件带来影响。具体方法可以参考后面的代码。

  • 插件应该返回一个jQuery对象，以保证插件的可链式操作。除非插件需要返回的是一些需要获取的量，例如字符串或者数组等。

  • 避免在插件内部使用$作为jQuery对象的别名，而应使用完整的jQuery来表示。这样可以避免冲突。当然，也可以利用闭包这种技巧来回避这个问题，使插件内部继续使用$作为 jQuery 的别名。

6.2.3 插件中的闭包

允许使用内部函数（即函数定义的函数表达式位于另一个函数的函数体内），而且，这些内部函数可以访问他们所在的外部函数中声明的所有局部变量、参数和声明的内部函数，当其中一个这样的内部函数在包含他们的外部函数被调用时，就会形成闭包。内部函数会在外部函数返回后执行，它仍然必须访问其外部函数的局部变量、参数以及其他内部函数。这些局部变量、参数和函数声明（最初时）的值是外部函数返回的值，但也会受到内部函数的影响。

利用闭包的特性，既可以避免内部临时变量影响全局空间，又可以在插件内部使用$作为别名。

1
2
3
;(function(){

})();//通过（）这个运算符来执行

可以传递参数进去供内部函数使用。

1
2
3
4
5
6
7
8
9
10
11
//为了兼容器加;
;(function($){	//$作为形参
    //这里编写插件的代码，可以使用$作为jQuery的别名
    //foo外部无法访问，仅内部可以访问
    var foo;
   	var bar = function(){
        //在匿名函数内部的函数都可以访问foo,即使在匿名函数外部调用bar()的时候，也可以在bar()的内部访问到foo,但在匿名函数外部直接访问foo是做不到的
    }
    //让匿名函数内部的bar()逃逸到全局可访问的范围内，这样就可以同$.bar()来访问内部定义的函数bar(),并且内部函数bar()也能访问匿名函数的变量foo
    $.bar = bar
})(jQuery)		//将jQuery作为参数传递给匿名函数

6.2.4 jQuery的机制

提供了2个用于扩展jQuery的方法，jQuery.fn.extend()方法和jQuery.extend(),前者用于扩展第一种类型，后者用于扩展后两种插件。这两个方法都接收一个参数，类型为Object。

jQuery.extend()方法除了可以用于扩展jQuery对象外，还有一个强大的功能，就是扩展已有的Object对象。

1
jQuery.extend(target,obj,...[objN])

extend()方法常用于设置插件方法的一系列默认参数

1
2
3
4
5
6
7
function foo(options){
	options = jQuery.extend({
		name : 'bar',
        length : 5,
        dataType: xml		//默认参数
	}, options)	//传递的参数
}

通过jQuery.extend()方法，可以很方便的用传入的参数来覆盖默认值。此时，对方调用的方法依旧保持一致，只不过传入的是一个映射而不是一个参数列表。这种机制比传统的每个参数都去检测的方式不仅灵活而且简介。此外使用命名参数意味着添加新选项也不会影响过去编写的代码。

6.2.5 编写jQuery插件

1.封装jQuery对象方法的插件

第一个编写设置和获取颜色的插件，插件有2个功能

  • 设置匹配元素的值
  • 获取匹配的元素的颜色
1
2
3
4
5
6
7
8
9
;(function($){
	$.fn.extend({
        //这里给这个方法提供一个参数value，如果调用方法的时候传递了value这个参数，那么就是用这个值来设置字体颜色;否则就是获取匹配元素的字体颜色的值。
        "color" : function(value){
            //插件如果不需要返回字符串，应当使其具有可链接性。直接返回这个this对象
            return this.css("color",value);	//通过css来实现,css已经有判断value是否为undefined的机制，所以可以根据参数的不同而返回不同的值。
        }
    })
})(jQuery);//通过（）这个运算符来执行

第二个编写隔行变色的工具

工具如下

1
2
3
4
5
6
7
8
9
10
11
12
$('tbody>tr:odd').addClass('odd');
$('tbody>tr:even').addClass('even');
$('tdody>tr').click(function(){
    //判断当前是否被选择
    var hasSelected = $(this).hasClass('selected');
    //如果选中则移除selected类，否则加上selected类
    $(this)[hasSelected?"removeClass":"addClass"]('selected')
    	//查找内部的checkbox，设置对应的值
    	.find(':checkbox').attr('checked',!hasSelected);
})
//如果复选框默认情况下是选择的，则高色
$('tbody>tr:has(:checked)').addClass('selected');

插件实现如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
;(function($){
	$.fn.extend({
		"alterBgColor":function(options){
            //设置默认参数
            options=$.extend({
                odd:'odd',
                even:'even',
                selected:'selected'
            },options);
            //不能使用tbody>tr，会使所有的页面都变色，需要改写$('tbody>tr', this),表示在匹配元素内（当前表格内查找）
            $('tbody>tr:odd').addClass(options.odd);
			$('tbody>tr:even').addClass(options.even);
			$('tdody>tr').click(function(){
            //判断当前是否被选择
            var hasSelected = $(this).hasClass(options.selected);
            //如果选中则移除selected类，否则加上selected类
            $(this)[hasSelected?"removeClass":"addClass"](options.selected)
                //查找内部的checkbox，设置对应的值
                .find(':checkbox').attr('checked',!hasSelected);
        	})
        	//如果复选框默认情况下是选择的，则高色
        	$('tbody>tr:has(:checked)').addClass(options.selected);
            return this; //方法可链
        }
	})
})(jQuery);

需要注意，jQuery选择符可能会匹配多个元素，因此在内部使用each()来遍历元素，然后执行相应方法。

1
2
3
4
5
6
7
8
9
;(function($){
	$.fn.extend({
		'somePlugin': function(options){
            return this.each(function(){
              	//插件代码  
            });
        }
	});
})(jQuery);
2.封装全局函数的插件
1
2
3
4
5
6
7
8
9
10
11
;(function(4){
	$.extend({
        name:funtion(options){
        	//方法
        	return ;
    	}
    })
})(jQuery);

//调用
$.name(options);
3.自定义选择器

jQuery 的选择符解析器首先会使用一组正则表达式来解析选择器，然后针对解析出的每个选择符执行一个函数，称为选择器函数。最后根据这个选择器函数的返回值为true还是false来决定是否保留这个元素。这样就可以找到匹配的元素节点。

1
$("div:gt(1)")

该选择器首先会获取所有的<div>元素，然后隐式遍历这些<div>元素，并逐个将这些<div>元素作为参数，连同括号里的“1”等一些参数(具体见下文)一起传递给gt对应的选择器函数进行判断。如果这个函数返回 true，则这个<div>元素保留，如果返回 false，则不保留这个<div>元素。这样得到的结果就是一个符合要求的<div>元素的集合。
:gt()选择器在jQuery源文件中的代码如下:

1
2
3
gt: function (a,i,m){
	return i>m[3] -0;
}

其中,选择器的函数一共接受3个参数,代码如下:

1
2
3
function( a , i , m) {
	// ..
}

第1个参数为a，指向的是当前遍历到的DOM元素。
第2个参数为i，指的是当前遍历到的DOM元素的索引值，从0开始。
第3个参数m最为特别，它是由jQuery 正则解析引擎进一步解析后的产物(用match 匹配出来的)，是一个数组。

  • m[0]，以上面的$(“div:gt(1)”)这个例子来讲，是:gt(1)这部分。它是 jQuery 选择器进一步将要匹配的内容。
  • m[1]，这里是选择器的引导符，匹配例子中的“:”，即冒号。并非只能使用”:”后面跟上选择器,用户还可以自定义其他的选择器引导符。
  • m[2]，即例子中的gt，确定究竟是调用哪个选择器函数。
  • m[3]，即例子中括号里的数字“1”，它非常有用，是编写选择器函数最重要的一个参数。
  • m[4]，上面的例子中没有体现出来，这个比较罕见。例如”div:K(ss(dd))”这样一个选择器中，m[4]就指向了(dd）这部分，注意是带括号的（dd)，而不只是 dd。同时要注意,此时的m[3]的值是ss(dd)而非ss。

选择器插件中的函数属于运算密集型函数，对执行效率要求很高，读者在编写此类插件的时候，一定要秉承优化再优化的原则，千万不要随便写一个能实现功能的函数就草草了事。