【Asp.net精品源码栏目提醒】：网学会员为需要Asp.net精品源码的朋友们搜集整理了【精品】JQuery详解系列--从零开始学JQuery - 大学课件相关资料，希望对各位网友有所帮助!

从零开始学习 jQuery 一 开天辟地入门篇一.摘要本系列文章将带您进入 jQuery 的精彩世界 其中有很多作者具体的使用经验和解决方案即使你会使用 jQuery 也能在阅读中发现些许秘籍.本 篇 文 章 是 入 门 第 一 篇 主 要 是 简 单 介 绍 jQuery 通 过 简 单 示 例 指 导 大 家 如 何 编 写jQuery 代码以及搭建开发环境. 详细讲解了如何在 Visual Studio 中配合使用 jQuery.转载请注明子秋出品博客园首发二.前言首先道个歉 quot从零开始学习 ASP.NET MVCquot系列文章在即将介绍 Filter 时就没有更新了原因就是最近我一直在研究和学习 jQuery.看到本系列的名称和文章标题 看过我的 MVC系列文章的人会感到很熟悉. 不久要给公司的人做培训 所以特意制作了本教程.在写作的同时我参考了网上 jQuery 的系列教程文章 在博客园和 Google 上并没有找到让我满意的系列教程. 我喜欢将知识系统的深入浅出的讲解.不喜欢写那种quot学习笔记quot式的文章. 同时本系列将很快全部写完有工作压力就是有动力 随后如果时间允许我会继续更新 MVC 系列文章.再一次对等待 MVC 文章的朋友们说声抱歉另外本系列文章的大部分知识点来源于图灵出版社的quotjQuery 实战quot一书. 推荐大家购买此书 是 jQuery 书籍中的经典之作.下面让我们开始 jQuery 之旅.三.什么是 jQueryjQuery 是一套 Javascript 脚本库. 在我的博客中可以找到quotJavascript 轻量级脚本库quot系列文章. Javascript 脚本库类似于.NET 的类库 我们将一些工具方法或对象方法封装在类库中 方便用户使用.注意 jQuery 是脚本库 而不是脚本框架. quot库quot不等于quot框架quot 比如quotSystem 程序集quot是类库而quotASP.NET MVCquot是框架. jQuery 并不能帮助我们解决脚本的引用管理和功能管理这些都是脚本框架要做的事.脚 本 库 能 够 帮助 我 们 完成 编 码 逻辑 实 现 业 务 功能 . 使 用 jQuery 将 极 大 的 提 高 编 写javascript 代码的效率 让写出来的代码更加优雅 更加健壮. 同时网络上丰富的 jQuery插件也让我们的工作变成了quot有了 jQuery天天喝茶水quot--因为我们已经站在巨人的肩膀上了.创建一个 ASP.NET MVC 项目时 会发现已经自动引入了 jQuery 类库. jQuery 几乎是微软的御用脚本库了完美的集成度和智能感知的支持让.NET 和 jQuery 天衣无缝结合在一起所以用.NET 就要选用 jQuery 而非 DojoExtJS 等.jQuery 有如下特点: 1.提供了强大的功能函数使用这些功能函数 能够帮助我们快速完成各种功能 而且会让我们的代码异常简洁. 2.解决浏览器兼容性问题javascript 脚本在不同浏览器的兼容性一直是 Web 开发人员的噩梦 常常一个页面在IE7Firefox 下运行正常 在 IE6下就出现莫名其妙的问题. 针对不同的浏览器编写不同的脚本是一件痛苦的事情. 有了 jQuery 我们将从这个噩梦中醒来 比如在 jQuery 中的Event 事件对象已经被格式化成所有浏览器通用的 从前要根据 event 获取事件触发者在 ie 下是 event.srcElements 而 ff 等标准浏览器下下是 event.target. jQuery 则通过统一 event 对象让我们可以在所有浏览器中使用 event.target 获取事件对象. 3.实现丰富的 UIjQuery 可以实现比如渐变弹出 图层移动等动画效果 让我们获得更好的用户体验. 单以渐变效果为例 从前我自己写了一个可以兼容 ie 和 ff 的渐变动画 使用大量 javascript 代码实现 费心费力不说 写完后没有太多帮助过一段时间就忘记了. 再开发类似的功能还要再次费心费力. 如今使用 jQuery 就可以帮助我们快速完成此类应用. 4.纠正错误的脚本知识这一条是我提出的 原因就是大部分开发人员对于 javascript 存在错误的认识. 比如在页面中编写加载时即执行的操作 DOM 的语句 在 HTML 元素或者 document 对象上直接添加quotonclickquot属性 不知道 onclick 其实是一个匿名函数等等. 拥有这些错误脚本知识的技术人员也能完成所有的开发工作 但是这样的程序是不健壮的. 比如quot在页面中编写加载时即执行的操作 DOM 的语句quot 当页面代码很小用户加载很快时没有问题 当页面加载稍慢时就会出现浏览器quot终止操作quot的错误.jQuery 提供了很多简便的方法帮助我们解决这些问题 一旦 使用 jQuery 你就 将纠正 这些错误 的知识--因为 我们都 是用标 准的正确的jQuery 脚本编写方法 5.太多了 等待我们一一去发现.四.Hello World jQuery按照惯例 我们来编写 jQuery 的 Hello World 程序 来迈出使用 jQuery 的第一步.在本文最后可以下本章的完整源代码. 1.下载 jQuery 类库jQuery 的项目下载放在了 Google Code 上 下载地址:http://code.google.com/p/jqueryjs/downloads/list上面的地址是总下载列表 里面有很多版本和类型的 jQuery 库 主要分为如下几类:min: 压缩后的 jQuery 类库 在正式环境上使用.如:jquery-1.3.2.min.jsvsdoc: 在 Visual Studio 中需要引入此版本的 jquery 类库才能启用智能感知.如：jquery-1.3.2-vsdoc2.jsrelease 包 : 里 面 有 没 有 压 缩 的 jquery 代 码 以 及 文 档 和 示 例 程 序 .如:jquery-1.3.2-release.zip 2.编写程序创建一个 HTML 页面 引入 jQuery 类库并且编写如下代码: ltDOCTYPE html PUBLIC quot-//W3C//DTD XHTML 1.0 Transitional//ENquot quothttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdquotgt lthtml xmlnsquothttp://www.w3.org/1999/xhtmlquotgt ltheadgt lttitlegtHello World jQuerylt/titlegt ltscript typequottext/javascriptquot srcquotscripts/jquery-1.3.2-vsdoc2.jsquotgtlt/scriptgt lt/headgt ltbodygt ltdiv idquotdivMsgquotgtHello Worldlt/divgt ltinput idquotbtnShowquot typequotbuttonquot valuequot显示quot /gt ltinput idquotbtnHidequot typequotbuttonquot valuequot隐藏quot /gtltbr /gt ltinput idquotbtnChangequot typequotbuttonquot valuequot修改内容为 Hello World tooquot /gt ltscript typequottext/javascriptquot gt quotbtnShowquot.bindquotclickquot functionevent quotdivMsgquot.show quotbtnHidequot.bindquotclickquot functionevent quotdivMsgquot.hide quotbtnChangequot.bindquotclickquot functionevent quotdivMsgquot.htmlquotHello World tooquot lt/scriptgt lt/bodygt lt/htmlgt效果如下:页面上有三个按钮 分别用来控制 Hello World 的显示隐藏和修改其内容.此示例使用了:1 jQuery 的 Id 选择器: quotbtnShowquot2 事件绑定函数 bind3 显示和隐藏函数. show和 hide4 修改元素内部 html 的函数 html在接下来的教程中我们将深入这些内容的学习.五.启用 Visual Studio 对 jQuery 的智能感知首先看一下 Visual Studio 带给我们的智能感知惊喜. 要让 Visual Studio 支持智能感知需要下列条件: 安装 VS2008 SP1 下载地址: http://msdn.microsoft.com/en-us/vstudio/cc533448.aspx 安装 VS 2008 Patch KB958502以支持quot-vsdoc.jsquotIntellisense 文件. 该补丁会导致 Visual Studio 在一个 JavaScript 库被引用时，查找是否存在一个可选 的quot-vsdoc.jsquot文件，如果存在的话，就用它来驱动 JavaScript intellisense 引擎。

    这 些加了注释的quot-vsdoc.jsquot文件可以包含对 JavaScript 方法提供了帮助文档的 XML 注 释，以及对无法自动推断出的动态 JavaScript 签名的另外的代码 intellisense 提示。

     你可以在quot这里quot了解该补丁的详情。

    你可以在quot这里quot免费下载该补丁。

     必须要引用 vsdoc 版本的 jquery 库 ltscript typequottext/javascriptquot srcquotscripts/jquery-1.3.2-vsdoc2.jsquotgtlt/scriptgt在编写脚本的时候 甚至刚刚输入quotquot的时候VS 可以智能提示:在使用方法时 还会有更多的提示:有了智能感知我们编写 javascript 变得和 C一样快速便捷舒服.大部分情况可以一次编写成功而不用再为了一个大小写而查询 javascript 帮助文件.能够让 Visual Studio 对jQuery 实现智能感知的前提是要引入 vsdoc 版本的 jQuery 类库. 示例中我们引入了quotjquery-1.3.2-vsdoc2.jsquot文件. 如果引用其他版本比如 min 版本的 jQuery 类库就无法启用智能提示.但是在正式环境下 我们必须要使用quotminquot版本的 jquery 库文件 以1.3.2版本号为例各个版本的大小如下:其中第一个是未压缩的 jquery 库. 如果启用 gzip 压缩并且使用 min 版本的 jquery.js 可以在传输过程中压缩到19KB.注意如果我们更新了脚本 可以通过quotCtrlShiftJquot快捷方式更新 Visual Studio 的智能感知或者单击 编辑-gtIntelliSense-gt更新 JScript Intellisense:为了即能在 Visual Studio 中增加脚本提示 又能在上线的时候使用 min 版本的脚本库我们一般是用如下方式引入 jQuery 库: 1. 控制编译结果 ltscript typequottext/javascriptquot srcquotscripts/jquery-1.2.6.min.jsquotgtlt/scriptgt ltif false gt ltscript typequottext/javascriptquot srcquotscripts/jquery-1.3.2-vsdoc2.jsquotgtlt/scriptgt lt gt这是网上推荐的方式. 编译后的页面上只有 min 版本的引用 同时在开发时能够享受到智能感知.但是注意这种方式引用的 min 类库只能是1.2.6或者之前的版本号. 最新的1.3.2的所有非 vsdoc 版本的 jquery 库引用后都会导致 JScript Intellisense 更新出错.这是1.3.2版本的一个 bug 期待后续版本中解决. 其实大家完全可以使用1.2.6版本的 min库 本教程涉及的 jquery 功能 1.2.6版本基本都支持.我们使用了 iffalse让编译后的页面不包含 vsdoc 版本 jquery 库的引用 同样的思路还可以使用比如将脚本引用放入一个 PlaceHolder 并设置 visiblefasle 等. 2. 使用后端变量为了能使用 1.3.2 版本的 min 库 我们只能通过将脚本引用放在变量里 通过页面输出的方式 此种方式可以正常更新 JScript Intellisense.但是可能有人和我一样不喜欢在前端使用变量: ltasp:PlaceHolder Visiblequotfalsequot runatquotserverquotgt ltscript typequottext/javascriptquot srcquotscripts/jquery-1.3.2-vsdoc2.jsquotgtlt/scriptgt lt/asp:PlaceHoldergt lt jQueryScriptBlock gt后台声明变量: protected string jQueryScriptBlock quotltscript typequotquottext/javascriptquotquot srcquotquotscripts/jquery-1.3.2.min.jsquotquotgtlt/scriptgtquot六.在独立的.JS 文件中启用脚本智能感知上面我们解决了在页面中智能感知的问题 其实在独立的.js 文件中我们同样可以启用脚本的智能感知 在 IntellisenseDemo.js 文件中添加如下语句: /// ltreference pathquotjquery-1.3.2-vsdoc2.jsquot /gt更新 JScript Intellisense 会发现在脚本中也启用了智能提示:注 意 本 文 中 讲 解 的 脚 本 智 能 感 知 不 仅 适 用 于 jQuery 类 库 还 适 用 于 自 己 编 写 的javascript 代码.七.总结本文简单介绍了 jQuery 以及如何搭建脚本开发环境. 示例程序没有复杂的功能 可能还无法让没有接触过 jQuery 的人认识到它的强大.但是仅凭借quot多浏览器支持quot这一特性 就足以让我们学习并使用 jQuery 因为如今想编写跨浏览器的脚本真的是一件困难的事情在后续文章中我们将深入学习 jQuery 选择器 事件 工具函数 动画 以及插件等.本文代码下载:http://files.cnblogs.com/zhangziqiu/Code-jQueryStudy-1.rar 从零开始学习 jQuery 二 万能的选择器一.摘要本章讲解 jQuery 最重要的选择器部分的知识. 有了 jQuery 的选择器我们几乎可以获取页面上任意的一个或一组对象 可以明显减轻开发人员的工作量.二.前言编写任何 javascript 程序我们要首先获得对象 jQuery 选择器能彻底改变我们平时获取对象的方式 可以获取几乎任何语意的对象 比如quot拥有 title 属性并且值中包含 test 的ltagt元素quot 完成这些工作只需要编写一个 jQuery 选择器字符串. 学习 jQuery 选择器是学习jQuery 最重要的一步.三.Dom 对象和 jQuery 包装集无论是在写程序还是看 API 文档 我们要时刻注意区分 Dom 对象和 jQuery 包装集. 1.Dom 对象在传统的 javascript 开发中我们都是首先获取 Dom 对象比如: var div document.getElementByIdquottestDivquot var divs document.getElementsByTagNamequotdivquot我们经常使用 document.getElementById 方法根据 id 获取单个 Dom 对象 或者使用document.getElementsByTagName 方法根据 HTML 标签名称获取 Dom 对象集合.另外在事件函数中 可以通过在方法函数中使用 this 引用事件触发对象但是在多播事件函数中 IE6存在问题 或者使用 event 对象的 targetFF或 srcElementiIE6获取到引发事件的 Dom 对象.注意我们这里获取到的都是 Dom 对象 Dom 对象也有不同的类型比如 input div span等. Dom 对象只有有限的属性和方法: 2.jQuery 包装集jQuery 包装集可以说是 Dom 对象的扩充.在 jQuery 的世界中将所有的对象 无论是一个还是一组 都封装成一个 jQuery 包装集比如获取包含一个元素的 jQuery 包装集: var jQueryObject quottestDivquotjQuery 包装集都是作为一个对象一起调用的. jQuery 包装集拥有丰富的属性和方法 这些都是 jQuery 特有的: 3.Dom 对象与 jQuery 对象的转换 1 Dom 转 jQuery 包装集如果要使用 jQuery 提供的函数 就要首先构造 jQuery 包装集. 我们可以使用本文即将介绍的 jQuery 选择器直接构造 jQuery 包装集比如: quottestDivquot上面语句构造的包装集只含有一个 id 是 testDiv 的元素.或者我们已经获取了一个 Dom 元素比如: var div document.getElementByIdquottestDivquot上面的代码中 div 是一个 Dom 元素 我们可以将 Dom 元素转换成 jQuery 包装集: var domToJQueryObject div小窍门:因为有了智能感知 所以我们可以通过智能感知的方法列表来判断一个对象啊是Dom 对象还是 jQuery 包装集. 2 jQuery 包装集转 Dom 对象jQuery 包装集是一个集合 所以我们可以通过索引器访问其中的某一个元素: var domObject quottestDivquot0注意 通过索引器返回的不再是 jQuery 包装集 而是一个 Dom 对象jQuery 包装集的某些遍历方法比如 each中 可以传递遍历函数 在遍历函数中的 this也是 Dom 元素比如: quottestDivquot.eachfunction alertthis 如果我们要使用 jQuery 的方法操作 Dom 对象怎么办 用上面介绍过的转换方法即可: quottestDivquot.eachfunction this.htmlquot修改内容quot 小结: 先让大家明确 Dom 对象和 jQuery 包装集的概念 将极大的加快我们的学习速度.我在学习 jQuery 的过程中就花了很长时间没有领悟到两者的具体差异 因为书上并没有专门讲解两者的区别 所以经常被quotthis 指针为何不能调用 jQuery 方法quot等问题迷惑. 直到某一天豁然开朗 发现只要能够区分这两者 就能够在写程序时变得清清楚楚.四. 什么是 jQuery 选择器在 Dom 编程中我们只能使用有限的函数根据 id 或者 TagName 获取 Dom 对象.在 jQuery 中则完全不同jQuery 提供了异常强大的选择器用来帮助我们获取页面上的对象并且将对象以 jQuery 包装集的形式返回.首先来看看什么是选择器: //根据 ID 获取 jQuery 包装集 var jQueryObject quottestDivquot上例中使用了 ID 选择器 选取 id 为 testDiv 的 Dom 对象并将它放入 jQuery 包装集 最后以 jQuery 包装集的形式返回.quotquot符号在 jQuery 中代表对 jQuery 对象的引用 quotjQueryquot是核心对象 其中包含下列方法:jQuery expression context Returns: jQuery这个函数接收一个 CSS 选择器的字符串，然后用这个字符串去匹配一组元素。

    This function accepts a string containing a CSS selector which is then used tomatch 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 Elements.jQuery callback Returns: jQuerydocument.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 中选择匹配的对象 不传入则表示范围为文档对象即页面全部对象.上面这个方法就是我们选择器使用的核心方法.可以用quotquot代替 jQuery 让语法更简介 比如下面两句话的效果相同: //根据 ID 获取 jQuery 包装集 var jQueryObject quottestDivquot //是 jQuery 对象的引用: var jQueryObject jQueryquottestDivquot接下来让我们系统的学习 jQuery 选择器.五.jQuery 选择器全解通俗的讲 Selector 选择器就是quot一个表示特殊语意的字符串quot. 只要把选择器字符串传入上面的方法中就能够选择不同的 Dom 对象并且以 jQuery 包装集的形式返回.但是如何将 jQuery 选择器分类让我犯难. 因为书上的分类和 jQuery 官方的分类截然不同.最后我决定以实用为主 暂时不去了解 CSS3选择器标准 而按照 jQuery 官方的分类进行讲解.jQuery 的选择器支持 CSS3选择器标准. 下面是 W3C 最新的 CSS3选择器标准:http://www.w3.org/TR/css3-selectors/标准中的选择器都可以在 jQuery 中使用.jQuery 选择器按照功能主要分为quot选择quot和quot过滤quot. 并且是配合使用的. 可以同时使用组合成一个选择器字符串. 主要的区别是quot过滤quot作用的选择器是指定条件从前面匹配的内容中筛选 quot过滤quot选择器也可以单独使用 表示从全部quotquot中筛选. 比如:quot:titlequot等同于:quot:titlequot而quot选择quot功能的选择器则不会有默认的范围 因为作用是quot选择quot而不是quot过滤quot.下面的选择器分类中 带有quot过滤器quot的分类表示是quot过滤quot选择器 否则就是quot选择quot功能的选择器.jQuery 选择器分为如下几类:说明1.点击quot名称quot会跳转到此方法的 jQuery 官方说明文档.2.可以在下节中的 jQuery 选择器实验室测试各种选择器 1. 基础选择器 Basics 名称 说明 举例 id 根据元素 Id 选择 quotdivIdquot 选择 ID 为 divId 的元素 element 根据元素的名称选择 quotaquot 选择所有ltagt元素 .class 根据元素的 css 类选择 quot.bgRedquot 选择所用 CSS 类为 bgRed 的元素 选择所有元素 quotquot选择页面所有元素 selector1 可以将几个选择器用 quotquot 分隔开然后再拼 quotdivId a .bgRedquot selector2 成一个选择器字符串 . 会同时选中这几个 selectorN 选择器匹配的内容.学习建议: 大家暂时记住基础选择器即可 可以直接跳到下一节quotjQuery 选择器实验室quot进行动手练习 以后再回来慢慢学习全部的选择器 .