web前端 - Jquery
2013-11-13 22页 pdf 775KB 50阅读
is_289902
暂无简介
举报
web前端 - Jquery
WEB 前端 – JQuery
1 / 22
本教程参考：《锋利的 jquery》
WEB 前端-JQuery
2009.4
Louis
WEB 前端 – JQuery
2 / 22
本教程参考：《锋利的 jquery》
目录
第一章 J...
WEB 前端 – JQuery
1 / 22
本教程参考：《锋利的 jquery》
WEB 前端-JQuery
2009.4
Louis
WEB 前端 – JQuery
2 / 22
本教程参考：《锋利的 jquery》
目录
第一章 JQuery 概述 ............................................................................... 3
第二章 JQuery 选择器 ......................................................................... 10
第三章 JQuery 中的 DOM 操作 ........................................................... 15
第四章 JQuery 中的事件和动画 .......................................................... 19
第五章 JQuery 对单、表格的操作 .................................................. 21
第六章 JQuery 与 Ajax 的应用 .............................. 错误！未定义书签。
第七章 插件的使用和写法 ................................... 错误！未定义书签。
第八章 实例 ......................................................................................... 22
WEB 前端 – JQuery
3 / 22
本教程参考：《锋利的 jquery》
第一章 JQuery 概述
1.1 JQuery 概述
随着 Web2.0 的兴起，JavaScript 越来越受到重视。
但 Javascript 存在的三个弊端：复杂的文档对象模型（DOM），不一致的浏览器实现，缺乏便捷的开发、调
试工具
因此一系列 JavaScript 库也蓬勃发展起来。从早期的 Prototype、Dojo 到 2006 年的 jQuery，再到 2007 年 Ext
JS。可以发现，互联网正在掀起一场 JavaScript 风暴。在这场风暴中，jQuery 以其独特优雅的姿态，始终处
于这场风暴的中心，受到越来越多的人的追捧
1.2 JS 框架对比
1.2.1 Prototype
Prototype 算是最早成型的 JavaScript 库之一，它对 JavaScript 的内置对象（如 String 对象、Array 对象等）
做了大量的扩展。现在还有很多项目使用它，但这很大程度上是由于以前项目用了，现在不得不继续沿用。
它可以看做是把很多好的、有用的 JavaScript 的方法组合在一起而形成的 JavaScript 库，你甚至可以在你需
要的时候随时将其中的几段代码抽出来放进自己的脚本里。但也正是由于它成型年代早，从整体上对于面
向对象的编程思想把握并不是很到位，导致了结构的松散。不过现在它也在慢慢改进。
1.2.2 Dojo
Dojo 强大之处在于它提供了很多其它 JavaScript 库所没有提供的功能。比如离线存储的 API、生成图标的
组件、基于 SVG/VML 的矢量图形库和 Comet 支持等等。它是一款非常适合企业级应用的 JavaScript 库，
WEB 前端 – JQuery
4 / 22
本教程参考：《锋利的 jquery》
并且受到了如 IBM、SUN 和 BEA 等一些大公司的支持。但它的缺点也是很显著的：学习曲线陡，文档不
齐全，最要命的就是 API 不稳定，每次升级都可能导致已有的程序失效。但从它的 1.0.0 版出现以后，看起
来情况有所好转，是一个很有发展潜力的库。
1.2.3 YUI
YUI（Yahoo！UI，The Yahoo! User Interface Library），是由 Yahoo 公司打造出来的一套完备的、扩展性良
好的富交互网页程序工具集。它封装了一系列比较丰富的功能，如 DOM 操作和 Ajax 应用等，同时它还包
括了几个核心的 CSS 文件。该库本身文档极其完备，代码编写也非常的规范，以至于很少看到第三方撰写
相应的文章。
1.2.4 Ext JS
Ext JS 也常简称为 Ext，原本是对 YUI 的一个扩展，主要是用于创建前端用户界面，它提供了极其丰富的
组件。如今已经发展到可以利用包括 jQuery 在内的多种 JavaScript 框架作为基础库，而 Ext 作为界面的扩
展库来使用。它可以用来开发富有华丽外观的富客户端应用，能使 B/S 应用更加具有活力。但由于侧重于
界面，所以本身比较臃肿，不压缩的话文件上兆(MB)，所以使用之前请先权衡利弊。另外，需要注意的是，
Ext 并非完全免费的，如果用于商业用途的话，是要付费获得授权许可的。
1.2.5 MooTools
Mootools 是一套轻量、简洁、模块化和面向对象的 JavaScript 框架。其语法几乎跟 Prototype 一样，但却提
供了更为强大的功能、更好的扩展性和兼容性。其模块化思想非常优秀，核心代码只有 8K。用到什么模块
可即时导入，即使是完整版也不超过 160K。还有它完全彻底的面向对象的编程思想，语法简洁直观，文档
完善，是一个非常不错的 JavaScript 库。
1.2.6 JQuery
jQuery 同样也是一个轻量级的库，它拥有强大的选择器，出色的 DOM 操作，可靠的事件处理、完善的兼
容性和链式操作等等功能，这些优点吸引了一批批的 JavaScript 开发者去学习它、研究它。自从 jQuery 诞
生那天起，关注度就一直在稳步上升，jQuery 已经逐渐从其它 JavaScript 库中脱颖而出，成为 Web 开发
人员的最佳选择。
WEB 前端 – JQuery
5 / 22
本教程参考：《锋利的 jquery》
1.3 JQuery 优势
jQuery 强调的理念是写的少，做的多(write less, do more)。其独特的选择器、链式的 DOM 操作、事件处理
机制和封装完善的 Ajax 都是其它 JavaScript 库望尘莫及的。总的来说，jQuery 有如下优势：
1.3.1 轻量级
jQuery非常轻巧，采用Dean Edwards编写的Packer(http://dean.edwards.name/packer/)压缩后，大小不到30KB。
如果使用 Min 版并且在服务器端启用 Gzip 压缩后，甚至只有 18KB 的大小！
1.3.2 强大选择器
jQuery 可以让开发者使用从 CSS 1 到 CSS 3 几乎所有的选择器，以及 jQuery 独创的高级而复杂的选择器。
另外你还可以加入插件使其支持 XPath 选择器，甚至可以编写属于自己的选择器。由于 jQuery 支持选择器
这一特性，所以有一定 CSS 经验的开发人员可以很容易地切入到 jQuery 的学习中来。
1.3.3 出色的 DOM 操作
jQuery 封装了大量常用 DOM 操作，使你在编写 DOM 操作相关程序的时候能够得心应手，它优雅的完成
各种原本非常复杂的操作，让 JavaScript 新手也能写出出色的程序。
1.3.4 可靠的事件处理机制
jQuery 的事件处理机制吸收了 JavaScript 专家 Dean Edwards 编写的事件处理函数的精华，使得 jQuery 在处
WEB 前端 – JQuery
6 / 22
本教程参考：《锋利的 jquery》
理事件绑定的时候相当的可靠。在预留退路(graceful degradation)、循序渐进以及非入侵式(Unobtrusive)编程
思想方面，jQuery 也做的非常不错。
1.3.5 完善的 Ajax
jQuery 将所有的 Ajax 操作封装到一个函数$.ajax 里，当我们使用 Ajax 的时候则可以专心处理业务逻辑而无
需关心复杂的浏览器兼容性和 XMLHttpRequest 对象的创建和使用的问题。
1.3.6 出色的浏览器兼容性
作为一个流行的 JavaScript 库，浏览器的兼容性自然是必须具备的条件之一。jQuery 能够在 IE 6.0+、FF 2+、
Safari 2.0+和 Opera 9.0+下正常运行，它同时修复了一些浏览器之间的差异，使你不用在开展项目前忙于建
立一个浏览器兼容库而焦头烂额。
1.3.7 链式操作方式
jQuery 中最有特色的莫过于它的链式操作方式--即对发生在同一个 jQuery 对象上的一组动作，可直接连写
而无需重复获取对象。这一点使 jQuery 的代码无比优雅。
1.3.8 隐式迭代
当我们用 jQuery 找到带有".myClass"类的全部元素，然后隐藏它们时，不需要循环遍历每一个返回的元素。
相反，jQuery 里的方法都被成自动操作对象集合，而不是单独的对象，使得大量的循环结构变得不再
必要，从而大幅地减少代码量。
1.3.9 不污染顶级变量
jQuery 只建立一个名为 jQuery 的对象，其所有的函数方法都在这个对象之下。另外的一个别名$也是可以
随时交出控制权。绝对不会污染其它的对象。该特性可以使它与其它 JavaScript 库共生共荣，在项目中可
以放心的引用而不需要考虑到后期可能的冲突。
WEB 前端 – JQuery
7 / 22
本教程参考：《锋利的 jquery》
1.3.10 行为层与结构层的分离
我们可以使用 jQuery选择器选中元素，然后直接给元素添加事件。这种将行为层与结构层完全分离的思想，
可以使得 jQuery 开发人员和 HTML 或其它页面开发人员各司其职，摆脱过去开发冲突或个人单干的手工作
坊式的开发模式。同时，后期维护起来也是非常方便，不需要去 HTML 代码中去寻找某些函数和重复修改
HTML 代码。
1.3.11 丰富的插件支持
任何事物的壮大，如果没有很多人的支持，是永远发展不起来的。jQuery 的易扩展性，吸引了来自全球的
开发者来共同编写 jQuery的扩展插件。目前已经有超过几百种的官方插件支持，而且还不断有新插件面世。
1.3.12 完善的文档
jQuery 的文档是非常丰富的，现阶段多为英文文档，而中文文档相对较少。当然，很多热爱 jQuery 的团队
都在为这个努力，比如 jQuery 的中文 API，图灵教育翻译的《Learning jQuery》等等。
1.3.13 开源
jQuery 是一个开源的产品，任何人都可以自由的使用并给它提出改进意见。
1.4 JQuery 入门
1.4.1 Hello world
进入 jQuery 的官方网站，网址是：http://jquery.com/。下载最新的 jQuery 库文件
名称 大小 说明
jquery-1.3.1.js 114 KB 完整无压缩版本，主要用于测试、
学习和开发。
jquery-1.3.1.min.js 54KB/18 KB 经过 JSMin 等工具压缩后的版本，大小为 54KB。如果服务器开启 Gzip 压缩后，
WEB 前端 – JQuery
8 / 22
本教程参考：《锋利的 jquery》
大小将变为只有 18KB，成为体积最小的版本。主要应用于产品和项目。
首先应该明确一点：在 jQuery 库中，$就是 jQuery 的一个简写形式，例如$("#foo")和 jQuery("#foo")是等价
的，$.ajax 和 jQuery.ajax 是等价的。如果没有特别说明，程序中的$符号都是 jQuery 的一个简写形式。
这段代码是什么意思呢？其实它的作用类似于传统 JavaScript 中的 window.onload，不过跟 window.onload
还是有些区别。
WEB 前端 – JQuery
9 / 22
本教程参考：《锋利的 jquery》
1.4.2 链式代码风格
$(document).ready(function(){
$(".has_children").click(function(){
$(this).addClass("highlight").children("a").show().end().siblings
().removeClass("highlight").children("a").hide();
});
});
1.4.3 JQuery 对象与 DOM 对象
Jquery 对象与 Dom 对象也可以相互转换
Dom 对象转换为 Jquery 对象
var domObj = document.getElementsByTagName("h3")[0]; // Dom对象
var $jQueryObj = $(domObj); //jQuery对象
Jquery对象转换为 Dom对象
var $cr = $("#cr"); //jQuery对象
var cr = $cr.get(0); //DOM对象，获取 $cr[0]
1.4.4 解决 jQuery 和其它库的冲突
当 Jquery 与其他的 javascript 库共用时，Jquery 可以让出$符号
var $j = jQuery.noConflict(); //自定义一个比较短快捷方式
$j(function(){ //使用jQuery
$j("p").click(function(){
alert( $j(this).text() );
});
});
$("pp").style.display = 'none'; //使用 prototype
WEB 前端 – JQuery
10 / 22
本教程参考：《锋利的 jquery》
1.4.5 JQuery 开发工具和插件
Eclipse + Aptana Studio 2.0
详细访问：http://book.51cto.com/art/200912/173449.htm
第二章 JQuery 选择器
2.1 JQuery 选择器优势
2.1.1 写法简明
$(“#ID”)用来代替 document.getElementById(“”);
$(“TagName”)用来代替 document.getElementsByTagName(“”);
$(“.ClassName”)用来取得有该样式的元素
支持 CSS1 到 CSS3 选择器,例如：$(“.className + div”)
2.1.2 预留退路
if(document.getElementById("tt")){
document.getElementById("tt").style.color="red";
}
$('#tt').css("color","red");
2.2 JQuery 选择器
先看三个实例
2.2.1 基本选择器
$(“#Test”)
WEB 前端 – JQuery
11 / 22
本教程参考：《锋利的 jquery》
$(“.test”)
$(“p”)
$(“*”)
$(div,span,p.class1);
2.2.2 层次选择器
$(“div span”)
里所有的子孙 span 元素
$(“div>span”)
下 span 子元素，孙元素就不算
$(“.myClass + div”) Myclass 样式的下一个 div 兄弟元素 = $(“.myClass”).next(“div”)
$(“.myClass ~ div”) Myclass 样式的后面所有 div 兄弟元素 = $(“.myClass”).nextAll(“div”)
$(“.myClass”).nextAll(“div”) Myclass 样式的后面所有 div 兄弟元素
$(“.myClass”).siblings (“div”) Myclass 样式的前后面所有 div 兄弟元素
2.2.3 过滤选择器
2.2.3.1 基本过滤选择器
$(“div:first”) 所选 div 元素中第 1 个
元素
$(“div:last”) $(“div:even”) $(“div:odd”)
$(“div:not(#content)”) ID 不是 content 的 div 元素
$(“div:eq(1)”) 第二个 div 元素 索引从 0 开始
$(“div:gt(1)”) 大于 1
$(“div:lt(1)”) 小于 1
$(“div:header”); div 下所有的