JourneyX

JQuery学习总结

1 jQuery 入门

1.1 jQuery 的功能和优势:

jQuery 作为JavaScript 封装的库，他的目的就是为了简化开发者使用JavaScript。主要

功能有以下几点：

1.像CSS 那样访问和操作DOM

2.修改CSS 控制页面外观

3.简化JavaScript 代码操作

4.事件处理更加容易

5.各种动画效果使用方便

6.让Ajax 技术更加完美

7.基于jQuery 大量插件

8.自行扩展功能插件

1.2 是否兼容IE 低版本:

这次jQuery 发布了大版本2.x.x，完全放弃兼容IE6/7/8。

$(function () {

$('input').click(function() {

alert('第一个jQuery程序！');

});

2 基础核心

【学习要点：代码风格、加载模式、对象互换、多个库之间的冲突】

2.1 代码风格：

在jQuery程序中，不管是页面元素的选择、内置的功能函数，都是美元符号“$”来起

始的。而这个“$”就是jQuery当中最重要且独有的对象：jQuery对象，所以我们在页面元

素选择或执行功能函数的时候可以这么写：

$(function () {}); //执行一个匿名函数

$(‘#box’); //进行执行的ID元素选择

$(‘#box’).css(‘color’, ‘red’); //执行功能函数

$('#box').css('color','red').css('font-size', '50px'); //连缀

2.2 加载模式：

--load和ready区别【window.onload】：【$(document).ready()】

【执行时机：】【必须等待网页全部加载完毕（包括图片等），然后再执行包裹代码】：【只需要等待网页中的DOM结构加载完毕，就能执行包裹的代】

【执行次数：】【只能执行一次，如果第二次，那么第一次的执行会被覆盖】：【可以执行多次，第N次都不会被上一次覆盖】

【简写方案：】【无】：【$(function () {});】

《在实际应用中，我们都很少直接去使用window.onload，因为他需要等待图片之类的大型元素加载完毕后才能执行JS代码。

所以，最头疼的就是网速较慢的情况下，页面已经全面展开，图片还在缓慢加载，这时页面上任何的JS交互功能全部处在假死状态。

并且只能执行单次在多次开发和团队开发中会带来困难。》

2.3 对象互换：

《jQuery 对象虽然是jQuery 库独有的对象，但它也是通过JavaScript 进行封装而来的。我们可以直接输出来得到它的信息。》

alert($); //jQuery 对象方法内部

alert($()); //jQuery 对象返回的对象，还是jQuery

alert($('#box')); //包裹ID 元素返回对象，还是jQuery

alert(document.getElementById('box'));//[object HTMLDivElement]

jQuery 想要达到获取原生的DOM 对象，可以这么处理：

alert($('#box').get(0)); //ID 元素的第一个原生DOM

==多个库之间的冲突：

var $$ = jQuery; //创建一个$$的jQuery 对象 //取别名

3 常规选择器

【学习要点：简单选择器、进阶选择器、高级选择器】

《

jQuery 最核心的组成部分就是：选择器引擎。它继承了CSS的语法，可以对DOM 元素的标签名、属性名、

状态等进行快速准确的选择，并且不必担心浏览器的兼容性。jQuery选择器实现了CSS1~CSS3 的大部分规则之外，

还实现了一些自定义的选择器，用于各种特殊状态的选择。

》

3.1 简单选择器：

【选择器】【CSS 模式】【jQuery 模式】【描述】

【元素名---div {}---$('div')---获取所有div 元素的DOM 对象】

【ID---#box {}---$('#box')---获取一个ID 为box 元素的DOM 对象】

【类(class)---.box{}---$('.box')---获取所有class 为box 的所有DOM 对象】

#box { //使用ID 选择器的CSS 规则

color:red; //将ID 为box 的元素字体颜色变红《说明：JQuery不存在节点也不会出错，JavaScript则不然》

}

$('#box').css('color', 'red'); //获取DOM 节点对象，并添加行为

：用jQuery 核心自带的一个属性length 或size()方法来查看返回的元素个数

3.2 进阶选择器：

【选择器】【CSS 模式】【jQuery 模式】【描述】

【群组选择器---span,em,.box {}---$('span,em,.box')---获取多个选择器的DOM 对象】

【后代选择器---ul li a {}----$('ul li a')----获取追溯到的多个DOM 对象】

【通配选择器---* {}-----$('*')---获取所有元素标签的DOM 对象】

3.3 高级选择器：

【选择器】【CSS 模式】【jQuery 模式】【描述】【方法】

【后代选择器----ul li a {}---$('ul li a')---获取追溯到的多个DOM 对象】【】

【子选择器----div > p {}----$('div p')-----只获取子类节点的多个DOM 对象】【】

【next 选择器----div + p {}----$('div + p')----只获取某节点后一个同级DOM 对象】【】

【nextAll 选择器----div ~ p {}---$('div ~ p')---获取某节点后面所有同级DOM 对象】【】

//后代选择器

$('#box p').css('color', 'red'); //全兼容

jQuery 为后代选择器提供了一个等价find()方法

$('#box').find('p').css('color', 'red'); //和后代选择器等价

//子选择器，孙子后失明

#box > p { //IE6 不支持

color:red;

}

$('#box > p').css('color', 'red'); //兼容IE6

jQuery 为子选择器提供了一个等价children()方法：

$('#box').children('p').css('color','red'); //和子选择器等价

//next 选择器(下一个同级节点)

#box + p { //IE6 不支持

color:red;

}

$('#box+p').css('color', 'red'); //兼容IE6

jQuery 为next 选择器提供了一个等价的方法next()：

$('#box').next('p').css('color', 'red'); //和next 选择器等价

//nextAll 选择器(后面所有同级节点)

#box ~ p { //IE6 不支持【next:是同层次元素之间的操作】

color:red;

}

$('#box ~ p').css('color', 'red'); //兼容IE6

jQuery 为nextAll 选择器提供了一个等价的方法nextAll()：

$('#box').nextAll('p').css('color', 'red');//和nextAll 选择器等价

在find()、next()、nextAll()和children()这四个方法中，如果不传递参数，就相当于传递

了“*”，即任何节点，我们不建议这么做，不但影响性能，而且由于精准度不佳可能在复杂

的HTML 结构时产生怪异的结果。

$('#box').next(); //相当于$('#box').next('*');

为了补充高级选择器的这三种模式，jQuery 还提供了更加丰富的方法来选择元素：

$('#box').prev('p').css('color', 'red'); //同级上一个元素

$('#box').prevAll('p').css('color', 'red');//同级所有上面的元素

nextUntil()和prevUnitl()方法是选定同级的下面或上面的所有节点，选定非指定的所有

元素，一旦遇到指定的元素就停止选定。

$('#box').prevUntil('p').css('color','red'); //同级上非指定元素选定，遇到则停止

$('#box').nextUntil('p').css('color','red'); //同级下非指定元素选定，遇到则停止

siblings()方法正好集成了prevAll()和nextAll()两个功能的效果，及上下相邻的所有元素

进行选定：

$('#box').siblings('p').css('color','red'); //同级上下所有元素选定

//等价于下面：

$('#box').prevAll('p').css('color', 'red');//同级上所有元素选定

$('#box').nextAll('p').css('color', 'red');//同级下所有元素选定

3.4 过滤选择器

【学习要点：基本过滤器、内容过滤器、可见性过滤器、子元素过滤器、其他方法】

