作者：周敏
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
超实用的jQuery代码段试读：
前言
jQuery是网页设计中一柄锋利的宝剑，使用jQuery框架技术，可以快速实现页面上各种强大的效果。所以，要搭建网站和设计网页，就必须要学会jQuery技术。本书是一本讲述代码实践的书，为读者全面深入地讲解了针对各种页面元素和页面特效的jQuery技术。近350段代码给读者带来的不仅仅是网页开发速度的提升，还有如何创建高性能网页、如何处理jQuery特效、如何应对跨浏览器兼容、如何进行前端代码优化等时时刻刻困扰网站开发人员的问题解决方案。jQuery中的那些事儿
有些网站开发人员写了多年jQuery，依然在面对新问题时束手无策，这些技术难点具有普适性，读者能有多少了解呢？● 跨浏览器的兼容● 选择器的优化● 事件注册和事件注销● 动态修改CSS样式● 文字、图片的流行特效● 基于jQuery的插件开发● Callback回调机制● AJAX无刷新更新页面● IE老版本的兼容● jQuery Mobile移动端扩展
以上所有内容在本书的代码中都有讲解。除这些常见jQuery技术难点外，本书力求将最有用的jQuery代码段汇总在一起，提供各种解决实际问题的方案。jQuery学习方法
11个字就能帮助我们更好地学习jQuery。● 多看、多练：观摩成功的网站设计，分析并练习网站开发常用的
代码。● 多想、多问：思考功能实现的原理，提出自己的问题并通过各种
渠道寻找答案。● 多总结：记录前人已经探索出来的jQuery技巧，总结实战中碰到
的问题及解决方案。
只要真正能做到勤思考、勤动手、勤总结，jQuery学习定能一马平川。本书的编写特点
1．独特的jQuery切入点
与市面上其他jQuery书不同，本书从最常见的网页效果出发，直接应用jQuery代码段实现页面操作，全部是最实用的例子，全部是最透彻的分析！
2．内容丰富，知识全面
本书以网站开发的各个分类和使用场景作为基础，立体式全方位地解释各种场景下的jQuery代码段应用，实例丰富，与时俱进，并拥有良好的可扩展性、可复用性。
3．去中心化，分布式学习
本书的代码实例都是独立的，读者可以从中间开始学，也可以从头开始学。代码跨平台跨设备，可以在平板电脑上学，也可以在PC上学，如果可以，手机上写代码也是完全可能的。
4．jQuery原理与实践相结合
jQuery是一个强大的JavaScript库，无论读者具有什么编程背景，都可以使用它来优化改进自己的网站。本书的代码段基于简单易学的原理提供了丰富多样的操作特性，使得本书成为适用于各类客户端脚本编程的必备工具。
5．必用、实用
本书的实例从网页元素、HTML事件、CSS样式类、输入自动完成、图片加载、AJAX应用、jQuery Mobile移动端开发等方方面面内容出发，配合原理解释，呈现给读者一场代码的盛宴。
6．自发式学习
在学习代码前，先让读者练习实际上最基础却最容易做错的jQuery考题和面试题，激发读者学习斗志。本书摒弃传统的说教模式，每段代码都是单独的功能型页面，读者可以从全书的任意一点开始阅读。
本书的设计始于功能、终于代码，是网站开发人员的案头必备。本书的内容安排
本书共11章，各章节实现了不同类别的jQuery代码段。
第1章主要介绍了使用jQuery实现网页操作，包括jQuery DOM操作方法与案例、jQuery动画效果的实现、jQuery控件下iframe控件的使用案例、jQuery实现各种文本特效、jQuery控制页面布局的方法与jQuery与Flash组合案例等内容。
第2章主要介绍了使用jQuery操作HTML中DOM元素与属性的方法，包括使用jQuery创建、插入、删除DOM节点、使用jQuery对DOM节点进行属性操作与使用jQuery对DOM节点进行样式操作等内容。
第3章主要介绍了使用jQuery操作HTML事件的方法，包括jQuery事件触发器、jQuery绑定与反绑定事件监听器、jQuery事件的交互处理、jQuery的内置事件类型与jQuery页面载入完毕响应事件等内容。
第4章主要介绍了使用jQuery操作CSS样式类的方法，包括添加样式类、移除样式类、切换样式类、判断样式类、使用css()方法直接修改样式类等内容。
第5章主要介绍了使用jQuery实现用户输入自动完成的方法，包括使用远程数据源的自动完成、滚动条和组合框风格的自动完成、使用XML数据源的自动完成和使用多维数据的自动完成等内容。
第6章主要介绍了使用jQuery实现拖放功能的方法，包括控制拖放的范围、自动滚动的拖放效果、可拖放的排序列表框、在多个列表框之间拖放、可拖动改变列宽的表格、拖动选择表格的多行数据等内容。
第7章主要介绍了使用jQuery操作图形图像的方法，包括处理图片无法显示、解析JOSN文件、显示Flickr与Gloogle Picasaweb图片、动态调整图片的大小、自适应背景图像、随机与按顺序的淡入淡出图片等内容。
第8章主要介绍了使用jQuery AJAX的方法，包括加载网页并传递参数、无刷新删除网页记录、无刷新验证用户名和密码、无刷新提交表单、无刷新上传图片等内容。
第9章主要介绍了jQuery的常用算法，包括jQuery的选择器算法、在jQuery中对列表排序、查找或移除数组中特定的值、随机选择页面元素、序列化表单到JSON数据等内容。
第10章主要介绍了jQuery Mobile移动开发技巧，包括jQuery Mobile的多页面显示视图、jQuery Mobile的转场效果、不同导航栏的应用、可折叠列表框的应用、动态加载和切换页面、动态添加列表框的菜单等内容。
第11章主要介绍了一些无法分类的常用jQuery代码段，包括检查jQuery库是否加载、解决jQuery的版本冲突、使用CDN加载jQuery库、jQuery的Cookies管理、jQuery选择器和DOM操作的性能优化等内容。本书面对的读者● 网页设计入门者● 网站开发入门者● jQuery学习爱好者● 由JavaScript向jQuery转型的开发人员● 中小型企业网站开发者● 大中专院校的学生● 各种IT培训学校的学生● 网站后台开发人员（Java、PHP、ASP.NET）● 网站建设与网页设计的相关威客兼职人员本书的思维导图编者推荐
很多人都说jQuery很简单，看完文档就会用了！但是“会用”只是学会了jQuery的基本语法，你不知道什么情况下用哪段代码最优，你学会的也只限于jQuery，而网站开发技术是混合型的，一段代码背后有JavaScript技巧、浏览器原理、网页数据的交换方法、HTML的优化布局。本书就是一本最接地气的jQuery代码书，你学会的不仅仅是语法，还有JSON、XML、序列化、AJAX、闭包、Callback、链式操作、插件等贯穿在网站开发中的所有概念和技术。本书近350段代码都可以拿来即用，这些代码是最好的、最高效的、最实用的jQuery代码段。这是一本市场上绝无仅有的jQuery代码书，是一本值得拥有的jQuery实战书。本书的服务
笔者能力有限，如果写作过程中有什么疏漏，或者读者有什么疑问，可通过以下方式与我们沟通。● QQ群：296811675，作者在线答疑。● 扫描封底的微信二维码，时刻参与我们的图书互动和本书的考题
答案。● @博文视点Broadview的微博，了解我们发布的信息和各种前端
流行技术。● 博文视点官方网站http://www.broadview.com.cn/，下载本书所有
实例源代码。● Github，https://github.com/kingwjz/jquery-code-segment，了解代
码的实时更新和迭代过程，可以在每章代码下参与讨论，也可以
观看其他读者提出的问题，还可以随时随地下载代码。
很多读者在学习过程中苦于无法交流，小故障无法及时解决，加入我们的服务方阵，我们将为您提供终身免费的服务。
本书主要由周敏编写，王金柱审查并统一修订。参与编写的人员还有席新亮、赵荣娇、任建智、李勇、王铁民、张兴瑜、马新原、薛淑英、殷龙、谢郁、于健、周洋、王金柱、李兰英。序1jQuery必知必会
jQuery是一个兼容多浏览器的JavaScript框架，核心理念是“write less，do more”（写得更少、做得更多）。jQuery框架由美国人John Resig于2006年1月在纽约BarCamp发布的，一发布就吸引了来自世界各地的众多JavaScript高手加入，目前由Dave Methvin率领的团队进行开发。如今，jQuery已经成为最流行的JavaScript框架，在世界前10000个访问量最多的网站中，有超过55%的网站是使用jQuery开发的。
本书不是一本普通的jQuery书，它涉及脚本编程的技巧、脚本性能的优化、快速开发的原理。本书不仅仅是你的帮助文档，更是你的良师益友，拥有这些代码，你将会在前端工作中战无不胜！jQuery如何加载
在项目中加载jQuery的方式有很多，废话不多说，先来介绍4种加载方式。（1）页面加载完之前执行，与嵌入的JS加载方式一样：
(function($){
alert('start');
})(jQuery);（2）页面加载后执行：
$(document).ready(function(){
alert('jquery ready');
});（3）页面加载后执行：
$(function(){
alert('jquery onload');
});（4）页面加载后执行：
jQuery(function($){
alert('jQuery ready');
});
以上这几种加载方式相较于传统的window.onload方式来讲，只需要加载所有的DOM结构，在浏览器把所有的HTML元素（加载外部图片和资源）放入DOM树之前就可以执行JS效果。最短最实用的30段jQuery代码
使用jQuery框架的最大优势就在于，它可以使用很短的代码实现很强大的功能。下面将会给读者展示30个最短的jQuery代码段，这些代码都是真正有实用价值的代码，其中有一些代码段是从jQuery-1.4.2版本才开始支持的做法，这点需要读者特别注意！（1）修改jQuery默认编码（例如默认UTF-8改为GB2312）：
$.ajaxSetup({
ajaxSettings:{contentType:"application/x-www-form-urlencoded;
chartset=GB2312"}
});（2）从一个未排序的集合中找出某个元素的索引号：
$("ul>li").click(function(){
var index=$(this).prevAll().length; // prevAll([expr]):
查找当前元素之前所有的同辈元素
});（3）检测各种浏览器：
检测Safari：(if($.browser.safari))
检测IE 6及之后版本：(if($.browser.msie&&$.browser.version>6))
检测IE 6及之前版本：(if($.browser.msie&&$.browser.version<=6))
检测FireFox 2及之后版本：(if($.browser.mozilla&&$.browser.
version>='1.8'))（4）注册和禁用jQuery全局事件：
//jQuery注册AJAX全局事件ajaxStart、ajaxStop
$(document).ajaxStart(function(){
$("#background,#progressBar").show();
}).ajaxStop(function(){
$("#background,#progressBar").hide();
});（5）使用.siblings()来选择同辈元素：
$('#nav li').click(function(){
$(this).addClass('active').siblings().removeClass('active');
});（6）选中页面上的所有复选框：
var tog=false;
$('a').click(function(){
$("input[type=checkbox]").attr("checked",!tog);
tog=!tog;
});（7）解决jQuery与prototype共存时，$全局变量冲突问题：
注意：一定要先引入prototype.js，再引入jquery.js。（8）设置IE特有的功能：
if($.browser.msie){
// IE下要做的工作
}（9）使用jQuery来切换样式表：
// 找出希望切换的媒体类型（media-type），
然后把href设置成新的样式表
$('link[media='screen']').attr('href','alternative.css');（10）在创建元素时，使用对象字面量（literal）来定义属性：
var e=$("",{href:"#",class:"a-class another-class",title:"..."});（11）查找已经被选中的option元素：
$('#someElement').find('option:selected');（12）判断元素是否绑定了事件：
// jQuery event判断元素上是否绑定了事件，
此方法只适用于用jQuery绑定的事件
var $events=$("#foo").data("events");
if($events&&$events["click"]){
//你自己的代码
}（13）禁用右键单击上下文菜单：
$(document).bind('contextmenu',function(e){
return false;
});（14）验证某个元素是否为空：
if(!$('#keks').html()){
//什么都没有找到
}（15）使用jQuery来代替一个元素：
$('#id-div').replaceWith('id-replace');（16）隐藏一个包含了某个文本值的元素：
$("p.value:contains(id-text-value')").hide();（17）检查某个元素是否存在：
if($('#someDiv').length){
// 元素存在……
}（18）把已创建的元素动态地添加到DOM中：
var newDiv=$('
');newDiv.attr('id','myNewDiv').appendTo('body');（19）在jQuery中克隆一个元素：
var id-cloned=$('#somediv').clone();（20）使用closest来取得父元素：
$('#searchBox').closest('div');（21）判断某个元素是否为空：
if($('#keks').is(":empty")){
//什么都没有找到，这里用的empty，比较第14段代码。
}（22）替换字符串中的词：
var el=$('#id');
el.html(el.html().replace(/word/ig,''));（23）添加html到元素中：
$('#IaI').append('sometext');（24）判断图像是否已经被完全加载：
$('#id-Image').attr('src','image.jpg').load(function(){
alert('This Image Has Been Loaded');
});（25）基于一些输入文本来过滤一个元素列表：
$('.someClass').filter(function(){
return $(this).attr('value')==$('input#someld').val();
})（26）测试某个元素是否可见：
if($(element).is(':visible')){
//该元素是可见的
}（27）把函数绑定到事件上：
$('#foo').click(function(event){
alert('User clicked on "foo."');
});（28）让cookie过期：
var date=new Date();
date.setTime(date.getTime()+(x*60*1000));
$.cookie('example','foo',{expires:date});（29）使用多个属性来进行过滤：
var elements=$('#someid input[type=sometype][value=somevalue]')
.get();（30）创建嵌套的过滤器：
.filter(":not(:has(.selected))")本书浏览器约定
本书涉及的浏览器测试基准如图1所示，可以看到内核和外壳的占有情况，内环为内核，外环为外壳，这也是接下来要提到的浏览器同类项的数据基础。图1 浏览器基准
不同的浏览器可能会采用相同的内核（渲染引擎）。一方面，外壳实现的差异性会影响整个网站功能，这也是为什么内核无法完全代表所有浏览器的原因。另一方面，某些浏览器具有相同的血统，是可以归为同一类的，同一类中，如果其中一个测试通过，那么其他与之同类的浏览器也基本上可以通过测试。图1根据相同的内核或对W3C标准有类似的支持程度将浏览器进行归类。之所以这样做，是因为测试基准除了要基本反映浏览器的市场占有率，还要考虑到开发测试成本。因此，测试基准中的浏览器应当具有典型代表性。
浏览器的不同版本的内核也不一样，因此通常要针对不同版本的浏览器做测试，开发者要了解内核对标准的支持，比如IE的渲染引擎Trident的不同版本差别较大，因此IE需要测试IE 6~10的所有版本，然而由于Firefox和Chrome升级覆盖面广，因此基准中只保留其最新版本。
本书涉及的代码会根据需要，对不同浏览器进行有针对性的测试。序2你绝对不可能全部做对的jQuery题
不用找百度，试试你是否能及格？如果不用百度，你全做对了，相信本书不是你的菜！如果你的正确率不到58%，每天坚持看本书，会带来意想不到的技术飞跃！
1．下面哪种不是jQuery的选择器？（单选）A．基本选择器B．后代选择器C．类选择器D．进一步选择器
2．绑定一个DOM加载完成后要执行的函数，下面哪个是正确的？（单选）A．jQuery(expression,[context])B．jQuery(html,[ownerDocument])C．jQuery(callback)D．jQuery(elements)
3．下面哪一个是追加内容到指定元素的末尾？（单选）A．insertAfter()B．append()C．appendTo()D．after()
4．下面哪一个不是jQuery对象可访问的函数？（单选）A．each(callback)B．size()C．index(subject)D．index()
5．jQuery访问对象中的size()函数的返回值和jQuery对象的_______属性一样。
6．jQuery中$(this).get(0)的写法和__________是等价的。
7．想要找到表单中的hidden元素，下面哪个是正确的？（单选）A．visibleB．hiddenC．visible()D．hidden()
8．如果需要匹配包含文本的元素，用下面哪种函数来实现？（单选）A．text()B．contains()C．input()D．attr(name)
9．现有一个表格，如果想要匹配表格的偶数行，用________实现，奇数行用_______实现。
10．如果想要找到一个表格的指定行数的元素，可以使用下面哪个函数？（单选）A．text()B．get()C．eq()D．contents()
11．在一个表单里，想要找到指定元素的第一个元素用_________实现，第二个元素用_________实现。
12．下面哪种不属于jQuery的筛选？（单选）A．过滤B．自动C．查找D．串联
13．下面哪几种属于jQuery文档处理？（多选）A．包裹B．替换C．删除D．内部和外部插入
14．如果想在一个指定的元素前添加内容，下面哪个可以实现？（单选）A．append(content)B．appendTo(content)C．insertAfter(content)D．after(content)
15．在jQuery中，用一个表达式来检查当前选择的元素集合，使用______来实现，如果这个表达式失效，则返回___________值。
16．在jQuery中，如果想从DOM中删除所有匹配的元素，下面哪一个正确？（单选）A．delete()B．empty()C．remove()D．removeAll()
17．在jQuery中，想要给第一个指定的元素添加样式，下面哪一个正确？（单选）A．firstB．eq(1)C．css(name)D．css(name,value)
18．在编写页面时，如果想要获取指定元素在当前窗口的相对偏移，用_________来实现，该方法的返回值有两个属性，分别是________和__________。
19．在jQuery中，如果想要获取当前窗口的宽度值，下面哪个可以实现？（单选）A．width()B．width(val)C．widthD．innerWidth()
20．在一个表单中，如果将所有的div元素都设置为绿色，实现代码是________。
21．为每个元素的指定事件（如click）绑定一个事件处理函数，下面哪个可以实现？（单选）A．trigger(type)B．bind(type)C．one(type)D．bind
22．在jQuery中，鼠标移动到一个指定的元素上时会触发指定的方法，实现该操作的是________。
23．下面哪几个不属于jQuery的事件处理？（多选）A．bind(type)B．click()C．change()D．one(type)
24．在一个表单中，如果想给输入框添加一个输入验证，哪个事件可以实现？（单选）A．hover(over,out)B．keypress(fn)C．change()D．change(fn)
25．当一个文本框中的内容被选中时，想要执行指定的方法，使用哪个事件？（单选）A．click(fn)B．change(fn)C．select(fn)D．bind(fn)
26．在jQuery中，想让一个元素隐藏，用________实现，显示隐藏的元素用_________实现。
27．在一个表单中，用600毫秒缓慢地将段落滑上，用_________来实现。
28．如果想要自定义一个动画，用__________函数来实现。
29．想要实现通过远程http-get请求载入信息功能的是哪个事件？（单选）A．$.ajax()B．load(url)C．$.get(url)D．$.getScript(url)
30．下面不属于AJAX事件的是哪个？（单选）A．ajaxComplete(callback)B．ajaxSuccess(callback)C．$.post(url)D．ajaxSend(callback)
31．彻底将jQuery变量还原，可以使用__________函数实现。
32．在一个表单中，查找所有选中的input元素，可以用jQuery中的___________来实现。
33．下面哪几种是jQuery中表单的对象属性？（多选）A．:checkedB．:enabledC．:hiddenD．:selectedE．:fileF．:disabled
34．在jQuery中如果将一个“名/值”形式的对象设置为所有指定元素的属性，可以用__________实现。
35．在jQuery中指定一个类，如果存在就执行删除功能，如果不存在就执行添加功能，下面哪一个可以直接完成该功能？（单选）A．removeClass()B．deleteClass()C．toggleClass(class)D．addClass()
36．在jQuery中想要找到所有元素的同辈元素，下面哪一个可以实现？（单选）A．eq(index)B．find(expr)C．siblings([expr])D．next()
37．请选择表达式[typeof null, null instanceof Object]的运算结果。（单选）A．["object", false]B．[null, false]C．["object", true]D．other
38．请选择以下表达式的运算结果：（单选）
var val = 'smtg';
console.log('Value is '+(val==='smtg')?'Something':'Nothing');A．Value is SomethingB．Value is NothingC．NaND．other
39. 请选择以下表达式的运算结果：（单选）
var name = 'World!';
(function() {
if (typeof name === 'undefined') {
var name = 'Jack';
console.log('Goodbye ' + name);
}else{
console.log('Hello ' + name);
}
})();A．Goodbye JackB．Hello JackC．Hello undefinedD．Hello World
40. 请选择以下表达式的运算结果：（单选）
var END = Math.pow(2, 53);
var START = END - 100;
var count = 0;
for (var i = START; i <= END; i++) {
count++;
}
console.log(count);A．0B．100C．101D．other
41. 请选择以下表达式的运算结果：（单选）
var ary = [0,1,2];
ary[10] = 10;
ary.filter(function(x){ return x===undefined;});A．[undefined×7]B．[0,1,2,10]C．[]D．[undefined]
42. 请选择以下表达式的运算结果：（单选）
var two=0.2
var one=0.1
var eight=0.8
var six=0.6
[two-one==one,eight-six==two]A．[true,true]B．[false,false]C．[true,false]D．other
43. 请选择以下表达式的运算结果：（单选）
parselnt(3, 8);
parselnt(3, 2);
parselnt(3, 0);A．3, 3, 3B．3, 3, NaNC．3, NaN, NaND．other
44. 请选择以下表达式的运算结果：（单选）
Array.isArray(Array.prototype);A．trueB．falseC．errorD．other
45. 请选择以下表达式的运算结果：（单选）
var a = [0];
if([0]){
console.log(a==true);
} else {
console.log("wut");
}A．trueB．falseC．"wut"D．other
46. 请选择以下表达式的运算结果：（单选）
[]==[]A．trueB．falseC．errorD．other
47. 请选择以下表达式的运算结果：（单选）
'5' + 3
'5' - 3A．"53",2B．8, 2C．errorD．other
48. 请选择以下表达式的运算结果：（单选）
1 + - + + + - + 1A．2B．1C．errorD．other
49. 请选择以下表达式的运算结果：（单选）
var ary = Array(3);
ary[0]=2
ary.map(function(elem){return '1';});A．[2, 1, 1]B．["1", "1", "1"]C．[2, "1", "1"]D．other
50. 请选择以下表达式的运算结果：（单选）
var a = 111111111111111110000,
b = 1111;
a + b;A．111111111111111111111B．111111111111111110000C．NaND．Infinity
是不是已经迫不及待想知道这些题目的答案了？（1） 添加微信公众号“broadview_com”，或扫描封底的微
信二维码，回复关键字“jQuery题答案”，对对你的正确率吧！（2） 分享你的正确率，邀请小伙伴们都来做题，看看谁才
是隐藏在民间的高手！（3） 正确率超过80%的小伙伴们可以@博文视点Broadview
的微博，我们会与全球读者一起分享你的得分超能力！序3最流行的前端面试题
面试题要考的一般不是多么高精尖的问题，在所有世界500强和中国100强的互联网科技公司中，绝大多数的考题都是基础技术类知识，原因是他们招聘的不是经理，而是具体干活的，所以要考察的就是基本功！例如，关于jQuery的基本功有访问和操作DOM元素的函数、控制页面样式、对页面事件的处理等前端开发技术基础。面试题同样不做解释，读者可自己测试！
1．请简要说明jQuery框架的显著特点。
2．eval是做什么的？
3．说出null与undefined的区别。
4．谈谈对this对象的理解。
5．use strict是什么意思？
6．简述new操作符的功能。
7．描述typeof关键字的功能。
8．描述instanceof关键字的功能。
9．简述hasOwnProperty函数的功能。
10．简述一下isPrototypeOf函数的功能。
11．谈谈对JSON的了解。
12．Ajax是什么？
13．同步请求和异步请求的区别是什么？
14．jQuery如何解决跨域问题？
15．异步加载的方式有哪些？
16．如何编写高性能的jQuery代码？
17．jQuery与jQuery UI有啥区别？
18．描述基于class的选择器与基于id选择器在性能上的区别。
19．jQuery链式调用的最大优点是什么？
20．一句话说明内存泄漏的定义。
21．哪些操作会造成内存泄漏？
22．描述垃圾回收器的功能。
23．document.write和innerHTML的区别是什么？
24．jQuery框架的源码看过吗？能不能简单说一下它的实现原理。
25．jQuery中如何将对象转化为JSON字符串，然后再转化回来？
26．描述一下.get()、[]和.eq()函数的区别。
27．描述一下context的概念。
28．描述一下.delegate()和.live()函数的区别。
29．描述一下.attr()和.prop()函数的区别。
30．jQuery中的load()函数一般怎么用？
这里没有标准答案，你可能已经有了自己的答案！添加微信公众号“broadview_com”，回复关键字“jQuery面试题答案”，看看笔者给的参考答案和你自己的答案有什么不同。第1章jQuery操作网页
jQuery框架是一个简洁快速的JavaScript脚本库，它可以在网页上简单快捷地操作文档、控件和元素，实现页面特效、动画等功能。使用jQuery框架进行设计会改变传统JavaScript代码的编写方式，极大地提高编程效率。
本章主要介绍如何使用jQuery实现网页操作，包括以下内容：● jQuery DOM的操作方法。● jQuery动画效果的实现。● jQuery控件下iframe的使用。● jQuery实现各种文本特效。● jQuery控制页面布局的方法。● jQuery与Flash组合应用。1.1 显示或隐藏网页内容
用户使用在线支付平台选择具体付款银行时，会发现银行数量较多而无法全部显示出来，这时网页会通过一个类似“展开全部”或者“显示更多”的功能按钮，让用户浏览到全部银行，如图1.1和图1.2所示。此功能使用jQuery来操作非常简单，仅仅需要2~3个函数就可以完美地实现。图1.1 jQuery“显示”网页内容操图1.2 jQuery“隐藏”网页内容操作作
本例主要代码如下：
01 /* showhide.html */
02
03
04
05
06
07
08
20
21
22
超实用的jQuery代码段 -
jQuery实现显示和隐藏网页内容功能
23
24
25
26 /* 省略部分代码，此处可以添加用户代码 */
27
28
jQuery代码本质上也是属于JavaScript的脚本范畴。一般来讲，使用JavaScript代码的方法主要有以下两种：● 第1种方法可以将JavaScript代码段直接嵌入到HTML/JSP/PHP等
页面文件中使用。● 第2种方法可以将JavaScript代码写在单独的后缀名为.js的脚本文
件中，然后在HTML/JSP/PHP等页面文件中引用.js文件。
对于第2种方法，用户首先将标准的jQuery框架类库文件在HTML/JSP/PHP等页面文件的
头部引入，然后就可以在页面内使用jQuery框架的“显示”和“隐藏”功能了。第10~13行的“显示”功能通过jQuery框架的show()函数来实现，该函数用于显示HTML页面中的元素，其语法如下：
$(selector).show(speed,caIIback);
其中speed参数用来设置显示的速度，可取值为slow、fast或毫秒；callback参数用来设置动作完成后所执行的函数。
第14~17行的“隐藏”功能通过jQuery框架的hide()函数来实现，它用于隐藏HTML页面的元素，其语法如下：
$(selector).hide(speed,caIIback);
其中speed参数与callback参数的用法与show()函数的参数是相同的。
提示：一般开发复杂页面时（例如目前流行的Web 2.0网站），建议采用第2种方法，这样在页面文件增多时，可以引用同一个JavaScript脚本文件，同时也使得代码可读性和文件规范性更好。1.2 切换页面的显示或隐藏
上一个jQuery代码段向读者演示了通过show()和hide()函数实现“显示”和“隐藏”页面元素的功能。其实，使用jQuery框架的toggle()函数也能实现同样的效果。toggle()函数用于切换页面元素的可见状态，如果被选择元素处于可见状态，则隐藏这些元素，如果被选择元素处于隐藏状态，则显示这些元素。
本例代码如下：
01 /* toggIe.html */
02
14
15
超实用的jQuery代码段 -
jQuery实现页面淡入淡出操作
16 /* 省略部分代码，此处可以添加用户代码 */
17
页面淡入淡出 --- fadeIn()与fadeOut()
函数
18
19
20
21
这里js控制的两个数值:
22
1.第1个为淡入时间;
23
2.第2个为淡出时间;
24
25 /* 省略部分代码，此处可以添加用户代码 */
26
第04~07行实现的“淡出”效果通过fadeOut()函数实现，该函数使用淡出效果来隐藏被选择的页面元素，其语法如下：
$(selector).fadeOut(speed,callback);
第08~11行实现的“淡入”效果通过fadeIn()函数实现，该函数使用淡入效果来显示被选择的页面元素，其语法如下：
$(selector).fadeIn(speed,callback);
提示：使用fadeIn()函数实现页面元素“淡入”效果时，如果该元素已经显示，则该效果不产生任何变化，除非规定了callback函数。同理，使用fadeOut()函数实现页面元素“淡出”效果时，如果元素已经隐藏，则该效果不产生任何变化，除非规定了callback函数。
注意：fadeIn()函数适用于通过jQuery框架隐藏的页面元素或在CSS中声明为“display:none”的页面元素，但该函数不适用于在CSS中声明为“visibility:hidden”的页面元素。1.4 切换页面的淡入淡出
上一个jQuery代码段向读者演示了通过fadeIn()和fadeOut()函数实现“淡入”和“淡出”页面元素的效果。其实，使用fadeToggle()函数也能实现同样的效果，下面看具体的代码：
01 /* fadeToggle.html */
02
11
12
超实用的jQuery代码段 -
jQuery切换页面淡入淡出操作
13
14
页面淡入淡出 --- fadeToggle()与fadeTo()
函数
15
17
这里js控制的两个数值:
18
1.第1个为淡入时间;
19
2.第2个为淡出时间;
20
21 /* 省略部分代码，此处可以添加用户代码 */
22
第05~06行中的fadeToggle()函数可以在fadeIn()函数与fadeOut()函数之间进行切换。如果元素已淡出，则fadeToggle()函数会向元素添加淡入效果；如果元素已淡入，则fadeToggle()函数会向元素添加淡出效果。第07行中的fadeTo()函数允许为渐变指定不透明度（值介于0与1之间），其语法如下：
语法：$(selector).fadeTo(speed,opacity,callback);
其中speed参数用来设置显示的速度，可取值为slow、fast或毫秒；opacity参数用于指定不透明度（值介于0与1之间）；callback参数用来设置fading效果完成后所执行的函数。
提示：目前，使用opacity参数实现的半透明效果在网页开发中应用十分广泛，尤其在层与层相互叠加时美化效果十分明显，其取值在[0，1]闭区间内，越接近数值0透明度越高，越接近数值1不透明度越高，当取值等于1时则完全不透明。1.5 页面的滑动隐藏
越来越多的人习惯用手机浏览页面，而手机上可以显示的内容很少，如果我们要做响应式页面，就要考虑用户体验，不能堆积内容。在很多移动网页上，用户会发现页面初始时只有标题栏，标题栏上除了窗口名称，还会提供类似“展开窗口”或“收起窗口”的功能按钮。与页面“显示”和“隐藏”效果不同的是，单击功能按钮时，窗口是慢慢向下或向上以滑动的方式展现给用户的，如图1.4和图1.5所示。图1.4 窗口“滑动”关闭状态图1.5 窗口“滑动”打开状态
本例主要代码如下：
01 /* slideUpDown.html */
02
14
15
超实用的jQuery代码段 -
jQuery页面滑动操作
16
17
18
jQuery 效果 - 页面滑动操作
19
jQuery slideUp()函数/slideDown()函数<
/h3>
20
21
22
23 /* 省略部分代码，此处可以添加用户代码 */
24
第04~07行中的“滑动隐藏”效果通过slideUp()函数实现，该函数使用滑动效果隐藏被选择元素，前提是该元素已处于显示状态。第08~11行中的“滑动显示”效果通过slideDown()函数实现，它使用滑动效果显示隐藏着的被选择元素。
试读结束[说明：试读内容隐藏了图片]