本文由429102414贡献
pdf文档可能在WAP端浏览体验不佳。建议您优先选择TXT，或下载源文件到本机查看。
本系列文章导航
从零开始学习 jQuery (一) 开天辟地入门篇 从零开始学习 jQuery (二) 万能的选择器 从零开始学习 jQuery (三) 管理 jQuery 包装集 从零开始学习 jQuery (四) 使用 jQuery 操作元素的属性与样式 从零开始学习 jQuery (五) 事件与事件对象 从零开始学习 jQuery (六) jQuery 中的 Ajax 从零开始学习 jQuery (七) jQuery 动画-让页面动起来! 从零开始学习 jQuery (八) 插播:jQuery 实施方案 从零开始学习 jQuery (九) jQuery 工具函数 从零开始学习 jQuery (十) jQueryUI 常用功能实战 从零开始学习 jQuery (十一) 实战表单验证与自动完成提示插件
jQuery (一) 开天辟地入门篇
. 一.摘要
本系列文章将带您进入 jQuery 的精彩世界, 其中有很多作者具体的使用经验和解决方案, 你会使用 jQuery 也能在阅读中发现些许秘籍. 即使
本篇文章是入门第一篇, 主要是简单介绍 jQuery, 通过简单示例指导大家如何编写 jQuery 代码 以及搭建开发环境. 详细讲解了如何在 Visual Studio 中配合使用 jQuery. 转载请注明子秋出品!博客园首发!
. 二.前言
首 先道个歉! "从零开始学习 ASP.NET MVC"系列文章在即将介绍 Filter 时就没有更新了, 原因 就是最近我一直在研究和学习 jQuery.看到本系列的名称和文章标题, 看过我的 MVC 系列文章 的人会感到很熟悉. 不久要给公司的人做培训, 所以特意制作了本教程. 在写作的同时我参考了网上 jQuery 的系列教程文章, 在博客园和 Google 上并没有到让我满意
的系列教程. 我喜欢将知识系统的，深入浅出的讲解.不喜欢写那种"学习笔记"式的文章. 同时本 系列将很快全部写完(有工作压力就是有动力), 随后如果时间允许我会继续更新 MVC 系列文 章.再一次对等待 MVC 文章的朋友们说声抱歉! 另外本系列文章的大部分知识点来源于图灵出版社的"jQuery 实战"一书. 推荐大家购买此书, 是 jQuery 书籍中的经典之作. 下面让我们开始 jQuery 之旅.
. 三.什么是 jQuery
jQuery 是一套 Javascript 脚本库. 在我的博客中可以到"Javascript 轻量级脚本库"系列文章. Javascript 脚本库类似于.NET 的类库, 我们将一些工具方法或对象方法封装在类库中, 方便用户 使用.
注意 jQuery 是脚本库, 而不是脚本框架. "库"不等于"框架", 比如"System 程序集"是类库，而 "ASP.NET MVC"是框架. jQuery 并不能帮助我们解决脚本的引用管理和功能管理，这些都是脚本 框架要做的事. 脚 本库能够帮助我们完成编码逻辑，实现业务功能. 使用 jQuery 将极大的提高编写 javascript 代 码的效率, 让写出来的代码更加优雅, 更
dos命令大全图解pdf加健壮. 同时网络上丰富的 jQuery 插件也让我们的工 作变成了"有了 jQuery，天天喝茶水"--因为我们已经站在巨人的肩膀上了. 创建一个 ASP.NET MVC 项目时, 会发现已经自动引入了 jQuery 类库. jQuery 几乎是微软的御用 脚本库了!完美的集成度和智能感知的支持，让.NET 和 jQuery 天衣无缝结合在一起!所以用.NET 就要选用 jQuery 而非 Dojo,ExtJS 等. jQuery 有如下特点:
1. 1.提供了强大的功能函数
使用这些功能函数, 能够帮助我们快速完成各种功能, 而且会让我们的代码异常简洁.
2. 2.解决浏览器兼容性问题
javascript 脚本 在 不 同 浏 览 器 的 兼 容 性 一 直 是 Web 开发 人 员 的 噩 梦 , 常常 一 个 页 面 在 IE7,Firefox 下运行正常, 在 IE6下就出现莫名其妙的问题. 针对不同的浏览器编写不同的脚本是 一件痛苦的事情. 有了 jQuery 我们将从这个噩梦中醒来, 比如在 jQuery 中的 Event 事件对象已 经 被 格 式 化
成 所 有 浏 览 器 通 用 的 , 从 前 要 根 据 event 获 取 事 件 触 发 者 , 在 ie 下 是 event.srcElements 而 ff 等标准浏览器下下是 event.target. jQuery 则通过统一 event 对象，让我们可 以在所有浏览器中使用 event.target 获取事件对象.
3. 3.实现丰富的 UI
jQuery 可以实现比如渐变弹出, 图层移动等动画效果, 让我们获得更好的用户体验. 单以渐变 效果为例, 从前我自己写了一个可以兼容 ie 和 ff 的渐变动画, 使用大量 javascript 代码实现, 费 心费力不说, 写完后没有太多帮助过一段时间就忘记了. 再开发类似的功能还要再次费心费力. 如今使用 jQuery 就可以帮助我们快速完成此类应用.
4. 4.纠正错误的脚本知识
这一条是我提出的, 原因就是大部分开发人员对于 javascript 存在错误的认识. 比如在页面中编 写加载时即执行的操作 DOM 的语句, 在 HTML 元素或者 document 对象上直接添加"onclick"属 性, 不知道 onclick 其实是一个匿名函数等等. 拥有这些错误脚本知识的技术人员也能完成所
有的开发工作, 但是这样的程序是不健壮的. 比如"在页面中编写加载时即执行的操作 DOM 的 语句", 当页面代码很小用户加载很快时没有问题, 当页面加载稍慢时就会出现浏览器"终止操 作"的错误.jQuery
提供了很多简便的方法帮助我们解决这些问题, 一旦使用 jQuery 你就将纠正 这些错误的知识--因为我们都是用标准的正确的 jQuery 脚本编写方法!
! . 5. 5.太多了! 等待我们一一去发现.
.Hello 四.Hello World jQuery
按照惯例, 我们来编写 jQuery 的 Hello World 程序, 来迈出使用 jQuery 的第一步. 在本文最后可以下本章的完整源代码.
1. 1.下载 jQuery 类库
jQuery 的项目下载放在了 Google Code 上, 下载地址: c郑州程序员招聘信息
2. 2.编写程序
简单的vbs代码游戏创建一个 HTML 页面, 引入 jQuery 类库并且编写如下代码:
<!DOCTYPE Transitional//EN" transitional.dtd">
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
"/TR/xhtml1/DTD/xhtml1-
Hello World! 
function(event)
效果如下:
页面上有三个按钮, 分别用来控制 Hello World 的显示，隐藏和修改其内容. 此示例使用了: (1) jQuery 的 Id 选择器: $("#btnShow") (2) 事件绑定函数 bind() (3) 显示和隐藏函数. show()和 hide() (4) 修改元素内部 html 的函数 html() 在接下来的教程中我们将深入这些内容的学习.
. 五.启用 Visual Studio 对 jQuery 的智能感知
首先看一下 Visual Studio 带给我们的智能感知惊喜. 要让 Visual Studio 支持智能感知, 需要下列 条件: 安装 VS2008 SP1 下载地址: msdn.microsoft/en-us/vstudio/cc533448.aspx "-vsdoc.js"Intellisense . 安装 VS 2008 Patch KB958502 KB958502以支持"-vsdoc.js"Intellisense 文件. 该 补丁会导致 Visual Studio 在一个 JavaScript 库被引用时，查是否存在一个可选的"vsdoc.js"文件，如果存在的话，就用它来驱动 JavaScript intellisense 引擎.这些加了注释的"vsdoc.js"文件可以包含对 JavaScript 方法提供了帮助文档的 XML 注释，以及对无法自 动推 断出的动态 JavaScript 签名的另外的代码 intellisense 提示.你可以在"这里"了解该补丁的详 情.你可以在"这里"免费下载该补丁. 必须要引用 vsdoc 版本的 jquery 库
在编写脚本的时候, 甚至刚刚输入"$"的时候,VS 可以智能提示:
在使用方法时, 还会有更多的提示:
有了智能感知我们编写 javascript 变得和 C#一样快速，便捷，舒服.大部分情况可以一次编写成功 而不用再为了一个大小写而查询 javascript 帮助文件.能够让 Visual Studio 对 jQuery 实现智能感
知的前提是要引入 vsdoc 版本的 jQuery 类库. 示例中我们引入了"jquery-1.3.2-vsdoc2.js"文件. 如 果引用其他版本比如 min 版本的 jQuery 类库就无法启用智能提示.但是在正式环境下, 我们必须 要使用"min"版本的 jquery 库文件, 以1.3.2版本号为例，各个版本的大小如下:
其中第一个是未压缩的 jquery 库. 如果启用 gzip 压缩并且使用 min 版本的 jquery.js 可以在传输 过程中压缩到19KB. 注意，如果我们更新了脚本, 可以通过"Ctrl+Shift+J"快捷方式更新 Visual Studio 的智能感
知，或者 单击 编辑->IntelliSense->更新 JScript Intellisense:
为了即能在 Visual Studio 中增加脚本提示, 又能在上线的时候使用 min 版本的脚本库, 我们一般 是用如下方式引入 jQuery 库:
1. 控制编译结果
<%if (false) { %>
<%} %>
type="text/javascript"
src="scripts/jquery-1.3.2-
这是网上推荐的方式. 编译后的页面上只有 min 版本的引用, 同时在开发时能够享受到智能感 1.2.6 . 1.3.2 知.但是注意这种方式引用的 min 类库只能是1.2.6 1.2.6或者之前的版本号. 最新的1.3.2 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. 使用后端变量springboot配置mapper扫描
为了能使用 1.3.2 版本的 min 库, 我们只能通过将脚本引用放在变量里, 通过页面输出的方式, 此种方式可以正常更新 JScript Intellisense.但是可能有人和我一样不喜欢在前端使用变量:
<% =jQueryScriptBlock %> type="text/javascript" src="scripts/jquery-1.3.2-
后台声明变量:
protected
string
jQueryScriptBlock
=
@"";
. .JS 六.在独立的.JS 文件中启用脚本智能感知
上面我们解决了在页面中智能感知的问题, 其实在独立的.js 文件中我们同样可以启用脚本的智 能感知, 在 IntellisenseDemo.js 文件中，添加如下语句:
/// <reference path="jquery-1.3.2-vsdoc2.js" />
更新 JScript Intellisense, 会发现在脚本中也启用了智能提示:
, , 注意，本文中讲解的脚本智能感知不仅适用于 jQuery 类库, 还适用于自己编写的 javascript 代 . 码.
. 七.总结
本文简单介绍了 jQuery, 以及如何搭建脚本开发环境. 示例程序没有复杂的功能, 可能还无法让 没有接触过 jQuery 的人认识到它的强大.但是仅凭借"多浏览器支持"这一特性, 就足以让我们学 习并使用 jQuery, 因为如今想编写跨浏览器的脚本真的是一件困难的事情! 在后续文章中我们将深入学习 jQuery 选择器, 事件, 工具函数, 动画, 以及插件等. 本文代码下载: filesblogs/zhangziqiu/Code-jQueryStudy-1.rar Tag 标签: jQuery,jQuery 教程
jQuery (二) 万能的选择器
. 一.摘要
本章讲解 jQuery 最重要的选择器部分的知识. 有了 jQuery 的选择器我们几乎可以获取页面上任 意的一个或一组对象, 可以明显减轻开发人员的工作量.
. 二.前言
编 写任何 javascript 程序我们要首先获得对象, jQuery 选择器能彻底改变我们平
时获取对象的方 式, 可以获取几乎任何语意的对象, 比如"拥有 title 属性并且值中包含 test 的元素", 完成这些 工作只需要编写一个 jQuery 选择器字符串. 学习 jQuery 选择器是学习 jQuery 最重要的一步.
.Dom 三.Dom 对象和 jQuery 包装集
无论是在写程序还是看 API 文档, 我们要时刻注意区分 Dom 对象和 jQuery 包装集.
1.Dom 对象
在传统的 javascript 开发中，我们都是首先获取 Dom 对象，比如:
var div = ElementById("testDiv"); var divs = ElementsByTagName("div");
我 们 经 常 使 用 ElementById 方 法 根 据 id 获 取 单 个 Dom 对 象 , 或 者 使 用 ElementsByTagName 方法根据 HTML 标签名称获取 Dom 对象集合. 另外在事件函数中, 可以通过在方法函数中使用 this 引用事件触发对象(但是在多播事件函数中 IE6存在问题), 或者使用 event 对象的 target(FF)或 srcElement(iIE6)获取到引发事件的 Dom 对象. 注意我们这里获取到的都是 Dom 对象, Dom 对象也有不同的类型比如 input, div, span 等. Dom 对象只有有限的属性和方法:
2.jQuery 包装集
jQuery 包装集可以说是 Dom 对象的扩充.在 jQuery 的世界中将所有的对象, 无论是一个还是一 组, 都封装成一个 jQuery 包装集，比如获取包含一个元素的 jQuery 包装集:
var jQueryObject = $("#testDiv");
jQuery 包装集都是作为一个对象一起调用的. jQuery 包装集拥有丰富的属性和方法, 这些都是 jQuery 特有的:
3.Dom 对象与 jQuery 对象的转换精通eclipse
(1) Dom 转 jQuery 包装集 如果要使用 jQuery 提供的函数, 就要首先构造 jQuery 包装集. jQuery 选择器直接构造 jQuery 包装集，比如: 我们可以使用本文即将介绍的
$("#testDiv");
上面语句构造的包装集只含有一个 id 是 testDiv 的元素.
或者我们已经获取了一个 Dom 元素，比如:
var div = ElementById("testDiv");
上面的代码中 div 是一个 Dom 元素, 我们可以将 Dom 元素转换成 jQuery 包装集:
var domToJQueryObject = $(div);
: , 小窍门：因为有了智能感知, 所以我们可以通过智能感知的方法列表来判断一个对象啊是 Dom . 对
象还是 jQuery 包装集. (2) jQuery 包装集转 Dom 对象 jQuery 包装集是一个集合, 所以我们可以通过索引器访问其中的某一个元素:
var domObject = $("#testDiv")[0];
, , ! 注意, 通过索引器返回的不再是 jQuery 包装集, 而是一个 Dom 对象! jQuery 包装集的某些遍历方法，比如 each()中, 可以传递遍历函数, 在遍历函数中的 this 也是 Dom 元素，比如:
$("#testDiv").each(function() { alert(this) })
如果我们要使用 jQuery 的方法操作 Dom 对象，怎么办? 用上面介绍过的转换方法即可:jquery下载文件请求
$("#testDiv").each(function() { $(this).html("修

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。