《过滤选择器简称：过滤器。它其实也是一种选择器，而这种选择器类似与CSS3(http://t.mb5u.com/css3/)里的伪类，

可以让不支持CSS3 的低版本浏览器也能支持。和常规选择器一样，jQuery 为了更方便开发者使用，提供了很多独有的过滤器。》

3.5 基本过滤器：

《过滤器主要通过特定的过滤规则来筛选所需的DOM 元素，和CSS 中的伪类的语法类似：使用冒号(:)开头。》

【过滤器名】【jQuery 语法】【说明】【返回】

【:first----$('li:first')---选取第一个元素----单个元素】

【:last----$('li:last')-----选取最后一个元素---单个元素】

【:not(selector)----$('li:not(.red)') ----选取 class 不是 red 的 li 元素 ----集合元素】

【:even----$('li.even')----选择索引(0 开始)是偶数的所有元素---集合元素】

【:odd ----$('li:odd') ----选择索引(0 开始)是奇数的所有元素----集合元素】

【:eq(index) ---$('li:eq(2)')---选择索引(0 开始)等于 index 的元素---单个元素】

【:gt(index) ---$('li:gt(2)')---选择索引(0 开始)大于 index 的元素---集合元素】

【:lt(index)----$('li.lt(2)')---选择索引(0 开始)小于 index 的元素---集合元素】

【:header----$(':header')----选择标题元素，h1 ~ h6 ----集合元素】

【:animated---$(':animated') ----选择正在执行动画的元素 ---集合元素】

【:focus ---$(':focus') ---选择当前被焦点的元素---集合元素】

注意：:focus 过滤器，必须是网页初始状态的已经被激活焦点的元素才能实现元素获取。

而不是鼠标点击或者 Tab 键盘敲击激活的。

$('input').get(0).focus(); //先初始化激活一个元素焦点

$(':focus').css('background', 'red'); //被焦点的元素

3.6 内容过滤器：

《内容过滤器的过滤规则主要是包含的子元素或文本内容上。》

【过滤器名】【jQuery 语法】【说明】【返回】

【:contains(text)---$(':contains("ycku.com")')----选取含有"ycku.com"文本的元素---元素集合】

【:empty---$(':empty')----选取不包含子元素或空文本的元素----元素集合】

【:has(selector)----$(':has(.red)') ------选取含有 class 是 red 的元素----元素集合】

【:parent -----$(':parent')----选取含有子元素或文本的元素----元素集合】

//选择元素文本节点含有 ycku.com 文本的元素

$('div:contains("ycku.com")').css('background','#ccc');

$('div:empty').css('background', '#ccc');//选择空元素

$('ul:has(.red)').css('background','#ccc'); //选择子元素含有 class 是 red 的元素

$(':parent').css('background', '#ccc'); //选择非空元素

jQuery 提供了一个名称和:parent 相似的方法，但这个方法并不是选取含有子元素或文本

的元素，而是获取当前元素的父元素，返回的是元素集合。

$('li').parent().css('background', '#ccc');//选择当前元素的父元素

$('li').parents().css('background','#ccc'); //选择当前元素的父元素及祖先元素

$('li').parentsUntil('div').css('background','#ccc'); //选择当前元素遇到 div 父元素停止

3.7 可见性过滤器：

《可见性过滤器根据元素的可见性和不可见性来选择相应的元素。》

【过滤器名】【jQuery 语法】【说明】【返回】

【:hidden----$(':hidden')----选取所有不可见元素----集合元素】

【:visible---$(':visible')---选取所有可见元素------集合元素】

$('p:hidden).size(); //元素 p 隐藏的元素

$('p:visible').size(); //元素 p 显示的元素

注意：:hidden 过滤器一般是包含的内容为：CSS 样式为 display:none、input 表单类型为

type="hidden"和visibility:hidden 的元素。

3.8 子元素过滤器：

《子元素过滤器的过滤规则是通过父元素和子元素的关系来获取相应的元素。》

【过滤器名】【jQuery 语法】【说明】【返回】

【:first-child----$('li:first-child')----获取每个父元素的第一个子元素----集合元素】

【:last-child-----$('li:last-child')-----获取每个父元素的最后一个子元素--集合元素】

【:only-child-----$('li:only-child')-----获取只有一个子元素的元素--------集合元素】

【:nth-child(odd/even/eq(index))---$('li:nth-child(even)')----获取每个自定义子元素的元素(索引值从 1 开始计算)---集合元素】

$('li:first-child').css('background','#ccc'); //每个父元素第一个 li 元素

$('li:last-child').css('background','#ccc'); //每个父元素最后一个 li 元素

$('li:only-child').css('background','#ccc'); //每个父元素只有一个 li 元素

$('li:nth-child(odd)').css('background','#ccc'); //每个父元素奇数 li 元素

$('li:nth-child(even)').css('background','#ccc'); //每个父元素偶数 li 元素

$('li:nth-child(2)').css('background','#ccc'); //每个父元素第三个 li 元素

3.9 其他方法：

《jQuery 在选择器和过滤器上，还提供了一些常用的方法，方便我们开发时灵活使用。》

【过滤器名】【jQuery 语法】【说明】【返回】

【is(s/o/e/f)----$('li').is('.red')----传递选择器、DOM、jquery 对象-----集合元素】

【hasClass(class)----$('li').eq(2).hasClass('red')----其实就是is("." + class)----集合元素】

【slice(start, end)----$('li').slice(0,2)----选择从 start 到 end 位置的元素，如果是负数，则从后开始----集合元素】

【filter(s/o/e/f)-----$('li').filter('.red')】

【end()----$('div').find('p').end()----获取当前元素前一次状态----集合元素】

【contents()-----$('div').contents()---获取某元素下面所有元素节点，包括文本节点，如果是 iframe，则可以查找文本内容---集合元素】

$('.red').is('li'); //true，选择器，检测 class为是否为 red

$('.red').is($('li')); //true，jQuery 对象集合，同上

$('.red').is($('li').eq(2)); //true，jQuery 对象单个，同上

$('.red').is($('li').get(2)); //true，DOM 对象，同上

$('.red').is(function () { //true，方法，同上

return $(this).attr('title') == '列表 3'; //可以自定义各种判断

}));

$('li').eq(2).hasClass('red'); //和 is 一样，只不过只能传递class

$('li').slice(0,2).css('color', 'red'); //前三个变成红色

注意：这个参数有多种传法和 JavaScript 的 slice 方法是一样的比如：slice(2)，从第三个

开始到最后选定；slice(2,4)，第三和第四被选定；slice(0,-2)，从倒数第三个位置，向前选定

所有；slice(2,-2)，前两个和末尾两个未选定。

$("div").find("p").end().get(0);//返回 div 的原生 DOM

$('div').contents().size(); //返回子节点(包括文本)数量

$('li').filter('.red').css('background','#ccc');//选择 li 的 class 为 red 的元素

$('li').filter('.red, :first,:last').css('background','#ccc'); //增加了首尾选择

//特殊要求函数返回

$('li').filter(function () {

return $(this).attr('class') == 'red' &&$(this).attr('title') == '列表 3';

}).css('background', '#ccc');

4 基础DOM 和CSS 操作

【学习要点：DOM 简介、设置元素及内容、元素属性操作、元素样式操作、CSS 方法】

《DOM 在JavaScript 课程中我们详细的探讨过，它是一种文档对象模型。方便开发者对HTML 结构元素内容进行展示和修改。

在JavaScript 中，DOM 不但内容庞大繁杂，而且我们开发的过程中需要考虑更多的兼容性、扩展性。

在jQuery 中，已经将最常用的DOM 操作方法进行了有效封装，并且不需要考虑浏览器的兼容性。》

4.1 DOM 简介：

1.D 表示的是页面文档Document、O 表示对象，即一组含有独立特性的数据集合、M表示模型，即页面上的元素节点和文本节点。

2.DOM 有三种形式，标准DOM、HTML DOM、CSS DOM，大部分都进行了一系列的封装，在jQuery 中并不需要深刻理解它。

3.树形结构用来表示DOM，就非常的贴切，大部分操作都是元素节点操作，还有少部分是文本节点操作。

4.2 设置元素及内容：

《我们通过前面所学习的各种选择器、过滤器来得到我们想要操作的元素。这个时候，我们就可以对这些元素进行DOM 的操作。

那么，最常用的操作就是对元素内容的获取和修改。》

【方法名】【描述】

【html()------获取元素中HTML 内容】

【html(value)-----设置元素中HTML 内容】

【text()----------获取元素中文本内容】

【text(value)-----设置原生中文本内容】

【val()-----------获取表单中的文本内容】

【val(value)------设置表单中的文本内容】

在常规的DOM 元素中，我们可以使用html()和text()方法获取内部的数据。html()方法

可以获取或设置html 内容，text()可以获取或设置文本内容。

$('#box').html(); //获取html 内容

$('#box').text(); //获取文本内容，会自动清理html标签

$('#box').html('<em>www.li.cc</em>');//设置html 内容

$('#box').text('<em>www.li.cc</em>');//设置文本内容，会自动转义html 标签

注意：当我们使用html()或text()设置元素里的内容时，会清空原来的数据。而我们期

望能够追加数据的话，需要先获取原本的数据。

$('#box').html($('#box').html() +'<em>www.li.cc</em>'); //追加数据

如果元素是表单的话，jQuery 提供了val()方法进行获取或设置内部的文本数据。

$('input').val(); //获取表单内容

$('input').val('www.li.cc'); //设置表单内容

如果想设置多个选项的选定状态，比如下拉列表、单选复选框等等，可以通过数组传递操作。

$("input").val(["check1","check2","radio1" ]); //value 值是这些的将被选定

4.3 元素属性操作：

《除了对元素内容进行设置和获取，通过jQuery 也可以对元素本身的属性进行操作，包括获取属性的属性值、

设置属性的属性值，并且可以删除掉属性。》attr()和removeAttr()

【方法名】【描述】

【attr(key)-----获取某个元素 key 属性的属性值】

【attr(key, value)----设置某个元素 key 属性的属性值】

【attr({key1:value2, key2:value2...})-----设置某个元素多个 key 属性的属性值】

【attr(key, function (index, value) {})----设置某个元素 key 通过 fn 来设置】

$('div').attr('title'); //获取属性的属性值

$('div').attr('title', '我是域名'); //设置属性及属性值

$('div').attr('title', function () { //通过匿名函数返回属性值

return '我是域名';

});

$('div').attr('title', function (index,value) { //可以接受两个参数

return value + (index+1) + '，我是域名';

});

删除指定的属性，这个方法就不可以使用匿名函数，传递 index 和 value 均无效。

$('div').removeAttr('title'); //删除指定的属性

4.4 元素样式操作：

《元素样式操作包括了直接设置 CSS 样式、增加 CSS 类别、类别切换、删除类别这几种操作方法。

而在整个 jQuery 使用频率上来看，CSS 样式的操作也是极高的，所以需要重点掌握。》CSS 操作方法

【方法名】【描述】

【css(name)-----获取某个元素行内的 CSS 样式】

【css([name1, name2, name3])---获取某个元素行内多个 CSS 样式】

【css(name, value)---设置某个元素行内的 CSS 样式】

【css(name, function (index, value) )---设置某个元素行内的 CSS 样式】

【css({name1 : value1, name2 : value2})---设置某个元素行内多个CSS 样式】

【addClass(class)----给某个元素添加一个 CSS 类】

【addClass(class1 class2 class3...) ----给某个元素添加多个 CSS 类】

【removeClass(class)----删除某个元素的一个 CSS 类】

【removeClass(class1 class2 class3...)----删除某个元素的多个 CSS类】

【toggleClass(class)-----来回切换默认样式和指定样式】

【toggleClass(class1 class2 class3...)---同上】

【toggleClass(class, switch)----来回切换样式的时候设置切换频率】

【toggleClass(function () {})---通过匿名函数设置切换的规则】

【toggleClass(function () {}, switch)----在匿名函数设置时也可以设置频率】

【toggleClass(function (i, c, s) {}, switch)----在匿名函数设置时传递三个参数】

$('div').css('color'); //获取元素行内 CSS 样式的颜色

$('div').css('color', 'red'); //设置元素行内 CSS 样式颜色为红色

在 CSS 获取上，我们也可以获取多个 CSS 样式，而获取到的是一个对象数组，如果用

传统方式进行解析需要使用 for in 遍历。

var box = $('div').css(['color', 'height','width']); //得到多个 CSS 样式的数组对象

for (var i in box) { //逐个遍历出来

alert(i + ':' + box[i]);

}

jQuery 提供了一个遍历工具专门来处理这种对象数组，$.each()方法，这个方法可以轻

松的遍历对象数组。

$.each(box, function (attr, value) { //遍历 JavaScript原生态的对象数组

alert(attr + ':' + value);

});

使用$.each()可以遍历原生的 JavaScript 对象数组，如果是 jQuery 对象的数组怎么使

用.each()方法呢？

$('div').each(function (index, element) {//index 为索引，element 为元素 DOM

alert(index + ':' + element);

});

在需要设置多个样式的时候，我们可以传递多个 CSS 样式的键值对即可。

$('div').css({

'background-color' : '#ccc',

'color' : 'red',

'font-size' : '20px'

});

如果想设置某个元素的 CSS 样式的值，但这个值需要计算我们可以传递一个匿名函数。

$('div').css('width', function (index,value) {

return (parseInt(value) - 500) + 'px';

});

除了行内 CSS 设置，我们也可以直接给元素添加 CSS 类，可以添加单个或多个，并且

也可以删除它。

$('div').addClass('red'); //添加一个 CSS 类

$('div').addClass('red bg'); //添加多个 CSS 类

$('div').removeClass('bg'); //删除一个 CSS 类

$('div').removeClass('red bg'); //删除多个 CSS 类

我们还可以结合事件来实现 CSS 类的样式切换功能。

$('div').click(function () { //当点击后触发

$(this).toggleClass('red size'); //单个样式多个样式均可

});

toggleClass()方法的第二个参数可以传入一个布尔值，true表示执行切换到 class类，false

表示执行回默认 class 类(默认的是空 class)，运用这个特性，我们可以设置切换的频率。

var count = 0;

$('div').click(function () { //每点击两次切换一次 red

$(this).toggleClass('red', count++ % 3 ==0);

});

默认的 CSS 类切换只能是无样式和指定样式之间的切换，如果想实现样式 1 和样式 2

之间的切换还必须自己写一些逻辑。

$('div').click(function () {

$(this).toggleClass('red size'); //一开始切换到样式 2

if ($(this).hasClass('red')) { //判断样式 2 存在后

$(this).removeClass('blue'); //删除样式 1

} else {

$(this).toggleClass('blue'); //添加样式 1，这里也可以addClass

}

});

上面的方法较为繁琐，.toggleClass()方法提供了传递匿名函数的方式，来设置你所需要

切换的规则。

$('div').click(function () {

$(this).toggleClass(function () { //传递匿名函数，返回要切换的样式

return $(this).hasClass('red') ? 'blue' :'red size';

});

注意：上面虽然一句话实现了这个功能，但还是有一些小缺陷，因为原来的 class 类没

有被删除，只不过被替代了而已。所以，需要改写一下。

$('div').click(function () {

$(this).toggleClass(function () {

if ($(this).hasClass('red')) {

$(this).removeClass('red');

return 'green';

} else {

$(this).removeClass('green');

return 'red';

}

});

我们也可以在传递匿名函数的模式下，增加第二个频率参数。

var count = 0;

$('div').click(function () {

$(this).toggleClass(function () {

return $(this).hasClass('red') ? 'blue' :'red size';

},count++ % 3 == 0); //增加了频率

});

对于.toggleClass()传入匿名函数的方法，还可以传递 index 索引、class 类两个参数以及

频率布尔值，可以得到当前的索引、class 类名和频率布尔值。

var count = 0;

$('div').click(function () {

$(this).toggleClass(function (index,className, switchBool) {

alert(index + ':' + className + ':' +switchBool); //得到当前值

return $(this).hasClass('red') ? 'blue' :'red size';

},count++ % 3 == 0);

});

4.5 CSS 方法：width()方法

《jQuery 不但提供了CSS 的核心操作方法，比如.css()、.addClass()等。还封装了一些特殊功能的CSS 操作方法，我们分别来了解一下。》

【方法名】【描述】

【width()------获取某个元素的长度】

【width(value)-------设置某个元素的长度】

【width(function (index, width) {})-------通过匿名函数设置某个元素的长度】

$('div').width(); //获取元素的长度，返回的类型为number

$('div').width(500); //设置元素长度，直接传数值，默认加px

$('div').width('500pt'); //同上，设置了pt 单位

$('div').width(function (index, value) {//index 是索引，value 是原本值

return value - 500; //无须调整类型，直接计算

});

【height()-----获取某个元素的长度】

【height(value)----设置某个元素的长度】

【height(function (index, width) {})-----通过匿名函数设置某个元素的长度】

$('div').height(); //获取元素的高度，返回的类型为number

$('div').height(500); //设置元素高度，直接传数值，默认加px

$('div').height('500pt'); //同上，设置了pt 单位

$('div').height(function (index, value) {//index 是索引，value 是原本值

return value - 1; //无须调整类型，直接计算

});

4.6 内外边距和边框尺寸方法：

【innerWidth()-----获取元素宽度，包含内边距 padding】

【innerHeight()----获取元素高度，包含内边距 padding】

【outerWidth()-----获取元素宽度，包含边框 border 和内边距 padding】

【outerHeight()----获取元素高度，包含边框 border 和内边距 padding】

【outerWidth(ture)--同上，且包含外边距】

【outerHeight(true)---同上，且包含外边距】

alert($('div').width()); //不包含

alert($('div').innerWidth()); //包含内边距 padding

alert($('div').outerWidth()); //包含内边距padding+边框 border

alert($('div').outerWidth(true)); //包含内边距padding+边框 border+外边距 margin

4.7 元素偏移方法：

【offset()------获取某个元素相对于视口的偏移位置】

【position()----获取某个元素相对于父元素的偏移位置】

【scrollTop()---获取垂直滚动条的值】

【scrollTop(value)---设置垂直滚动条的值】

【scrollLeft()-------获取水平滚动条的值】

【scrollLeft(value)--设置水平滚动条的值】

$('strong').offset().left; //相对于视口的偏移

$('strong').position().left; //相对于父元素的偏移

$(window).scrollTop(); //获取当前滚动条的位置

$(window).scrollTop(300); //设置当前滚动条的位置

5 DOM 节点操作

【学习要点：创建节点、插入节点、包裹节点、节点操作】

5.1 创建节点：

为了使页面更加智能化，有时我们想动态的在html 结构页面添加一个元素标签，那么

在插入之前首先要做的动作就是：创建节点。

var box = $('<div id="box">节点</div>');//创建一个节点

$('body').append(box); //将节点插入到<body>元素内部

5.2 插入节点：

在创建节点的过程中，其实我们已经演示怎么通过.append()方法来插入一个节点。但除

了这个方法之余呢，jQuery 提供了其他几个方法来插入节点。

内部插入节点方法：【方法名】【描述】

【append(content)----向指定元素内部后面插入节点content】

【append(function (index, html) {})----使用匿名函数向指定元素内部后面插入节点】

【appendTo(content)----将指定元素移入到指定元素content 内部后面】

【prepend(content)-----向指定元素content 内部的前面插入节点】

【prepend(function (index, html) {})----使用匿名函数向指定元素内部的前面插入节点】

【prependTo(content)----将指定元素移入到指定元素content 内部前面】

$('div').append('<strong>节点</strong>');//向div 内部插入strong 节点

$('div').append(function (index, html) { //使用匿名函数插入节点，html是原节点

return '<strong>节点</strong>';

});

$('span').appendTo('div'); //讲span 节点移入div 节点内

$('span').appendTo($('div')); //同上

$('div').prepend('<span>节点</span>');//将span 插入到div 内部的前面

$('div').append(function (index, html) { //使用匿名函数，同上

return '<span>节点</span>';

});

$('span').prependTo('div'); //将span 移入div 内部的前面

$('span').prependTo($('div')); //同上

外部插入节点方法：【方法名】【描述】

【after(content)----向指定元素的外部后面插入节点content】

【after(function (index, html) {})----使用匿名函数向指定元素的外部后面插入节点】

【before(content)-----向指定元素的外部前面插入节点content】

【before(function (index, html) {})----使用匿名函数向指定元素的外部前面插入节点】

【insertAfter(content)-----将指定节点移到指定元素content 外部的后面】

【insertBefore(content)----将指定节点移到指定元素content 外部的前面】

$('div').after('<span>节点</span>');//向div 的同级节点后面插入span

$('div').after(function (index, html) { //使用匿名函数，同上

return '<span>节点</span>';

});

$('div').before('<span>节点</span>');//向div 的同级节点前面插入span

$('div').before(function (index, html) { //使用匿名函数，同上

return '<span>节点</span>';

});

$('span').insertAfter('div'); //将span 元素移到div 元素外部的后面

$('span').insertBefore('div'); //将span 元素移到div 元素外部的前面

5.3 包裹节点：

jQuery 提供了一系列方法用于包裹节点，那包裹节点是什么意思呢？其实就是使用字符

串代码将指定元素的代码包含着的意思。

包裹节点：【方法名】【描述】

【wrap(html)-----向指定元素包裹一层html 代码】

【wrap(element)---向指定元素包裹一层DOM 对象节点】

【wrap(function (index) {})----使用匿名函数向指定元素包裹一层自定义内容】

【unwrap()----移除一层指定元素包裹的内容】

【wrapAll(html)-----用html 将所有元素包裹到一起】

【wrapAll(element)----用DOM 对象将所有元素包裹在一起】

【wrapInner(html)-----向指定元素的子内容包裹一层html】

【wrapInner(element)---向指定元素的子内容包裹一层DOM 对象节点】

【wrapInner(function (index) {})----用匿名函数向指定元素的子内容包裹一层】

$('div').wrap('<strong></strong>');//在div 外层包裹一层strong

$('div').wrap('<strong>123</strong>');//包裹的元素可以带内容

$('div').wrap('<strong><em></em></strong>');//包裹多个元素

$('div').wrap($('strong').get(0)); //也可以包裹一个原生DOM

$('div').wrap(document.createElement('strong'));//临时的原生DOM

$('div').wrap(function (index) { //匿名函数

return '<strong></strong>';

});

$('div').unwrap(); //移除一层包裹内容，多个需移除多次

$('div').wrapAll('<strong></strong>');//所有div 外面只包一层strong

$('div').wrapAll($('strong').get(0)); //同上

$('div').wrapInner('<strong></strong>');//包裹子元素内容

$('div').wrapInner($('strong').get(0));//DOM 节点

$('div').wrapInner(function () { //匿名函数

return '<strong></strong>';

});

5.4 节点操作：

除了创建、插入和包裹节点，jQuery 还提供了一些常规的节点操作方法：复制、替换和

删除节点。

//复制节点

$('body').append($('div').clone(true)); //复制一个节点添加到HTML中

注意：clone(true)参数可以为空，表示只复制元素和内容，不复制事件行为。而加上true

参数的话，这个元素附带的事件处理行为也复制出来。

//删除节点

$('div').remove(); //直接删除div 元素

注意：.remove()不带参数时，删除前面对象选择器指定的元素。而.remove()本事也可以

带选择符参数的，比如：$('div').remove('#box');只删除id=box 的div。

//保留事件的删除节点

$('div').detach(); //保留事件行为的删除

注意：.remove()和.detach()都是删除节点，而删除后本身方法可以返回当前被删除的节

点对象，但区别在于前者在恢复时不保留事件行为，后者则保留。

//清空节点

$('div').empty(); //删除掉节点里的内容

//替换节点

$('div').replaceWith('<span>节点</span>');//将div 替换成span 元素

注意：节点被替换后，所包含的事件行为就全部消失了。

$('<span>节点</span>').replaceAll('div');//同上

6 表单选择器

【学习要点：常规选择器、表单选择器、表单过滤器】

《表单作为HTML 中一种特殊的元素，操作方法较为多样性和特殊性，开发者不但可以使用之前的常规选择器或过滤器，

也可以使用jQuery 为表单专门提供的选择器和过滤器来准确的定位表单元素。》

==常规选择器：

我们可以使用id、类(class)和元素名来获取表单字段，如果是表单元素，都必须含有name

属性，还可以结合属性选择器来精确定位。

$('input').val(); //元素名定位，默认获取第一个

$('input').eq(1).val(); //同上，获取第二个

$('input[type=password]').val(); //选择type 为password 的字段

$('input[name=user]').val(); //选择name 为user 的字段

那么对于id 和类(class)用法比较类似，也可以结合属性选择器来精确的定位，在这里我

们不在重复。对于表单中的其他元素名比如：textarea、select 和button 等，原理一样，不在

重复。

6.1 表单选择器：

虽然可以使用常规选择器来对表单的元素进行定位，但有时还是不能满足开发者灵活多

变的需求。所以，jQuery 为表单提供了专用的选择器。

表单选择器：【方法名】【描述】【返回】

【:input---选取所有input、textarea、select 和button 元素---集合元素】

【:text----选择所有单行文本框，即type=text---集合元素】

【:password----选择所有密码框，即type=password---集合元素】

【:radio-----选择所有单选框，即type=radio-----集合元素】

【:checkbox-----选择所有复选框，即type=checkbox------集合元素】

【:submit-----选取所有提交按钮，即type=submit-----集合元素】

【:reset-----选取所有重置按钮，即type=reset-------集合元素】

【:image-----选取所有图像按钮，即type=image-------集合元素】

【:button----选择所有普通按钮，即 button 元素 ----集合元素】

【:file------选择所有文件按钮，即type=file--------集合元素】

【:hidden----选择所有不可见字段，即type=hidden----集合元素】

$(':input').size(); //获取所有表单字段元素

$(':text).size(); //获取单行文本框元素................

$(':text[name=user]).size(); //获取单行文本框name=user的元素

6.2 表单过滤器:

jQuery 提供了四种表单过滤器，分别在是否可以用、是否选定来进行表单字段的筛选过滤。

表单过滤器:【方法名】【描述】【返回】

【:enabled -----选取所有可用元素---- 集合元素】

【:disabled ----选取所有不可用元素集---合元素】

【:checked -----选取所有被选中的元素，单选和复选字段-----集合元素】

【:selected ----选取所有被选中的元素，下拉列表-----------集合元素】

$(':enabled').size(); //获取可用元素

$(':disabled).size(); //获取不可用元素

7 基础事件

【学习要点：绑定事件、简写事件、复合事件】

7.1 绑定事件：

《在JavaScript 课程的学习中，我们掌握了很多使用的事件，常用的事件有：click、dblclick、mousedown、mouseup、mousemove、mouseover、

mouseout、change、select、submit、keydown、keypress、keyup、blur、focus、load、resize、scroll、error。

那么，还有更多的事件可以参考手册中的事件部分。

jQuery 通过.bind()方法来为元素绑定这些事件。可以传递三个参数：bind(type, [data], fn)，type 表示一个或多个类型的事件名字符串；

[data]是可选的，作为event.data 属性值传递一个额外的数据，这个数据是一个字符串、一个数字、一个数组或一个对象；fn 表示绑定到指

定元素的处理函数。》

//使用点击事件

$('input').bind('click', function () { //点击按钮后执行匿名函数

alert('点击！');

});

//普通处理函数

$('input').bind('click', fn); //执行普通函数式无须圆括号

function fn() {

alert('点击！');

}

//可以同时绑定多个事件

$('input').bind('mouseout mouseover',function () { //移入和移出分别执行一次

$('div').html(function (index, value) {

return value + '1';

});

//通过对象键值对绑定多个参数

$('input').bind({ //传递一个对象

'mouseout' : function () { //事件名的引号可以省略

alert('移出');

'mouseover' : function () {

alert('移入');

}

});

//使用unbind 删除绑定的事件

$('input').unbind(); //删除所有当前元素的事件

//使用unbind 参数删除指定类型事件

$('input').unbind('click'); //删除当前元素的click 事件

//使用unbind 参数删除指定处理函数的事件

function fn1() {

alert('点击1');

}

function fn2() {

alert('点击2');

}

$('input').bind('click', fn1);

$('input').bind('click', fn2);

$('input').unbind('click', fn1); //只删除fn1 处理函数的事件

7.2 简写事件：

为了使开发者更加方便的绑定事件，jQuery 封装了常用的事件以便节约更多的代码。我们称它为简写事件。

简写事件绑定方法：【方法名】【触发条件】【描述】

【click(fn)----鼠标----触发每一个匹配元素的 click(单击)事件】

【dblclick(fn)----鼠标-----触发每一个匹配元素的 dblclick(双击)事件】

【mousedown(fn)---鼠标-----触发每一个匹配元素的 mousedown(点击后)事件】

【mouseup(fn)-----鼠标-----触发每一个匹配元素的 mouseup(点击弹起)事件】

【mouseover(fn)---鼠标-----触发每一个匹配元素的 mouseover(鼠标移入)事件】

【mouseout(fn)----鼠标-----触发每一个匹配元素的 mouseout(鼠标移出)事件】

【mousemove(fn)---鼠标-----触发每一个匹配元素的mousemove(鼠标移动)事件】

【mouseenter(fn)--鼠标-----触发每一个匹配元素的 mouseenter(鼠标穿过)事件】

【mouseleave(fn)--鼠标-----触发每一个匹配元素的 mouseleave(鼠标穿出)事件】

【keydown(fn)-----键盘-----触发每一个匹配元素的 keydown(键盘按下)事件】

【keyup(fn)-------键盘-----触发每一个匹配元素的keyup(键盘按下弹起)事件】

【keypress(fn)----键盘-----触发每一个匹配元素的 keypress(键盘按下)事件】

【unload(fn)------文档-----当卸载本页面时绑定一个要执行的函数】

【resize(fn)------文档-----触发每一个匹配元素的 resize(文档改变大小)事件】

【scroll(fn)------文档-----触发每一个匹配元素的 scroll(滚动条拖动)事件】

【focus(fn)-------表单-----触发每一个匹配元素的 focus(焦点激活)事件】

【blur(fn)--------表单-----触发每一个匹配元素的 blur(焦点丢失)事件】

【focusin(fn)-----表单-----触发每一个匹配元素的 focusin(焦点激活)事件】

【ocusout(fn)-----表单-----触发每一个匹配元素的 focusout(焦点丢失)事件】

【select(fn)------表单-----触发每一个匹配元素的 select(文本选定)事件】

【change(fn)------表单-----触发每一个匹配元素的 change(值改变)事件】

【submit(fn)------表单-----触发每一个匹配元素的 submit(表单提交)事件】

.mouseover()和.mouseout()表示鼠标移入和移出的时候触发。那么 jQuery 还封装了另外

一组：.mouseenter()和.mouseleave()表示鼠标穿过和穿出的时候触发。那么这两组本质上有

什么区别呢？手册上的说明是：.mouseenter()和.mouseleave()这组穿过子元素不会触发，

而.mouseover()和.mouseout()则会触发。

//HTML 页面设置

<divstyle="width:200px;height:200px;background:green;">

</div>

//mouseover 移入

$('div').mouseover(function () { //移入div 会触发，移入p 再触发

$('strong').html(function (index, value) {

return value+'1';

});

//mouseenter 穿过

$('div').mouseenter(function () { //穿过div 或者p

$('strong').html(function (index, value) {//在这个区域只触发一次

return value+'1';

});

//mouseout 移出

$('div').mouseout(function () { //移出p 会触发，移出div 再触发

$('strong').html(function (index, value) {

return value+'1';

});

//mouseleave 穿出

$('div').mouseleave(function () { //移出整个div 区域触发一次

$('strong').html(function (index, value) {

return value+'1';

});

.keydown()、.keyup()返回的是键码，而.keypress()返回的是字符编码。

$('input').keydown(function (e) {

alert(e.keyCode); //按下a 返回65

});

$('input').keypress(function (e) {

alert(e.charCode); //按下a 返回97

});

《.focus()和.blur()分别表示光标激活和丢失，事件触发时机是当前元素。而.focusin()

和.focusout()也表示光标激活和丢失，但事件触发时机可以是子元素。》

//HTML 部分

<divstyle="width:200px;height:200px;background:red;">

</div>

//focus 光标激活：

$('input').focus(function () { //当前元素触发

$('strong').html('123');

});

//focusin 光标激活

$('div').focusin(function () { //绑定的是div 元素，子类input 触发

$('strong').html('123');

});

注意：.blur()和.focusout()表示光标丢失，和激活类似，一个必须当前元素触发，一个可

以是子元素触发。

7.3 复合事件：

《jQuery 提供了许多最常用的事件效果，组合一些功能实现了一些复合事件，比如切换功能、智能加载等。》

复合事件：【方法名】【描述】

【ready(fn)-----当 DOM 加载完毕触发事件】

【hover([fn1,]fn2)---当鼠标移入触发第一个fn1，移出触发fn2】

【toggle(fn1,fn2[,fn3..])-----已废弃，当鼠标点击触发fn1,再点击触发fn2...】

//背景移入移出切换效果

$('div').hover(function () {

$(this).css('background', 'black');//mouseenter 效果

}, function () {

$(this).css('background', 'red');//mouseleave 效果，可省略

});

注意：.hover()方法是结合了.mouseenter()方法和.mouseleva()方法，并非.mouseover()

和.mouseout()方法。

.toggle()这个方法比较特殊，这个方法有两层含义，第一层含义就是已经被1.8 版废用、

1.9 版删除掉的用法，也就是点击切换复合事件的用法。第二层函数将会在动画那章讲解到。

既然废弃掉了，就不应该使用。被删除的原因是：以减少混乱和提高潜在的模块化程度。

但你又非常想用这个方法，并且不想自己编写类似的功能，可以下载jquery-migrate.js

文件，来向下兼容已被删除掉的方法。

//背景点击切换效果(1.9 版删除掉了)

$('div').toggle(function () { //第一次点击切换

$(this).css('background', 'black');

}, function () { //第二次点击切换

$(this).css('background', 'blue');

}, function () { //第三次点击切换

$(this).css('background', 'red');

});

注意：由于官方已经删除掉这个方法，所以也是不推荐使用的，如果在不基于向下兼容

的插件JS。我们可以自己实现这个功能。

var flag = 1; //计数器

$('div').click(function () {

if (flag == 1) { //第一次点击

$(this).css('background', 'black');

flag = 2;

} else if (flag == 2) { //第二次点击

$(this).css('background', 'blue');

flag = 3

} else if (flag == 3) { //第三次点击

$(this).css('background', 'red');

flag = 1

}

});

8 事件对象

【学习要点：事件对象、冒泡和默认行为】

《JavaScript 在事件处理函数中默认传递了event 对象，也就是事件对象。但由于浏览器的兼容性，开发者总是会做兼容方面的处理。

jQuery 在封装的时候，解决了这些问题，并且还创建了一些非常好用的属性和方法。》

8.1 事件对象：

《事件对象就是event 对象，通过处理函数默认传递接受。之前处理函数的e 就是event事件对象，event 对象有很多可用的属性和方法，

我们在JavaScript课程中已经详细的了解过这些常用的属性和方法，这里，我们再一次演示一下。》

//通过处理函数传递事件对象

$('input').bind('click', function (e) { //接受事件对象参数

alert(e);

});

event 对象的属性：【属性名】【描述】

【type-------获取这个事件的事件类型，例如：click】

【target-----获取绑定事件的 DOM 元素】

【data-------获取事件调用时的额外数据】

【relatedTarget----获取移入移出目标点离开或进入的那个 DOM 元素】

【currentTarget----获取冒泡前触发的DOM 元素，等同与this】

【pageX/pageY------获取相对于页面原点的水平/垂直坐标】

【screenX/screenY--获取显示器屏幕位置的水平/垂直坐标(非 jQuery 封装)】

【clientX/clientY--获取相对于页面视口的水平/垂直坐标(非 jQuery 封装)】

【result-----------获取上一个相同事件的返回值】

【timeStamp--------获取事件触发的时间戳】

【which------------获取鼠标的左中右键(1,2,3)，或获取键盘按键】

【altKey/shiftKey/ctrlKey/metaKey-------------获取是否按下了 alt、shift、ctrl(这三个非 jQuery 封装)

或meta 键(IE 原生 meta 键，jQuery 做了封装)】

//通过event.type 属性获取触发事件名

$('input').click(function (e) {

alert(e.type);

});

//通过event.target 获取绑定的DOM 元素

$('input').click(function (e) {

alert(e.target);

});

//通过event.data 获取额外数据，可以是数字、字符串、数组、对象

$('input').bind('click', 123, function () {//传递data 数据

alert(e.data); //获取数字数据

});

//event.data 获取额外数据，对于封装的简写事件也可以使用

$('input').click({user : 'Lee', age :100},function (e) {

alert(e.data.user);

});

注意：键值对的键可以加上引号，也可以不加；在调用的时候也可以使用数组的方式：

alert(e.data['user']);

//获取移入到div 之前的那个DOM 元素

$('div').mouseover(function (e) {

alert(e.relatedTarget);

});

//获取移出div 之后到达最近的那个DOM 元素

$('div').mouseout(function (e) {

alert(e.relatedTarget);

});

//获取绑定的那个DOM 元素，相当于this，区别与event.target

$('div').click(function (e) {

alert(e.currentTarget);

});

注意：event.target 得到的是触发元素的DOM，event.currentTarget 得到的是监听元素的

DOM。而this 也是得到监听元素的DOM。

//获取上一次事件的返回值

$('div').click(function (e) {

return '123';

});

$('div').click(function (e) {

alert(e.result);

});

//获取当前的时间戳

$('div').click(function (e) {

alert(e.timeStamp);

});

//获取鼠标的左中右键

$('div').mousedown(function (e) {

alert(e.which);

});

//获取键盘的按键

$('input').keyup(function (e) {

alert(e.which);

});

//获取是否按下了ctrl 键，meta 键不存在，导致无法使用

$('input').click(function (e) {

alert(e.ctrlKey);

});

//获取触发元素鼠标当前的位置

$(document).click(function (e) {

alert(e.screenY+ ',' + e.pageY + ',' + e.clientY);

});

8.2 冒泡和默认行为：

《如果在页面中重叠了多个元素，并且重叠的这些元素都绑定了同一个事件，那么就会出现冒泡问题。》

//三个不同元素触发事件

$('input').click(function () {

alert('按钮被触发了！');

});

$('div').click(function () {

alert('div 层被触发了！');

});

$(document).click(function () {

alert('文档页面被触发了！');

});

《触发的顺序是从小范围到大范围。这就是所谓的冒泡现象，一层一层往上。》

jQuery 提供了一个事件对象的方法：event.stopPropagation()；这个方法设置到需要触发

的事件上时，所有上层的冒泡行为都将被取消。

$('input').click(function (e) {

alert('按钮被触发了！');

e.stopPropagation();

});

网页中的元素，在操作的时候会有自己的默认行为。比如：右击文本框输入区域，会弹

出系统菜单、点击超链接会跳转到指定页面、点击提交按钮会提交数据。

$('a').click(function (e) {

e.preventDefault();

});

//禁止提交表单跳转

$('form').submit(function (e) {

e.preventDefault();

});

注意：如果想让上面的超链接同时阻止默认行为且禁止冒泡行为，可以把两个方法同时

写上：event.stopPropagation()和event.preventDefault()。这两个方法如果需要同时启用的时候，

还有一种简写方案代替，就是直接return false。

$('a').click(function (e) {

return false;

});

冒泡和默认行为的一些方法：【方法名】【描述】

【preventDefault()------取消某个元素的默认行为】

【isDefaultPrevented()--判断是否调用了preventDefault()方法】

【stopPropagation()-----取消事件冒泡】

【isPropagationStopped()--判断是否调用了stopPropagation()方法】

【stopImmediatePropagation()----取消事件冒泡，并取消该事件的后续事件处理函数】

【isImmediatePropagationStopped()----判断是否调用了stopImmediatePropagation()方法】

//判断是否取消了元素的默认行为

$('input').keyup(function (e) {

e.preventDefault();

alert(e.isDefaultPrevented());

});

//取消冒泡并取消后续事件处理函数

$('input').click(function (e) {

alert('input');

e.stopImmediatePropagation();

});

$('input').click(function () {

alert('input2');

});

$(document).click(function () {

alert('document');

});

//判断是否调用了stopPropagation()方法

$('input').click(function (e) {

e.stopPropagation();

alert(e.isPropagationStopped());

});

//判断是否执行了stopImmediatePropagation()方法

$('input').click(function (e) {

e.stopImmediatePropagation();

alert(e.isImmediatePropagationStopped());

});

9 高级事件

【学习要点：模拟操作、命名空间、事件委托、on、off 和one】

《jQuery 不但封装了大量常用的事件处理，还提供了不少高级事件方便开发者使用。比如模拟用户触发事件、事件委托事件、

和统一整合的on 和off，以及仅执行一次的one 方法。这些方法大大降低了开发者难度，提升了开发者的开发体验。》

9.1 模拟操作：

《在事件触发的时候，有时我们需要一些模拟用户行为的操作。例如：当网页加载完毕后自行点击一个按钮触发一个事件，而不是用户去点击。》

//点击按钮事件

$('input').click(function () {

alert('我的第一次点击来自模拟！');

});

//模拟用户点击行为

$('input').trigger('click');

//可以合并两个方法

$('input').click(function () {

alert('我的第一次点击来自模拟！');

}).trigger('click');

有时在模拟用户行为的时候，我们需要给事件执行传递参数，这个参数类似与event.data

的额外数据，可以可以是数字、字符串、数组、对象。

$('input').click(function (e, data1, data2){

alert(data1 + ',' + data2);

}).trigger('click', ['abc', '123']);

.trigger()方法提供了简写方案，只要想让某个事件执行模拟用户行为，直接再调用一个

空的同名事件即可。

$('input').click(function () {

alert('我的第一次点击来自模拟！');

}).click(); //空的click()执行的是trigger()

这种便捷的方法，jQuery 几乎个所有常用的事件都提供了。

【blur focusin mousedown resize

changefocusout mousenter scroll

click keydown mouseleave select

dblclick keypress mousemove submit

error keyup mouseout unload

focus load mouseover】

jQuery 还提供了另外一个模拟用户行为的方法：.triggerHandler()；这个方法的使用

和.trigger()方法一样。

$('input').click(function () {

alert('我的第一次点击来自模拟！');

}).triggerHandler('click');

在常规的使用情况下，两者几乎没有区别，都是模拟用户行为，也可以可以传递额外参

数。但在某些特殊情况下，就产生了差异：

1..triggerHandler()方法并不会触发事件的默认行为，而.trigger()会。

$('form').trigger('submit'); //模拟用户执行提交，并跳转到执行页面

$('form').triggerHandler('submit'); //模拟用户执行提交，并阻止的默认行为

如果我们希望使用.trigger()来模拟用户提交，并且阻止事件的默认行为，则需要这么写：

$('form').submit(function (e) {

e.preventDefault(); //阻止默认行为

}).trigger('submit');

2..triggerHandler()方法只会影响第一个匹配到的元素，而.trigger()会影响所有。

3..triggerHandler()方法会返回当前事件执行的返回值，如果没有返回值，则返回

undefined；而.trigger()则返回当前包含事件触发元素的jQuery 对象(方便链式连缀调用)。

alert($('input').click(function () {

return 123;

}).triggerHandler('click')); //返回123，没有return 返回

4..trigger()在创建事件的时候，会冒泡。但这种冒泡是自定义事件才能体现出来，是

jQuery 扩展于DOM 的机制，并非DOM 特性。而.triggerHandler()不会冒泡。

var index = 1;

$('div').bind('myEvent',function(){

alert('自定义事件' + index);

index++;

});

$('.div3').trigger("myEvent");

9.2 命名空间：

有时，我们想对事件进行移除。但对于同名同元素绑定的事件移除往往比较麻烦，这个

时候，可以使用事件的命名空间解决。

$('input').bind('click.abc', function () {

alert('abc');

});

$('input').bind('click.xyz', function () {

alert('xyz');

});

$('input').unbind('click.abc'); //移除click 实践中命名空间为abc 的

注意：也可以直接使用('.abc')，这样的话，可以移除相同命名空间的不同事件。对于模

拟操作.trigger()和.triggerHandler()，用法也是一样的。

$('input').trigger('click.abc');

//使用.bind()不具备动态绑定功能，只有点击原始按钮才能生成【.bind】

$('.button').bind('click', function () {

$(this).clone().appendTo('#box');

});

//使用.live()具备动态绑定功能，jQuery1.3使用，jQuery1.7 之后废弃，jQuery1.9 删除

$('.button').live('click', function () {

$(this).clone().appendTo('#box');

});

//.live()无法使用链接连缀调用，因为参数的特性导致

$('#box').children(0).live('click',function () {

$(this).clone().appendTo('#box');

});

$('.button').live('click', function () {

$('<input type="button"value="复制的" class="button" />').appendTo('#box');

});

当我们需要停止事件委托的时候，可以使用.die()来取消掉。

$('.button').die('click');

由于.live()和.die()在jQuery1.4.3 版本中废弃了，之后推出语义清晰、减少冒泡传播层次、

又支持链接连缀调用方式的方法：.delegate()和.undelegate()。但这个方法在jQuery1.7 版本中

被.on()方法整合替代了。

$('#box').delegate('.button', 'click',function () {

$(this).clone().appendTo('#box');

});

$('#box').undelegate('.button','click');

//支持连缀调用方式

$('div').first().delegate('.button','click', function () {

$(this).clone().appendTo('div:first');

});

9.3 on、off 和one：

//替代.bind()方式

$('.button').on('click', function () {

alert('替代.bind()');

});

//替代.bind()方式，并使用额外数据和事件对象

$('.button').on('click', {user : 'Lee'},function (e) {

alert('替代.bind()' +e.data.user);

});

//替代.bind()方式，并绑定多个事件

$('.button').on('mouseover mouseout',function () {

alert('替代.bind()移入移出！');

});

//替代.bind()方式，以对象模式绑定多个事件

$('.button').on({

mouseover : function () {

alert('替代.bind()移入！');

mouseout : function () {

alert('替代.bind()移出！');

}

});

//替代.bind()方式，阻止默认行为并取消冒泡

$('form').on('submit', function () {

return false;

});

或

$('form').on('submit', false);

//替代.bind()方式，阻止默认行为

$('form').on('submit', function (e) {

e.preventDefault();

});

//替代.bind()方式，取消冒泡

$('form').on('submit', function (e) {

e.stopPropagation();

});

//替代.unbind()方式，移除事件

$('.button').off('click');

$('.button').off('click', fn);

$('.button').off('click.abc');

//替代.live()和.delegate()，事件委托

$('#box').on('click', '.button', function() {

$(this).clone().appendTo('#box');

});

//替代.die()和.undelegate()，取消事件委托

$('#box').off('click', '.button');

不管是.bind()还是.on()，绑定事件后都不是自动移除事件的，需要通过.unbind()和.off()

来手工移除。jQuery 提供了.one()方法，绑定元素执行完毕后自动移除事件，可以方法仅触

发一次的事件。

//类似于.bind()只触发一次

$('.button').one('click', function () {

alert('one 仅触发一次！');

});

//类似于.delegate()只触发一次

$('#box).one('click', 'click', function (){

alert('one 仅触发一次！');

});

10 动画效果

【学习要点：显示、隐藏、滑动、卷动、淡入、淡出、自定义动画、列队动画方法、动画相关方法、动画全局属性】

《在以前很长一段时间里，网页上的各种特效还需要采用flash 在进行。但最近几年里，我们已经很少看到这种情况了，

绝大部分已经使用JavaScript 动画效果来取代flash。这里说的取代是网页特效部分，而不是动画。网页特效比如：

渐变菜单、渐进显示、图片轮播等；而动画比如：故事情节广告、MV 等等。》

10.1 显示、隐藏:【.show()、.hide()】

jQuery 中显示方法为：.show()，隐藏方法为：.hide()。在无参数的时候，只是硬性的显

示内容和隐藏内容。

$('.show').click(function () { //显示

$('#box').show();

});

$('.hide').click(function () { //隐藏

$('#box').hide();

});

注意：.hide()方法其实就是在行内设置CSS 代码：display:none; 而.show()方法要根据原

来元素是区块还是内联来决定，如果是区块，则设置CSS 代码：display:block; 如果是内联，

则设置CSS 代码：display:inline;。

在.show()和.hide()方法可以传递一个参数，这个参数以毫秒(1000 毫秒等于1 秒钟)来控

制速度。并且里面富含了匀速变大变小，以及透明度变换。

$('.show').click(function () {

$('#box').show(1000); //显示用了1 秒

});

$('.hide').click(function () {

$('#box').hide(1000); //隐藏用了1 秒

});

除了直接使用毫秒来控制速度外，jQuery 还提供了三种预设速度参数字符串：slow、

normal 和fast，分别对应600 毫秒、400 毫秒和200 毫秒。

$('.show').click(function () {

$('#box').show('fast'); //200 毫秒

});

$('.hide').click(function () {

$('#box').hide('slow'); //600 毫秒

});

注意：不管是传递毫秒数还是传递预设字符串，如果不小心传递错误或者传递空字符串。

那么它将采用默认值：400 毫秒。

$('.show').click(function () {

$('#box').show(''); //默认400 毫秒

});

//使用.show()和.hide()的回调函数，可以实现列队动画效果。

$('.show').click(function () {

$('#box').show('slow', function () {

alert('动画持续完毕后，执行我！');

});

//列队动画，使用函数名调用自身

$('.show').click(function () {

$('div').first().show('fast', function showSpan(){

$(this).next().show('fast', showSpan);

});

//列队动画，使用arguments.callee匿名函数自调用

$('.hide').click(function () {

$('div').last().hide('fast', function() {

$(this).prev().hide('fast',arguments.callee);

});

我们在使用.show()和.hide()的时候，如果需要一个按钮切换操作，需要进行一些条件判

断。而jQuery 提供给我们一个类似功能的独立方法：.toggle()。

$('.toggle').click(function () {

$(this).toggle('slow');

});

10.2 滑动、卷动:【.slideUp()、.slideDown()、.slideToggle()】

jQuery 提供了一组改变元素高度的方法：.slideUp()、.slideDown()和.slideToggle()。顾名

思义，向上收缩(卷动)和向下展开(滑动)。

$('.down').click(function () {

$('#box').slideDown();

});

$('.up').click(function () {

$('#box').slideUp();

});

$('.toggle').click(function () {

$('#box').slideToggle();

});

注意：滑动、卷动效果和显示、隐藏效果一样，具有相同的参数。

10.3 淡入、淡出:【.fadeIn()、.fadeOut()、.fadeToggle()】

jQuery 提供了一组专门用于透明度变化的方法：.fadeIn()和.fadeOut()，分别表示淡入、

淡出，当然还有一个自动切换的方法：.fadeToggle()。

$('.in').click(function () {

$('#box').fadeIn('slow');

});

$('.out').click(function () {

$('#box').fadeOut('slow');

});

$('.toggle').click(function () {

$('#box').fadeToggle();

});

上面三个透明度方法只能是从0 到100，或者从100 到0，如果我们想设置指定值就没

有办法了。而jQuery 为了解决这个问题提供了.fadeTo()方法。

$('.toggle').click(function () {

$('#box').fadeTo('slow', 0.33); //0.33 表示值为33

});

注意：淡入、淡出效果和显示、隐藏效果一样，具有相同的参数。对于.fadeTo()方法，

如果本身透明度大于指定值，会淡出，否则相反。

10.4 自定义动画：【.animate()】

jQuery 提供了几种简单常用的固定动画方面我们使用。但有些时候，这些简单动画无法

满足我们更加复杂的需求。这个时候，jQuery 提供了一个.animate()方法来创建我们的自定

义动画，满足更多复杂多变的要求。

$('.animate').click(function () {

$('#box').animate({

'width' : '300px',

'height' : '200px',

'fontSize' : '50px',

'opacity' : 0.5

});

注意：一个CSS 变化就是一个动画效果，上面的例子中，已经有四个CSS 变化，已经

实现了多重动画同步运动的效果。

必传的参数只有一个，就是一个键值对CSS 变化样式的对象。还有两个可选参数分别

为速度和回调函数。

$('.animate').click(function () {

$('#box').animate({

'width' : '300px',

'height' : '200px'

}, 1000, function () {

alert('动画执行完毕执行我！');

});

到目前位置，我们都是创建的固定位置不动的动画。如果想要实现运动状态的位移动画，

那就必须使用自定义动画，并且结合CSS 的绝对定位功能。

$('.animate').click(function () {

$('#box').animate({

'top' : '300px', //先必须设置CSS 绝对定位

'left' : '200px'

});

自定义动画中，每次开始运动都必须是初始位置或初始状态，而有时我们想通过当前位

置或状态下再进行动画。jQuery 提供了自定义动画的累加、累减功能。

$('.animate').click(function () {

$('#box').animate({

'left' : '+=100px',

});

自定义实现列队动画的方式，有两种：1.在回调函数中再执行一个动画；2.通过连缀或

顺序来实现列队动画。

//通过依次顺序实现列队动画

$('.animate').click(function () {

$('#box').animate({'left' : '100px'});

$('#box').animate({'top' : '100px'});

$('#box').animate({'width' : '300px'});

});

注意：如果不是同一个元素，就会实现同步动画

//通过连缀实现列队动画

$('.animate').click(function () {

$('#box').animate({

'left' : '100px'

}).animate({

'top' : '100px'

}).animate({

'width' : '300px'

});

//通过回调函数实现列队动画

$('.animate').click(function () {

$('#box').animate({

'left' : '100px'

}, function () {

$('#box').animate({

'top' : '100px'

}, function () {

$('#box').animate({

'width' : '300px'

});

10.5 列队动画方法：【.queue()】

//连缀无法实现按顺序列队

$('#box').slideUp('slow').slideDown('slow').css('background','orange');

注意：如果动画方法，连缀可以实依次列队，而.css()方法不是动画方法，会在一开始

传入列队之前。那么，可以采用动画方法的回调函数来解决。

//使用回调函数，强行将.css()方法排队到.slideDown()之后

$('#box').slideUp('slow').slideDown('slow',function () {

$(this).css('background', 'orange');

});

但如果这样的话，当列队动画繁多的时候，可读性不但下降，而原本的动画方法不够清

晰。所以，我们的想法是每个操作都是自己独立的方法。那么jQuery 提供了一个类似于回

调函数的方法：.queue()。

//使用.queue()方法模拟动画方法跟随动画方法之后

$('#box').slideUp('slow').slideDown('slow').queue(function() {

$(this).css('background', 'orange');

});

现在，我们想继续在.queue()方法后面再增加一个隐藏动画，这时发现居然无法实现。

这是.queue()特性导致的。有两种方法可以解决这个问题，jQuery 的.queue()的回调函数可以

传递一个参数，这个参数是next 函数，在结尾处调用这个next()方法即可再连缀执行列队动

画。

//使用next 参数来实现继续调用列队动画

$('#box').slideUp('slow').slideDown('slow').queue(function(next) {

$(this).css('background', 'orange');

next();

}).hide('slow');

因为next 函数是jQuery1.4 版本以后才出现的，而之前我们普遍使用的是.dequeue()方法。

意思为执行下一个元素列队中的函数。

//使用.dequeue()方法执行下一个函数动画

$('#box').slideUp('slow').slideDown('slow').queue(function() {

$(this).css('background', 'orange');

$(this).dequeue();

}).hide('slow');

如果采用顺序调用，那么使用列队动画方法，就非常清晰了，每一段代表一个列队，而

回调函数的嵌套就会杂乱无章。

//使用顺序调用的列队，逐个执行，非常清晰

$('#box').slideUp('slow');

$('#box').slideDown('slow');

$('#box').queue(function () {

$(this).css('background', 'orange');

$(this).dequeue();

})

$('#box').hide('slow');

.queue()方法还有一个功能，就是可以得到当前动画个列队的长度。当然，这个用法在

普通Web 开发中用的比较少，我们这里不做详细探讨。

//获取当前列队的长度，fx 是默认列队的参数

function count() {

return$("#box").queue('fx').length;

}

//在某个动画处调用

$('#box').slideDown('slow', function (){alert(count());});

jQuery 还提供了一个清理列队的功能方法：.clearQueue()。把它放入一个列队的回调函

数或.queue()方法里，就可以把剩下为执行的列队给移除。

//清理动画列队

$('#box').slideDown('slow', function (){$(this).clearQueue()});

10.6 动画相关方法：【.stop()、.delay(1000)、.slideToggle()】

很多时候需要停止正在运行中的动画，jQuery 为此提供了一个.stop()方法。它有两个可

选参数：.stop(clearQueue, gotoEnd)；clearQueue 传递一个布尔值，代表是否清空未执行完的

动画列队，gotoEnd 代表是否直接将正在执行的动画跳转到末状态。

//强制停止运行中的

$('.stop').click(function () {

$('#box').stop();

});

//带参数的强制运行

$('.animate').click(function () {

$('#box').animate({

'left' : '300px'

}, 1000);

$('#box').animate({

'bottom' : '300px'

}, 1000);

$('#box').animate({

'width' : '300px'

}, 1000);

$('#box').animate({

'height' : '300px'

}, 1000);

});

$('.stop').click(function () {

$('#box').stop(true ,true);

});

注意：第一个参数表示是否取消列队动画，默认为false。如果参数为true，当有列队动

画的时候，会取消后面的列队动画。第二参数表示是否到达当前动画结尾，默认为false。

如果参数为true，则停止后立即到达末尾处。

有时在执行动画或列队动画时，需要在运动之前有延迟执行，jQuery 为此提供了.delay()

方法。这个方法可以在动画之前设置延迟，也可以在列队动画中间加上。

//开始延迟1 秒钟，中间延迟1 秒

$('.animate').click(function () {

$('#box').delay(1000).animate({

'left' : '300px'

}, 1000);

$('#box').animate({

'bottom' : '300px'

}, 1000);

$('#box').delay(1000).animate({

'width' : '300px'

}, 1000);

$('#box').animate({

'height' : '300px'

}, 1000);

});

//递归执行自我，无线循环播放

$('#box').slideToggle('slow', function () {

$(this).slideToggle('slow', arguments.callee);

});

//停止正在运动的动画，并且设置红色背景

$('.button').click(function(){

$('div:animated').stop().css('background','red');

});

==动画全局属性:【$.fx.interval、$.fx.off】

jQuery 提供了两种全局设置的属性，分别为：$.fx.interval，设置每秒运行的帧数；$.fx.off，

关闭页面上所有的动画。

$.fx.interval 属性可以调整动画每秒的运行帧数，默认为13 毫秒。数字越小越流畅，但

可能影响浏览器性能。

//设置运行帧数为1000 毫秒

$.fx.interval = 1000; //默认为13

$('.button').click(function () {

$('#box').toggle(3000);

});

$.fx.off 属性可以关闭所有动画效果，在非常低端的浏览器，动画可能会出现各种异常

问题导致错误。而jQuery 设置这个属性，就是用于关闭动画效果的。

//设置动画为关闭true

$.fx.off = true; //默认为false

补充：在.animate()方法中，还有一个参数，easing 运动方式，这个参数，大部分参数值

需要通过插件来使用，在后面的课程中，会详细讲解。自带的参数有两个：swing(缓动)、

linear(匀速)，默认为swing。

$('.button').click(function () {

$('#box').animate({

left : '800px'

}, 'slow', 'swing');

$('#pox').animate({

left : '800px'

}, 'slow', 'linear');

});

11 Ajax

【学习要点：Ajax 概述、load()方法、$.get()和$.post()、$.getScript()和$.getJSON()、$.ajax()方法、表单序列化】

《Ajax 全称为：“Asynchronous JavaScript and XML”（异步JavaScript 和XML），它并不是JavaScript的一种单一技术，

而是利用了一系列交互式网页应用相关的技术所形成的结合体。使用Ajax，我们可以无刷新状态更新页面，并且实现异步提交，

提升了用户体验。》

11.1 Ajax 概述：

Ajax 这个概念是由Jesse JamesGarrett 在2005 年发明的。它本身不是单一技术，是一串

技术的集合，主要有：

1.JavaScript，通过用户或其他与浏览器相关事件捕获交互行为；

2.XMLHttpRequest 对象，通过这个对象可以在不中断其它浏览器任务的情况下向服务器发送请求；

3.服务器上的文件，以XML、HTML 或JSON 格式保存文本数据；

4.其它JavaScript，解释来自服务器的数据（比如PHP 从MySQL 获取的数据）并将其呈现到页面上。

由于Ajax 包含众多特性，优势与不足也非常明显。优势主要以下几点：

1.不需要插件支持（一般浏览器且默认开启JavaScript即可）；

2.用户体验极佳（不刷新页面即可获取可更新的数据）；

3.提升Web 程序的性能（在传递数据方面做到按需放松，不必整体提交）；

4.减轻服务器和带宽的负担（将服务器的一些操作转移到客户端）；

而Ajax 的不足由以下几点：

1.不同版本的浏览器度XMLHttpRequest对象支持度不足(比如IE5 之前)；

2.前进、后退的功能被破坏（因为Ajax 永远在当前页，不会几率前后页面）；

3.搜索引擎的支持度不够（因为搜索引擎爬虫还不能理解JS 引起变化数据的内容）；

4.开发调试工具缺乏（相对于其他语言的工具集来说，JS 或Ajax 调试开发少的可怜）。

11.2 异步和同步：

使用Ajax 最关键的地方，就是实现异步请求、接受响应及执行回调。那么异步与同步

有什么区别呢？我们普通的Web 程序开发基本都是同步的，意为执行一段程序才能执行下

一段，类似电话中的通话，一个电话接完才能接听下个电话；而异步可以同时执行多条任务，

感觉有多条线路，类似于短信，不会因为看一条短信而停止接受另一条短信。Ajax 也可以

使用同步模式执行，但同步的模式属于阻塞模式，这样会导致多条线路执行时又必须一条一

条执行，会让Web 页面出现假死状态，所以，一般Ajax 大部分采用异步模式。

11.3 load()方法：

《jQuery 对Ajax 做了大量的封装，我们使用起来也较为方便，不需要去考虑浏览器兼容性。对于封装的方式，jQuery 采用了三层封装：

最底层的封装方法为：$.ajax()，而通过这层封装了第二层有三种方法：.load()、$.get()和$.post()，

最高层是$.getScript()和$.getJSON()方法。》

.load()方法可以参数三个参数：url(必须，请求html 文件的url 地址，参数类型为String)、

data(可选，发送的key/value 数据，参数类型为Object)、callback(可选，成功或失败的回调

函数，参数类型为函数Function)。

如果想让Ajax 异步载入一段HTML 内容，我们只需要一个HTML 请求的url 即可。

//HTML

//jQuery

$('input').click(function () {

$('#box').load('test.html');

});

如果想对载入的HTML 进行筛选，那么只要在url 参数后面跟着一个选择器即可。

//带选择器的url

$('input').click(function () {

$('#box').load('test.html .my');

});

如果是服务器文件，比如.php。一般不仅需要载入数据，还需要向服务器提交数据，那

么我们就可以使用第二个可选参数data。向服务器提交数据有两种方式：get 和post。

//不传递data，则默认get 方式

$('input').click(function () {

$('#box').load('test.php?url=ycku');

});

//get 方式接受的PHP

<?php

if ($_GET['url'] == 'ycku') {

echo '瓢城Web 俱乐部官网';

} else {

echo '其他网站';

}

//传递data，则为post 方式

$('input').click(function () {

$('#box').load('test.php', {

url : 'ycku'

});

//post 方式接受的PHP

<?php

if ($_POST['url'] == 'ycku') {

echo '瓢城Web 俱乐部官网';

} else {

echo '其他网站';

}

在Ajax 数据载入完毕之后，就能执行回调函数callback，也就是第三个参数。回调函数

也可以传递三个可选参数：responseText（请求返回）、textStatus（请求状态)、XMLHttpRequest

（XMLHttpRequest 对象）。

$('input').click(function () {

$('#box').load('test.php', {

url : 'ycku'

}, function (response, status, xhr) {

alert('返回的值为：' + response +'，状态为：' + status + '，

状态是：' + xhr.statusText);

});

注意：status 得到的值，如果成功返回数据则为：success，否则为：error。XMLHttpRequest

对象属于JavaScript 范畴，可以调用一些属性如下：

【属性名】【说明】

【responseText---作为响应主体被返回的文本】

【responseXML----如果响应主体内容类型是"text/xml"或"application/xml"，则返回包含响应数据的XML DOM 文档】

【status---------响应的HTTP 状态】

【statusText-----HTTP状态的说明】

如果成功返回数据，那么xhr 对象的statusText 属性则返回'OK'字符串。除了'OK'的状态

字符串，statusText 属性还提供了一系列其他的值，如下：

【HTTP 状态码】【状态字符串】【说明】

【200----OK-----服务器成功返回了页面】

【400----Bad Request-----语法错误导致服务器不识别】

【401----Unauthorized----请求需要用户认证】

【404----Not found-------指定的URL 在服务器上找不到】

【500----Internal Server Error-----服务器遇到意外错误，无法完成请求】

【503----ServiceUnavailable--------由于服务器过载或维护导致无法完成请求】

11.4 $.get()和$.post()：

《.load()方法是局部方法，因为他需要一个包含元素的jQuery 对象作为前缀。而$.get()和$.post()是全局方法，无须指定某个元素。

对于用途而言，.load()适合做静态文件的异步获取，而对于需要传递参数到服务器页面的，$.get()和$.post()更加合适。》

$.get()方法有四个参数，前面三个参数和.load()一样，多了一个第四参数type，即服务

器返回的内容格式：包括xml、html、script、json、jsonp 和text。第一个参数为必选参数，

后面三个为可选参数。

//使用$.get()异步返回html 类型

$('input').click(function () {

$.get('test.php', {

url : 'ycku'

}, function (response, status, xhr) {

if (status == 'success') {

$('#box').html(response);

}

}) //type 自动转为html

});

注意：第四参数type 是指定异步返回的类型。一般情况下type 参数是智能判断，并不

需要我们主动设置，如果主动设置，则会强行按照指定类型格式返回。

//使用$.get()异步返回xml

$('input').click(function () {

$.get('test.xml', function (response,status, xhr) {

$('#box').html($(response).find('root').find('url').text());

}); //type 自动转为xml

});

注意：如果载入的是xml 文件，type 会智能判断。如果强行设置html 类型返回，则会

把xml 文件当成普通数据全部返回，而不会按照xml 格式解析数据。

//使用$.get()异步返回json

$.get('test.json', function (response,status, xhr) {

alert(response[0].url);

});

$.post()方法的使用和$.get()基本上一致，他们之间的区别也比较隐晦，基本都是背后的

不同，在用户使用上体现不出。具体区别如下：

1.GET 请求是通过URL 提交的，而POST 请求则是HTTP 消息实体提交的；

2.GET 提交有大小限制（2KB），而POST 方式不受限制；

3.GET 方式会被缓存下来，可能有安全性问题，而POST没有这个问题；

4.GET 方式通过$_GET[]获取，POST 方式通过$_POST[]获取。

//使用$.post()异步返回html

$.post('test.php', {

url : 'ycku'

}, function (response, status, xhr) {

$('#box').html(response);

});

11.5 $.getScript()和$.getJSON()：

《jQuery 提供了一组用于特定异步加载的方法：$.getScript()，用于加载特定的JS 文件；$.getJSON()，用于专门加载JSON 文件。》

有时我们希望能够特定的情况再加载JS 文件，而不是一开始把所有JS 文件都加载了，

这时课时使用$.getScript()方法。

//点击按钮后再加载JS 文件

$('input').click(function () {

$.getScript('test.js');

});

$.getJSON()方法是专门用于加载JSON 文件的，使用方法和之前的类似。

$('input').click(function () {

$.getJSON('test.json', function (response,status, xhr) {

alert(response[0].url);

});

==$.ajax()：

《$.ajax()是所有ajax 方法中最底层的方法，所有其他方法都是基于$.ajax()方法的封装。

这个方法只有一个参数，传递一个各个功能键值对的对象。》

$.ajax()方法对象参数表：【参数】【类型】【说明】

【url------String------发送请求的地址】

【type-----String------请求方式：POST 或 GET，默认 GET】

【timeout--Number------设置请求超时的时间（毫秒）】

【data-----Object 或String------发送到服务器的数据，键值对字符串或对象】

【dataType----String------------返回的数据类型，比如 html、xml、json 等】

【beforeSend--Function----------发送请求前可修改XMLHttpRequest 对象的函数】

【complete----Function----------请求完成后调用的回调函数】

【success-----Function----------请求成功后调用的回调函数】

【error-------Function----------请求失败时调用的回调函数】

【global------Boolean-----------默认为 true，表示是否触发全局Ajax】

【cache-------Boolean-----------设置浏览器缓存响应，默认为 true。如果 dataType类型为 script 或 jsonp 则为 false。】

【content-----DOM---------------指定某个元素为与这个请求相关的所有回调函数的上下文。】

【contentType--String-----------指定请求内容的类型。默认为application/x-www-form-urlencoded。】

【async-------Boolean-----------是否异步处理。默认为 true，false 为同步处理】

【processData--Boolean----------默认为 true，数据被处理为 URL 编码格式。如果为false，则阻止将传入的数据处理为 URL 编码的格式。】

【dataFilter---Function---------用来筛选响应数据的回调函数】

【ifModified---Boolean--------默认为 false，不进行头检测。如果为true，进行头检测，当相应内容与上次请求改变时，请求被认为是成功的】

【jsonp-------String----------指定一个查询参数名称来覆盖默认的jsonp 回调参数名 callback。】

【username----String----------在 HTTP 认证请求中使用的用户名】

【password----String----------在 HTTP 认证请求中使用的密码】

【scriptCharset---String------当远程和本地内容使用不同的字符集时，用来设置 script 和 jsonp 请求所使用的字符集。】

【xhr--------Function---------用来提供 XHR 实例自定义实现的回调函数】

【traditional---Boolean-------默认为 false，不使用传统风格的参数序列化。如为 true，则使用。】

//$.ajax 使用

$('input').click(function () {

$.ajax({

type : 'POST', //这里可以换成 GET

url : 'test.php',

data : {

url : 'ycku'

success : function (response, stutas, xhr){

$('#box').html(response);

}

});

注意：对于 data 属性，如果是 GET 模式，可以使用三种之前说所的三种形式。如果是

POST 模式可以使用之前的两种形式。

11.6 表单序列化：

《Ajax 用的最多的地方莫过于表单操作，而传统的表单操作是通过submit 提交将数据传输到服务器端。

如果使用Ajax 异步处理的话，我们需要将每个表单元素逐个获取才方能提交。这样工作效率就大大降低。》

//常规形式的表单提交

$('form input[type=button]').click(function() {

$.ajax({

type : 'POST',

url : 'test.php',

data : {

user : $('form input[name=user]').val(),

email : $('form input[name=email]').val()

success : function (response, status, xhr){

alert(response);

}

});

使用表单序列化方法.serialize()，会智能的获取指定表单内的所有元素。这样，在面对

大量表单元素时，会把表单元素内容序列化为字符串，然后再使用Ajax 请求。

//使用.serialize()序列化表单内容

$('form input[type=button]').click(function() {

$.ajax({

type : 'POST',

url : 'test.php',

data : $('form').serialize(),

success : function (response, status, xhr){

alert(response);

}

});

.serialize()方法不但可以序列化表单内的元素，还可以直接获取单选框、复选框和下拉

列表框等内容。

//使用序列化得到选中的元素内容

$(':radio').click(function () {

$('#box').html(decodeURIComponent($(this).serialize()));

});

除了.serialize()方法，还有一个可以返回JSON 数据的方法：.serializeArray()。这个方法

可以直接把数据整合成键值对的JSON 对象。

$(':radio').click(function () {

console.log($(this).serializeArray());

var json = $(this).serializeArray();

$('#box').html(json[0].value);

});

有时，我们可能会在同一个程序中多次调用$.ajax()方法。而它们很多参数都相同，这

个时候我们课时使用jQuery 提供的$.ajaxSetup()请求默认值来初始化参数。

$('form input[type=button]').click(function() {

$.ajaxSetup({

type : 'POST',

url : 'test.php',

data : $('form').serialize()

});

$.ajax({

success : function (response, status, xhr){

alert(response);

}

});

在使用data 属性传递的时候，如果是以对象形式传递键值对，可以使用$.param()方法

将对象转换为字符串键值对格式。

var obj = {a : 1, b : 2, c : 3};

var form = $.param(obj);

alert(form);

注意：使用$.param()将对象形式的键值对转为URL 地址的字符串键值对，可以更加稳

定准确的传递表单内容。因为有时程序对于复杂的序列化解析能力有限，所以直接传递obj

对象要谨慎。

12 Ajax进阶

【学习要点：加载请求、错误处理、请求全局事件、JSON 和 JSONP、jqXHR 对象】

《在 Ajax 课程中，我们了解了最基本的异步处理方式。本章，我们将了解一下 Ajax 的一些全局请求事件、跨域处理和其他一些问题。》

12.1 加载请求：

《在 Ajax 异步发送请求时，遇到网速较慢的情况，就会出现请求时间较长的问题。而超过一定时间的请求，用户就会变得不再耐烦而关闭页面。

而如果在请求期间能给用户一些提示，比如：正在努力加载中...，那么相同的请求时间会让用户体验更加的好一些。》

jQuery 提供了两个全局事件，.ajaxStart()和.ajaxStop()。这两个全局事件，只要用户触发

了 Ajax，请求开始时（未完成其他请求）激活.ajaxStart()，请求结束时（所有请求都结束了）

激活.ajaxStop()。

//请求加载提示的显示和隐藏

$('.loading').ajaxStart(function () {

$(this).show();

}).ajaxStop(function () {

$(this).hide();

});

注意：以上代码在 jQuery1.8 及以后的版本不在有效，需要使用 jquery-migrate 向下兼容

才能运行。新版本中，必须绑定在 document 元素上。

$(document).ajaxStart(function () {

$('.loading').show();

}).ajaxStop(function () {

$('.loading').hide();

});

//如果请求时间太长，可以设置超时

$.ajax({

timeout : 500

});

//如果某个 ajax 不想触发全局事件，可以设置取消

JQuery学习总结

1 jQuery 入门

1.1 jQuery 的功能和优势:

1.2 是否兼容IE 低版本:

2 基础核心

2.1 代码风格：

2.2 加载模式：

2.3 对象互换：

3 常规选择器

3.1 简单选择器：

3.2 进阶选择器：

3.3 高级选择器：

3.4 过滤选择器

3.5 基本过滤器：

3.6 内容过滤器：

3.7 可见性过滤器：

3.8 子元素过滤器：

3.9 其他方法：

4 基础DOM 和CSS 操作

4.1 DOM 简介：

4.2 设置元素及内容：

4.3 元素属性操作：

4.4 元素样式操作：

4.5 CSS 方法：width()方法

4.6 内外边距和边框尺寸方法：

4.7 元素偏移方法：

5 DOM 节点操作

5.1 创建节点：

5.2 插入节点：

5.3 包裹节点：

5.4 节点操作：

6 表单选择器

6.1 表单选择器：

6.2 表单过滤器:

7 基础事件

7.1 绑定事件：

7.2 简写事件：

7.3 复合事件：

8 事件对象

8.1 事件对象：

8.2 冒泡和默认行为：

9 高级事件

9.1 模拟操作：

9.2 命名空间：

9.3 on、off 和one：

10 动画效果

10.1 显示、隐藏:【.show()、.hide()】

10.2 滑动、卷动:【.slideUp()、.slideDown()、.slideToggle()】

10.3 淡入、淡出:【.fadeIn()、.fadeOut()、.fadeToggle()】

10.4 自定义动画：【.animate()】

10.5 列队动画方法：【.queue()】

10.6 动画相关方法：【.stop()、.delay(1000)、.slideToggle()】

11 Ajax

11.1 Ajax 概述：

11.2 异步和同步：

11.3 load()方法：

11.4 $.get()和$.post()：

11.5 $.getScript()和$.getJSON()：

11.6 表单序列化：

12 Ajax进阶

12.1 加载请求：

你可能感兴趣的:(html,jquery,css样式,技术分享,JS编程脚本语言)