【Asp.net精品源码栏目提醒】:网学会员为广大网友收集整理了,【精品】JQuery教程 - 其它资料,希望对大家有所帮助!
jQuery 教程什么是 jQueryjQuery 是一套 Javascript 脚本库. 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 脚本编写方法四.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.zip2.编写程序创建一个 HTML 页面 引入 jQuery 类库并且编写如下代码:ltDOCTYPE html PUBLIC quot-//W3C//DTD XHTML 1.0 Transitional//ENquotquothttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdquotgtlthtml xmlnsquothttp://www.w3.org/1999/xhtmlquotgtltheadgtlttitlegtHello World jQuerylt/titlegtltscript typequottext/javascriptquot srcquotscripts/jquery-1.3.2-vsdoc2.jsquotgtlt/scriptgtlt/headgtltbodygtltdiv idquotdivMsgquotgtHello Worldlt/divgtltinput idquotbtnShowquot typequotbuttonquot valuequot显示quot /gtltinput idquotbtnHidequot typequotbuttonquot valuequot隐藏quot /gtltbr/gtltinput idquotbtnChangequot typequotbuttonquot valuequot修改内容为 Hello World tooquot /gtltscript typequottext/javascriptquot gtquotbtnShowquot.bindquotclickquotfunctionevent quotdivMsgquot.show quotbtnHidequot.bindquotclickquotfunctionevent quotdivMsgquot.hide quotbtnChangequot.bindquotclickquotfunctionevent quotdivMsgquot.htmlquotHello Worldtooquot lt/scriptgtlt/bodygtlt/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.jsquotgtscriptgt在编写脚本的时候 甚至刚刚输入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/scriptgtltif falsegtltscript typequottext/javascriptquot srcquotscripts/jquery-1.3.2-vsdoc2.jsquotgt lt/scriptgtltgt 这是网上推荐的方式. 编译后的页面上只有 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:PlaceHolderVisiblequotfalsequot runatquotserverquotgtltscripttypequottext/javascriptquot srcquotscripts/jquery-1.3.2-vsdoc2.jsquotgtlt/scriptgtlt/asp:PlaceHoldergtlt jQueryScriptBlockgt后台声明变量:protected string jQueryScriptBlock quotltscript typequotquottext/javascriptquotquotsrcquotquotscripts/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 选择器 事件 工具函数 动画 以及插件等.从零开始学习 jQuery 二 万能的选择器一.摘要本章讲解 jQuery 最重要的选择器部分的知识. 有了 jQuery 的选择器我们几乎可以获取页面上任意的一个或一组对象 可以明显减轻开发人员的工作量.二.前言编写任何 javascript 程序我们要首先获得对象 jQuery 选择器能彻底改变我们平时获取对象的方式 可以获取几乎任何语意的对象 比如quot拥有 title 属性并且值中包含 test 的元素quot 完成这些工作只需要编写一个 jQuery 选择器字符串. 学习 jQuery 选择器是学习 jQuery 最重要的一步.三.Dom 对象和 jQuery 包装集无论是在写程序还是看 API 文档 我们要时刻注意区分 Dom 对象和 jQuery 包装集.1.Dom 对象在传统的 javascript 开发中我们都是首先获取 Dom 对象比如:我们经常使用 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.each function alert this如果我们要使用 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 选择所有.class 根据元素的 css 类选择 quot.bgRedquot 选择所用 CSS 类为 bgRed 的元素 选择所有元素 quotquot选择页面所有元素 selector1 可以将几个选择器用quotquot分隔开然后再拼 quotdivId a .bgRedquot selector2 成一个选择器字符串.会同时选中这几个 selectorN 选择器匹配的内容.学习建议: 大家暂时记住基础选择器即可 可以直接跳到下一节quotjQuery 选择器实验室quot进行动手练习 以后再回来慢慢学习全部的选择器 或者用到的时候再回来查询.2.层次选择器 Hierarchy名称 说明 举例ancestor 使用quotform inputquot的形式选中 form quot.bgRed divquot 选 择 CSSdescendant 中的所有 input 元素.即 类为 bgRed 的元素中的所有 ancestor祖先为 from 元素. descendant子孙为 input.parent gt child 选择 parent 的直接子节点 child. quot.myListgtliquot 选择 CSS 类 child 必须包含在 parent 中并且父 为 myList 元素中的直接子节 类是 parent 元素. 点 对象.prev next prev 和 next 是两个同级别的元素. quothibiscusimgquot 选在 id 选中在 prev 元素后面的 next 元素. 为 hibiscus 元素后面的 img 对象.prev siblings 选择 prev 后面的根据 siblings 过 quotsomeDivtitlequot 选择 滤的元素 id 为 someDiv 的对象后面所 注:siblings 是过滤器 有带有 title 属性的元素3.基本过滤器 Basic Filters名称 说明 举例:first 匹配找到的第一个元 查找表格的第一行:quottr:firstquot 素:last 匹配找到的最后一个 查找表格的最后一行:quottr:lastquot 元素:notselector 去除所有与给定选择 查 找 所 有 未 选 中 的 input 元 素 : 器匹配的元素 quotinput:not:checkedquot:even 匹配所有索引值为偶 查找表格的1、3、5...行:quottr:evenquot 数的元素,从 0 开始 计数:odd 匹配所有索引值为奇 查找表格的2、4、6行:quottr:oddquot 数的元素,从 0 开始 计数:eqindex 匹配一个给定索引值 查找第二行:quottr:eq1quot 的元素 .
上一篇:
【精品】ckedit配置
下一篇:
bc80e7a0-d1f2-4595-b21d-01a76798e87a