----------------------- 页面 1-----------------------
一． 开天辟地入门篇
一.摘要
本系列文章将带您进入jQuery 的精彩世界, 其中有很多作者具体的使用经验和解决方案,
即使你会
使用jQuery 也能在阅读中发现些许秘籍.
本篇文章是入门第一篇, 主要是简单介绍jQuery, 通过简单示例指导大家如何编写jQuery 代码以及
搭建开发环境. 详细讲解了如何在Visual Studio 中配合使用jQuery.
二.前言
首先道个歉! "从零开始学习ASP.NET MVC"系列文章在即将介绍 Filter 时就没有更新了, 原因就是
最近我一直在研究和学习jQuery.看到本系列的名称和文章标题, 看过我的MVC系列文章的人会感到很熟
悉. 不久要给公司的人做培训, 所以特意制作了本教程.
在写作的同时我参考了网上jQuery 的系列教程文章, 在博客园和 Google 上并没有找到让我满意的
系列教程. 我喜欢将知识系统的,深入浅出的讲解.不喜欢写那种"学习笔记"式的文章. 同时本系列将很快
全部写完(有工作压力就是有动力), 随后如果时间允许我会继续更新MVC系列文章.再一次对等待MVC文
章的朋友们说声抱歉!
另外本系列文章的大部分知识点来源于图灵出版社的"jQuery 实战"一书. 推荐大家购买此书, 是jQ
uery 书籍中的经典之作.
下面让我们开始jQuery 之旅.
三.什么是jQuery
jQuery 是一套Javascript 脚本库. 在我的博客中可以找到"Javascript 轻量级脚本库"系列文章. J
avascript 脚本库类似于.NET 的类库, 我们将一些工具方法或对象方法封装在类库中, 方便用户使用.
注意jQuery 是脚本库, 而不是脚本框架. "库"不等于"框架", 比如"System 程序集"是类库,而"ASP.
NET MVC"是框架. jQuery 并不能帮助我们解决脚本的引用管理和功能管理,这些都是脚本框架要做的
事.
脚本库能够帮助我们完成编码逻辑,实现业务功能. 使用 jQuery 将极大的提高编写 javascript 代码
的效率, 让写出来的代码更加优雅, 更加健壮. 同时网络上丰富的jQuery 插件也让我们的工作变成了"有
了jQuery,天天喝茶水"--因为我们已经站在巨人的肩膀上了.
创建一个 ASP.NET MVC 项目时, 会发现已经自动引入了jQuery 类库. jQuery 几乎是微软的御用
脚本库了!完美的集成度和智能感知的支持,让.NET和jQuery 天衣无缝结合在一起!所以用.NET就要选用
jQuery 而非 Dojo,ExtJS 等.
jQuery 有如下特点:
----------------------- 页面 2-----------------------
1.提供了强大的功能函数
使用这些功能函数, 能够帮助我们快速完成各种功能, 而且会让我们的代码异常简洁.
2.解决浏览器兼容性问题
javascript 脚本在不同浏览器的兼容性一直是 Web 开发人员的噩梦,
常常一个页面在 IE7,Firefox
下运行正常, 在 IE6 下就出现莫名其妙的问题. 针对不同的浏览器编写不同的脚本是一件痛苦的事情. 有
了jQuery 我们将从这个噩梦中醒来, 比如在jQuery 中的 Event 事件对象已经被格式化成所有浏览器通
用的, 从前要根据 event 获取事件触发者, 在 ie 下是 event.srcElements 而 ff 等标准浏览器下下是 ev
ent.target. jQuery 则通过统一 event 对象,让我们可以在所有浏览器中使用 event.target 获取事件对
象.
3.实现丰富的 UI
jQuery 可以实现比如渐变弹出, 图层移动等动画效果, 让我们获得更好的用户体验. 单以渐变效果
为例, 从前我自己写了一个可以兼容ie和ff 的渐变动画, 使用大量javascript 代码实现, 费心费力不说,
写完后没有太多帮助过一段时间就忘记了. 再开发类似的功能还要再次费心费力. 如今使用 jQuery 就可
以帮助我们快速完成此类应用.
4.纠正错误的脚本知识
这一条是我提出的, 原因就是大部分开发人员对于 javascript 存在错误的认识. 比如在页面中编写
加载时即执行的操作 DOM 的语句, 在 HTML 元素或者 document 对象上直接添加"onclick"属性,
不知
道 onclick 其实是一个匿名函数等等.
拥有这些错误脚本知识的技术人员也能完成所有的开发工作, 但是
这样的程序是不健壮的. 比如"在页面中编写加载时即执行的操作 DOM 的语句", 当页面代码很小用户加
载很快时没有问题, 当页面加载稍慢时就会出现浏览器"终止操作"的错误.jQuery 提供了很多简便的方法
帮助我们解决这些问题, 一旦使用jQuery 你就将纠正这些错误的知识--因为我们都是用标准的正确的jQ
uery 脚本编写方法!
5.太多了! 等待我们一一去发现.
四.Hello World jQuery
按照惯例, 我们来编写jQuery 的Hello World 程序, 来迈出使用jQuery 的第一步.
在本文最后可以下本章的完整源代码.
1.下载jQuery 类库
jQuery 的项目下载放在了Google Code 上, 下载地址:
上面的地址是总下载列表, 里面有很多版本和类型的jQuery 库, 主要分为如下几类:
min: 压缩后的jQuery类库,
在正式环境上使用.如:jquery-1.3.2.min.js
----------------------- 页面 3-----------------------
vsdoc: 在Visual Studio中需要引入此版本的jquery类库才能启用智能感知.如：jquery-1.3.2-vsdoc2.
js
release包: 里面有没有压缩的jquery代码, 以及文档和示例程序. 如:jquery-1.3.2-release.zip
2.编写程序
创建一个 HTML 页面, 引入jQuery 类库并且编写如下代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit
ional//EN" "
sitional.dtd">
<html xmlns="">
<head>
<title>Hello World jQuery!</title>
<script type="text/javascript" src="scripts/jquery-1.3.2
-vsdoc2.js"></script>
</head>
<body>
<div id="divMsg">Hello World!</div>
<input id="btnShow" type="button" value="显示" />
<input id="btnHide" type="button" value="隐藏" /><br
/>
<input id="btnChange" type="button" value="修改内容
为 Hello World, too!" />
<script type="text/javascript" >
$("#btnShow").bind("click", function(event) { $("#
divMsg").show(); });
$("#btnHide").bind("click", function(event) { $("#di
vMsg").hide(); });
$("#btnChange").bind("click", function(event) { $("
#divMsg").html("Hello World, too!"); });
</script>
</body>
</html>
效果如下:
----------------------- 页面 4-----------------------
页面上有三个按钮, 分别用来控制 Hello World 的显示,隐藏和修改其内容.
此示例使用了:
(1) jQuery的Id选择器: $("#btnShow")
(2) 事件绑定函数 bind()
(3) 显示和隐藏函数. show()和 hide()
(4) 修改元素内部 html 的函数html()
在接下来的教程中我们将深入这些内容的学习.
五.启用Visual Studio 对jQuery 的智能感知
首先看一下Visual Studio 带给我们的智能感知惊喜. 要让Visual Studio支持智能感知, 需要下列条件:
*
安装 VS2008 SP1
下载地址:
*
安装VS 2008 Patch KB958502 以支持"-vsdoc.js"Intellisense文件.
该补丁会导致Visual Studio在一个JavaScript库被引用时，查找是否存在一个可选的"-vsdoc.js"
文件，如果存在的话，就用它来驱动JavaScript intellisense引擎。这些加了注释的"-vsdoc.js"文
件可以包含对JavaScript方法提供了帮助文档的XML注释，以及对无法自动推断出的动态JavaScri
pt签名的另外的代码intellisense提示。你可以在"这里"了解该补丁的详情。你可以在"这里"免费下
载该补丁。
*
必须要引用vsdoc 版本的jquery 库
<script type="text/javascript" src="scripts/jquery‐
1.3.2‐vsdoc2.js"></script>
在编写脚本的时候, 甚至刚刚输入"$"的时候,VS 可以智能提示:
----------------------- 页面 5-----------------------
在使用方法时, 还会有更多的提示:
有了智能感知我们编写javascript 变得和C#一样快速,便捷,舒服.大部分情况可以一次编写成功而不用再
为了一个大小写而查询javascript 帮助文件.能够让Visual Studio 对jQuery 实现智能感知的前提是要
引入vsdoc 版本的jQuery 类库. 示例中我们引入了"jquery-1.3.2-vsdoc2.js"文件. 如果引用其他版本
比如min 版本的jQuery 类库就无法启用智能提示.但是在正式环境下, 我们必须要使用"min"版本的jqu
ery 库文件, 以1.3.2版本号为例,各个版本的大小如下:
其中第一个是未压缩的jquery 库. 如果启用gzip 压缩并且使用 min 版本的jquery.js 可以在传输过程中
压缩到 19KB.
注意,如果我们更新了脚本, 可以通过"Ctrl+Shift+J"快捷方式更新 Visual Studio 的智能感知,或者单击
编辑->IntelliSense->更新JScript Intellisense:
----------------------- 页面 6-----------------------
为了即能在Visual Studio 中增加脚本提示, 又能在上线的时候使用min版本的脚本库, 我们一般是用如
下方式引入jQuery 库:
1. 控制编译结果
<script type="text/javascript" src="scripts/jquery‐
1.2.6.min.js"></script>
<%if (false)
{ %>
<script type="text/javascript" src="scripts/jquery‐
1.3.2‐vsdoc2.js"></script>
<%} %>
这是网上推荐的方式. 编译后的页面上只有 min 版本的引用, 同时在开发时能够享受到智能感知.但是
注意这种方式引用的 min 类库只能是 1.2.6 或者之前的版本号. 最新的 1.3.2 的所有非vsdoc 版本的
jquery 库引用后都会导致JScript Intellisense 更新出错. 这是 1.3.2版本的一个 bug, 期待后续版
本中解决. 其实大家完全可以使用 1.2.6 版本的 min 库, 本教程涉及的jquery 功能, 1.2.6 版本基本都
支持.
我们使用了 if(false)让编译后的页面不包含vsdoc 版本jquery 库的引用, 同样的思路还可以使用比如将
脚本引用放入一个 PlaceHolder 并设置visible=fasle 等.
2. 使用后端变量
为了能使用 1.3.2 版本的min库, 我们只能通过将脚本引用放在变量里, 通过页面输出的方式, 此种
方式可以正常更新JScript Intellisense.但是可能有人和我一样不喜欢在前端使用变量:
<asp:PlaceHolder Visible="false" runat="server">
<script type="text/javascript" src="scripts/jquer
y‐1.3.2‐vsdoc2.js"></script>
</asp:PlaceHolder>
<% =jQueryScriptBlock %>
后台声明变量:
protected string jQueryScriptBlock = @"<script type=""te
xt/javascript"" src=""scripts/jquery‐1.3.2.min.js""></sc
ript>";
----------------------- 页面 7-----------------------
六.在独立的.JS 文件中启用脚本智能感知
上面我们解决了在页面中智能感知的问题, 其实在独立的.js文件中我们同样可以启用脚本的智能感知, 在
IntellisenseDemo.js 文件中,添加如下语句:
/// <reference path="jquery‐1.3.2‐vsdoc2.js" />
更新JScript Intellisense, 会发现在脚本中也启用了智能提示:
二． 万能的选择器
一.摘要
本章讲解jQuery 最重要的选择器部分的知识. 有了jQuery 的选择器我们几乎可以获取页面上任意的一个
或一组对象, 可以明显减轻开发人员的工作量.
二.前言
编写任何javascript 程序我们要首先获得对象, jQuery 选择器能彻底改变我们平时获取对象的方式, 可
以获取几乎任何语意的对象, 比如"拥有 title 属性并且值中包含test 的<a>元素", 完成这些工作只需要
编写一个jQuery 选择器字符串. 学习jQuery 选择器是学习jQuery 最重要的一步.
三.Dom 对象和jQuery 包装集
无论是在写程序还是看API 文档,
我们要时刻注意区分 Dom 对象和jQuery 包装集.
1.Dom对象
在传统的javascript 开发中,我们都是首先获取 Dom 对象,比如:
var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");
我们经常使用 document.getElementById 方法根据 id 获取单个 Dom 对象, 或者使用 document.g
etElementsByTagName 方法根据 HTML 标签名称获取 Dom 对象集合.
另外在事件函数中, 可以通过在方法函数中使用this 引用事件触发对象(但是在多播事件函数中 IE6 存在
问题), 或者使用event 对象的target(FF)或srcElement(iIE6)获取到引发事件的 Dom 对象.
注意我们这里获取到的都是 Dom 对象, Dom 对象也有不同的类型比如 input, div, span 等.
Dom对
象只有有限的属性和方法:
----------------------- 页面 8-----------------------
2.jQuery 包装集
jQuery 包装集可以说是Dom对象的扩充.在jQuery 的世界中将所有的对象, 无论是一个还是一组, 都封
装成一个jQuery 包装集,比如获取包含一个元素的jQuery 包装集:
var jQueryObject = $("#testDiv");
jQuery 包装集都是作为一个对象一起调用的. jQuery包装集拥有丰富的属性和方法, 这些都是jQuery
特有的:
3.Dom 对象与jQuery 对象的转换
(1) Dom 转jQuery 包装集
如果要使用jQuery 提供的函数,
就要首先构造jQuery 包装集.
我们可以使用本文即将介绍的jQuery
选择器直接构造jQuery 包装集,比如:
$("#testDiv");
上面语句构造的包装集只含有一个 id 是testDiv 的元素.
或者我们已经获取了一个 Dom 元素,比如:
----------------------- 页面 9-----------------------
var div = document.getElementById("testDiv");
上面的代码中 div 是一个 Dom 元素, 我们可以将 Dom 元素转换成jQuery 包装集:
var domToJQueryObject = $(div);
小窍门:因为有了智能感知, 所以我们可以通过智能感知的方法列表来判断一个对象啊是 Dom 对象还是j
Query 包装集.
(2) jQuery 包装集转 Dom 对象
jQuery 包装集是一个集合, 所以我们可以通过索引器访问其中的某一个元素:
var domObject = $("#testDiv")[0];
注意, 通过索引器返回的不再是jQuery 包装集, 而是一个 Dom 对象!
jQuery 包装集的某些遍历方法,比如each()中, 可以传递遍历函数, 在遍历函数中的this也是Dom元素,
比如:
$("#testDiv").each(function() { alert(this) })
如果我们要使用jQuery 的方法操作Dom 对象,怎么办? 用上面介绍过的转换方法即可:
$("#testDiv").each(function() { $(this).html("修改内容") })
小结: 先让大家明确 Dom 对象和jQuery 包装集的概念, 将极大的加快我们的学习速度. 我在学习jQue
ry 的过程中就花了很长时间没有领悟到两者的具体差异, 因为书上并没有专门讲解两者的区别, 所以经常
被"this 指针为何不能调用jQuery 方法"等问题迷惑.
直到某一天豁然开朗, 发现只要能够区分这两者,
就能够在写程序时变得清清楚楚.
四. 什么是jQuery 选择器
在 Dom 编程中我们只能使用有限的函数根据 id 或者TagName 获取 Dom 对象.
在jQuery 中则完全不同,jQuery 提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象
以jQuery 包装集的形式返回.
首先来看看什么是选择器:
//根据 ID 获取jQuery 包装集
var jQueryObject = $("#testDiv");
----------------------- 页面 10-----------------------
上例中使用了 ID 选择器, 选取 id 为testDiv 的Dom 对象并将它放入jQuery 包装集, 最后以jQuery
包装集的形式返回.
"$"符号在jQuery 中代表对jQuery 对象的引用, "jQuery"是核心对象, 其中包含下列方法:
jQuery( expression, context )
Returns: jQuery
这个函数接收一个 CSS 选择器的字符串，然后用这个字符串去匹配一组元素。
This function accepts a string containing a CSS selector which is then used to match a
set of elements.
jQuery( html, ownerDocument )
Returns: jQuery
根据 HTML 原始字符串动态创建 Dom 元素.
Create DOM elements on-the-fly from the provided String of raw HTML.
jQuery( elements )
Returns: jQuery
将一个或多个 Dom 对象封装jQuery 函数功能(即封装为jQuery 包装集)
Wrap jQuery functionality around a single or multiple DOM Element(s).
jQuery( callback )
Returns: jQuery
$(document).ready()的简写方式
A shorthand for $(document).ready().
上面摘选自jQuery 官方手册.Returns 的类型为jQuery 即表示返回的是jQuery 包装集.其中第一个方法
有些问题, 官方接口写的是CSS 选择器, 但是实际上这个方法不仅仅支持CSS 选择器, 而是所有jQuery
支持的选择器, 有些甚至是jQuery 自定义的选择器(在 CSS 标准中不存在的选择器). 为了能让大家理解
的更清楚, 我将方法修改如下:
jQuery( selector, context )
Returns: jQuery 包装集
根据选择器选取匹配的对象, 以jQuery 包装集的形式返回. context 可以是Dom 对象集合或jQuery 包
装集, 传入则表示要从 context 中选择匹配的对象, 不传入则表示范围为文档对象(即页面全部对象).
上面这个方法就是我们选择器使用的核心方法.可以用"$"代替jQuery 让语法更简介, 比如下面两句话的
效果相同:
----------------------- 页面 11-----------------------
//根据 ID 获取jQuery 包装集
var jQueryObject = $("#testDiv");
//$是jQuery 对象的引用:
var jQueryObject = jQuery("#testDiv");
接下来让我们系统的学习jQuery 选择器.
五.jQuery 选择器全解
通俗的讲, Selector 选择器就是"一个表示特殊语意的字符串". 只要把选择器字符串传入上面的方法中就
能够选择不同的 Dom 对象并且以jQuery 包装集的形式返回.
但是如何将jQuery 选择器分类让我犯难. 因为书上的分类和jQuery 官方的分类截然不同. 最后我决定以
实用为主, 暂时不去了解 CSS3 选择器标准, 而按照jQuery 官方的分类进行讲解.
jQuery 的选择器支持CSS3 选择器标准. 下面是W3C 最新的 CSS3 选择器标准:
标准中的选择器都可以在jQuery 中使用.
jQuery 选择器按照功能主要分为"选择"和"过滤". 并且是配合使用的. 可以同时使用组合成一个选择器字
符串. 主要的区别是"过滤"作用的选择器是指定条件从前面匹配的内容中筛选, "过滤"选择器也可以单独
使用, 表示从全部"*"中筛选. 比如:
$(":[title]")
等同于:
$("*:[title]")
而"选择"功能的选择器则不会有默认的范围, 因为作用是"选择"而不是"过滤".
下面的选择器分类中,
带有"过滤器"的分类表示是"过滤"选择器,
否则就是"选择"功能的选择器.
jQuery 选择器分为如下几类:
[说明]
1.点击"名称"会跳转到此方法的jQuery 官方说明文档.
2.可以在下节中的jQuery 选择器实验室测试各种选择器
1. 基础选择器 Basics
名称
说明
举例
----------------------- 页面 12-----------------------
#id
根据元素 Id 选择
$("divId") 选择 ID 为divI
element
根据元素的名称选择,
$("a") 选择所有<a>元素
.class
根据元素的 css 类选择
$(".bgRed") 选择所用 CS
素
*
选择所有元素
$("*")选择页面所有元素
selector1,
可以将几个选择器用","分隔开然后再拼成一个选择器字符串.会同 $("#divId, a, .bgRed")
selector2,
时选中这几个选择器匹配的内容.
selectorN
[学习建议]: 大家暂时记住基础选择器即可, 可以直接跳到下一节"jQuery 选择器实验室"进行动手练习,
以后再回来慢慢学习全部的选择器, 或者用到的时候再回来查询.
2.层次选择器 Hierarchy
名称
说明
举例
ancestor descendant
使用"form input"的形式选中form 中的所有input 元素.
$(".bgRed div") 选择CSS
即ancestor(祖先)为from, descendant(子孙)为 input. 的所有<div>元素.
parent > child
选择 parent 的直接子节点child. child 必须包含在
$(".myList>li") 选择CSS类
parent 中并且父类是parent 元素.
直接子节点<li>对象.
prev + next
prev 和 next 是两个同级别的元素. 选中在 prev 元素后面 $("#hibiscus+img")选在 id
的next 元素.
面的 img 对象.
prev ~ siblings
选择 prev 后面的根据 siblings 过滤的元素
$("#someDiv~[title]")选择
注:siblings是过滤器
象后面所有带有title 属性的元
3.基本过滤器 Basic Filters
名称
说明
举例
:first
匹配找到的第一个元素
查找表格的第一行:$("tr:first")
:last
匹配找到的最后一个元素
查找表格的最后一行:$("tr:last")
:not(selector)
去除所有与给定选择器匹配的元素
查找所有未选中的 input 元素: $("input:not(:ch
:even
匹配所有索引值为偶数的元素，从 0
查找表格的 1、3、5...行:$("tr:even")
开始计数
:odd
匹配所有索引值为奇数的元素，从 0
查找表格的 2、4、6 行:$("tr:odd")
开始计数
:eq(index)
匹配一个给定索引值的元素
查找第二行:$("tr:eq(1)")
注:index从 0 开始计数
:gt(index)
匹配所有大于给定索引值的元素
查找第二第三行，即索引值是 1和 2，也就是比0 大
注:index从 0 开始计数
----------------------- 页面 13-----------------------
:lt(index)
选择结果集中索引小于 N 的
查找第一第二行，即索引值是 0 和 1，也就是比2 小
elements
注:index从 0 开始计数
:header
选择所有 h1,h2,h3 一类的 header
给页面内所有标题加上背景色: $(":header").css(
标签.
"#EEE");
:animated
匹配所有正在执行动画效果的元素
只有对不在执行动画效果的元素执行一个动画特效:
$("#run").click(function(){
$("div:not(:animated)").animate({ left: "+
});
4. 内容过滤器 Content Filters
名称
说明
举例
:contains(text) 匹配包含给定文本的元素
查找所有包含 "John" 的 div 元素:$("div:contains('John')")
:empty
匹配所有不包含子元素或者文本的空元 查找所有不包含子元素或者文本的空元素:$("td:empty")
素
:has(selector) 匹配含有选择器所匹配的元素的元素
给所有包含 p 元素的 div 元素添加一个 text 类: $("div:has(p)").
:parent
匹配含有子元素或者文本的元素
查找所有含有子元素或者文本的 td 元素:$("td:parent")
5.可见性过滤器 Visibility Filters
名称
说明
举例
:hidden
匹配所有的不可见元素
查找所有不可见的 tr 元素:$("tr:hidden")
注:在1.3.2版本中, hidden匹配自身或者父类在文
档中不占用空间的元素.如果使用 CSS visibility 属
性让其不显示但是占位,则不输入 hidden.
:visible
匹配所有的可见元素
查找所有可见的 tr 元素:$("tr:visible")
6.属性过滤器 Attribute Filters
名称
说明
举例
[attribute]
匹配包含给定属性的元素
查找所有含有 id 属性的 div 元素:
$("div[id]")
[attribute=value] 匹配给定的属性是某个特定值的元素 查找所有 name 属性是 newsletter 的 input 元素:
$("input[name='newsletter']").attr("checked", true);
[attribute!=value] 匹配给定的属性是不包含某个特定值 查找所有 name 属性不是 newsletter 的 input 元素:
的元素
$("input[name!='newsletter']").attr("checked", true);
[attribute^=value 匹配给定的属性是以某些值开始的元 $("input[name^='news']")
----------------------- 页面 14-----------------------
]
素
[attribute$=value 匹配给定的属性是以某些值结尾的元 查找所有 name 以 'letter' 结尾的 input 元素:
]
素
$("input[name$='letter']")
[attribute*=value 匹配给定的属性是以包含某些值的元 查找所有 name 包含 'man' 的 input 元素:
]
素
$("input[name*='man']")
[attributeFilter1][ 复合属性选择器，需要同时满足多个条 找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的:
attributeFilter2][a 件时使用。
$("input[id][name$='man']")
ttributeFilterN]
7.子元素过滤器 Child Filters
名称
说明
举例
:nth-child(index/e 匹配其父元素下的第 N 个子或奇偶元素
在每个 ul 查找第 2 个 li:
ven/odd/equation
$("ul li:nth-child(2)")
':eq(index)' 只匹配一个元素，而这个将为每一个父元
)
素匹配子元素。:nth-child 从 1开始的，而:eq()是从 0
算起的！
可以使用:
nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)
:first-child
匹配第一个子元素
在每个 ul 中查找第一个 li:
$("ul li:first-child")
':first' 只匹配一个元素，而此选择符将为每个父元素匹
配一个子元素
:last-child
匹配最后一个子元素
在每个 ul 中查找最后一个 li:
$("ul li:last-child")
':last'只匹配一个元素，而此选择符将为每个父元素匹配
一个子元素
:only-child
如果某个元素是父元素中唯一的子元素，那将会被匹配 在 ul 中查找是唯一子元素的 li:
$("ul li:only-child")
如果父元素中含有其他元素，那将不会被匹配。
8.表单选择器 Forms
名称
说明
解释
:input
匹配所有 input, textarea, select 和
查找所有的 input 元素:
button 元素
$(":input")
----------------------- 页面 15-----------------------
:text
匹配所有的文本框
查找所有文本框:
$(":text")
:password
匹配所有密码框
查找所有密码框:
$(":password")
:radio
匹配所有单选按钮
查找所有单选按钮
:checkbox
匹配所有复选框
查找所有复选框:
$(":checkbox")
:submit
匹配所有提交按钮
查找所有提交按钮:
$(":submit")
:image
匹配所有图像域
匹配所有图像域:
$(":image")
:reset
匹配所有重置按钮
查找所有重置按钮:
$(":reset")
:button
匹配所有按钮
查找所有按钮:
$(":button")
:file
匹配所有文件域
查找所有文件域:
$(":file")
9.表单过滤器 Form Filters
名称
说明
解释
:enabled
匹配所有可用元素
查找所有可用的 input 元素:
$("input:enabled")
:disabled
匹配所有不可用元素
查找所有不可用的 input 元素:
$("input:disabled")
:checked
匹配所有选中的被选中元素(复选框、单选框等，查找所有选中的复选框元素:
不包括select 中的option)
$("input:checked")
:selected
匹配所有选中的option 元素
查找所有选中的选项元素:
$("select option:selected")
六 jQuery 选择器实验室
jQuery 选择器实验室使用的是"jQuery 实战"一书中的代码, 感觉对于学习选择器很有帮助.
我们的实验对象是一个拥有很多元素的页面:
----------------------- 页面 16-----------------------
在实验室页面的"Selector"输入框中输入jQuery 选择器表达式,
所有匹配表达式的元素会显示红框:
----------------------- 页面 17-----------------------
如上图所示, 在输入".myList"后点击"Apply", 下面的输出框会显示运行结果, 右侧会将选中的元素用
红框显示.
代码在本章最后可以下载.
七.API 文档
jQuery官方API:
中文在线API:
中文jQuery手册下载:
八.总结
本章节讲解的jQuery 依然属于基础支持, 所以没有太多的应用实例.
虽然基础但是很难一次全部记住, j
Query 选择器可以说是最考验一个人jQuery 功力的地方. 下一章我们讲解如何操作jQuery 包装集以及
动态创建新元素.
三． 管理Jquery 包装集
一.摘要
在使用jQuery 选择器获取到jQuery 包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元
素, 接着学习如何管理jQuery 包装集, 比如添加,删除,切片等.
二.前言
本系列的2,3篇上面列举了太多的API 相信大家看着眼晕. 不过这些基础还必须要讲, 基础要扎实.其实对
于这些列表大家可以跳过, 等以后用到时再回头看或者查询官方的API 说明.
本章内容很少, 主要讲解动态创建元素和操作jQuery 包装集的各个函数.
三.动态创建元素
1.错误的编程方法
我们经常使用javascript 动态的创建元素, 有很多程序员通过直接更改某一个容器的 HTML 内容.比如:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E
N" "">
<html xmlns="">
<head>
----------------------- 页面 18-----------------------
<title>动态创建对象</title>
</head>
<body>
<div id="testDiv">测试图层</div>
<script type="text/javascript">
document.getElementById("testDiv").innerHTML = "<div style=
\"border:solid 1px #FF0000\">动态创建的 div</div>";
</script>
</body>
</html>
上面的示例中我通过修改testDiv 的内容,在页面上动态的添加了一个 div 元素. 但是请牢记,这是错误的
做法!
错误的原因:
(1) 在页面加载时改变了页面的结构. 在 IE6 中如果网络变慢或者页面内容太大就会出现"终止操作"的错
误. 也就是说"永远不要在页面加载时改变页面的 Dom 模型".
(2) 使用修改HTML 内容添加元素,
不符合Dom标准. 在实际工作中也碰到过使用这种方法修改内容后,
某些浏览器中并不能立刻显示添加的元素, 因为不同浏览器的显示引擎是不同的. 但是如果我们使用 Do
m 的CreateElement 创建对象, 在所有的浏览器中几乎都可以. 但是在jQuery 中如果传入的而是一个
完整的 HTML 字符串, 内部也是使用innerHTML. 所以也不是完全否定 innerHTML 函数的使用.
所以从现在开始请摒弃这种旧知识, 使用下面介绍的正确方法编程.
2.创建新的元素
下面介绍两种正确的创建元素的方式.
(1)使用 HTML DOM 创建元素
什么是 DOM？
通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。
要改变页面的某个东西，JavaScript 就需要对 HTML 文档中所有元素进行访问的入口。这个入口，连同
对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。
在 1998 年，W3C 发布了第一级的 DOM 规范。这个规范允许访问和操作 HTML 页面中的每一个单独
的元素。
所有的浏览器都执行了这个标准，因此，DOM 的兼容性问题也几乎难觅踪影了。
DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。
----------------------- 页面 19-----------------------
DOM 被分为不同的部分（核心、XML 及 HTML）和级别（DOM Level 1/2/3）：
Core DOM
定义了一套标准的针对任何结构化文档的对象
XML DOM
定义了一套标准的针对 XML 文档的对象
HTML DOM
定义了一套标准的针对 HTML 文档的对象。
关于使用 HTML DOM 创建元素本文不做详细介绍, 下面举一个简单的例子:
//使用 Dom 标准创建元素
var select = document.createElement("select");
select.options[0] = new Option("加载项 1", "value1");
select.options[1] = new Option("加载项 2", "value2");
select.size = "2";
var object = testDiv.appendChild(select);
通过使用 document.createElement 方法我们可以创建 Dom 元素, 然后通过 appendChild 方法为添
加到指定对象上.
(2) 使用jQuery 函数创建元素
在jQuery 中创建对象更加简单, 比如创建一个Div 元素:
$("<div style=\"border:solid 1px #FF0000\">动态创建的 div</div>")
我们主要使用jQuery 核心类库中的一个方法:
jQuery( html, ownerDocument )
Returns: jQuery
根据 HTML 原始字符串动态创建 Dom 元素.
其中 html 参数是一个 HTML 字符串, 在jQuery1.3.2 中对此函数做了改进:
当HTML 字符串是没有属性的元素是, 内部使用document.createElement 创建元素, 比如:
//jQuery 内部使用document.createElement创建元素:
$("<div/>").css("border","solid 1px #FF0000").html("动态创建的 di
v").appendTo(testDiv);
否则使用 innerHTML 方法创建元素:
//jQuery 内部使用innerHTML创建元素:
----------------------- 页面 20-----------------------
$("<div style=\"border:solid 1px #FF0000\">动态创建的 div</div>
").appendTo(testDiv);
3.将元素添加到对象上
我们可以使用上面两种方式创建一个而元素, 但是上面已经提到一定不要在页面加载时就改变页面的 DO
M 结构, 比如添加一个元素. 正确的做法是在页面加载完毕后添加或删除元素.
传统上, 使用window.onload 完成上述目的:
//DOM加载完毕后添加元素
//传统方法
window.onload = function() { testDiv.innerHTML = "<div style=\"b
order:solid 1px #FF0000\">动态创建的 div</div>"; }
虽然能够在DOM完整加载后, 在添加新的元素, 但是不幸的是浏览器执行window.onload 函数不仅仅是
在构建完 DOM 树之后, 也是在所有图像和其他外部资源完整的加载并且在浏览器窗口显示完毕之后. 所
以如果某个图片或者其他资源加载很长时间, 访问者就会看到一个不完整的页面, 甚至在图片加载之前就
执行了需要依赖动态添加的元素的脚本而导致脚本错误.
解决办法就是等 DOM 被解析后, 在图像和外部资源加载之前执行我们的函数.在jQuery 中让这一实现变
得可行:
//jQuery 使用动态创建的$(document).ready(function)方法
$(document).ready(
function() { testDiv.innerHTML = "<div style=\"border:so
lid 1px #FF0000\">使用动态创建的$(document).ready(function)方法</
div>"; }
);
或者使用简便语法:
//jQuery 使用$(function)方法
$(
function() { testDiv.innerHTML += "<div style=\"border:s
olid 1px #FF0000\">使用$(function)方法</div>"; }
);
使用$()将我们的函数包装起来即可. 而且可以在一个页面绑定多个函数, 如果使用传统的window.onlo
ad 则只能调用一个函数.
----------------------- 页面 21-----------------------
所以请大家将修改 DOM 的函数使用此方法调用. 另外还要注意document.createElement 和 innerHT
ML 的区别. 如果可以请尽量使用 document.createElement 和$("<div/>")的形式创建对象.
四.管理jQuery 包装集元素
既然学会了动态创建元素, 接下来就会想要把这些元素放入我们的jQuery 包装集中.
我们可以在jQuery 包装集上调用下面这些函数, 用来改变我们的原始jQuery 包装集, 并且大部分返回的
都是过滤后的jQuery 包装集.
jQuery 提供了一系列的函数用来管理包装集:
1.过滤 Filtering
名称
说明
举例
eq( index )
获取第 N 个元素
获取匹配的第二个元素:
$("p").eq(1)
filter( expr )
筛选出与指定表达式匹配的元素集合。
保留带有 select 类的元素:
$("p").filter(".selected")
filter( fn )
筛选出与指定函数返回值匹配的元素集合
保留子元素中不含有 ol 的元素:
$("div").filter(function(index) {
这个函数内部将对每个对象计算一次 (正如
return $("ol", this).size() == 0;
'$.each'). 如果调用的函数返回false 则这个
});
元素被删除，否则就会保留。
is( expr )
用一个表达式来检查当前选择的元素集合，如果 由于input 元素的父元素是一个表单元素，所以返回true:
其中至少有一个元素符合这个给定的表达式就
$("input[type='checkbox']").parent().is("form")
注意: 这个函数返回的不
返回true。
是jQuery包装集而是
如果没有元素符合，或者表达式无效，都返回
Boolean值
'false'. 'filter' 内部实际也是在调用这个函数，
所以，filter()函数原有的规则在这里也适用。
map( callback )
将一组元素转换成其他数组（不论是否是元素数 把form 中的每个 input 元素的值建立一个列表:
组）
$("p").append( $("input").map(function(){
return $(this).val();
你可以用这个函数来建立一个列表，不论是值、
}).get().join(", ") );
属性还是 CSS 样式，或者其他特别形式。这都
可以用'$.map()'来方便的建立
not( expr )
删除与指定表达式匹配的元素
从 p 元素中删除带有 select 的ID 的元素:
$("p").not( $("#selected")[0] )
slice( start, end ) 选取一个匹配的子集
选择第一个 p 元素:
$("p").slice(0, 1);
----------------------- 页面 22-----------------------
2.查找 Finding
名称
说明
举例
add( expr )
把与表达式匹配的元素添加到jQuery 对象中。这个 动态生成一个元素并添加至匹配的元素中:
函数可以用于连接分别与两个表达式匹配的元素结果 $("p").add("<span>Again</span>")
集。
children( [expr] ) 取得一个包含匹配的元素集合中每一个元素的所有子 查找 DIV 中的每个子元素:
元素的元素集合。
$("div").children()
可以通过可选的表达式来过滤所匹配的子元素。注意：
parents()将查找所有祖辈元素，而 children()只考
虑子元素而不考虑所有后代元素。
closest( [expr] ) 取得与表达式匹配的最新的父元素
为事件源最近的父类 li 对象更换样式:
$(document).bind("click", function (e) {
$(e.target).closest("li").toggleClass("hilight");
});
contents( )
查找匹配元素内部所有的子节点（包括文本节点）。 查找所有文本节点并加粗:
如果元素是一个 iframe，则查找文档内容
$("p").contents().not("[nodeType=1]").wrap("<b
find( expr ) 搜索所有与指定表达式匹配的元素。这个函数是找出 从所有的段落开始，进一步搜索下面的span 元素。与$(
正在处理的元素的后代元素的好方法。
$("p").find("span")
所有搜索都依靠jQuery 表达式来完成。这个表达式
可以使用 CSS1-3 的选择器语法来写。
next( [expr] ) 取得一个包含匹配的元素集合中每一个元素紧邻的后 找到每个段落的后面紧邻的同辈元素:
面同辈元素的元素集合。
$("p").next()
这个函数只返回后面那个紧邻的同辈元素，而不是后
面所有的同辈元素（可以使用 nextAll）。可以用一
个可选的表达式进行筛选。
nextAll( [expr] ) 查找当前元素之后所有的同辈元素。
给第一个 div 之后的所有元素加个类:
$("div:first").nextAll().addClass("after");
可以用表达式过滤
offsetParent( ) 返回第一个有定位的父类(比如(relative 或
absolute)).
parent( [expr] ) 取得一个包含着所有匹配元素的唯一父元素的元素集 查找每个段落的父元素:
合。
$("p").parent()
你可以使用可选的表达式来筛选。
parents( [expr] ) 取得一个包含着所有匹配元素的祖先元素的元素集合 找到每个span 元素的所有祖先元素:
（不包含根元素）。可以通过一个可选的表达式进行$("span").parents()
----------------------- 页面 23-----------------------
筛选。
prev( [expr] ) 取得一个包含匹配的元素集合中每一个元素紧邻的前 找到每个段落紧邻的前一个同辈元素:
一个同辈元素的元素集合。
$("p").prev()
可以用一个可选的表达式进行筛选。只有紧邻的同辈
元素会被匹配到，而不是前面所有的同辈元素。
prevAll( [expr] ) 查找当前元素之前所有的同辈元素
给最后一个之前的所有 div 加上一个类:
$("div:last").prevAll().addClass("before");
可以用表达式过滤。
siblings( [expr] ) 取得一个包含匹配的元素集合中每一个元素的所有唯 找到每个div 的所有同辈元素:
一同辈元素的元素集合。可以用可选的表达式进行筛 $("div").siblings()
选。
3.串联 Chaining
名称
说明
举例
andSelf( )
加入先前所选的加入当前元素中
选取所有 div 以及内部的p，并加上border 类:
$("div").find("p").andSelf().addClass("border"
对于筛选或查找后的元素，要加入先前所选元素时将会很有
用。
end( )
回到最近的一个"破坏性"操作之前。即，将匹配的元素列表 选取所有的 p 元素，查找并选取 span 子元素，然后
变为前一次的状态。
$("p").find("span").end()
如果之前没有破坏性操作，则返回一个空集。所谓的"破坏
性"就是指任何改变所匹配的jQuery 元素的操作。这包括
在 Traversing 中任何返回一个jQuery 对象的函数
--'add', 'andSelf', 'children', 'filter', 'find', 'map',
'next', 'nextAll', 'not', 'parent', 'parents', 'prev',
'prevAll', 'siblings' and 'slice'--再加上 Manipulation
中的 'clone'。
五.常用函数举例
[待续]
六.总结
本篇文章内容较少, 主要讲解如何动态创建元素以及管理jQuery 包装集, 接口文档列举了太多,
实例部
分还没来得及写. 因为要睡觉明天还要上班, 所以请各位见谅, 等以后有空的时候补上
四． 使用jQuery 操作元素的属性与样式
----------------------- 页面 24-----------------------
一.摘要
本篇文章讲解如何使用jQuery 获取和操作元素的属性和CSS 样式. 其中 DOM 属性和元素属性的区分值
得大家学习.
二.前言
通过前面几章我们已经能够完全控制jQuery 包装集了,
无论是通过选择器选取对象, 或者从包装集中删
除,过滤元素. 本章将讲解如何使用jQuery 获取和修改元素属性和样式.
三. 区分 DOM 属性和元素属性
一个 img 标签:
<img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus" class
="classA" />
通常开发人员习惯将id, src, alt等叫做这个元素的"属性". 我将其称为"元素属性". 但是在解析成DOM
对象时, 实际浏览器最后会将标签元素解析成"DOM对象", 并且将元素的"元素属性"存储为"DOM属性".
两者是有区别的.
虽然我们设置了元素的src是相对路径:images/image.1.jpg
但是在"DOM属性"中都会转换成绝对路径:
甚至有些"元素属性"和"DOM属性"的名称都不一样,比如上面的元素属性class, 转换为 DOM属性后对应
className.
牢记, 在javascript 中我们可以直接获取或设置"DOM 属性":
<script type="text/javascript">
$(function() {
var img1 = document.getElementById("hibiscus");
alert(img1.alt);
img1.alt = "Change the alt element attribute";
alert(img1.alt);
})
</script>
所以如果要设置元素的 CSS 样式类, 要使用的是"DOM 属性"className"而不是"元素属性"class:
img1.className = "classB";
----------------------- 页面 25-----------------------
四. 操作"DOM 属性"
在jQuery 中没有包装操作"DOM 属性"的函数, 因为使用javascript 获取和设置"DOM 属性"都很简单.
在jQuery 提供了 each()函数用于遍历jQuery 包装集, 其中的this 指针是一个 DOM对象, 所以我们可
以应用这一点配合原生javascript 来操作元素的 DOM 属性:
$("img").each(function(index) {
alert("index:" + index + ", id:" + this.id + ", a
lt:" + this.alt);
this.alt = "changed";
alert("index:" + index + ", id:" + this.id + ", a
lt:" + this.alt);
});
下面是each 函数的说明:
each( callback ) Returns: jQuery包装集
对包装集中的每一个元素执行 callback 方法. 其中 callback 方法接受一个参数, 表示当前遍历的索引值,
从 0 开始.
五. 操作"元素属性"
我们可以使用javascript 中的getAttribute 和 setAttribute 来操作元素的"元素属性".
在jQuery 中给你提供了attr()包装集函数, 能够同时操作包装集中所有元素的属性:
名称
说明
举例
attr( name )
取得第一个匹配元素的属性值。通过这个方 返回文档中第一个图像的 src 属性值:
法可以方便地从第一个匹配元素中获取一
$("img").attr("src");
个属性的值。如果元素没有相应属性，则返
回 undefined 。
attr( properties ) 将一个“名/值”形式的对象设置为所有匹配 为所有图像设置src 和 alt 属性:
元素的属性。
$("img").attr({ src: "test.jpg", alt: "Test Image" })
这是一种在所有匹配元素中批量设置很多
属性的最佳方式。 注意，如果你要设置对
象的 class 属性，你必须使用'className'
作为属性名。或者你可以直接使
用.addClass( class )
----------------------- 页面 26-----------------------
和 .removeClass( class ).
attr( key, value ) 为所有匹配的元素设置一个属性值。
为所有图像设置src 属性:
$("img").attr("src","test.jpg");
attr( key, fn ) 为所有匹配的元素设置一个计算的属性值。把 src 属性的值设置为title 属性的值:
$("img").attr("title", function() { return this.src });
不提供值，而是提供一个函数，由这个函数
计算的值作为属性值。
removeAttr( name ) 从每一个匹配的元素中删除一个属性
将文档中图像的 src 属性删除:
$("img").removeAttr("src");
当使用id 选择器时常常返回只有一个对象的jQuery 包装集, 这个时侯常使用 attr(name)函数获得它的
元素属性:
function testAttr1(event) {
alert($("#hibiscus").attr("class"));
}
注意 attr(name)函数只返回第一个匹配元素的特定元素属性值. 而 attr(key, name)会设置所有包装集
中的元素属性:
//修改所有 img元素的 alt属性
$("img").attr("alt", "修改后的 alt属性");
而 attr( properties ) 可以一次修改多个元素属性:
$("img").attr({title:"修改后的title", alt: "同时修改alt属性"});
另外虽然我们可以使用 removeAttr( name ) 删除元素属性, 但是对应的DOM属性是不会被删除的,
只会影响DOM属性的值.
比如将一个input 元素的 readonly 元素属性去掉,会导致对应的 DOM 属性变成false(即input 变成可编
辑状态):
$("#inputTest").removeAttr("readonly");
六,修改 CSS 样式
修改元素的样式, 我们可以修改元素 CSS 类或者直接修改元素的样式.
----------------------- 页面 27-----------------------
一个元素可以应用多个css 类, 但是不幸的是在 DOM 属性中是用一个以空格分割的字符串存储的, 而不
是数组. 所以如果在原始javascript 时代我们想对元素添加或者删除多个属性时, 都要自己操作字符串.
jQuery 让这一切变得异常简单. 我们再也不用做那些无聊的工作了.
1. 修改 CSS 类
下表是修改 CSS 类相关的jQuery 方法:
名称
说明
实例
addClass( classes )
为每个匹配的元素添加指定的类名。
为匹配的元素加上 'selected' 类:
$("p").addClass("selected");
hasClass( class )
判断包装集中是否至少有一个元素应用
了指定的CSS 类
$("p").hasClass("selected");
removeClass( [classes] ) 从所有匹配的元素中删除全部或者指定
从匹配的元素中删除 'selected' 类:
的类。
$("p").removeClass("selected");
toggleClass( class )
如果存在（不存在）就删除（添加）一个 为匹配的元素切换 'selected' 类:
类。
$("p").toggleClass("selected");
toggleClass( class, switch ) 当switch 是true 时添加类,
每三次点击切换高亮样式:
当switch 是false 时删除类
var count = 0;
$("p").click(function(){
$(this).toggleClass("highlight", count++ % 3 ==
});
使用上面的方法, 我们可以将元素的 CSS 类像集合一样修改, 再也不必手工解析字符串.
注意 addClass( class ) 和removeClass( [classes] ) 的参数可以一次传入多个css类, 用空
格分割,比如:
$("#btnAdd").bind("click", function(event) { $("p").addClass("c
olorRed borderBlue"); });
removeClass 方法的参数可选, 如果不传入参数则移除全部 CSS 类:
$("p").removeClass()
2. 修改 CSS 样式
同样当我们想要修改元素的具体某一个CSS 样式,即修改元素属性"style"时,
jQuery 也提供了相应的方
法:
----------------------- 页面 28-----------------------
名称
说明
实例
css( name )
访问第一个匹配元素的样式属性。
取得第一个段落的 color 样式属性的值:
$("p").css("color");
css( properties ) 把一个“名/值对”对象设置为所有匹配元素的样 将所有段落的字体颜色设为红色并且背景为蓝色:
式属性。
$("p").css({ color: "#ff0011", background: "blue" }
这是一种在所有匹配的元素上设置大量样式属
性的最佳方式。
css( name, value ) 在所有匹配的元素中，设置一个样式属性的值。将所有段落字体设为红色:
$("p").css("color","red");
数字将自动转化为像素值
七.获取常用属性
虽然我们可以通过获取属性,特性以及 CSS 样式来取得元素的几乎所有信息,
但是注意下面的实验:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E
N" "">
<html xmlns="">
<head>
<title>获取对象宽度</title>
<script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc
2.js"></script>
<script type="text/javascript">
$(function()
{
alert("attr(\"width\"):" + $("#testDiv").attr("width")); /
/undifined
alert("css(\"width\"):" + $("#testDiv").css("width")); //
auto(ie6) 或 1264px(ff)
alert("width():" + $("#testDiv").width()); //正确的数值 1
264
alert("style.width:" + $("#testDiv")[0].style.width ); /
/空值
})
</script>
</head>
<body>
----------------------- 页面 29-----------------------
<div id="testDiv">
测试文本</div>
</body>
</html>
我们希望获取测试图层的宽度,
使用 attr 方法获取"元素特性"为 undifined, 因为并没有为div 添加wid
th. 而使用 css()方法虽然可以获取到 style 属性的值, 但是在不同浏览器里返回的结果不同, IE6 下返回
auto, 而 FF下虽然返回了正确的数值但是后面带有"px". 所以jQuery 提供了width()方法, 此方法返回
的是正确的不带px 的数值.
针对上面的问题, jQuery 为常用的属性提供了获取和设置的方法, 比如width()用户获取元素的宽度, 而
width(val)用来设置元素宽度.
下面这些方法可以用来获取元素的常用属性值:
1.宽和高相关 Height and Width
名称
说明
举例
height( )
取得第一个匹配元素当前计算的高度值（px）。
获取第一段的高:
$("p").height();
height( val )
为每个匹配的元素设置CSS 高度(hidth)属性的值。把所有段落的高设为 20:
如果没有明确指定单位（如：em 或%），使用px。$("p").height(20);
width( )
取得第一个匹配元素当前计算的宽度值（px）。
获取第一段的宽:
$("p").width();
width( val )
为每个匹配的元素设置CSS 宽度(width)属性的
将所有段落的宽设为 20:
值。
$("p").width(20);
如果没有明确指定单位（如：em 或%），使用 px。
innerHeight( )
获取第一个匹配元素内部区域高度（包括补白、不 见最后示例
包括边框）。
此方法对可见和隐藏元素均有效。
innerWidth( )
获取第一个匹配元素内部区域宽度（包括补白、不 见最后示例
包括边框）。
此方法对可见和隐藏元素均有效。
outerHeight( [margin] ) 获取第一个匹配元素外部高度（默认包括补白和边 见最后示例
框）。
此方法对可见和隐藏元素均有效。
outerWidth( [margin] ) 获取第一个匹配元素外部宽度（默认包括补白和边 见最后示例
框）。
----------------------- 页面 30-----------------------
此方法对可见和隐藏元素均有效。
关于在获取长宽的函数中, 要区别"inner", "outer"和 height/width 这三种函数的区别:
outerWith 可以接受一个 bool 值参数表示是否计算 margin 值.
相信此图一目了然各个函数所索取的范围. 图片以width 为例说明的, height 的各个函数同理.
2.位置相关 Positioning
另外在一些设计套弹出对象的脚本中,常常需要动态获取弹出坐标并且设置元素的位置.
但是很多的计算位置的方法存在着浏览器兼容性问题,
jQuery 中为我们提供了位置相关的各个函数:
名称
说明
举例
offset( )
获取匹配元素在当前窗口的相对偏
获取第二段的偏移:
移。
var p = $("p:last");
var offset = p.offset();
返回的对象包含两个整形属性：top
p.html( "left: " + offset.left + ", top: " + offset
和 left。此方法只对可见元素有效。
position( ) 获取匹配元素相对父元素的偏移。
获取第一段的偏移:
var p = $("p:first");
返回的对象包含两个整形属性：top
var position = p.position();
和 left。为精确计算结果，请在补白、
$("p:last").html( "left: " + position.left + ", top: "
边框和填充属性上使用像素单位。此
方法只对可见元素有效。
----------------------- 页面 31-----------------------
scrollTop( ) 获取匹配元素相对滚动条顶部的偏
获取第一段相对滚动条顶部的偏移:
移。
var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
此方法对可见和隐藏元素均有效。
scrollTop( val ) 传递参数值时，设置垂直滚动条顶部 设定垂直滚动条值:
偏移为该值。
$("div.demo").scrollTop(300);
此方法对可见和隐藏元素均有效。
scrollLeft( ) 获取匹配元素相对滚动条左侧的偏
获取第一段相对滚动条左侧的偏移:
移。
var p = $("p:first");
$("p:last").text( "scrollLeft:" + p.scrollLeft() );
此方法对可见和隐藏元素均有效。
scrollLeft( val ) 传递参数值时，设置水平滚动条左侧 设置相对滚动条左侧的偏移:
偏移为该值。
$("div.demo").scrollLeft(300);
此方法对可见和隐藏元素均有效。
八.总结
本篇文章主要讲解如何使用jQuery 操作元素的属性和修改样式. 请大家主要注意元素属性和DOM属性的
区别. 下一篇文章将讲解最重要的事件, 介绍如何绑定事件, 操作事件对象等.
五． 事件与事件对象
一.摘要
事件是脚本编程的灵魂. 所以本章内容也是jQuery 学习的重点. 本文将对jQuery 中的事件处理以及事件
对象进行详细的讲解.
二.前言
本篇文章是至今为止本系列内容最多的一篇, 足以可见其重要性.
大家反映要多列举示例. 我会在时间允
许的情况下尽量多列举示例. 真正的投入生产使用的实例暂时还无法加入到文章中, 但是可能最后我会列
举一些作品供大家借鉴. 另外本人水平有限, 因为我不是UI 设计师. 文章可能有错误的地方, 希望大家帮
忙指出, 一起学习一起进步. 在技术的世界里我们是没有任何利益瓜葛. 希望大家都抱着彼此鼓励的心态,
对于回复中的激进评论我也都会考虑, 但是希望能够彼此尊重, 保护博客园这片程序员的净土!
三.事件与事件对象
曾经在我的 "Javascript公共脚本库系列(二): 添加事件多播委托的方法" 和 "Javascript公共脚本库系
列(三): 格式化事件对象/事件对象详解" 两篇文章中,
曾讲解过javascript中的事件和事件对象.
----------------------- 页面 32-----------------------
首先看一下我们经常使用的添加事件的方式:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E
N" "">
<html xmlns="">
<head>
<title>javascript 中的事件</title>
<script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc
2.js"></script>
<script type="text/javascript">
$(function()
{
document.getElementById("testDiv2").onclick = showM
sg;
})
function showMsg(event)
{
alert("!!!");
}
</script>
</head>
<body>
<div id="testDiv1" onclick="showMsg();">单击事件 1</div>
<div id="testDiv2">单击事件 2</div>
</body>
</html>
我们最常使用为元素添加 onclick 元素属性的方式添加事件.
为testDiv2 的添加onclick 事件的方式是修改 Dom 属性.
在上一章中已经说明了什么是元素属性, 什么是 Dom 属性.这两种方式的效果相同. 当单击div 时会显示
提示框.
请注意, 虽然效果相同, 但是并不等效.
document.getElementById("testDiv2").onclick = showMsg;
----------------------- 页面 33-----------------------
等效于:
<div id="testDiv1" onclick="alert("!!!");">单击事件 1</div>
注意两者的区别了吗?
我们常用的修改元素属性添加事件的方式, 实际上是建立了一个匿名函数:
document.getElementById("testDiv1").onclick = function(event)
{
alert("!!!");
};
这个匿名函数的签名和我们手写的 showMsg 签名相同, 所以可以把 showMsg 直接赋值给 onclick.
这种方式的弊端是:
1. 只能为一个事件绑定一个事件处理函数.
使用"="赋值会把前面为此时间绑定的所有事件处理函数冲
掉.
2. 在事件函数(无论是匿名函数还是绑定的函数)中获取事件对象的方式在不同浏览器中要特殊处理:
IE 中,事件对象是window 对象的一个属性.事件处理函数必须这样访问事件对象:
obj.onclick=function()
{
var oEvent = window.event;
}
在 DOM 标准中,事件对象必须作为唯一参数传给事件处理函数:
obj.onclick=function()
{
var oEvent = arguments[0];
}
除了使用argument[0]访问此参数, 我们也可以指定参数名称,上面的代码等同于:
obj.onclick=function(oEvent)
{
}
目前兼容DOM 的浏览器有Firefox,Safari,Opera,IE7 等.
----------------------- 页面 34-----------------------
3. 添加多播委托的函数在不同浏览器中是不一样的.
下面是在"Javascript公共脚本库系列(二): 添加事件多播委托的方法"文章中,
提供的兼容多浏览器添加
多播委托的方法:
//统一的为对象添加多播事件委托的方法
/*
参数说明:
oTarget
: 要添加事件的对象.比如"document".
sEventType : 事件类型.比如单击事件"click".
fnHandler : 发生事件时调用的方法. 比如一个静态函数"hideCalend
ar"
使用举例:
//单击页面的任何元素,只要没有取消冒泡,都可以关闭日历控件
var cf = document.getElementById("CalFrame");
if( cf != null && hideCalendar != null )
{
ScriptHelper.addEventListener( document, "click", hideCa
lendar );
}
*/
scriptHelper.prototype.addEventListener = function(oTarget, sEv
entType, fnHandler)
{
if( oTarget.addEventListener )//for dom
{
oTarget.addEventListener( sEventType, fnHandler, false )
}
else if( oTarget.attachEvent )//for ie
{
oTarget.attachEvent( "on" + sEventType, fnHandler);
}
}
所以我们首先应该摒弃<div onclick="..."></div>这种通过修改元素属性添加事件的方式. 尽量使用
添加多播事件委托的方式为一个事件绑定多个事件处理函数, 比如为document对象的单击事件添加一个
关闭弹出层的方法, 使用多播就不会影响 document 对象原有的事件处理函数.
----------------------- 页面 35-----------------------
四. jQuery 中的事件
有了jQuery, 我们有了处理对象事件的一系列函数.
上面基础知识还是要懂, 但是再也不用自己去实现
处理多播事件委托的函数了.
正所谓有了jQuery, 天天喝茶水. 下面是在jQuery 中最常使用的bind()
方法举例:
$("#testDiv4").bind("click", showMsg);
我们为 id 是testDiv4 的元素, 添加列 click 事件的事件处理函数 showMsg.
使用jQuery 事件处理函数的好处:
1. 添加的是多播事件委托.
也就是为 click 事件又添加了一个方法, 不会覆盖对象的 click 事件原有的
事件处理函数.
$("#testDiv4").bind("click", function(event) { alert
("one"); });
$("#testDiv4").bind("click", function(event) { alert
("two"); });
单击testDiv4 对象时, 依次提示"one"和"two".
2. 统一了事件名称.
添加多播事件委托时, ie 中是事件名称前面有"on". 但是使用 bind()函数我们不用区分ie 和 dom ,
因
为内部jQuery 已经帮我们统一了事件的名称.
3. 可以将对象行为全部用脚本控制.
让 HTML 代码部分只注意"显示"逻辑. 现在的趋势是将 HTML 的行为, 内容与样式切分干净. 其中用脚本
控制元素行为, 用 HTML标签控制元素内容, 用CSS 控制元素样式. 使用jQuery 事件处理函数可以避免
在 HTML 标签上直接添加事件.
下面是基础的jQuery 事件处理函数:
事件处理 Event Handling:
名称
说明
举例
bind( type,
为每一个匹配元素的特定事件（像click） 当每个段落被点击的时候，弹出其文本:
[data], fn ) 绑定一个事件处理器函数。
$("p").bind("click", function(){
alert( $(this).text() );
});
----------------------- 页面 36-----------------------
one( type,
为每一个匹配元素的特定事件（像click） 当所有段落被第一次点击的时候，显示所有其文本:
[data], fn )
绑定一个一次性的事件处理函数。
$("p").one("click", function(){
alert( $(this).text() );
});
trigger( event, 在每一个匹配的元素上触发某类事件。
给一个事件传递参数:
[data] )
这个函数也会导致浏览器同名的默认行为
的执行。比如，如果用trigger()触发一个 $("p").click( function (event, a, b) {
'submit'，则同样会导致浏览器提交表单。 // 一个普通的点击事件时，a 和 b 是 undefined 类型
如果要阻止这种默认行为，应返回false。
// 如果用下面的语句触发，那么 a 指向"foo",而 b 指向"bar"
} ).trigger("click", ["foo", "bar"]);
你也可以触发由 bind()注册的自定义事件
triggerHandler( 这个特别的方法将会触发指定的事件类型
如果你对一个focus 事件执行了 .triggerHandler() ，浏览器默认
event, [data] ) 上所有绑定的处理函数。但不会执行浏览 绑定的动作:
器默认动作.
$("#old").click(function(){
$("input").trigger("focus");
});
$("#new").click(function(){
$("input").triggerHandler("focus");
});
$("input").focus(function(){ $("<span>Focused!</span
Out(1000); });
unbind( type,
bind()的反向操作，从每一个匹配的元素 把所有段落的所有事件取消绑定:
fn )
中删除绑定的事件。
$("p").unbind()
如果没有参数，则删除所有绑定的事件。 将段落的 click 事件取消绑定:
你可以将你用 bind()注册的自定义事件取 $("p").unbind( "click" )
消绑定。
删除特定函数的绑定，将函数作为第二个参数传入:
如果提供了事件类型作为参数，则只删除该
var foo = function () {
类型的绑定事件。
// 处理某个事件的代码
如果把在绑定时传递的处理函数作为第二
};
个参数，则只有这个特定的事件处理函数会 $("p").bind("click", foo); // ... 当点击段落的时候会触发 foo
被删除。
$("p").unbind("click", foo); // ... 再也不会被触发 foo
五.常用事件函数举例
1.bind( type, [data], fn ) 函数举例
bind()是最常使用的函数,
注意方法签名上 data 参数, 可以在事件处理之前传递一些附加的数据:
----------------------- 页面 37-----------------------
function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
注意 event 参数的使用. jQuery 中统一了事件对象, 将事件对象作为事件处理函数的唯一参数传递.
data 参数我们也要通过 event.data 进行访问. 为何要提供data 参数呢?
因为我们经常碰到这样的问题: 希望在事件处理中根据事件源的某些数据进行特殊处理.
目前网上有两种存在争议的解决方法:
(1) 使用自定义元素属性存储数据.
比如:
<div id="testDiv5" customer="customer data 1">获取自定义数据‐1</d
iv>
在事件处理函数中获取数据:
$("#testDiv5").bind("click", function(event) { alert($(event.ta
rget).attr("customer")); });
attr 函数是上一讲中的知识, 用于获取元素的"元素属性", 而且可以获取自定义的元素属性. 单击 div 后
将显示:
(2) 使用脚本将数据传递给事件处理函数:
<div id="testDiv6">获取自定义数据‐2</div>
元素没有任何的自定义属性, 添加事件处理函数时将额外的数据传递:
----------------------- 页面 38-----------------------
$("#testDiv6").bind("click", { customer: "customer data 2" }, fu
nction(event) { alert(event.data.customer) });
点击div 后的结果和方法 1相同:
方法 1便于存储和查找数据. 但是自定义属性通过不 W3C 验证.
方法 2 必须要自己想办法存储数据, 并且要制定规则查找指定元素的数据.
从"开发人员"的角度方法 1要更加简单直观. 但是缺点比较严重. 所以如何取舍请大家自己决定.
one( type, [data], fn ) 函数和bind一样, 但是只执行一次.
2. trigger( event, [data] ) 和 triggerHandler( event, [data] )
虽然为元素绑定了某些事件, 比如click, 但是有时希望在程序中触发这些事件,
这两个函数可以实现此
功能.
主要区别是trigger 会出发浏览器默认的动作, 而triggerHandler 不会出发.
通过下面的实例可以明确的区分这两个函数:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E
N" "">
<html xmlns="">
<head>
<title>jQuery 事件处理:trigger和triggerHandler 示例</title>
<script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc
2.js"></script>
<script type="text/javascript">
$(function()
{
$("#old").click(function()
----------------------- 页面 39-----------------------
{
$("#divResult").html("");
$("input").trigger("focus");
});
$("#new").click(function()
{
$("#divResult").html("");
$("input").triggerHandler("focus");
});
$("input").focus(function() { $("<span>Focused!</span
>").appendTo("#divResult"); });
})
</script>
</head>
<body>
<button id="old">
.trigger("focus")</button>
<button id="new">
.triggerHandler("focus")</button><br />
<br />
<input type="text" value="To Be Focused" />
<div id="divResult"></div>
</body>
</html>
当单击".trigger"按钮时, 会调用两次 Focesed, 并且 input 元素获得了焦点:
单击".triggerHandler"按钮时, 只调用一次,并且 input 元素没有获得焦点:
----------------------- 页面 40-----------------------
也就是说, trigger 函数出发了浏览器默认的获取焦点的行为,让input元素获得了焦点, 所以再次调用了f
ocus 事件处理函数.
triggerHandler 只调用为focus 事件绑定的事件处理函数, 而不引发浏览器行为, 所以最后input元素没
有获得焦点.
六.快捷事件 Event Helpers
BUG提示:jquery-1.3.2-vsdoc2.js 这个最新的官方带智能提示的类库, 无法使用快捷事件, 比如cl
ick(), focus(). 使用其他版本的类库则没有问题.
虽然我们可以使用事件处理函数完成对象事件的几乎所有操作, 但是jQuery 提供了对常用事件的封装.
比如单击事件对应的两个方法click()和 click(fn)分别用来触发单击事件和设置单击事件.
设置单击事件:
$("#testDiv").click(function(event) { alert("test div clicked ! ");
});
等效于:
$("#testDiv").bind("click", function(event) { alert("test div c
licked ! "); });
触发单击事件:
$("#testDiv").click();
等效于
$("#testDiv").trigger("click");
注意这里等效的是trigger 而不是triggerHandler.
----------------------- 页面 41-----------------------
此类方法在jQuery 中英文叫做Event Helpers, 我找不到很好的翻译方式, 所以按照功能称其为"快捷方
法", 征集好的翻译名称!
下面是jQuery 的快捷方法列表:
由于都是都是对应的事件, 所以不再写说明和举例了.
名称
说明
举例
blur( )
blur( fn )
change( )
change( fn )
click( )
click( fn )
dblclick( )
dblclick( fn )
error( )
error( fn )
focus( )
focus( fn )
keydown( )
keydown( fn )
keypress( )
keypress( fn )
keyup( )
keyup( fn )
load( fn )
mousedown( fn )
mouseenter( fn )
mouseleave( fn )
mousemove( fn )
mouseout( fn )
mouseover( fn )
mouseup( fn )
resize( fn )
----------------------- 页面 42-----------------------
scroll( fn )
select( )
select( fn )
submit( )
submit( fn )
unload( fn )
七. 交互帮助方法
除了基本的实践, jQuery提供了两个和事件相关的帮助方法: hover( over, out ) 和 toggle( fn,
fn2, fn3,fn4,... )
1. hover( over, out )
hover 函数主要解决在原始javascript 中mouseover和 mouseout 函数存在的问题, 看下面这个示例:
有两个 div(红色区域), 里面分别嵌套了一个 div(黄色区域). HTML 代码如下:
<div class="outer" id="outer1">
Outer 1
<div class="inner" id="inner1">Inner 1</div>
</div>
<div class="outer" id="outer2">
Outer 2
<div class="inner" id="inner2">Inner 2</div>
</div>
<div id="console"></div>
----------------------- 页面 43-----------------------
绑定如下事件:
<script type="text/javascript">
function report(event) {
$('#console').append('<div>'+event.type+'</div>');
}
$(function(){
$('#outer1')
.bind('mouseover',report)
.bind('mouseout',report);
$('#outer2').hover(report,report);
});
</script>
Outer1 我们使用了 mouseover和 mouseout 事件, 当鼠标从Outer1 的红色区域移动到黄色区域时,
会发现虽然都是在 outer1 的内部移动, 但是却触发了 mouseout 事件:
很多时候我们不希望出现上图的结果,
而是希望只有鼠标在 Outer1 内部移动时不触发事件, Outer2 使
用 Hover()函数实现了这个效果:
----------------------- 页面 44-----------------------
注意这里的事件名称进入叫做"mouseenter", 离开叫做"mouseleave", 而不再使用"mouseover"和"
mouseleave"事件.
有经验的开发人员会立刻想到在制作弹出菜单时, 经常遇到这个问题: 为弹出菜单设置了mouseout事件
自动关闭, 但是鼠标在弹出菜单内移动时常常莫名其妙触发 mouseout 事件让菜单关闭. hover()函数帮
助我们很好的解决了这个问题.
2. toggle( fn, fn2, fn3,fn4,... )
toggle 函数可以为对象添加click 事件绑定函数,
但是设置每次点击后依次的调用函数。
如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函
数，如果有更多函数，则再次触发，直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。
可以使用 unbind("click")来删除。
下面的示例演示如何使用toggle 函数:
<!DOCTYPE HTML PUBLIC "‐//W3C//DTD HTML 4.01//EN" "
3.org/TR/html4/strict.dtd">
<html>
<head>
<title>toggle example</title>
<link rel="stylesheet" type="text/css" href="css/hover.css">
<script type="text/javascript" src="scripts/jquery‐1.3.2‐vs
doc2.js"></script>
<script type="text/javascript">
$(function()
{
$("li").toggle(
function()
----------------------- 页面 45-----------------------
{
$(this).css({ "list‐style‐type": "disc", "color
": "blue" });
},
function()
{
$(this).css({ "list‐style‐type": "square", "col
or": "red" });
},
function()
{
$(this).css({ "list‐style‐type": "none", "color
": "" });
}
);
})
</script>
</head>
<body>
<ul>
<li style="cursor:pointer">click me</li>
</ul>
</body>
</html>
结果是每点击一次"click me"变换一次列表符号和文字颜色.
八.使用jQuery 事件对象
使用事件自然少不了事件对象.
因为不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异, 导
致我们很难跨浏览器使用事件对象.
jQuery 中统一了事件对象, 当绑定事件处理函数时,
会将jQuery 格式化后的事件对象作为唯一参数传
入:
$("#testDiv").bind("click", function(event) { });
----------------------- 页面 46-----------------------
关于event对象的详细说明, 可以参考jQuery官方文档:
ent
jQuery 事件对象将不同浏览器的差异进行了合并, 比如可以在所有浏览器中通过 event.target 属性来
获取事件的触发者(在 IE 中使用原生的事件对象, 需要访问event.srcElement).
下面是jQuery 事件对象可以在扩浏览器支持的属性:
属性名称
描述
举例
事件类型.如果使用一个 $("a").click(function(event) {
type
事件处理函数来处理多 alert(event.type);
个事件, 可以使用此属
});
性获得事件类型,比如
click.
获取事件触发者 DOM
$("a[href=http://google.com]").click(function(event)
target
对象
alert(event.target.href);
});
事件调用时传入额外参
$("a").each(function(i) {
data
数.
$(this).bind('click', {index:i}, function(e){
alert('my index is ' + e.data.index);
});
});
对于鼠标事件, 标示触
$("a").mouseout(function(event) {
relatedTarget 发事件时离开或者进入 alert(event.relatedTarget);
的DOM 元素
});
冒泡前的当前触发事件 $("p").click(function(event) {
currentTarget 的DOM 对象, 等同于
alert( event.currentTarget.nodeName );
this.
});
结果:P
鼠标事件中, 事件相对
$("a").click(function(event) {
pageX/Y
于页面原点的水平/垂直
alert("Current mouse position: " + event.pageX + ", "
坐标.
});
上一个事件处理函数返
$("p").click(function(event) {
result
回的值
return "hey"
});
$("p").click(function(event) {
alert( event.result );
});
结果:"hey"
----------------------- 页面 47-----------------------
事件发生时的时间戳.
var last;
timeStamp
$("p").click(function(event) {
if( last )
alert( "time since last event " + event.timeSta
last = event.timeStamp;
});
上面是jQuery 官方文档中提供的event对象的属性. 在"jQuery实战"一书中还提供了下面的多浏览器支
持的属性, 时间关系我没有尝试每一个属性, 大家可以帮忙验证是否在所有浏览器下可用:
属性名称
描述
举例
altKey
Alt 键是否被按下. 按下返回true
ctrlKey ctrl 键是否被按下, 按下返回true
metaKey Meta 键是否被按下, 按下返回true.
meta 键就是 PC 机器的 Ctrl 键,或者 Mac 机器上面的 Command
键
shiftKey Shift 键是否被按下, 按下返回true
keyCode 对于keyup和keydown事件返回被按下的键. 不区分大小写, a和
A 都返回 65.
对于 keypress 事件请使用which 属性, 因为which 属性跨浏览时
依然可靠.
which
对于键盘事件, 返回触发事件的键的数字编码. 对于鼠标事件, 返
回鼠标按键号(1 左,2 中,3 右).
screenX/Y 对于鼠标事件, 获取事件相对于屏幕原点的水平/垂直坐标
事件对象除了拥有属性, 还拥有事件. 有一些是一定会用到的事件比如取消冒泡 stopPropagation() 等.
下面是jQuery 事件对象的函数列表:
名称
说明
举例
取消可能引起任何语意操作的事件.
$("a").click(function(event){
preventDefault() 比如<a>元素的href链接加载, 表单 event.preventDefault();
提交以及 click 引起复选框的状态切
// do something
换.
});
是否调用过
$("a").click(function(event){
isDefaultPrevente
alert( event.isDefaultPrevented() );
d()
preventDefault()
event.preventDefault();
方法
alert( event.isDefaultPrevented() );
});
取消事件冒泡
$("p").click(function(event){
stopPropagation(
event.stopPropagation();
----------------------- 页面 48-----------------------
)
// do something
});
是否调用过
$("p").click(function(event){
isPropagationSto
alert( event.isPropagationStopped() );
pped()
stopPropagation()
event.stopPropagation();
方法
alert( event.isPropagationStopped() );
});
取消执行其他的事件处理函数并取消
$("p").click(function(event){
stopImmediatePr 事件冒泡.
event.stopImmediatePropagation();
opagation()
});
如果同一个事件绑定了多个事件处理
$("p").click(function(event){
函数, 在其中一个事件处理函数中调
// This function won't be executed
用此方法后将不会继续调用其他的事
});
件处理函数.
是否调用过
$("p").click(function(event){
isImmediateProp
alert( event.isImmediatePropagationStop
agationStopped() stopImmediatePropagation( event.stopImmediatePropagation();
)
alert( event.isImmediatePropagationStop
方法
});
这些函数中 stopPropagation() 是我们最长用的也是一定会用到的函数. 相当于操作原始 event 对象
的event.cancelBubble=true 来取消冒泡.
九. 总结
事件是javascript 的灵魂, 我花了很久写这篇文章,翻译jQuery 官方的API 文档. 列表中的很多例子直接
从官网上摘抄的,
有些列表中的方法我也没有用过, 所以如果大家发现问题请及时通知我修改.
接下来的文章将分别讲解Ajax 和动画效果.
最后通过讲解两个我修改的jQuery 插件来学习jQuery 的
插件开发.
六． Ajax 快餐
一.摘要
本系列文章将带您进入jQuery 的精彩世界, 其中有很多作者具体的使用经验和解决方案,
即使你会使用
jQuery 也能在阅读中发现些许秘籍.
本篇文章讲解如何使用jQuery 方便快捷的实现Ajax 功能.统一所有开发人员使用Ajax 的方式.
----------------------- 页面 49-----------------------
二.前言
Ajax 让用户页面丰富起来, 增强了用户体验. 使用Ajax 是所有Web 开发的必修课. 虽然Ajax 技术并不
复杂, 但是实现方式还是会因为每个开发人员的而有所差异.jQuery提供了一系列Ajax 函数来帮助我们
统一这种差异, 并且让调用Ajax 更加简单.
三.原始Ajax 与jQuery 中的Ajax
首先通过实例, 来看一下jQuery 实现Ajax 有多简单. 下面是一个使用原始Ajax 的示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E
N" "">
<html xmlns="">
<head>
<title>jQuery Ajax</title>
<script type="text/javascript">
$(function()
{
var xhr = new AjaxXmlHttpRequest();
$("#btnAjaxOld").click(function(event)
{
var xhr = new AjaxXmlHttpRequest();
xhr.onreadystatechange = function()
{
if (xhr.readyState == 4)
{
document.getElementById("divResult").inner
HTML = xhr.responseText;
}
}
xhr.open("GET", "data/AjaxGetCityInfo.aspx?resultT
ype=html", true);
xhr.send(null);
});
})
//跨浏览器获取 XmlHttpRequest 对象
----------------------- 页面 50-----------------------
function AjaxXmlHttpRequest()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTT
P");
}
catch (e)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XM
LHTTP");
}
catch (e)
{
alert("您的浏览器不支持AJAX ！");
return false;
}
}
}
return xmlHttp;
}
</script>
</head>
<body>
----------------------- 页面 51-----------------------
<button id="btnAjaxOld">原始Ajax 调用</button><br />
<br />
<div id="divResult"></div>
</body>
</html>
上面的实例中, data/AjaxGetCityInfo.aspx?resultType=html 地址会返回一段 HTML 代码.
使用原始Ajax, 我们需要做较多的事情, 比如创建XmlHttpRequest 对象,
判断请求状态, 编写回调函
数等.
而用jQuery 的Load 方法, 只需要一句话:
$("#divResult").load("data/AjaxGetCityInfo.aspx", { "resultType
": "html" });
曾经我是一个原始Ajax 的绝对拥护者, 甚至摒弃微软的Asp.net Ajax, 因为我想要最高的代码灵活度.
使用原始Ajax 让我感觉完成自己的工作更加轻松, 即使多写了一些代码. 但是当我去翻看别人的Ajax 代
码并且尝试修改的时候, 我改变了我的看法--我们的代码到处分布着创建XmlHttpRequest 方法的函数,
或者某些Ajax 程序逻辑性和结构性很差, 很难看懂.
我们可以将通用方法放到一个js 文件中, 然后告诉大家"嘿伙伴们, 都来用这个js 中的方法". 但是在某些
时候有些新来的外包人员并不知道有这个js 文件的存在. 而且其实这个通用的js 就是一个公共的脚本类
库, 我相信没有人会觉得自己开发一个类库会比jQuery 更好!
所以我放弃了制造轮子的计划,
大家都使用jQuery 编写Ajax 相关的方法就可以解决各种差异性问题,
并且让工作更有效率.
现在只是用jQuery 的Ajax 函数, 我的页面变得简洁了:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E
N" "">
<html xmlns="">
<head>
<title>jQuery Ajax</title>
<script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc
2.js"></script>
<script type="text/javascript">
$(function()
----------------------- 页面 52-----------------------
{
$("#btnAjaxJquery").click(function(event)
{
$("#divResult").load("data/AjaxGetCityInfo.aspx",
{ "resultType": "html" });
});
})
</script>
</head>
<body>
<button id="btnAjaxJquery">使用jQuery 的load 方法</button>
<br />
<div id="divResult"></div>
</body>
</html>
四.jQuery Ajax 详解
jQuery提供了几个用于发送Ajax请求的函数. 其中最核心也是最复杂的是jQuery.ajax( options ),所
有的其他Ajax函数都是它的一个简化调用. 当我们想要完全控制Ajax时可以使用此结果, 否则还是使用
简化方法如get, post, load等更加方便. 所以jQuery.ajax( options ) 方法放到最后一个介绍. 先来
介绍最简单的load方法:
1. load( url, [data], [callback] )
Returns: jQuery 包装集
说明:
load 方法能够载入远程 HTML 文件代码并插入至 DOM 中。
默认使用 GET 方式, 如果传递了 data 参数则使用 Post 方式.
- 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML
文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector", 默认的选择器是"
body>*".
讲解:
load 是最简单的Ajax 函数, 但是使用具有局限性:
----------------------- 页面 53-----------------------
*
它主要用于直接返回 HTML 的Ajax 接口
*
load 是一个jQuery 包装集方法,需要在jQuery 包装集上调用,并且会将返回的 HTML 加载到对
象中, 即使设置了回调函数也还是会加载.
不过不可否认 load 接口设计巧妙并且使用简单.下面通过示例来演示 Load 接口的使用:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E
N" "">
<html xmlns="">
<head>
<title>jQuery Ajax - Load</title>
<script type="text/javascript" src="../scripts/jquery-1.3.2-vsdo
c2.js"></script>
<script type="text/javascript">
$(function()
{
$("#btnAjaxGet").click(function(event)
{
//发送 Get 请求
$("#divResult").load("../data/AjaxGetMethod.aspx?p
aram=btnAjaxGet_click" + "×tamp=" + (new Date()).getTim
e());
});
$("#btnAjaxPost").click(function(event)
{
//发送 Post 请求
$("#divResult").load("../data/AjaxGetMethod.aspx",
{ "param": "btnAjaxPost_click" });
});
$("#btnAjaxCallBack").click(function(event)
{
//发送 Post 请求, 返回后执行回调函数.
----------------------- 页面 54-----------------------
$("#divResult").load("../data/AjaxGetMethod.aspx",
{ "param": "btnAjaxCallBack_click" }, function(responseText, textS
tatus, XMLHttpRequest)
{
responseText = " Add in the CallBack Functio
n! <br/>" + responseText
$("#divResult").html(responseText); //或者: $(t
his).html(responseText);
});
});
$("#btnAjaxFiltHtml").click(function(event)
{
//发送 Get 请求, 从结果中过滤掉 "鞍山" 这一项
$("#divResult").load("../data/AjaxGetCityInfo.aspx?r
esultType=html" + "×tamp=" + (new Date()).getTime() + "
ul>li:not(:contains('鞍山'))");
});
})
</script>
</head>
<body>
<button id="btnAjaxGet">使用 Load执行Get 请求</button><br /
>
<button id="btnAjaxPost">使用Load执行Post请求</button><br
/>
<button id="btnAjaxCallBack">使用带有回调函数的Load方法</but
ton><br />
<button id="btnAjaxFiltHtml">使用selector过滤返回的HTML 内容<
/button>
<br />
<div id="divResult"></div>
</body>
</html>
上面的示例演示了如何使用 Load 方法.
----------------------- 页面 55-----------------------
提示:我们要时刻注意浏览器缓存,
当使用GET 方式时要添加时间戳参数 (net Date()).getTime()
来保证每次发送的 URL 不同, 可以避免浏览器缓存.
提示: 当在url 参数后面添加了一个空格, 比如"
"的时候, 会出现"无法识别符号"的错误, 请求还是能
正常发送. 但是无法加载 HTML 到 DOM. 删除后问题解决.
2.jQuery.get( url, [data], [callback], [type] )
Returns: XMLHttpRequest
说明:
通过远程 HTTP GET 请求载入信息。
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执
行函数，请使用 $.ajax。
讲解:
此函数发送 Get 请求, 参数可以直接在 url 中拼接, 比如:
$.get("../data/AjaxGetMethod.aspx?param=btnAjaxGet_click");
或者通过data 参数传递:
$.get("../data/AjaxGetMethod.aspx", { "param": "btnAjaxGet2_cli
ck" });
两种方式效果相同, data 参数会自动添加到请求的 url 中
如果 url 中的某个参数, 又通过 data 参数传递, 不会自动合并相同名称的参数.
回调函数的签名如下:
function (data, textStatus) {
// data could be xmlDoc, jsonObj, html, text, etc...
this; // the options for this ajax request
}
其中 data 是返回的数据, testStatus 表示状态码, 可能是如下值:
"timeout","error","notmodified","success","parsererror"
在回调函数中的this是获取options对象的引用.有关options的各种说明,
请参见:
#options
----------------------- 页面 56-----------------------
type参数是指data数据的类型, 可能是下面的值:
"xml", "html", "script", "json", "jsonp", "text".
默认为"html".
jQuery.getJSON( url, [data], [callback] ) 方法就相当于 jQuery.get(url, [data],[callbac
k], "json")
3. jQuery.getJSON( url,
[data], [callback] )
Returns: XMLHttpRequest
相当于: jQuery.get(url, [data],[callback], "json")
说明:
通过 HTTP GET 请求载入 JSON 数据。
在 jQuery 1.2 中，您可以通过使用JSONP 形式的回调函数来加载其他网域的JSON数据，如 "myurl?
callback=?"。jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
注意：此行以后的代码将在这个回调函数执行前执行。
讲解:
getJSON 函数仅仅将get 函数的type 参数设置为"JSON"而已. 在回调函数中获取的数据已经是按照JS
ON 格式解析后的对象了:
$.getJSON("../data/AjaxGetCityInfo.aspx", { "resultType": "json
" }, function(data, textStatus)
{
alert(data.length);
alert(data[0].CityName);
});
服务器端返回的字符串如下:
[{""pkid"":""0997"",""ProvinceId"":""XJ"",""CityName"":""阿克苏"",""
CityNameEn"":""Akesu"",""PostCode"":""843000"",""isHotCity"":fals
e},
----------------------- 页面 57-----------------------
{""pkid"":""0412"",""ProvinceId"":""LN"",""CityName"":""鞍山"",""Ci
tyNameEn"":""Anshan"",""PostCode"":""114000"",""isHotCity"":fals
e}]
示例中我返回的饿是一个数组, 使用 data.length 可以获取数组的元素个数,
data[0]访问第一个元素,
data[0].CityName 访问第一个元素的 CityName 属性.
4.jQuery.getScript( url, [callback] )
Returns: XMLHttpRequest
相当于: jQuery.get(url, null, [callback], "script")
说明:
通过 HTTP GET 请求载入并执行一个 JavaScript 文件。
jQuery 1.2 版本之前，getScript 只能调用同域 JS 文件。 1.2 中，您可以跨域调用 JavaScript 文
件。注意：Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本，
请加入延时函数。
讲解:
以前我使用dojo 类库时官方默认的文件不支持跨域最后导致我放弃使用 dojo(虽然在网上找到了可以跨
域的版本, 但是感觉不够完美).
所以我特别对这个函数的核心实现和使用做了研究.
首先了解此函数的jQuery 内部实现, 仍然使用 get 函数, jQuery 所有的Ajax 函数包括get 最后都是用
的是jQuery.ajax(), getScript 将传入值为"script"的type 参数, 最后在Ajax 函数中对type 为scri
pt 的请求做了如下处理:
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.src = s.url;
上面的代码动态建立了一个 script 语句块, 并且将其加入到 head 中:
head.appendChild(script);
当脚本加载完毕后, 再从 head 中删除:
// Handle Script loading
if ( !jsonp ) {
----------------------- 页面 58-----------------------
var done = false;
// Attach handlers for all browsers
script.onload = script.onreadystatechange = funct
ion(){
if ( !done && (!this.readyState ||
this.readyState == "loaded" || this.re
adyState == "complete") ) {
done = true;
success();
complete();
// Handle memory leak in IE
script.onload = script.onreadystatechange
= null;
head.removeChild( script );
}
};
}
我主要测试了此函数的跨域访问和多浏览器支持.下面是结果:
IE6
FireFox
注意事项
非跨域引用js
通过
通过
回调函数中的data 和textStatus 均可用
跨域引用js
通过
通过
回调函数中的data 和textStatus 均为 undifined
下面是我关键的测试语句, 也用来演示如何使用getScript 函数:
$("#btnAjaxGetScript").click(function(event)
{
$.getScript("../scripts/getScript.js", function(data, t
extStatus)
{
alert(data);
alert(textStatus);
alert(this.url);
});
});
----------------------- 页面 59-----------------------
$("#btnAjaxGetScriptCross").click(function(event)
{
$.getScript("",
function(data, textStatus)
{
alert(data);
alert(textStatus);
alert(this.url);
});
});
5. jQuery.post( url, [data], [callback], [type] )
Returns: XMLHttpRequest
说明:
通过远程 HTTP POST 请求载入信息。
这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时
执行函数，请使用 $.ajax。
讲解:
具体用法和get 相同, 只是提交方式由"GET"改为"POST".
6. jQuery.ajax( options )
Returns: XMLHttpRequest
说明:
通过 HTTP 请求加载远程数据。
jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。
$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象，但特殊情况下
可用于手动终止请求。
$.ajax() 只有一个参数：参数 key/value 对象，包含各配置及回调函数信息。详细参数选项见下。
----------------------- 页面 60-----------------------
注意： 如果你指定了 dataType 选项，请确保服务器返回正确的 MIME 信息，(如 xml 返回 "text/x
ml")。错误的 MIME 类型可能导致不可预知的错误。见 Specifying the Data Type for AJAX Requ
ests 。
注意：如果 dataType 设置为"script"，那么所有的远程(不在同一域名下)的POST 请求都将转化为 GET
请求。(因为将使用DOM 的script 标签来加载)
jQuery 1.2 中，您可以跨域加载 JSON 数据，使用时需将数据类型设置为 JSONP。使用 JSONP 形
式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。数
据类型设置为 "jsonp" 时，jQuery 将自动调用回调函数。
讲解:
这是jQuery 中Ajax 的核心函数, 上面所有的发送Ajax 请求的函数内部最后都会调用此函数.options参
数支持很多参数, 使用这些参数可以完全控制ajax 请求. 在Ajax 回调函数中的this 对象也是 options
对象.
因为平时使用最多的还是简化了的get 和 post 函数, 所以在此不对options 参数做详细讲解了. options
参数文档请见:
#options
五.Ajax 相关函数.
jQuery 提供了一些相关函数能够辅助Ajax 函数.
1. jQuery.ajaxSetup( options )
无返回值
说明:
设置全局 AJAX 默认options 选项。
讲解:
有时我们的希望设置页面上所有Ajax 属性的默认行为.那么就可以使用此函数设置 options 选项, 此后所
有的Ajax 请求的默认 options 将被更改.
options是一个对象, 可以设置的属性请此连接：#toptio
ns
比如在页面加载时, 我使用下面的代码设置Ajax 的默认option 选项:
$.ajaxSetup({
url: "../data/AjaxGetMethod.aspx",
data: { "param": "ziqiu.zhang" },
----------------------- 页面 61-----------------------
global: false,
type: "POST",
success: function(data, textStatus) { $("#divResult
").html(data); }
});
上面的代码设置了一个Ajax 请求需要的基本数据: 请求 url, 参数, 请求类型, 成功后的回调函数.
此后我们可以使用无参数的 get(), post()或者ajax()方法发送 ajax 请求.完整的示例代码如下:
<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Transitional//EN" "
‐transitional.dtd">
<html xmlns="">
<head>
<title>jQuery Ajax ‐ Load</title>
<script type="text/javascript" src="../scripts/jquery‐1.3.2
‐vsdoc2.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$.ajaxSetup({
url: "../data/AjaxGetMethod.aspx",
data: { "param": "ziqiu.zhang" },
global: false,
type: "POST",
success: function(data, textStatus) { $("#divResu
lt").html(data); }
});
$("#btnAjax").click(function(event) { $.ajax(); });
$("#btnGet").click(function(event) { $.get(); });
$("#btnPost").click(function(event) { $.post(); });
$("#btnGet2").click(function(event) { $.get("../data
/AjaxGetMethod.aspx",{ "param": "other" }); });
});
</script>
----------------------- 页面 62-----------------------
</head>
<body>
<button id="btnAjax">不传递参数调用 ajax()方法</button><br />
<button id="btnGet">不传递参数调用get()方法</button><br />
<button id="btnPost">不传递参数调用 post()方法</button><br />
<button id="btnGet2">传递参数调用 get()方法, 使用全局的默认回调
函数</button><br />
<br />
<div id="divResult"></div>
</body>
</html>
注意当使用 get()或者 post()方法时, 除了type 参数将被重写为"GET"或者"POST"外, 其他参数只要不
传递都是使用默认的全局option. 如果传递了某一个选项, 比如最后一个按钮传递了url 和参数, 则本次
调用会以传递的选项为准. 没有传递的选项比如回调函数还是会使用全局option 设置值.
2.serialize( )
Returns: String
说明:
序列表表格内容为字符串，用于 Ajax 请求。
序列化最常用在将表单数据发送到服务器端时. 被序列化后的数据是标准格式, 可以被几乎所有的而服务
器端支持.
为了尽可能正常工作, 要求被序列化的表单字段都有 name 属性, 只有一个eid 是无法工作的.
像这样写 name 属性:
<input id="email" name="email" type="text" />
讲解:
serialize()函数将要发送给服务器的form 中的表单对象拼接成一个字符串. 便于我们使用Ajax 发送时获
取表单数据. 这和一个 From 按照 Get 方式提交时, 自动将表单对象的名/值放到 url 上提交差不多.
比如这样一个表单:
----------------------- 页面 63-----------------------
生成的字符串为:single=Single¶m=Multiple¶m=Multiple3&check=check2&
radio=radio1
提示:代码见 chapter6\7-serialize.htm
3.serializeArray( )
Returns: Array<Object>
说明:
序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。
注意，此方法返回的是JSON 对象而非JSON 字符串。需要使用插件或者第三方库进行字符串化操作。
讲解:
看说明文档让我有所失望, 使用此函数获取到的是JSON 对象, 但是jQuery 中没有提供将JSON 对象转
化为JSON 字符串的方法.
在JSON 官网上没有找到合适的JSON 编译器, 最后选用了jquery.json 这个jQuery 插件:
使用起来异常简单:
var thing = {plugin: 'jquery-json', version: 1.3};
var encoded = $.toJSON(thing);
//'{"plugin": "jquery-
json", "version": 1.3}'
var name = $.evalJSON(encoded).plugin;
//"jquery-json"
var version = $.evalJSON(encoded).version;
// 1.3
使用serializeArray( ) 再配合 $.toJSON 方法, 我们可以很方便的获取表单对象的JSON, 并且转
换为JSON字符串:
$("#results").html( $.toJSON( $("form").serializeArray() ));
结果为:
----------------------- 页面 64-----------------------
[{"name": "single", "value": "Single"}, {"name": "param", "valu
e": "Multiple"}, {"name": "param", "value": "Multiple3"}, {"nam
e": "check", "value": "check2"}, {"name": "radio", "value": "rad
io1"}]
六.全局Ajax 事件
在jQuery.ajaxSetup( options ) 中的options参数属性中, 有一个global属性:
global
类型:布尔值
默认值: true
说明:是否触发全局的Ajax 事件.
这个属性用来设置是否触发全局的Ajax 事件. 全局Ajax 事件是一系列伴随Ajax 请求发生的事件.主要有
如下事件:
名称
说明
ajaxComplete( callback )
AJAX 请求完成时执行函数
ajaxError( callback )
AJAX 请求发生错误时执行函数
ajaxSend( callback )
AJAX 请求发送前执行函数
ajaxStart( callback )
AJAX 请求开始时执行函数
ajaxStop( callback )
AJAX 请求结束时执行函数
ajaxSuccess( callback )
AJAX 请求成功时执行函数
用一个示例讲解各个事件的触发顺序:
<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Transitional//EN" "
‐transitional.dtd">
<html xmlns="">
<head>
<title>jQuery Ajax ‐ AjaxEvent</title>
<script type="text/javascript" src="../scripts/jquery‐1.3.
2.min.js"></script>
----------------------- 页面 65-----------------------
<script type="text/javascript">
$(document).ready(function()
{
$("#btnAjax").bind("click", function(event)
{
$.get("../data/AjaxGetMethod.aspx");
})
$("#divResult").ajaxComplete(function(evt, request,
settings) { $(this).append('<div>ajaxComplete</div>'); })
$("#divResult").ajaxError(function(evt, request, set
tings) { $(this).append('<div>ajaxError</div>'); })
$("#divResult").ajaxSend(function(evt, request, sett
ings) { $(this).append('<div>ajaxSend</div>'); })
$("#divResult").ajaxStart(function() { $(this).appen
d('<div>ajaxStart</div>'); })
$("#divResult").ajaxStop(function() { $(this).append
('<div>ajaxStop</div>'); })
$("#divResult").ajaxSuccess(function(evt, request, s
ettings) { $(this).append('<div>ajaxSuccess</div>'); })
});
</script>
</head>
<body>
<br /><button id="btnAjax">发送Ajax 请求</button><br/>
<div id="divResult"></div>
</body>
</html>
结果如图:
----------------------- 页面 66-----------------------
我们可以通过将默认 options 的global 属性设置为false 来取消全局Ajax 事件的触发.
七.注意事项
如果在 Get 请求发送的 url 中有两个同名参数, 比如两个param 参数:
?param=Multiple¶m=Multiple3
使用服务器端方法获取 param 参数:
if (!String.IsNullOrEmpty(HttpContext.Current.Request["Par
am"]))
{
param = HttpContext.Current.Request["Param"];
}
此时获取到得 param 是一个用","分隔多个值的字符串:
Multiple,Multiple3
八.总结
本文介绍如何使用jquery 实现Ajax 功能.
用于发送Ajax 请求的相关函数如 load, get, getJSON和 p
ost 这些渐变Ajax 方法, 对于核心的 ajax 方法没有过多介绍, 主要是通过配置复杂的参数实现完全控制
Ajax 请求. 另外讲解了ajax 的辅助函数比如用于序列化表单对象为字符串的serialize()方法, 用于将表
单对象序列化为JSON 对象的 serializeArray()方法. 这些在使用脚本获取数据实现与服务器端交互是很
有用, JSON 格式的数据在处理大对象编程时将我们从混乱的属性字符串中解放出来.
jQuery 还提供录入全局 ajax 事件这一个特殊的事件, 并且可以在一个对象上设置这些事件, 在发送Aja
x 请求的各个生命周期上会调用这些事件, 可以通过修改默认的options 对象的global 属性打开或关闭全
局事件.
七． jQuery 动画-让页面动起来!
----------------------- 页面 67-----------------------
一.摘要
本系列文章将带您进入jQuery 的精彩世界, 其中有很多作者具体的使用经验和解决方案,
即使你会使用
jQuery 也能在阅读中发现些许秘籍.
开发人员一直痛疼做动画. 但是有了jQuery 你会瞬间成为别人(那些不知道jQuery 的人)眼里的动画高手!
本文将介绍jQuery 的动画相关函数.原来做动画如此简单!
二.前言
本系列文章的实例都是针对某一个技术细节的, 因为我们要学习的是基础知识, 虽然总有人希望要复杂一
些的应用示例, 但是我想还是让我们先把基础打牢,
有了扎实的基础凭借每个人的智慧一定能创造出更多
更好的应用.
就在写这篇文章的前几天, 还有不止一个同事在为了"弹出层"效果而犯愁. 但是以后再面对这样的功能看
过本篇文章的每一个人都可以开心的微笑了. jQuery,
make work easy !
三.从实例开始
做web 程序经常要使用弹出层, 比如单击文字或按钮显示一段提示文字等.
假设有如下需求:
*
单击图中的"显示提示文字"按钮, 在按钮的下方显示一个弹出层.
*
单击任何空白区域或者弹出层,弹出层消失.
用原始javascript 我们也完全可以完成这个工作.
有以下几点注意事项:
----------------------- 页面 68-----------------------
1. 弹出层的位置需要动态计算. 因为触发弹出事件的对象可能出现在页面的任何位置, 比如截图中的位
置.
2. 为document 绑定单击是关闭弹出层的函数, 要使用多播委托, 否则可能冲掉其他人在document 绑
定的函数.
3. 为document 绑定了关闭函数后, 需要在显示函数中取消事件冒泡, 否则弹出层将显示后立刻关闭.
用jQuery, 我们可以轻松地实现此实例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E
N" "">
<html xmlns="">
<head>
<title>jQuery - Start Animation</title>
<script type="text/javascript" src="../scripts/jquery-1.3.2-vsdo
c2.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//动画速度
var speed = 500;
//绑定事件处理
$("#btnShow").click(function(event)
{
//取消事件冒泡
event.stopPropagation();
//设置弹出层位置
var offset = $(event.target).offset();
$("#divPop").css({ top: offset.top + $(event.targe
t).height() + "px", left: offset.left });
//动画显示
$("#divPop").show(speed);
});
//单击空白区域隐藏弹出层
----------------------- 页面 69-----------------------
$(document).click(function(event) { $("#divPop").hide
(speed) });
//单击弹出层则自身隐藏
$("#divPop").click(function(event) { $("#divPop").hide
(speed) });
});
</script>
</head>
<body>
<div>
<br /><br /><br />
<button id="btnShow">显示提示文字</button>
</div>
<!-- 弹出层 -->
<div id="divPop" style="background-color: #f0f0f0; border: so
lid 1px #000000; position: absolute; display:none;
width: 300px; height: 100px;">
<div style="text-align: center;">弹出层</div>
</div>
</body>
</html>
除了实现了基本的显示和隐藏功能, 现在显示和隐藏弹出层是渐变动画效果! jQuery 的动画函数如此简
单, 第一次我在项目中使用时带给了我意外的惊喜. 曾经我一直为跨浏览器计算位置头痛, 但是通过jQue
ry 的offset()函数和height()函数, 可以精确的计算弹出层的位置. 这些函数是封装好且跨浏览器的.
需要注意要在设置弹出层位置属性的时候,加上"px", 否则在 FireFox 下容易出现问题.
jQuery 的动画函数主要分为三类:
*
基本动画函数: 既有透明度渐变, 又有滑动效果. 是最常用的动画效果函数.
*
滑动动画函数: 仅使用滑动渐变效果.
*
淡入淡出动画函数: 仅使用透明度渐变效果.
这三类动画函数效果各不相同, 用法基本一致. 大家可以自己尝试.
另外也许上面的三类函数效果都不是我们想要的, 那么jQuery 也提供了自定义动画函数, 将控制权放在
我们手里让我们自己定义动画效果.
----------------------- 页面 70-----------------------
下面对三类内置动画函数和自定义动画函数分别讲解.
四. 基本动画函数
上例中使用的 show()和 hide()是我们使用最多的基本动画函数.
下面是jQuery 的基本动画函数:
基本动画函数 Basics
名称
说明
举例
show( )
显示隐藏的匹配元素。
显示所有段落:
$("p").show()
这个就是 'show( speed, [callback] )' 无动画的版本。如果
选择的元素是可见的，这个方法将不会改变任何东西。无论这个
元素是通过 hide()方法隐藏的还是在 CSS 里设置了
display:none;，这个方法都将有效。
show( speed, 以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发 用缓慢的动画将隐藏的段落显示出来，历时 600 毫
[callback]) 一个回调函数。
$("p").show(600);
可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不
透明度。在jQuery 1.3 中，padding 和 margin 也会有动画，
效果更流畅。
hide( )
隐藏显示的元素
隐藏所有段落:
$("p").hide()
这个就是 'hide( speed, [callback] )' 的无动画版。如果选择
的元素是隐藏的，这个方法将不会改变任何东西。
hide( speed, 以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发 用 600 毫秒的时间将段落缓慢的隐藏:
[callback] ) 一个回调函数。
$("p").hide("slow");
可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不
透明度。在jQuery 1.3 中，padding 和 margin 也会有动画，
效果更流畅。
toggle( )
切换元素的可见状态。
切换所有段落的可见状态:
$("p").toggle()
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为
可见的。
toggle( switch ) 根据 switch 参数切换元素的可见状态（ture 为可见，false 为 切换所有段落的可见状态:
隐藏）。
var flip = 0;
$("button").click(function () {
如果switch 设为true，则调用show()方法来显示匹配的元素，
----------------------- 页面 71-----------------------
如果 switch 设为false 则调用 hide()来隐藏元素。
$("p").toggle( flip++ % 2 0
});
toggle( speed, 以优雅的动画切换所有匹配的元素，并在显示完成后可选地触发 用 200 毫秒将段落迅速切换显示状态，之后弹出一
[callback] ) 一个回调函数。
$("p").toggle("fast",function(){
alert("Animation Done.");
可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不
});
透明度。在jQuery 1.3 中，padding 和 margin 也会有动画，
效果更流畅。
1. 使用基本动画函数
基本的动画函数主要分为 show, hide 和toggle 三个. 都提供了无参数的版本,
表示不适用动画切换元
素的显示状态:
$("#divPop").show();
$("#divPop").hide();
$("#divPop").toggle();
都提供了两个参数的重载,
因为回调函数可以省略, 所以可以像开篇实例中使用的, 传入一个数值作为唯
一参数, 则会在参数规定的时间内用动画效果显示/隐藏元素:
$("#divPop").show(200);
$("#divPop").hide("fast");
$("#divPop").toggle("slow");
如果传递了 200, 表示图层会在 200 毫秒内通过渐变的形式显示出来.
speed参数可以使用三种预定速
度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000).
三个函数都可以传入回调函数 callback,签名如下:
function callback() {
this; // dom element
}
在回调函数中的this 是执行此函数的 DOM 对象. 会在动画结束时执行.
2. 使用toggle 函数
toggle 函数是功能更强大的函数, 可以切换元素的可见状态. 我们经常遇到需要使用toggle 的情况. 比
如希望一段文字第一次单击显示弹出层, 第二次单击隐藏弹出层.
----------------------- 页面 72-----------------------
我们将开篇实例稍作修改即可实现这个效果:
<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Transitional//EN" "
‐transitional.dtd">
<html xmlns="">
<head>
<title>jQuery Animation ‐ Toggle </title>
<script type="text/javascript" src="../scripts/jquery‐1.3.2
‐vsdoc2.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//动画速度
var speed = 500;
//绑定事件处理
$("#btnShow").click(function(event)
{
//取消事件冒泡
event.stopPropagation();
//设置弹出层位置
var offset = $(event.target).offset();
$("#divPop").css({ top: offset.top + $(event.targ
et).height() + "px", left: offset.left });
//切换弹出层的显示状态
$("#divPop").toggle(speed);
});
});
</script>
</head>
<body>
<div>
<br /><br /><br />
<button id="btnShow">提示文字</button>
</div>
----------------------- 页面 73-----------------------
<!‐‐ 弹出层 ‐‐>
<div id="divPop" style="background‐color: #f0f0f0; border: s
olid 1px #000000; position: absolute; display:none;
width: 300px; height: 100px;">
<div style="text‐align: center;">弹出层</div>
</div>
</body>
</html>
toggle()函数可以传递一个boolean值的参数, 比如: toogle(true)等同于show(), toogle(fasle)等同
于 hide().
五. 滑动动画函数
基本动画函数的效果是一个综合了滑动和透明度渐变的函数, jQuery 还单独提供了只有滑动效果的相关
函数.
滑动动画函数 Sliding
名称
说明
举例
slideDown(speed, 通过高度变化 （向下增大）来动态地显示所有匹配用 600 毫秒缓慢的将段落滑下:
[callback])
的元素，在显示完成后可选地触发一个回调函数。$("p").slideDown("slow");
这个动画效果只调整元素的高度，可以使匹配的元
素以“滑动”的方式显示出来。在jQuery 1.3 中，
上下的 padding 和 margin 也会有动画，效果更
流畅。
slideUp(speed, 通过高度变化（向上减小）来动态地隐藏所有匹配 用 600 毫秒缓慢的将段落滑上:
[callback])
的元素，在隐藏完成后可选地触发一个回调函数。$("p").slideUp("slow");
slideToggle(speed, 通过高度变化来切换所有匹配元素的可见性，并在 用 600 毫秒缓慢的将段落滑上或滑下:
[callback])
切换完成后可选地触发一个回调函数。
$("p").slideToggle("slow");
讲解
slideDown 就是 show 的滑动效果版本, slideUp 就是 hide 的滑动效果版本, slideToggle 就是toggle
的滑动效果版本.
参数完全相同:
$("#divPop").slideDown(200);
----------------------- 页面 74-----------------------
$("#divPop").slideUp("fast");
$("#divPop").slideToggle("slow");
六.淡入淡出动画函数
淡出淡出函数只提供透明度渐变的效果.
淡入淡出函数 Fading
名称
说明
举例
fadeIn( speed, 通过不透明度的变化来实现所有匹配元素
用 600 毫秒缓慢的将段落淡入:
[callback] ) 的淡入效果，并在动画完成后可选地触发一 $("p").fadeIn("slow");
个回调函数。
这个动画只调整元素的不透明度，也就是说
所有匹配的元素的高度和宽度不会发生变
化。
fadeOut( speed, 通过不透明度的变化来实现所有匹配元素
用 600 毫秒缓慢的将段落淡出:
[callback] ) 的淡出效果，并在动画完成后可选地触发一 $("p").fadeOut("slow");
个回调函数。
fadeTo(speed, 把所有匹配元素的不透明度以渐进方式调
用 600 毫秒缓慢的将段落的透明度调整到 0.66，大约2/3
opacity,
整到指定的不透明度，并在动画完成后可选 $("p").fadeTo("slow", 0.66);$("p").fadeT
[callback]) 地触发一个回调函数。
讲解
fadeIn 和fadeOut 两个函数对应 show 和 hide, 用于将对象以透明度渐变的效果显示和隐藏:
$("#divPop").fadeIn(200);
$("#divPop").fadeOut("fast");
透明度渐变没有切换函数.
需要特别讲解的是fadeTo 函数. 这个函数能让对象渐变到指定的透明度上. opacity 参数取值从0-1, 比
如 0.6 表示透明度为 60%.
和fadeIn 与fadeOut 不同的是, fadeTo 函数只改变对象的透明度, 即使透明度为0 对象仍然占位.
而fadeIn 和fadeOut 最后一定会改变对象的 display 属性, fadeOut 后对象将从页面上消失(不占位),
但是fadeTo 仅仅是让其透明(占位).
fadeTo 函数可以配合fadeIn 使用. 比如默认的情况下, fadeIn 最后让对象完全显示:
----------------------- 页面 75-----------------------
但是如果之前使用过fadeTo 设置弹出层的透明度, 则可以让其以半透明:
核心代码如下:
//设置弹出层的透明度
$("#divPop").fadeTo(0, 0.66);
//让弹出层透明显示
if ($("#divPop").css("display") == "none")
{
$("#divPop").fadeIn(speed);
}
else
{
$("#divPop").fadeOut(speed);
}
用fadeTo 设置了弹出层透明度后, 在使用fadeIn 会让对象显示并且渐变到fadeTo 设置的透明度.
这里介绍的仅仅是两个函数的特性, 实际应用中并不一定要两者配合使用.
六. 动画实验室
动画实验室是"jQuery实战"一书中的示例, 方便我们查看上面三种动画的效果. 对应源代码的 chapter7
\lab.effects.html 文件.源代码在本文最后提供下载.实验室截图如下:
----------------------- 页面 76-----------------------
七.自定义动画函数
上面三个渐变动画函数已经基本满足了我们日常需求.
但是如果我们一定要创建自己的特殊的效果, jQu
ery 也为我们提供了相关函数.
自定义动画函数 Custom
名称
说明
举例
animate( par 用于创建自定义动画的函数。
点击按钮后div 元素的几个不同属性一同变化:
ams,
// 在一个动画中同时应用三种类型的效果
这个函数的关键在于指定动画形式及结果样式属性对象。
[duration],
$("#go").click(function(){
这个对象中每个属性都表示一个可以变化的样式属性（如
[easing],
$("#block").animate({
“height”、“top”或“opacity”）。注意：所有指定的属
[callback] )
width: "90%",
性必须用骆驼形式，比如用 marginLeft 代替
height: "100%",
margin-left.
fontSize: "10em",
而每个属性的值表示这个样式属性到多少时动画结束。如 borderWidth: 10
果是一个数值，样式属性就会从当前的值渐变到指定的
}, 1000 );
值。如果使用的是“hide”、“show”或“toggle”这样的字 });
----------------------- 页面 77-----------------------
符串值，则会为该属性调用默认的动画形式。
另外，
在 jQuery 1.2 中，你可以使用 em 和 % 单位。
在 jQuery 1.2 中，你可以通过在属性值前面指定
"+=" 或 "-=" 来让元素做相对运动。
jQuery 1.3 中，如果 duration 设为 0 则直接完成动画。
而在以前版本中则会执行默认动画。
animate( par 用于创建自定义动画的函数。
第一个按钮按了之后展示了不在队列中的动画。在 div 扩展到 90
ams,
一旦字体改变完毕后，边框的动画才开始:
这个函数的关键在于指定动画形式及结果样式属性对象。
options )
这个对象中每个属性都表示一个可以变化的样式属性（如
$("#go1").click(function(){ $("#block1").a
“height”、“top”或“opacity”）。注意：所有指定的属
"90%"}, { queue: false, duration:
性必须用骆驼形式，比如用 marginLeft 代替
5000 } ) .animate( { fontSize: '10em' } ,
margin-left.
1000 ) .animate( { borderWidth: 5 }, 1000)
而每个属性的值表示这个样式属性到多少时动画结束。如 $("#go2").click(function(){ $("#block2").a
果是一个数值，样式属性就会从当前的值渐变到指定的
"90%"}, 1000 ) .animate( { fontSize: '10em
值。如果使用的是“hide”、“show”或“toggle”这样的字 1000 ) .animate( { borderWidth: 5 }, 1000)
符串值，则会为该属性调用默认的动画形式。
另外，
在 jQuery 1.2 中，你可以使用 em 和 % 单位。
在 jQuery 1.2 中，你可以通过在属性值前面指定
"+=" 或 "-=" 来让元素做相对运动。
stop( [clearQ 停止所有在指定元素上正在运行的动画。
点击Go 之后开始动画,点Stop 之后会在当前位置停下来:
ueue],
[gotoEnd] ) 如果队列中有等待执行的动画(并且clearQueue 没有设 // 开始动画
为true)，他们将被马上执行
$("#go").click(function(){
$(".block").animate({left: '+200px'}, 50
clearQueue(Boolean):如果设置成true，则清空队列。});
可以立即结束动画。
// 当点击按钮后停止动画
gotoEnd (Boolean):让当前正在执行的动画立即完成， $("#stop").click(function(){
并且重设show 和 hide 的原始样式，调用回调函数等。 $(".block").stop();
});
参数说明
1.params(可选)
类型:Options
说明:一组包含作为动画属性和终值的样式属性和及其值的集合.
讲解:通过把元素的样式属性值, 从当前值逐渐调整到 params 设置的值而产生动画效果.
----------------------- 页面 78-----------------------
2.duration(可选)
类型:String,Number
说明:三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
讲解:动画效果持续的时间, 时间越长则变得越慢. 如果省略则不会产生动画.
3.easing(可选)
类型:String
说明:要使用的擦除效果的名称(需要插件支持).默认jQuery 提供"linear" 和 "swing".
讲解:为了让元素逐渐达到 params 设置的最终效果,
我们需要有一个函数来实现渐变, 这类函数就叫做
easing 函数. 但是需要这里传递的只是 easing 函数名称, 使用前需要先将 easing 函数注册到jQuery
上.
4.options 参数
类型:Options
说明:一组包含动画选项的值的集合。
讲解:所支持的属性如下:
*
duration: 与上面的duration 参数相同
*
easing: 与上面的easing 参数相同
*
complete :类型为 Function, 在动画完成时执行的函数
*
step: Callback
*
queue (Boolean): (默认值: true) 设定为false将使此动画不进入动画队列 (jQuery 1.2 中
新增)
讲解
自定义动画属于高级应用, 在这里我暂时无法做详细的讲解.下面通过两个示例让大家简单了解如何使用
自定义动画.
Bug 提示: 下面两个示例使用vsdoc2 智能提示版本的jQuery 类库在 FireFox 下存在透明度无法渐
变的问题. 请使用其他版本.
自定义坠落动画:
这个示例让一个图层从屏幕最上方掉落到最下方, 并且消失.
----------------------- 页面 79-----------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E
N" "">
<html xmlns="">
<head>
<title>jQuery Animation - fadeTo </title>
<script type="text/javascript" src="../scripts/jquery-1.3.2.js">
</script>
<script type="text/javascript">
$(document).ready(function()
{
$("#divPop")
.animate(
{
"opacity": "hide",
"top": $(window).height() - $("#divPop").height() -
$("#divPop").position().top
},
600,
function() { $("#divPop").hide(); }
);
});
</script>
</head>
<body>
<div id="divPop" style="background-color: #f0f0f0; border: so
lid 1px #000000;
width: 300px; height: 100px; position:absolute;">
<div style="text-align: center;">弹出层</div>
</div>
</body>
</html>
自定义消散动画:
这个示例让一个 div 越来越大最后消失:
----------------------- 页面 80-----------------------
<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Transitional//EN" "
‐transitional.dtd">
<html xmlns="">
<head>
<title>jQuery Animation ‐ fadeTo </title>
<script type="text/javascript" src="../scripts/jquery‐1.3.
2.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#divPop")
.animate(
{
"opacity": "hide",
"width": $(window).width()‐100 ,
"height": $(window).height()‐100
},
500
);
});
</script>
</head>
<body>
<div id="divPop" style="background‐color: #f0f0f0; border: s
olid 1px #000000;
width: 300px; height: 100px; position:absolute;">
<div style="text‐align: center;">弹出层</div>
</div>
</body>
</html>
八.全局控制属性
----------------------- 页面 81-----------------------
最后讲一下和动画相关的属性:
名称: jQuery.fx.off
返回值: Boolean
说明:
关闭页面上所有的动画。
讲解:
把这个属性设置为true 可以立即关闭所有动画(所有效果会立即执行完毕)。有些情况下可能需要这样，比
如：
* 你在配置比较低的电脑上使用jQuery。
* 你的一些用户由于动画效果而遇到了 可访问性问题
当把这个属性设成false 之后，可以重新开启所有动画。
比如下面的代码会执行一个禁用的动画:
jQuery.fx.off = true;
$("#divPop").show(1000);
虽然使用了动画效果的show 函数, 但是因为关闭了所有动画, 所以 div 会立刻显示出来而没有渐变效果.
九.总结
本文讲解了jQuery 提供的三种动画函数:基本动画, 滑动动画和淡入淡出动画.
使用这三种动画已经基
本可以满足我们的日常开发需求, 让我们的页面动起来. 简单举例讲解了自定义动画. 对于想深入研究的
人本文只能起到抛砖引玉的效果.
八． 插播:jQuery 实施方案
一.摘要
本系列文章将带您进入jQuery 的精彩世界, 其中有很多作者具体的使用经验和解决方案,
即使你会使用
jQuery 也能在阅读中发现些许秘籍.
本篇文章属于临时插播,
用于介绍我在本公司的jQuery 实施方案.
----------------------- 页面 82-----------------------
二.前言
有了前几章扎实的基础知识我们已经可以在项目中投入使用jQuery 了.再继续深入学习jQuery 前插播一
下我的jQuery 实施方案.
每个公司的情况都不同.比如我们公司的页面文件都为用户控件, 物理路径和虚拟路径没有绝对的关系, 所
以无法使用相对路径(否则生产环境中会找不到文件).
项目繁多, 同一个虚拟目录的不同文件夹对应不同
项目工程等等.
此方案并不是通用的, 但是有些方法可以借鉴, 同时也是希望能和大家一起讨论帮忙指正.
三.类库文件管理方案
存放根路径: src\Assembly\resource.eLong.Web.Files\Resource\JSLib\jquery\
引用根路径:
压缩版本引用路径:
根路径文件列表:
在每一个 Web 工程项目下面建立js 文件夹, 放置 jquery-vsdoc-lastest.js 文件:
说明:
首先将所有版本的jQuery 类库放到静态服务器上, 并且按照文件夹存放类库文件. 但是会选出来一个最
新版本作为引用并且放置在根目录.
根目录下面包含如下文件:
----------------------- 页面 83-----------------------
名称
内容
说明
文件夹 1.3.2
按照版本号组织的jQuery 类库.
对于 1.3.2 即以后的每个jquery 版
类库文件. 但是会用最新的稳定版本
js 文件.
文件夹 plugin
存放插件的文件夹
将各种插件以文件夹的形式存放到此
jquery.extend-lastest.js elong 自己扩展的jQuery 方法
未来我们将打造自己的javascript
类库放在此文件中. 相当于我们自己
jQuery 实现.
主要分为工具函数和包装集函数两类
jquery-lastest.js
jQuery 未压缩类库最新版本
最新的稳定版本的jQuery 原始类库
jquery-min-lastest.js
jQuery 压缩类库最新版本
最新的稳定版本的jQuery 压缩类库
jquery-vsdoc-lastest.js jQuery 智能提示类库最新版本
最新的稳定版本的jQuery 智能提示
为了在开发时实现智能感知, 还需要将智能感知版本放置在每个web 项目的js 文件夹中. 因为Web 项目
众多所以请以后第一个使用者建立此文件夹并放入文件.
四.类库引用方案
在所有的页面 head 中, 最先引用jQuery 的类库, 使用绝对路径:
然后通过 if(fasle)引入智能提示版本的脚本块. 路径使用"~"从根目录开始查找. 我在各个频道的项目源
代码中统一建立js 文件夹并且放置jquery-vsdoc-lastest.js 最新的智能感知版本类库. 注意此文件不需
要打包上传, 仅用于开发时的智能提示.
这样可以确保编译后的页面只引入了压缩版本的jQuery 类库.
示例代码:
<head runat="server">
<title>jQuery 引用方案</title>
<script type="text/javascript" src="
SLib/jquery/jquery-min-lastest.js"></script>
<% if (false){%>
<script src="~/js/jquery-vsdoc-lastest.js" type="text/javascript
"></script>
<% }%>
----------------------- 页面 84-----------------------
</head>
说明:
在我们的网站中, 静态文件存储在另外一个二级域名resource.elong.com下, 使用了CDN. 为了保证测
试环境和正式环境一致只能使用绝对路径引用jQuery 库. 但是使用绝对路径引用jQuery 智能提示版本
后不会出现脚本智能提示. 所以我们通过此特性直接引用绝对路径的压缩版本jQuery 类库, 从而巧妙的
解决了 1.3.2压缩版本引入后智能提示系统出错的问题.
虽然动态页面可以通过 if(false) 取消引入智能提示版本类库, 但是在 HTML 页面上就无法使用服务器语
句块.所以对于 HTML 页面需要在开发完毕程序发布前手工删除智能提示版本的引用.
五.开发使用方案
jQuery 是脚本库而不是脚本框架, 无法限制使用者如何使用,
所以很容易让页面上的脚本变得混乱.
在没有找到何时的脚本管理框架前, 使用如下方式在页面上使用脚本:
1. 在页面底部添加<script>区域, 两个function 分别放置 "事件绑定" 和 "加载时执行" 的语句.
即
使在加载时执行的javascript 也必须要保证 DOM加载完毕后执行. 所以两个function 都被嵌套在$()中
保证在 DOM 加载完毕后调用.
2. 应尽量避免在头部加载脚本. 必须在头部加载的可以在页面 head 中添加一个script 区域.
3."自定义函数"要放在"事件绑定"和"加载时执行"语句块之上, 并且不需要包含在$()中.
下面是一个完整页面的示例代码:
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E
N" "">
<html xmlns="">
<head runat="server">
<title>jQuery 引用方案</title>
<script type="text/javascript" src="
SLib/jquery/jquery-min-lastest.js"></script>
<% if (false){%>
<script src="~/js/jquery-vsdoc-lastest.js" type="text/javascript
"></script>
<% }%>
<script type="text/javascript">
//必须放在头部加载的语句块. 尽量避免使用
</script>
</head>
----------------------- 页面 85-----------------------
<body>
<div id="divMsg">Hello World!</div>
<input id="btnShow" type="button" value="显示" />
<input id="btnHide" type="button" value="隐藏" /><br />
<input id="btnChange" type="button" value="修改内容为 Hello
World, too!" />
<script type="text/javascript" >
//用户自定义方法
function demoMethod(event)
{
$("#divMsg").hide(500);
}
//事件绑定
$(function()
{
$("#btnShow").bind("click", function(event) { $("#divM
sg").show(500); });
$("#btnHide").bind("click", demoMethod);
$("#btnChange").bind("click", function(event) { $("#di
vMsg").html("Hello World, too!"); });
});
//加载时执行的语句
$(function()
{
$("#btnShow").attr("value", "被修改后的显示按钮")
});
</script>
</body>
</html>
六.总结
----------------------- 页面 86-----------------------
在确认了没有公布任何保密信息后,
我发表了本文. 没有太多技术含量,
主要是针对所在公司推广jQue
ry 的具体实施方法.
另外我一直想找一个成型的脚本框架用来组织管理各种js 类库和js 文件. 这都需要在以后的工作中探索.
jQuery 工具函数一.摘要
本系列文章将带您进入jQuery 的精彩世界, 其中有很多作者具体的使用经验和解决方案,
即使你会使用
jQuery 也能在阅读中发现些许秘籍.
我们经常要使用脚本处理各种业务逻辑, 最常见的就是数组和对象的操作. jQuery工具函数为我们操作
对象和数组提供了便利条件.
二.前言
大部分人仅仅使用jQuery 的选择器选择对象, 或者实现页面动画效果. 在处理业务逻辑时常常自己编写
很多算法. 本文提醒各位jQuery 也能提高我们操作对象和数组的效率. 并且可以将一些常用算法扩充到j
Query 工具函数中, 实现脚本函数的复用.
三.什么是工具函数
工具函数是指在jQuery 对象(即变量"$")上定义的函数. 这些函数都是工具类函数.比如C#中最常用的t
rim()函数:
$.trim(" text ");
在原始javascript 中并没有提供同时去除前后空格的trim 函数. 所以这一类常用的工具函数统称为 "Uti
lities" 函数.对应jQuery 官方文档:
"$"其实是"window"对象的属性, 所以下面几句话是等价的:
$.trim(" text ");
window.$.trim(" text ");
window.jQuery("
text ");
jQuery.trim(" text ");
----------------------- 页面 87-----------------------
四.工具函数分类
工具函数主要分为下面几类:
*
浏览器及特性检测
*
数组和对象操作
*
测试操作
*
字符串操作
*
Url 操作
区别于前几章的讲解方式, 本文不在列举函数列表. 大家在应用中, 比如遇到想操作一个字符串, 可以首
先从在"API 文档/Utilities/字符串操作"中查找是否已经提供了快捷的工具函数. 如果没有再考虑自己
开发.
下面使用实例具体的每个分类下常用的工具函数.
五.浏览器及特性检测
jQuery 的优秀就在于其跨浏览器的特性, 通常我们不用再针对不同浏览器书写不同的代码.
但是如果是j
Query 开发人员或者插件开发人员就要自行处理浏览器差异, 以便为用户提供跨浏览器的特性.
jQuery 提供了下列属性用于获取浏览器特性:
jQuery.support
1.3版本新增
jQuery.browser
已废除
jQuery.browser.version
已废除
jQuery.boxModel
已废除
在 1.3版本中已经废除了三个属性, 这里不再讲解.
让我们将注意力放在 jQuery.support
函数上.
jQuery.support
返回值: Object
说明:
jQuery 1.3 新增。一组用于展示不同浏览器各自特性和 bug 的属性集合。
----------------------- 页面 88-----------------------
jQuery 提供了一系列属性，你也可以自由增加你自己的属性。其中许多属性是很低级的，所以很难说他们
能否在日新月异的发展中一直保持有效，但这这些主要用于插件和内核开发者。
所有这些支持的属性值都通过特性检测来实现，而不是用任何浏览器检测。以下有一些非常棒的资源用于
解释这些特性检测是如何工作的：
*
ng
*
*
jQuery.support 主要包括以下测试：
boxModel: 如果这个页面和浏览器是以W3C CSS 盒式模型来渲染的，则等于true。通常在IE 6 和 I
E 7 的怪癖模式中这个值是false。在document 准备就绪前，这个值是 null。
cssFloat: 如果用 cssFloat 来访问 CSS 的float 的值，则返回true。目前在IE 中会返回false,他用 st
yleFloat 代替。
hrefNormalized: 如果浏览器从 getAttribute("href")返回的是原封不动的结果，则返回true。在I
E 中会返回false，因为他的URLs 已经常规化了。
htmlSerialize: 如果浏览器通过 innerHTML 插入链接元素的时候会序列化这些链接，则返回true，目
前 IE 中返回false。
leadingWhitespace: 如果在使用 innerHTML 的时候浏览器会保持前导空白字符，则返回true，目
前在 IE 6-8 中返回false。
noCloneEvent: 如果浏览器在克隆元素的时候不会连同事件处理函数一起复制，则返回true，目前在
IE 中返回false。
objectAll: 如果在某个元素对象上执行 getElementsByTagName("*")会返回所有子孙元素，则为tr
ue，目前在IE 7 中为false。
opacity: 如果浏览器能适当解释透明度样式属性，则返回true，目前在IE 中返回false，因为他用alp
ha 滤镜代替。
scriptEval: 使用 appendChild/createTextNode 方法插入脚本代码时，浏览器是否执行脚本，目前
在 IE 中返回false，IE 使用 .text 方法插入脚本代码以执行。
style: 如果 getAttribute("style")返回元素的行内样式，则为true。目前IE 中为false，因为他用css
Text 代替。
tbody: 如果浏览器允许table 元素不包含tbody 元素，则返回true。目前在IE 中会返回false，他会
自动插入缺失的tbody。
----------------------- 页面 89-----------------------
讲解:
针对上面众多的浏览器特性属性,
本文只讲解两个特性.
1.盒式模型 boxModel
下图是W3C 标准中的盒式模型图:
假设如下元素:
<style type="text/css">
.boxModel
{
width:200px;
height:50px;
padding:10px;
border:solid 5px #FF0000;
background-color:#acacac;
}
</style>
<div id="divBox" class="boxModel">
显示效果如图:
----------------------- 页面 90-----------------------
在 CSS 中设定元素宽度为200px, 下面以此元素为例讲解盒式模式.
W3C 盒式模型:
元素的宽度和高度为盒式模型图中的 Context 部分, 不包括 padding, border 和 margin 部分.
目前除了IE所有的浏览器都仅支持W3C 盒式模型. 在W3C 盒式模型中,
示例中包含红框在内的区域内
容宽度为 200+2*10+2*5=230px, 高度为 50+2*10+2*5=80px.
IE 盒式模型:
设置的宽度包括 padding,border. 实际内容宽度content Width = width - padding – border
在IE5.5及更早的版本中, 使用了此模型. 在更高的IE版本上如果由于某些原因让浏览器运行在怪异模式
下则也会使用此盒式模式.所以需要在页面上声明正确的 DOCTYPE. 有关 DOCTYPE 请参考此文:
下面是两种盒式模式的对比:
我们可以使用 jQuery.support.boxModel 属性来获取浏览器是否使用了W3C 盒式模型. true表示
使用W3C boxModel.
----------------------- 页面 91-----------------------
2.浮动样式
通过javascript 脚本设置元素的float 样式时, IE 和 FireFox 存在不同, IE 使用 style.styleFloat, Fire
Fox 使用 style.cssFloat:
div.style.styleFloat = "left"; //IE
div.stlye.cssFloat = "left"; //FF
jQuery.support.cssFloat 属性返回true 则表示可以使用cssFloat 来设置float 样式. IE 中返回fal
se;
注意, 我们可以通过CSS()方法设置float 样式, jQuery 内部会自动帮我们判断是使用styleFloat 还是c
ssFloat:
$("#divResult").css("float","left"); //兼容 IE和 FF
六.数组和对象操作
实现 UI 我们常常操作 DOM对象或者jQuery 包装集, 但是实现算法或者业务逻辑时往往操作的是数组和
对象.
下面讲解最常用的数组和对象相关的工具函数.
1.迭代
jQuery.each( object, callback )
返回值:Object
说明:
通用例遍方法，可用于例遍对象和数组。
不同于例遍 jQuery 对象的 $().each() 方法，此方法可用于例遍任何对象。回调函数拥有两个参数：第
一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回
false，其它返回值将被忽略。
讲解:
对于jQuery 包装集我们可以使用each(callback)方法迭代包装集中的每一个元素. callback是一个会函
数, 接受一个参数表示当前访问对象的索引.
$("img").each(function(i){
this.src = "test" + i + ".jpg";
});
对于数组我们可以使用 jQuery.each( object, callback ) 来遍历, 这等同于使用for 循环.
----------------------- 页面 92-----------------------
注意传入的第一个参数可以是数组或者对象.如果数组,则遍历数组中的每一个对象. 第一个参数表示索引,
第二个参数表示值, this表示当前遍历的元素, 可以通过返回false终止迭代, 比如下面的示例遍历到第二
个元素后会终止:
$.each(["a", "b", "c"], function(i, n)
{
alert("Item #" + i + ": " + n);//可以获取到 i 值
if (i >= 1)
{
return false;
}
});
$("#iterateArray").click(function(event)
{
var array = $.each(["a", "b", "c"], function(i, n)
{
alert("Item #" + i + ": " + n ); //第一个参数 i 表示索引, this 表示当前遍
历的对象
if (i >= 1)
{
return false;
}
});
});
如果传递的是对象, 则遍历对象的每一个属性, 即使函数返回false 也依然会遍历完所有的属性, 第一个
参数表示属性 key(属性名称,是obejct 类型),第二个参数表示值,,this 表示当前属性的值:
$("#iterateObject").click(function(event)
{
$.each({ name: "ziqiu.zhang", sex: "male", status: "single" }, function(i,
n)
{
----------------------- 页面 93-----------------------
alert("Item #" + i.toString() + ": " + n ); //第一个参数 i 表示属性的 ke
y(object), this 表示属性值
if (i >= 1)
{
return false;
}
});
});
each 将是我们最常使用的函数, 特别注意 each 虽然迭代每一个元素或属性, 但是在迭代函数中并不会改
变当前元素的值, 也就是无法改变返回后的对象.如果需要改变数组中的每一个元素并且将结果返回, 因使
用jQuery.map( array, callback )函数.
2.筛选
jQuery.grep( array, callback, [invert] )
返回值: Array
说明:
使用过滤函数过滤数组元素。
此函数至少传递两个参数：待过滤数组和过滤函数。过滤函数必须返回 true 以保留元素或 false 以删除
元素。
讲解:
默认 invert 为false, 即过滤函数返回true 为保留元素. 如果设置 invert 为true, 则过滤函数返回true
为删除元素.
下面的示例演示如何过滤数组中索引小于 0 的元素:
$.grep( [0,1,2], function(n,i){
return n > 0;
});
返回的结果是[1,2]
3.转换
jQuery.map( array, callback )
----------------------- 页面 94-----------------------
返回值:Array
说明:
将一个数组中的元素转换到另一个数组中。
作为参数的转换函数会为每个数组元素调用，而且会给这个转换函数传递一个表示被转换的元素作为参数。
转换函数可以返回转换后的值、null （删除数组中的项目）或一个包含值的数组，并扩展至原始数组中。
讲解:
1.3.2版本中此函数和 each 函数已经几乎相同(以前稍有不同),
现在唯一的区别就是回调函数可以改变
当前元素.返回 null 则删除当前元素.
下面是几个例子:
var arr = [ "a", "b", "c", "d", "e" ]
$("div").text(arr.join(", "));
arr = jQuery.map(arr, function(n, i){
return (n.toUpperCase() + i);
});
$("p").text(arr.join(", "));
arr = jQuery.map(arr, function (a) { return a + a; });
$("span").text(arr.join(", "));
4.合并
合并对象是我们常常编写的功能, 通常使用臃肿的for 循环来进行.jQuery 为我们提供了很多功能的合并
函数:
名称
说明
举例
jQuery.ex 用一个或多个其他对象来扩展一个对象，返回被扩展 合并 settings 和 options，修改并返回 settings:
tend( [de 的对象。
var settings = { validate: false, limit: 5, nam
ep],
var options = { validate: true, name: "bar" };
如果不指定target，则给jQuery 命名空间本身进
target,
jQuery.extend(settings, options);
行扩展。这有助于插件作者为jQuery 增加新方法。
object1,
[objectN] 如果第一个参数设置为true，则jQuery 返回一个 结果:
)
深层次的副本，递归地复制找到的任何对象。否则的 settings { validate: true, limit: 5, name: "
话，副本会与原对象共享结构。
为定义的属性将不会被复制，然而从对象的原型继承
----------------------- 页面 95-----------------------
的属性将会被复制。
jQuery.m 将类数组对象转换为数组对象。
将 DOM 对象集合转换为数组:
akeArray
var arr =
类数组对象有 length 属性，其成员索引为 0 至
( obj )
jQuery.makeArray(document.getElementsByTagName
length - 1。实际中此函数在 jQuery 中将自动使
用而无需特意转换。
jQuery.in 确定第一个参数在数组中的位置，从 0 开始计数(如 查看对应元素的位置:
Array( va 果没有找到则返回 -1 )。
var arr = [ 4, "Pete", 8, "John" ];
lue,
jQuery.inArray("John", arr); //3
array )
jQuery.inArray(4, arr); //0
jQuery.inArray("David", arr); //-1
jQuery.m 合并两个数组
合并两个数组到第一个数组上:
erge( firs
$.merge( [0,1,2], [2,3,4] )
返回的结果会修改第一个数组的内容——第一个数
t,
组的元素后面跟着第二个数组的元素。要去除重复
second )
结果:
项，请使用$.unique()
[0,1,2,2,3,4]
jQuery.u 删除数组中重复元素。只处理删除 DOM 元素数组，删除重复 div 标签:
nique( ar 而不能处理字符串或者数字数组。
$.unique(document.getElementsByTagName("div"))
ray )
[<div>, <div>, ...]
讲解:
上面的函数看着有些混乱.
看看我们以后会常用的.
首先是jQuery.merge( first, second ), 将两个数组合并. 下面这个示例说明如何使用此函数:
<html xmlns="">
<head>
<title>jQuery Utilities ‐ jQuery.merge</title>
<script src="../scripts/jquery‐1.3.2‐vsdoc2.js" type="text/
javascript"></script>
<script type="text/javascript">
$(function()
{
$("#go").click(function(event)
{
$("#divResult").html("");
var first = [1, 3, 5];
----------------------- 页面 96-----------------------
$("#divResult").append("<span>first:[" + first.jo
in(",") + "]</span>").append("<br/>");
var second = [2, 4, 6];
$("#divResult").append("<span>second:[" + second.
join(",") + "]</span>").append("<br/>");
var result = $.merge(first, second);
$("#divResult").append("<span>result:[" + result.
join(",") + "]</span>").append("<br/>");
$("#divResult").append("<span>first after merged:
[" + first.join(",") + "]</span><br/>");
$("#divResult").append("<span>second after merge
d:[" + second.join(",") + "]</span><br/>");
});
});
</script>
</head>
<body>
<button id="go">
合并数组</button>
<br />
<div id="divResult">
</div>
</body>
</html>
结果如图:
另外不能因为有了jQuery 就忘记我们的原始javascript. 比merge 更常用的其实是join 和 split
函数.
----------------------- 页面 97-----------------------
merge 函数会改变第一个合并的数组, 如果是我设计我就不会这么做. 因为返回值已经是合并后的数组了.
如此设计让函数产生歧义.
列表中的那么多函数不再一一讲解. 先用先查. 除了 jQuery.extend 这个不得不提的函数. 下面单提
一个小结讲解.
5. jQuery.extend
在开发插件的时候最常用此函数函数来处理 options.
下面是fancybox 插件获取 options 的代码:
settings = $.extend({}, $.fn.fancybox.defaults, settings);
上面的代码target 是一个空对象, 将默认设置 defaults 作为第一个对象,
将用户传入的设置 setting 合
并到default上, setting上有的属性以setting 为准. setting没有传入的属性则使用default 的默认值.
然后将合并的结果复制给target 并作为函数返回值返回.
看一个完整的示例:
var empty = {}
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend(empty, defaults, options);
结果:
settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }
target 参数要传递一个空对象是因为target 的值最后将被改变.比如:
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend(defaults, options);
上面的代码将defaults作为target参数, 虽然最后settings 的结果一样, 但是defaults 的值被改变了!
而插件中的默认值应该都是固定! 所以使用时请注意target 参数的用法.
下面是我的完整示例和结果:
<html xmlns="">
-------------
更多相关文档:
从零开始学习jquery
从零开始学习jquery_IT/计算机_专业资料。从零开始学习 jQuery 教程:jQuery 简介(1) 一.摘要本系列文章将带您进入 jQuery 的精彩世界, 其中有很多作者具体的使用...
从零开始学习jQuery
从零开始学习jQuery 141页 1财富值 jQuery基础教程 44页 免费如要投诉违规内容,请到百度文库投诉中心;如要提出功能问题或意见建议,请点击此处进行反馈。 ...
从零开始学习jQuery系列
从零开始学习 jQuery 系列 从零开始学习 jQuery (一) 开天辟地入门篇 一.摘要...所以用.NET 就要选用 jQuery 而非 Dojo,ExtJS 等. jQuery 有如下特点: 1....
JQuery详解系列--从零开始学JQuery
JQuery详解系列--从零开始学JQuery_理学_高等教育_教育专区。JQuery入门系列教程 ...如:jquery-1.3.2-release.zip 2.编写程序 编写程序 创建一个 HTML 页面, ...
从零开始学习jQuery(剧场版) 你必须知道的javascript
从零开始学习 jQuery(剧场版) 你必须知道的 javascript 一.摘要本文是 jQuery ...先看下面的例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
如何从零开始学习网页制作网站建设问答以及需要学习的软件
如何从零开始学习网页制作网站建设问答以及需要学习的...1. 我没基础,可否学习网页制作? 可以!完全可以!...比如 jquery,jquery.form,模板库即可,简称:js d) ...
JQuery学习1
暂无评价 2页 1下载券 从零开始学习jQuery[1] 暂无评价 86页 免费喜欢...jQuery 基础学习 1 $(document).ready(function() {// 这里是你的代码 } )...
jQuery简单学习手册
jQuery简单学习手册_计算机软件及应用_IT/计算机_专业...从匹配元素删除属性: jQuery("#test").remove...一个对象的开始于“{” ,结束于“}” 。每一个属性...
我的 Jquery学习笔记1
我的Jquery学习笔记1_英语学习_外语学习_教育专区。我的 Jquery学习笔记1我的 Jquery学习笔记1 1、Jquery 中$(document).ready()和 window.onload 的区别 2、多...
jQuery从入门到精通
<divid="divMsg">Hello World!...从零开始学习 jQuery (二) 万能的选择器 一.摘要 本章讲解 jQuery 最重要的选择器部分的知识. 有了 jQuery 的选择器...
更多相关标签:
相关文章
精彩导读
热门资讯
关注我们
