脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery 入门篇

jQuery 开天辟地入门篇一

 更新时间：2009年12月09日 20:42:15   作者：  
这篇jquery入门的文章，确实不错，前提是大家已经对js稍微熟悉一点即可能看懂，非常不错的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.提供了强大的功能函数使用这些功能函数, 能够帮助我们快速完成各种功能, 而且会让我们的代码异常简洁.

2.解决浏览器兼容性问题javascript脚本在不同浏览器的兼容性一直是Web开发人员的噩梦, 常常一个页面在IE7,Firefox下运行正常, 在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对象上直接添加"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>

效果如下:

image 

页面上有三个按钮, 分别用来控制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可以智能提示:

image

在使用方法时, 还会有更多的提示:

image

 

有了智能感知我们编写javascript变得和C#一样快速,便捷,舒服.大部分情况可以一次编写成功而不用再为了一个大小写而查询javascript帮助文件.能够让Visual Studio对jQuery实现智能感知的前提是要引入vsdoc版本的jQuery类库. 示例中我们引入了"jquery-1.3.2-vsdoc2.js"文件. 如果引用其他版本比如min版本的jQuery类库就无法启用智能提示.但是在正式环境下, 我们必须要使用"min"版本的jquery库文件, 以1.3.2版本号为例,各个版本的大小如下:

image

其中第一个是未压缩的jquery库. 如果启用gzip压缩并且使用min版本的jquery.js可以在传输过程中压缩到19KB.

注意,如果我们更新了脚本, 可以通过"Ctrl+Shift+J"快捷方式更新Visual Studio的智能感知,或者单击 编辑->IntelliSense->更新JScript Intellisense:

image

为了即能在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, 会发现在脚本中也启用了智能提示:

 

image

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

 

七.总结

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

在后续文章中我们将深入学习jQuery选择器, 事件, 工具函数, 动画, 以及插件等.
本文代码打包下载 http://xiazai.jb51.net/200912/yuanma/Code-jQueryStudy-1.rar

相关文章

  • jQuery删除/清空指定元素的所有子节点实例代码

    jQuery删除/清空指定元素的所有子节点实例代码

    这篇文章主要给大家介绍了关于jQuery删除/清空指定元素的所有子节点，文中通过示例代码介绍的非常详细，对大家学习或者使用jQuery具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-07-07
  • JQuery 选择器、过滤器介绍

    JQuery 选择器、过滤器介绍

    使用过AJAX技术的人都知道大名鼎鼎的JQuery。虽然我来学习之前有看过AJAX的视频，但那时对WEB应用这个东西还比较模糊，不清楚HTML、JSP与Servlet是怎么工作的，甚至不知道JQuery包装的是什么东西。
    2011-02-02
  • jQuery使用$.each遍历json数组的简单实现方法

    jQuery使用$.each遍历json数组的简单实现方法

    这篇文章主要介绍了jQuery使用$.each遍历json数组的简单实现方法,结合实例形式分析了each方法遍历json数组的实现技巧与相关注意事项,需要的朋友可以参考下
    2016-04-04
  • jquery改变tr背景色的示例代码

    jquery改变tr背景色的示例代码

    本篇文章主要是对jquery改变tr背景色的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-12-12
  • ui组件之input多选下拉实现方法（带有搜索功能）

    ui组件之input多选下拉实现方法（带有搜索功能）

    这篇文章主要介绍了ui组件之input多选下拉实现方法（带有搜索功能）的相关资料,需要的朋友可以参考下
    2016-07-07
  • 3kb jQuery代码搞定各种树形选择的实现方法

    3kb jQuery代码搞定各种树形选择的实现方法

    下面小编就为大家带来一篇3kb jQuery代码搞定各种树形选择的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • jquery插件hiAlert实现网页对话框美化

    jquery插件hiAlert实现网页对话框美化

    hiAlert是一款基于jQuery的信息提示插件，它支持操作成功、操作失败和操作提醒三种信息提示方式。hiAlert浏览器兼容性非常好，支持更改提示内容，支持定位提示框的位置，可配置插件参数。
    2015-05-05
  • 基于jQuery1.9版本如何判断浏览器版本类型

    基于jQuery1.9版本如何判断浏览器版本类型

    在jquery.1.9以前的版本，可以使用$.browser很轻松的判断浏览器的类型和版本，但是在1.9中和以后的版本中，$.browser已经被删除，下面就介绍一下如何实现此功能，希望能够给需要的朋友带来帮助
    2016-01-01
  • jquery实现html页面 div 假分页有原理有代码

    jquery实现html页面 div 假分页有原理有代码

    大概原理就是填充后div的总高度 （1000px） 显示高度（100px） 则页面总数为10页 。当查看第二页时，显示的div高度为100 - 200之间，以此类推
    2014-09-09
  • jQuery Position方法使用和兼容性

    jQuery Position方法使用和兼容性

    position方法获取匹配元素相对父元素的偏移。接下来通过本文给大家分享jQuery Position方法使用和兼容性的相关知识，感兴趣的朋友一起看看吧
    2017-08-08

最新评论