2023年6月21日发(作者：)

WEB前端 – JQuery

本教程参考：《锋利的jquery》

WEB前端-JQuery

2009.4

Louis

1 / 22 WEB前端 – JQuery

目录

第一章 JQuery概述 ............................................................................... 3

第二章 JQuery选择器 ......................................................................... 10

第三章 JQuery中的DOM操作 ........................................................... 15

第四章 JQuery中的事件和动画 .......................................................... 19

第五章 JQuery对表单、表格的操作 .................................................. 21

第六章 JQuery与Ajax的应用 .............................. 错误！未定义书签。

第七章 插件的使用和写法 ................................... 错误！未定义书签。

第八章 实例 ......................................................................................... 22

2 / 22

本教程参考：《锋利的jquery》 WEB前端 – 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库， 3 / 22

本教程参考：《锋利的jquery》 WEB前端 – 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 开发人员的最佳选择。

4 / 22

本教程参考：《锋利的jquery》 WEB前端 – JQuery

1.3 JQuery优势

jQuery强调的理念是写的少，做的多(write less, do more)。其独特的选择器、链式的DOM操作、事件处理机制和封装完善的Ajax都是其它JavaScript库望尘莫及的。总的来说，jQuery有如下优势：

1.3.1

轻量级

jQuery非常轻巧，采用Dean Edwards编写的Packer(/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在处 5 / 22

本教程参考：《锋利的jquery》 WEB前端 – 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库共生共荣，在项目中可以放心的引用而不需要考虑到后期可能的冲突。

6 / 22

本教程参考：《锋利的jquery》 WEB前端 – 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的官方网站，网址是：/。下载最新的jQuery库文件

名称

大小

114 KB

完整无压缩版本，主要用于测试、

学习和开发。

说明

54KB/18 KB

经过JSMin等工具压缩后的版本，大小为54KB。如果服务器开启Gzip压缩后， 7 / 22

本教程参考：《锋利的jquery》 WEB前端 – JQuery

大小将变为只有18KB，成为体积最小的版本。主要应用于产品和项目。

首先应该明确一点：在jQuery库中，$就是jQuery的一个简写形式，例如$("#foo")和jQuery("#foo")是等价的，$.ajax和是等价的。如果没有特别说明，程序中的$符号都是jQuery的一个简写形式。

这段代码是什么意思呢？其实它的作用类似于传统JavaScript中的，不过跟还是有些区别。

alert("Hello World!");

8 / 22

本教程参考：《锋利的jquery》 WEB前端 – JQuery

1.4.2 链式代码风格

$(document).ready(function(){

$(this).addClass("highlight").children("a").show().end().siblings$(".has_children").click(function(){

().removeClass("highlight").children("a").hide();

});

});

1.4.3 JQuery对象与DOM对象

Jquery对象与Dom对象也可以相互转换

Dom对象转换为Jquery对象

var domObj = mentsByTagName("h3")[0]; // Dom对象var $jQueryObj = $(domObj); //jQuery对象

Jquery对象转换为Dom对象

var $cr = $("#cr"); //jQuery对象

var cr = $(0); //DOM对象，获取 $cr[0]

1.4.4 解决jQuery和其它库的冲突

当Jquery与其他的javascript库共用时，Jquery可以让出$符号

var $j = lict(); //自定义一个比较短快捷方式

$j(function(){ //使用jQuery

$j("p").click(function(){

alert( $j(this).text() );

});

});

$("pp").y = 'none'; //使用prototype

本教程参考：《锋利的jquery》

9 / 22

WEB前端 – JQuery

1.4.5 JQuery开发工具和插件

Eclipse + Aptana Studio 2.0

详细访问：/art/200912/

第二章 JQuery选择器

2.1 JQuery选择器优势

2.1.1 写法简明

$(“#ID”)用来代替mentById(“”);

$(“TagName”)用来代替mentsByTagName(“”);

$(“.ClassName”)用来取得有该样式的元素

支持CSS1到CSS3选择器,例如：$(“.className + div”)

2.1.2 预留退路

if(mentById("tt")){

mentById("tt").="red";

}

$('#tt').css("color","red");

2.2 JQuery选择器

先看三个实例

2.2.1 基本选择器

$(“#Test”)

本教程参考：《锋利的jquery》

10 / 22 WEB前端 – JQuery

$(“.test”)

$(“p”)

$(“*”)

$(div,span,1);

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下所有的

元素

$(“div:animated”);div下所有的正在执行动画的元素

本教程参考：《锋利的jquery》

11 / 22 WEB前端 – JQuery

2.2.3.2 内容过滤选择器

$('div:contains(di)') 选取含有文本"di"的div元素.

$('div:empty') 选取不包含子元素(或者文本元素)的div空元素.

$('div:has(.mini)') 选取含有class为mini元素 的div元素. (好像不行)

$('div:has(#mini)') 选取含有ID为mini元素 的div元素.(好像不行)

$('div:has(p)') 选取含有p元素 的div元素.

$('div:parent') 选取含有子元素(或者文本元素)的div元素.

2.2.3.3 可见性过滤选择器

$(':hidden') 选取不可见的元素，包括

style=”visibility:hidden”/>,如果只想选取，则应该写成$(“input:hidden”);

$(':visible) 选取可见的元素

2.2.3.4 属性过滤选择器

$('div[title]') 选取含有 属性title 的div元素.

$('div[title=test]') 选取 属性title值等于 test 的div元素.

$('div[title!=test]') 选取 属性title值不等于 test 的div元素.

$('div[title^=te]') 选取 属性title值 以 te 开始 的div元素.

$("div[title$=est]") 选取 属性title值 以 est 结束 的div元素.

$("div[title*=es]") 选取 属性title值 含有 es 的div元素.

$("div[id][title*=es]") 组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有 es 的元素.

2.2.3.5 子元素过滤选择器

$(' :nth-child(2)') 选取每个父元素下的第2个子元素（索引从1算起）

12 / 22

本教程参考：《锋利的jquery》 WEB前端 – JQuery

$(' :first-child') 选取每个父元素下的第一个子元素

$(' :last-child') 选取每个父元素下的最后一个子元素

$(' :only-child') 如果父元素下的仅仅只有一个子元素，那么选中这个子元素

2.2.3.6 表单对象属性过滤选择器

$(" input:enabled").val("这里变化了！"); 对表单内 可用input 赋值操作.

$(" input:disabled").val("这里变化了！"); 对表单内 不可用input 赋值操作.

$(" input:checked")

$(" select:selected")

2.2.4 表单选择器

$("#form1 :text"); 单行文本框

$("#form1 :password");

$("#form1 :radio");

$("#form1 :checkbox");

$("#form1 :submit");

$("#form1 :image");

$("#form1 :reset");

$("#form1 :button"); // 和 都可以匹配

$("#form1 :file");

$("#form1 :hidden"); // 和

test
都可以匹配.

$("#form1 select"); //这两个不要加：

$("#form1 textarea");

$("#form1 :input"); 选取所有

评论列表（有0条评论）

    最近发表

    拓祥电子编程网

    拓祥电子编程网

    拓祥电子编程提供编程程序员技术分享技术，经验代码。

      相关推荐

      标签列表