作者：刘鑫
出版社：清华大学出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
15天学会jQuery编程与实战试读：
前言
jQuery是高效、精简并且功能丰富的JavaScript工具库。jQuery提供的API易于使用且兼容众多浏览器，让HTML文档遍历和操作、事件处理、动画和Ajax操作等更加简单。如果你想学习Web开发或移动开发框架，那么非jQuery莫属。jQuery跨平台特性既减少了开发人员的工作量，又能让新手快速入门。
本书是一本从零起步的jQuery入门书，无论你是否有HTML\CSS\JavaScript基础，都能很好地上手学习，只要多练习、多写代码，看完本书就能够具备实际开发Web和移动Web项目的能力。
本书的编写特点● 本书无论是基础理论知识的介绍，还是综合案例应用的开发，都从实际应用角度出发，讲解细致、分析透彻。● 深入浅出、轻松易学。以示例为主线，激发读者的阅读兴趣，让读者能够真正学习到jQuery最实用、最前沿的技术。● 技术新颖、最新版本、与时俱进，较为全面地覆盖时下热门的jQuery技术。● 合理的章节安排，先把环境搭建好，然后从基础的jQuery操作HTML元素入手，进而学习jQuery的一些操作特性，如Ajax、动画、事件、CSS等，最后介绍jQuery Mobile在移动方面的开发基础。本书的内容安排
本书共分4篇14章，内容从jQuery基础到jQuery插件，再到jQuery Mobile。
第一篇 jQuery基础（第1章～第6章）
首先手把手教读者搭建jQuery的开发环境，然后掌握一些必要的JavaScript基础，进而学习jQuery操作HTML、jQuery操作CSS的快捷方式，最后把jQuery的核心特性——事件和动画利用示例的方式逐步演示。
第二篇 jQuery插件（第7章～第9章）
jQuery插件是jQuery之所以流行的最大特色。jQuery插件不只提供jQuery UI插件，因为其开源的特性，很多公司和个人也贡献了很多有意思且能提高开发效率的插件，如多媒体插件能帮助我们更好地开发绚丽多彩的网页和移动界面。
第三篇 jQuery移动开发（第10章～第11章）
移动网页开发已经普及，企业的网站需要支持更多平台，jQuery Mobile是跨平台方案的首选。本篇重点介绍jQuery移动开发的基础，通过一个完整的移动网页让读者学习jQuery Mobile的选择器、事件、移动开发、APP布局等。
第四篇 jQuery实战（第12章～第14章）
通过3个案例详细解析jQuery开发中的各种步骤、代码和技术，包括插件的使用、界面的设计、数据库的连接等。本书面对的读者● 网页设计入门者● 网页开发入门者● 网页美工人员● 移动设备网页开发者● 大、中专院校的学生● 各种IT培训学校的学生● 网站后台开发人员● 前端开发入门者● 网站建设与网页设计的相关威客兼职人员
本书由刘鑫编写，其他参与的人员有张泽娜、曹卉、林江闽、林龙、李阳、宋阳、王刚、杨超、张光泽、赵东、李玉莉、刘岩、李雷霆、王小辉。编 者2017年4月第一篇jQuery基础第1章欢迎进入移动开发的世界
当前，网页开发几乎所有项目都依赖于jQuery框架。jQuery是一个开源的JavaScript库，创始人是美国的John Resig，他于2006年1月创建了jQuery项目。jQuery库的目的是使网站开发人员用较少的代码完成更多功能（write less，do more）。jQuery具有极其简洁的语法，并且克服了不同浏览器平台的兼容性，极大地提高了程序员编写网站代码的效率。随着人们对jQuery的了解及其开源的特性，使用jQuery创建项目的人越来越多，还对jQuery进行了完善和优化。本章主要内容● 下载jQuery最新版本● 学习利用浏览器的开发工具调试jQuery● 了解jQuery库的核心方法$()● 学习创建一个带jQuery库的网页1.1 下载jQuery
为了能够使用jQuery，首先必须从jQuery官方网站下载最新的jQuery库。jQuery官方网站的网址如下： http://jquery.com
进入官方网站后，在页面右上角可以看到Download jQuery按钮，如图1.1所示。图1.1 下载jQuery库
jQuery是一个不断开发的JavaScript库，编写本书时最新版本已经到了3.x。jQuery 3.x不支持Internet Explorer(IE)6/7/8版本，如果读者的项目需要支持IE这些低版本，那么可以下载jQuery 1.11.x版本。
无论是jQuery 1.x还是jQuery 3.x，官方网站都提供3个下载文件，如图1.2所示。图1.2 jQuery不同版本的下载页面
可以看到，jQuery 3.1.1有3个可供下载的文件，分别是：● Production jQuery版 优化压缩后的版本，具有较小的体积（90K），主要在部署网站时使用。● Development jQuery版 未压缩版本，大小为261KB，一般在网站建设时使用这个版本，以便调试。● jQuery map文件 map文件能够被用来在某些现代浏览器上调试压缩后的jQuery文件，如Google Chrome。map文件可以增强调试的体验，对于使用jQuery的用户来说，一般不需要下载该文件。
右击文件，从弹出的菜单中选择“另存为”，即可将选中的jQuery文件保存起来（保存后的文件是jquery-3.1.1.js）。笔者建议调试时使用Development jQuery版，程序发布时使用Production jQuery版。
与自行编写的其他js文件一样，jQuery库实际上就是一个扩展JavaScript功能的外部js文件，因此引用jQuery库的方式与引用其他外部js文件相似。在网页上引用jQuery库的代码如下： 1.2 编写第一个包含jQuery库的程序
编写jQuery的工具很多，记事本、Notepad++、Dreamweaver都可以。为方便读者学习，这里先简单用记事本写一个HTML 5网页。【示例1-1】jquery01.html 01 02 03
04 05这个网页代码结构比较简单，估计学习过HTML的人都能看懂。代码中只有一个div，会在网页中显示一行文字“Hello jQuery，我来了”。
此时，我们要为div增加一个单击事件，首先要获取div，使用的JavaScript代码是： document.getElementById("hi")
如果使用jQuery，代码是： $("# hi")
这样进行比较后，是不是发现jQuery书写更简单。下面使用jQuery为div增加事件。（1）首先在第05行后面添加对jQuery库的引用。这里要注意js文件存放的位置，如果在当前目录中，就不需要../。../是指js文件在上一级目录中。 （2）在文档的加载事件中为div增加事件。
首先使用$("#hi")获取div，然后添加click事件，详细的代码在下一节分析。本示例的效果如图1.3所示。图1.3 第一个jQuery程序1.3 jQuery库的核心方法$()
在jQuery程序代码中，无论是页面元素的选择还是内置的功能方法，都是以一个美元符号“$”和一对圆括号开始。其实，“$()”方法是jQuery库中最重要、最核心的方法jQuery()的简写，主要用来选择页面元素或执行功能方法，代码如下： $(function() {}); //执行一个匿名方法 $('#box'); //执行ID元素选择 $('#box').css('color','red'); //执行功能方法
也可以写成如下形式： jQuery(function () {}); jQuery('#box'); jQuery('#box').css('color','red');
查看相关资料，可以发现jQuery()方法有7个重载，分别如下：（1）jQuery()
该方法返回一个空jQuery对象。在jQuery 1.4版本之前，该方法返回一个包含Document节点的对象；但在1.4版本之后，返回一个空jQuery对象。（2）jQuery(elements)
该方法实现将一个或多个DOM元素转化为jQuery对象或集合。（3）jQuery(callback)
该方法等价于jQuery(document).ready(callback)，主要用来实现绑定在DOM文档载入完成后执行的方法。（4）jQuery(expression,[context])
该方法接收一个包含jQuery选择器的字符串。在具体执行时，会使用传入的字符串匹配一个或多个元素。（5）jQuery(html)
该方法具体执行时，根据传入的html标志代码动态创建由jQuery对象封装的DOM元素。（6）jQuery(html,props)
该方法具体执行时，不仅会根据传入的html标志代码动态创建由jQuery对象封装的DOM元素，而且还会设置该DOM元素的属性、事件等。（7）jQuery(html,[ownerDocument])
该方法具体执行时，不仅会根据传入的html标志代码动态创建由jQuery对象封装的DOM元素，而且还会指定该DOM元素所在的文档。1.4 jQuery库的选择器
我们来看一段jQuery代码： $("#div1"); $("div"); $(".div1");
同样是用$()，括号里面可能有#、点，也可能只有HTML元素的名称，这类选择我们统称为jQuery选择器。
在jQuery中，选择器按照选择的元素类别可以分为如下4种：● 基本选择器 基于元素的id、CSS样式类、元素名称等使用基于CSS的选择器机制查找页面元素。● 层次选择器 通过DOM元素间的层次关系获取页面元素。● 过滤选择器：根据某类过滤规则进行元素的匹配。过滤选择器又可以细分为简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器和表单对象属性过滤选择器。● 表单选择器：可以在页面上快速定位某类表单对象。
选择器的使用比较简单，我们用表1-1展示所有选择器，并给出示例和说明。表1-1 jQuery库的选择器（续表）1.5 jQuery代码的注释
jQuery中的代码注释与JavaScript语言中的注释风格保持一致，有两种最常用的注释，分别为：● 单行注释 //...● 多行注释 /*...*/
下面为之前的程序添加注释。【示例1-2】jquery01.html 01 02 03
04 05第06行代码使用单行注释//，第08~10行使用多行注释/*...*/。1.6 调试jQuery程序
大部分复杂的工具都带有调试功能，如Dreamweaver、Visual Studio和Eclipse。如果我们用这些工具开发jQuery代码，调试起来难度不是很大，但很多人习惯用文本工具直接写代码，这就增加了调试的难度。目前，Chrome和Firefox浏览器都支持在浏览器中直接调试和修订。下面我们以Firefox为例学习如何调试。
Firefox浏览器专门提供了一个名为Firebug的插件进行jQuery库的程序调试。打开Firefox浏览器，单击菜单栏中的“主菜单”|“开发者”|“查看器”，或者使用快捷键F12都可以打开调试工具，如图1.4所示。图1.4 脚本调试界面
为了演示调试工具，通过浏览器打开jquery01.html。在该浏览器上按快捷键F12可以打开脚本调试界面，如图1.5所示。图1.5 脚本调试界面
在打开的工具中有一行菜单栏，包括“查看器”“调试器”“控制台”等。单击“调试器”菜单可以打开调试界面，如图1.6所示。图1.6 启用jQuery代码调试
启动jQuery代码调试后，在代码区域的窗口中单击第10行代码的行号10，即可在该行添加一个“断点”，如图1.7所示。如果行号前面有一个蓝色的箭头状图标，就说明断点添加成功。图1.7 添加断点
单击页面中的div，在“监视”窗口可以很方便地获取当前状态的一些变量或对象属性的信息，如图1.8所示。图1.8 监控视图
单击代码窗口工具栏中的“跳过”按钮或按快捷键F10，继续执行程序，页面会弹出如图1.9所示的对话框。图1.9 继续执行
从上面的执行结果可以发现，Firebug插件更方便开发人员调试jQuery代码。1.7 小结
目前流行的JavaScript库主要有jQuery、Node.js和AngularJS三种。很多初学者会犹豫到底要怎么学，先学哪一种后学哪一种，或者三种都要学。其实只要JavaScript学好了，其他都很简单，当然精通一门框架也很重要。目前最流行的框架库还是jQuery，相信读者选择本书时已经不会怀疑这一点了。本章只简单搭建了jQuery的开发环境，相信读者现在已经可以写出一个简单的包含jQuery的网页了。第2章学习jQuery必会的JavaScript基础
下载jQuery后，我们已经知道它是一个js文件，内容都由JavaScript（后文简称JS）编写，所以了解JS的语法和结构是读者学习jQuery的基石。本章主要内容● JS的数据类型● JS的方法和参数● JS的上下文● JS的回调函数2.1 JavaScript的数据类型
本节介绍JS中常见的5种数据类型，包括字符串、数值、布尔、对象和数组。1．字符串
字符串是JS中的一串字符，用英文的双引号或单引号括起来，可以嵌套，例如： "This is String" 'This is String' 'This is "really" a String' "This is 'really' a String"2．数值
数值类型用来表示JS中的数字，支持小数点，例如： 1235 12.45 0.353．布尔
布尔型在JS中只有true或flase两个值，用来表示真或假，通常用于条件判断。字符串或数字也可以出现布尔型结果，空字符为真（true），0为真（true），其他字符和数字均为假（false），例如： true // 结果为true false // 结果为false 0 // 结果为false 1 // 结果为true "" // 结果为false "hello" // 结果为true4．对象
学习过面向对象的读者要注意，这里的对象和面向对象编程的class有区别。这里的对象不需要任何关键词（如class）定义，例如： var emp = { name: "王晓", age: 20 };
对象只需要用{}括起来，每个属性中间用逗号间隔，属性和属性值中间用冒号间隔即可。对象的调用也比较直接，例如： emp.name // 结果是 王晓 emp.age // 结果是 20
我们还可以直接为对象中的某一个属性赋值，例如： emp.name = "刘文" emp.age = 215．数组
数组在JS中用来表示一组相关的数据，可以是字符串或数字。定义数组时，可以先赋值，也可以后赋值。数组用[]标记，其中的内容被称为数组元素，例如： var x = []; var y = [1, 3, 5,7, 9];
获取数组中的某个值时，用y[index]获取，index的值从0开始计算，也就是y数组的第1个值用y[0]获取。
对于已经赋值的数组，要获取数组中的每一个值，我们可以使用for循环，然后利用数组的lenth属性判断数组的长度（也就是有多少个数组元素），例如： var y = [1, 3, 5,7, 9]; for (var i = 0; i < y.length; i++) { alert(y[i]); //输出数组中的每个元素 }2.2 JavaScript的变量
前面我们已经多次使用var关键词，它在JS中用来定义变量。变量并不是永远有效的，它有一个使用范围。根据使用范围，我们一般把变量分为两种：● 全局变量● 局部变量
全局变量一般在JS代码开始处定义，这样它在所有JS代码中都可以被调用；局部变量一般在某个方法内部定义，这样它只能在方法内被调用，在方法外调用会报错，例如： var myVar = "global"; // 全局变量 function ( ) { var myVar = "local"; // 局部变量 document.write(myVar); // 输出局部变量 }2.3 JavaScript的方法和参数
前面提到局部变量时用到了function关键字，用来定义JS内的方法。方法的简单定义如下： function named(){ // 要执行的内容 }
function是定义方法的关键字；name是方法的名字，()内可以带参数；{}是方法体，里面书写要执行的代码。
上述方法是有名字的，但在jQuery中我们会看到很多这样的代码： $(document).ready(function(){ // 执行代码 });
这个function后面直接就是()，这类方法称为匿名方法，也是符合JS规范的定义方式。
方法可以有参数，参数的个数比较随机，可以有一个，也可以有多个，例如： function func(x){ console.log(typeof x, arguments.length); } func(); //返回 "undefined", 0 func(1); //返回 "number", 1 func("1", "2", "3"); //返回 "string", 3
arguments.length表示参数的长度，也就是有几个参数。定义时虽然只有一个x，但是实际可以输入任意类型、任意个数的参数。下面再来看一个例子： var test = function(a,b) { return a + b; }
方法也是变量，可以直接赋值给test，调用方式为： test(4,3)
返回结果是7。2.4 JavaScript的上下文Context
如果观察jQuery的代码，那么会发现有很多this关键字。This关键字代表的内容并不是固定的，有一个专业名词叫“上下文”。如果在div的操作内调用this，那么this指的是当前操作的div；如果在文档内调用this，那么this指的就是当前操作的文档。
例如： $(document).ready(function() { // 这里调用this是指 window.document }); $("div").click(function() { // 这里调用this是指 div });2.5 JavaScript的Callback
jQuery中使用了大量Callback，中文译为“回调函数”。回调函数是通过函数指针调用的函数，机制是把调用者与被调用者分开，调用者不用关心谁是被调用者。这个概念读起来很抽象。我们来看一段jQuery代码： $("button").click(function(){ $("p").hide(1000); });
这段代码的意思是单击按钮时实现p标签的隐藏。JavaScript的语句按照次序逐一执行，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。此时，Callback就可以发挥它的作用，例如： $(selector).hide(speed,callback);
这里的callback参数是一个函数，是在hide操作完成后被执行的函数。更改前面的代码： $("p").hide(1000,function(){ alert("The paragraph is now hidden"); });
这样就能保证hide动画在加载完后才执行alert语句。这就是callback的意义。
在jQuery事件处理机制中，我们会发现大量callback的痕迹，例如： $("body").click(function(event) { console.log("单击对象是: " + event.target); });
这个回调函数带一个参数event，用来处理操作的对象。还有回调函数用于返回值，例如： $("#myform").submit(function() { return false; });2.6 小结
JS是jQuery的组成语言，很多人在学习jQuery的同时也会研读JS的源代码。在这些代码中，我们会碰到this、callback、context、event、function等关键字。看懂这些关键字的意义并掌握它们的用法，是学习jQuery非常关键的地方。本章介绍了必须掌握的JS基础，希望对读者学习jQuery源代码有所帮助。第3章jQuery操作HTML
jQuery最大的特色就是可以非常方便地操作HTML文档中的各个标签元素，如获取某个元素、获取元素的内容、更改元素的内容等。操作HTML主要就是操作DOM。文档对象模型（Document Object Model，DOM）是W3C组织推荐的处理可扩展标志语言的标准编程接口，其实就是把HTML当作一个树形结构，操作DOM也可以说成操作DOM树。本章主要内容● 获取或设置元素的内容● 获取或设置元素的属性● 在页面中添加元素● 从页面中删除元素3.1 获取或设置元素的内容
jQuery中有3个方法用来获取HTML中元素的内容，分别是text()、html()和val()。● text()：设置或返回所选元素的文本内容。● html()：设置或返回所选元素的内容（包括HTML标记）。● val()：设置或返回表单字段的值。
text和html的明显区别是text只返回元素的文本内容，而html返回的是将HTML解析后的内容。val返回的是表单的内容。【示例3-1】get_set_content.html 01
02 03 有3个方法可以用于获取HTML元素的内容，分别是：
04 text()：设置或返回所选元素的文本内容
05 html()：设置或返回所选元素的内容（包括 HTML 标记）
06 val()：设置或返回表单字段的值
07
上面的代码在HTML中放置了一个id为test的p元素，在段落内部设置了一些HTML代码，在段落下面添加了一个textarea元素，用于显示文本的btn1和HTML的btn2。接下来对btn1编写代码，使其获取p元素内部的文本内容，并显示到textarea中。btn2将显示HTML内容到textarea元素。这两个按钮的事件处理实现如下： 01
在示例代码中，使用attr分别获取4个HTML元素的属性值，并保存到str字符串中。通过运行可以看到，不同属性值已经成功显示到了页面上。
设置和获取的方法是一样的。下面为上述案例添加一个按钮，在jQuery的页加载事件中通过如下代码设置DOM元素的属性： $("#btn_setAttr").click(function(e) { $("company_info").attr("title","公司的发展历程和发展经验");//设置title属性 $("#product_info").attr("href","http://www.microsoft.com"); //设置href属性 $("#culture_info").attr("id","btn_culture_info"); //设置id属性 $("#contactus").attr("title","欢迎联系我们来获取更多信息"); //设置联系人的title属性 });
可以看到，使用attr设置属性是使用“属性名称：属性值”匹配的语句，attr可以同时设置两个以上的属性值，代码如下： //同时设置两个属性的值 $("#company_info").attr({ "href":"http://www.microsoft.com/", "title":"欢迎进入微软公司网站" });
可以看到，通过属性名／值对的方式，示例同时为href和title两个属性设置了属性值。本示例效果如图3.3所示。图3.3 获取元素的属性值3.3 在页面中添加元素
表3-1列出了在HTML文档中添加元素需要用到的jQuery方法。表3-1 动态添加方法列表
append和appendTo、prepend和prependTo具有相同的描述，不同之处在于内容和选择器的位置。【示例3-3】insert_elements.html 01 06
07 08代码中构建了多个不同的按钮，其中每个按钮将对应不同的插入方法。为每个按钮关联的事件处理语句如下： 01
可以看到，每个按钮的事件处理代码中分别调用了不同的插入方法。通过这个示例可以看到各种不同的插入语句的使用方式和语法结构，如append和appendTo、prepend和prependTo就只是选择器不同。示例的运行效果如图3.4所示。图3.4 不同插入语句的示例效果3.4 从页面中删除元素
从网页上删除节点也是日常工作中经常遇到的一种操作，jQuery提供了两个可以用来从DOM元素树中移除节点的方法，分别是：● remove()方法 用来删除指定的DOM元素。它会将节点从DOM元素树中移除，但是会返回一个指向DOM元素的引用，因此并不是真正地将jQuery引用的元素对象删除，可以通过这个引用继续操作元素。● empty()方法 该方法将不会删除节点，只是清空节点中的内容，DOM元素依然保持在DOM元素树中。
remove()方法会将元素从DOM对象树中移除，但是不会把引用这些对象的jQuery对象删除，因此还是可以使用jQuery对象进行操作。而empty是将元素中的内容清空。接下来创建一个名为dynamic_remove.html的网页，插入一些HTML元素，然后分别演示使用remove和empty的效果。【示例3-4】dynamic_remove.html 01
02可以看到，在body区使用了3个div用来显示消息，另外两个div中放置了两个按钮，分别用来调用remove方法和empty方法。这两个按钮的事件处理代码如下： 01 02
Remove按钮内部调用了remove方法，尽管这个元素已经从DOM中移除了，不过jQuery仍然引用这个对象，因此可以将其再次添加到body中，使之经历删除又添加的过程。Empty只是清除DOM中的内容，重新向div中添加元素，单击两个按钮后的效果如图3.5所示。图3.5 移除元素后的效果3.5 通过for…of为页面中的元素循环指定ID
当我们为页面中添加多个同类元素时，可以通过循环的方式为元素指定ID或value，以方便后面的操作。
目前，jQuery 3支持两种循环：for和for…of。其中，for…of是新增的循环方式。当增加按钮时，需要为按钮指定value值，让其显示按钮的名字，这里通过两个例子演示。【示例3-5】for.html 01 02 03
04 0524 给所有input指定值 25
26在HTML页面设计一个div，用来放置新添加的3个按钮。按钮通过第10~12行的after()方法添加。第14~16行使用for循环逐个为新添加的按钮添加value值。因为使用了从0开始的循环，所以按钮的值依次是按钮0、按钮1和按钮2。本示例效果如图3.6所示。图3.6 添加按钮并赋值
上面的功能同样可以使用jQuery 3.X支持的for..of实现。【示例3-6】for-of.html 01
本示例的代码在一些有代码检查的编辑器中可能会提示第9行错误，如Dreamweaver的错误提示，如图3.7所示。因为旧的代码没有这种for的写作方式。但这不影响程序在浏览器中正常输出，输出效果与图3.6相同。图3.7 Dreamweaver错误提示3.6 利用Ajax实现网页的get请求
Ajax的全称是Asynchronous JavaScript and XML（异步的JavaScript和XML）。Ajax不是一种新的计算机语言，而是几种现有技术的全新组合和应用。利用Ajax可以实现浏览器与服务器端完美的数据通信，而这些数据通信无须基于网页重新加载。简单来说，Ajax就是XMLHttpRequest、JavaScript、XML、CSS和HTML技术的组合。
jQuery提供了对Ajax很好的支持，使用者无须关心Ajax的核心对象或实现机制，只需要使用$.get()或$.post()就能很方便地操作。
$.get()的语法为： $.get( url [, data ] [, success ] [, dataType ] )
data参数返回的可以是string字符串、json对象或JavaScript代码。下面演示一个例子，用户请求某个文件信息，服务器返回该文件内容。【示例3-7】get-ajax.html 01 02 03
04 05本示例的运行效果如图3.8所示。这里读者要注意，data.txt必须是UTF-8格式，和HTML格式一致。第11行指定dataType参数为text，不然本示例只能在IE下运行。
试读结束[说明：试读内容隐藏了图片]