从零开始学习jQuery (一) 入门篇

时间 2020-05-19

标签开始学习 jquery 入门栏目 JQuery 繁體版

原文原文链接

本系列文章导航

从零开始学习jQuery (一) 入门篇javascript

一.摘要

本系列文章将带您进入jQuery的精彩世界, 其中有不少做者具体的使用经验和解决方案, 即便你会使用jQuery也能在阅读中发现些许秘籍.html

本篇文章是入门第一篇, 主要是简单介绍jQuery, 经过简单示例指导你们如何编写jQuery代码以及搭建开发环境. 详细讲解了如何在Visual Studio中配合使用jQuery.前端

二.前言

三.什么是jQuery

jQuery是一套Javascript脚本库. Javascript脚本库相似于.NET的类库, 咱们将一些工具方法或对象方法封装在类库中, 方便用户使用.java

注意jQuery是脚本库, 而不是脚本框架. "库"不等于"框架", 好比"System程序集"是类库,而"ASP.NET MVC"是框架. jQuery并不能帮助咱们解决脚本的引用管理和功能管理,这些都是脚本框架要作的事.jquery

脚本库可以帮助咱们完成编码逻辑,实现业务功能. 使用jQuery将极大的提升编写javascript代码的效率, 让写出来的代码更加优雅, 更加健壮. 同时网络上丰富的jQuery插件也让咱们的工做变成了"有了jQuery,每天喝茶水"--由于咱们已经站在巨人的肩膀上了.web

建立一个ASP.NET MVC项目时, 会发现已经自动引入了jQuery类库. jQuery几乎是微软的御用脚本库了!完美的集成度和智能感知的支持,让.NET和jQuery完美无缺结合在一块儿!因此用.NET就要选用jQuery而非Dojo,ExtJS等.后端

jQuery有以下特色:浏览器

1.提供了强大的功能函数

使用这些功能函数, 可以帮助咱们快速完成各类功能, 并且会让咱们的代码异常简洁.网络

2.解决浏览器兼容性问题

javascript脚本在不一样浏览器的兼容性一直是Web开发人员的噩梦, 经常一个页面在IE7,Firefox下运行正常, 在IE6下就出现莫名其妙的问题. 针对不一样的浏览器编写不一样的脚本是一件痛苦的事情. 有了jQuery咱们将从这个噩梦中醒来, 好比在jQuery中的Event事件对象已经被格式化成全部浏览器通用的, 从前要根据event获取事件触发者, 在ie下是event.srcElements 而ff等标准浏览器下下是event.target. jQuery则经过统一event对象,让咱们能够在全部浏览器中使用event.target获取事件对象.框架

3.实现丰富的UI

jQuery能够实现好比渐变弹出, 图层移动等动画效果, 让咱们得到更好的用户体验. 单以渐变效果为例, 从前我本身写了一个能够兼容ie和ff的渐变更画, 使用大量javascript代码实现, 费心费力不说, 写完后没有太多帮助过一段时间就忘记了. 再开发相似的功能还要再次费心费力. 现在使用jQuery就能够帮助咱们快速完成此类应用.

4.纠正错误的脚本知识

这一条是我提出的, 缘由就是大部分开发人员对于javascript存在错误的认识. 好比在页面中编写加载时即执行的操做DOM的语句, 在HTML元素或者document对象上直接添加"onclick"属性, 不知道onclick实际上是一个匿名函数等等. 拥有这些错误脚本知识的技术人员也能完成全部的开发工做, 可是这样的程序是不健壮的. 好比"在页面中编写加载时即执行的操做DOM的语句", 当页面代码很小用户加载很快时没有问题, 当页面加载稍慢时就会出现浏览器"终止操做"的错误.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.js

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 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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) { $("#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 Studio 对jQuery的智能感知

首先看一下Visual Studio带给咱们的智能感知惊喜. 要让Visual Studio支持智能感知, 须要下列条件:

安装 VS2008 SP1
下载地址: http://msdn.microsoft.com/en-us/vstudio/cc533448.aspx
安装VS 2008 Patch KB958502以支持"-vsdoc.js"Intellisense文件.
该补丁会致使Visual Studio在一个JavaScript库被引用时，查找是否存在一个可选的"-vsdoc.js"文件，若是存在的话，就用它来驱动JavaScript intellisense引擎。这些加了注释的"-vsdoc.js"文件能够包含对JavaScript方法提供了帮助文档的XML注释，以及对没法自动推断出的动态JavaScript签名的另外的代码intellisense提示。你能够在"这里"了解该补丁的详情。你能够在"这里"免费下载该补丁。

必需要引用vsdoc版本的jquery库

<script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>

在编写脚本的时候, 甚至刚刚输入"$"的时候,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. 控制编译结果

    <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/jquery-1.3.2-vsdoc2.js"></script> </asp:PlaceHolder> <% =jQueryScriptBlock %>

后台声明变量:

protected string jQueryScriptBlock = @"<script type=""text/javascript"" src=""scripts/jquery-1.3.2.min.js""></script>";

六.在独立的.JS文件中启用脚本智能感知

上面咱们解决了在页面中智能感知的问题, 其实在独立的.js文件中咱们一样能够启用脚本的智能感知, 在IntellisenseDemo.js文件中,添加以下语句:

/// <reference path="jquery-1.3.2-vsdoc2.js" />

更新JScript Intellisense, 会发如今脚本中也启用了智能提示:

注意,本文中讲解的脚本智能感知不只适用于jQuery类库, 还适用于本身编写的javascript代码.

七.总结

本文简单介绍了jQuery, 以及如何搭建脚本开发环境. 示例程序没有复杂的功能, 可能还没法让没有接触过jQuery的人认识到它的强大.可是仅凭借"多浏览器支持"这一特性, 就足以让咱们学习并使用jQuery, 由于现在想编写跨浏览器的脚本真的是一件困难的事情!

在后续文章中咱们将深刻学习jQuery选择器, 事件, 工具函数, 动画, 以及插件等.

本文代码下载:

http://files.cnblogs.com/zhangziqiu/Code-jQueryStudy-1.rar