没有合适的资源?快使用搜索试试~ 我知道了~
jquery入门教程,适合初学者,内容详细
资源推荐
资源详情
资源评论
本系列文章导航
从零开始学习 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
jQuery
jQuery
jQuery 是一套 Javascript 脚本库 . 在我的博客中可以找到 "Javascript 轻量级脚本库 " 系列文章 .
Javascript 脚本库类似于 .NET 的类库 , 我们将一些工具方法或对象方法封装在类库中 , 方便用 户
使用 .
注意 jQuery 是脚本库 , 而不是脚本框架 . " 库 " 不等于 " 框架 ", 比如 "System 程序集 " 是类库 , 而
"ASP.NET MVC" 是框架 . jQuery 并不能帮助我们解决脚本的引用管理和功能管理 , 这些都是脚本
框架要做的事 .
脚 本库能够帮助我们完成编码逻辑 , 实现业务功能 . 使用 jQuery 将极大的提高编写 javascript 代
码的效率 , 让写出来的代码更加优雅 , 更加健壮 . 同时网络上丰富的 jQuery 插件也让我们的工
作变成了 " 有了 jQuery, 天天喝茶水 "-- 因为我们已经站在巨人的肩膀上了 .
创建一个 ASP .NET MVC 项目时 , 会发现已经自动引入了 jQuery 类库 . jQuery 几乎是微软的御 用
脚本库了 ! 完美的集成度和智能感知的支持 , 让 .NET 和 jQuery 天衣无缝结合在一起 ! 所以用 .NET
就要选用 jQuery 而非 Dojo,ExtJS 等 .
jQuery 有如下特点 :
1.
1.
1.
1. 提供了强大的功能函数
使用这些功能函数 , 能够帮助我们快速完成各种功能 , 而且会让我们的代码异常简洁 .
2.
2.
2.
2. 解决浏览器兼容性问题
javascript 脚本在不同浏览器的兼容性一直是 Web 开发人员的噩梦 , 常常一个页面在
IE7,Firefox 下运行正常 , 在 IE6 下就出现莫名其妙的问题 . 针对不同的浏览器编写不同的脚本是
一件痛苦的事情 . 有了 jQuery 我们将从这个噩梦中醒来 , 比如在 jQuery 中的 Event 事件对象已
经被格式化成所有浏览器通用的 , 从前要根据 event 获取事件触发者 , 在 ie 下是
event.srcElements 而 ff 等标准浏览器下下是 event.target. jQuery 则通过统一 event 对象 , 让我们 可
以在所有浏览器中使用 event.target 获取事件对象 .
3.
3.
3.
3. 实现丰富的 UI
UI
UI
UI
jQuery 可以实现比如渐变弹出 , 图层移动等动画效果 , 让我们获得更好的用户体验 . 单以渐变
效果为例 , 从前我自己写了一个可以兼容 ie 和 ff 的渐变动画 , 使用大量 javascript 代码实现 , 费
心费力不说 , 写完后没有太多帮助过一段时间就忘记了 . 再开发类似的功能还要再次费心费力 .
如今使用 jQuery 就可以帮助我们快速完成此类应用 .
4.
4.
4.
4. 纠正错误的脚本知识
这一条是我提出的 , 原因就是大部分开发人员对于 javascript 存在错误的认识 . 比如在页面中编
写加载时即执行的操作 DOM 的语句 , 在 HTML 元素或者 document 对象上直接添加 "onclick" 属
性 , 不知道 onclick 其实是一个匿名函数等等 . 拥有这些错误脚本知识的技术人员也能完成所
有的开发工作 , 但是这样的程序是不健壮的 . 比如 " 在页面中编写加载时即执行的操作 DOM 的
语句 ", 当页面代码很小用户加载很快时没有问题 , 当页面加载稍慢时就会出现浏览器 " 终止操
作 " 的错误 .jQuery 提供了很多简便的方法帮助我们解决这些问题 , 一旦使用 jQuery 你就将纠正
这些错误的知识 -- 因为我们都是用标准的正确的 jQuery 脚本编写方法 !
5.
5.
5.
5. 太多了 !
!
!
! 等待我们一一去发现 .
.
.
.
四 .Hello
.Hello
.Hello
.Hello World
World
World
World jQuery
jQuery
jQuery
jQuery
按照惯例 , 我们来编写 jQuery 的 Hello World 程序 , 来迈出使用 jQuery 的第一步 .
在本文最后可以下本章的完整源代码 .
1.
1.
1.
1. 下载 jQuery
jQuery
jQuery
jQuery 类库
jQuery 的项目下载放在了 Google Code 上 , 下载地址 :
http://code.google.com/p/jqueryjs/downloads/list
上面的地址是总下载列表 , 里面有很多版本和类型的 jQuery 库 , 主要分为如下几类 :
min: 压缩后的 jQuery 类库 , 在正式环境上使用 . 如 : jquery-1.3.2.min.js
vsdoc: 在 Visual Studio 中需要引入此版本的 jquery 类库才能启用智能感知 . 如: jquery-1.3.2-
vsdoc2.js
release 包 : 里面有没有压缩的 jquery 代码 , 以及文档和示例程序 . 如 : jquery-1.3.2-release.zip
2.
2.
2.
2. 编写程序
创建一个 HTML 页面 , 引入 jQuery 类库并且编写如下代码 :
<! DOCTYPE html PUBLIC "-// W 3 C // DTD XHTML 1.0
Transitional // EN " " http :// www . w 3. org / TR / xhtml 1/ DTD / xhtml 1-
transitional . dtd " >
< html xmlns = " http :// www . w 3. org /1999/ xhtml " >
< head >
< title > Hello World jQuery !</ title >
< script type = " text / javascript " src = " scripts / jquery -1.3.2-
vsdoc 2. 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 ) { $ ( "# divMsg " ). hide ();
});
$ ( "# btnChange " ). bind ( " click " , function ( event )
{ $ ( "# divMsg " ). html ( " Hello World , too !" ); });
</ script >
</ body >
</ html >
效果如下 :
页面上有三个按钮 , 分别用来控制 Hello World 的显示 , 隐藏和修改其内容 .
此示例使用了 :
(1) jQuery 的 Id 选择器 : $("#btnShow")
(2) 事件绑定函数 bind()
(3) 显示和隐藏函数 . show() 和 hide()
(4) 修改元素内部 html 的函数 html()
在接下来的教程中我们将深入这些内容的学习 .
五 .
.
.
. 启用 Visual
Visual
Visual
Visual Studio
Studio
Studio
Studio 对 jQuery
jQuery
jQuery
jQuery 的智能感知
首先看一下 Visual Studio 带给我们的智能感知惊喜 . 要让 Visual Studio 支持智能感知 , 需要下 列
条件 :
• 安装 VS2008
VS2008
VS2008
VS2008 SP1
SP1
SP1
SP1
下载地址 : http://msdn.microsoft.com/en-us/vstudio/cc533448.aspx
• 安装 VS
VS
VS
VS 2008
2008
2008
2008 Patch
Patch
Patch
Patch KB958502
KB958502
KB958502
KB958502 以支持 "-vsdoc.js"Intellisense
"-vsdoc.js"Intellisense
"-vsdoc.js"Intellisense
"-vsdoc.js"Intellisense 文件 .
.
.
.
该 补丁会导致 Visual Studio 在一个 JavaScript 库被引用时,查找是否存在一个可选的 "-
vsdoc.js" 文件,如果存在的话,就用它来驱动 JavaScript intellisense 引擎。这些加了注释的 "-
vsdoc.js" 文件可以包含对 JavaScript 方法提供了帮助文档的 XML 注释,以及对无法自 动 推
断出的动态 JavaScript 签名的另外的代码 intellisense 提示。你可以在 " 这里 " 了解该补丁的 详
情。你可以在 " 这里 " 免费下载该补丁。
必须要引用 vsdoc
vsdoc
vsdoc
vsdoc 版本的 jquery
jquery
jquery
jquery 库
< script type =" text / javascript " src =" scripts / jquery -1.3.2- vsdoc 2. js "></ script >
在编写脚本的时候 , 甚至刚刚输入 "$" 的时候 ,VS 可以智能提示 :
在使用方法时 , 还会有更多的提示 :
有了智能感知我们编写 javascript 变得和 C# 一样快速 , 便捷 , 舒服 . 大部分情况可以一次编写成功
而不用再为了一个大小写而查询 javascript 帮助文件 . 能够让 Visual Studio 对 jQuery 实现智能感
剩余200页未读,继续阅读
资源评论
repolaris
- 粉丝: 0
- 资源: 18
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功