jQuery Groundbreaking Introduction Chapter 1_jquery

1. Summary
2. Foreword
3. What is jQuery
jQuery is a set of Javascript script libraries. You can find the "Javascript lightweight script library" series of articles in my blog. The Javascript script library is similar For .NET class libraries, we encapsulate some tool methods or object methods in class libraries to facilitate users' use.

Note that jQuery is a script library, not a script framework. "Library" is not the same as "framework" , For example, "System Assembly" is a class library, and "ASP.NET MVC" is a framework. jQuery cannot help us solve the reference management and function management of scripts, these are what the script framework has to do.

The script library can help us complete coding logic and realize business functions. Using jQuery will greatly improve the efficiency of writing JavaScript code, making the written code more elegant and robust. At the same time, the rich jQuery plug-ins on the Internet also make our work easier. It has become "With jQuery, drink tea every day"-because we are already standing on the shoulders of giants.

When you create an ASP.NET MVC project, you will find that the jQuery class library has been automatically introduced . jQuery is almost Microsoft’s official script library! Perfect integration and intelligent sensing support allow .NET and jQuery to be seamlessly combined! Therefore, when using .NET, you must choose jQuery instead of Dojo, ExtJS, etc.

jQuery has the following characteristics:

1. Provides powerful functional functions. Using these functional functions can help us quickly complete various functions and make our code extremely concise.

2. Solve browser compatibility issues. The compatibility of JavaScript scripts in different browsers has always been a nightmare for web developers. Often a page runs normally under IE7 and Firefox, but inexplicable problems occur under IE6. For different browsers Writing different scripts is a pain. With jQuery we will wake up from this nightmare. For example, the Event object in jQuery has been formatted to be common to all browsers. In the past, we had to get the event trigger based on the event. Under IE, it is event.srcElements, while under standard browsers such as FF, it is event.target. jQuery unifies the event object, allowing us to use event.target to obtain event objects in all browsers.

3 . Implementing rich UIjQuery can achieve animation effects such as gradient pop-up, layer movement, etc., allowing us to obtain a better user experience. Taking the gradient effect as an example, I once wrote a gradient animation that is compatible with IE and FF, using It takes a lot of effort to implement a large amount of javascript code. After writing it, it doesn’t help much and is forgotten after a while. It will take a lot of effort again to develop similar functions. Now using jQuery can help us quickly complete such applications.

4. Correcting erroneous scripting knowledge is something I proposed because most developers have a wrong understanding of javascript. For example, writing statements in the page that are executed when loading to operate the DOM, in HTML elements or Add the "onclick" attribute directly to the document object, without knowing that onclick is actually an anonymous function, etc. Technical personnel with knowledge of these error scripts can also complete all development work, but such a program is not robust. For example, "on the page Write statements that operate the DOM that are executed when loading. When the page code is small and the user loads it quickly, there is no problem. When the page loads a little slowly, the browser "terminates the operation" error will occur. jQuery provides many simple Methods help us solve these problems, and once you use jQuery you will have the knowledge to correct these mistakes - because we are all using the standard correct jQuery scripting method!

5. Too many! Wait for us one by one Go discover. 4. Hello World jQuery
As usual, we will write the Hello World program of jQuery to take the first step of using jQuery.

The complete source code of this chapter can be downloaded at the end of this article.
1. Download jQuery library

The jQuery project download is placed on Google Code, download address:

http://code.google.com/p/jqueryjs/downloads/list

The above address is the total download list, which contains many versions and types of jQuery libraries, mainly divided into the following categories:

min: Compressed jQuery class library, used in formal environments. For example: jquery-1.3.2.min.js

vsdoc: This version of the jquery class library needs to be introduced in Visual Studio to enable IntelliSense. For example: jquery-1.3.2-vsdoc2.js

release package: It contains uncompressed jquery code, as well as documentation and sample programs. For example: jquery-1.3.2-release.zip

2. Write the program Create an HTML page, introduce the jQuery class library and write the following code:

Copy the code The code is as follows:

Hello World!

效果如下:

 

页面上有三个按钮, 分别用来控制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库
  

  <SPAN class=kwrd><</SPAN><SPAN class=html>script</SPAN> <SPAN class=attr>type</SPAN><SPAN class=kwrd>="text/javascript"</SPAN> <SPAN class=attr>src</SPAN><SPAN class=kwrd>="scripts/jquery-1.3.2-vsdoc2.js"</SPAN><SPAN class=kwrd>></</SPAN><SPAN class=html>script</SPAN><SPAN class=kwrd>></SPAN>

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

  <SPAN class=kwrd><</SPAN><SPAN class=html>script</SPAN> <SPAN class=attr>type</SPAN><SPAN class=kwrd>="text/javascript"</SPAN> <SPAN class=attr>src</SPAN><SPAN class=kwrd>="scripts/jquery-1.2.6.min.js"</SPAN><SPAN class=kwrd>></</SPAN><SPAN class=html>script</SPAN><SPAN class=kwrd>></SPAN>
  <%<SPAN class=kwrd>if</SPAN> (<SPAN class=kwrd>false</SPAN>)
   { %>
  <script type=<SPAN class=str>"text/javascript"</SPAN> src=<SPAN class=str>"scripts/jquery-1.3.2-vsdoc2.js"</SPAN>><SPAN class=kwrd></</SPAN><SPAN class=html>script</SPAN><SPAN class=kwrd>></SPAN>  
  <SPAN class=asp><%</SPAN>} <SPAN class=asp>%></SPAN>

这是网上推荐的方式. 编译后的页面上只有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">
    <SPAN class=kwrd><</SPAN><SPAN class=html>script</SPAN> <SPAN class=attr>type</SPAN><SPAN class=kwrd>="text/javascript"</SPAN> <SPAN class=attr>src</SPAN><SPAN class=kwrd>="scripts/jquery-1.3.2-vsdoc2.js"</SPAN><SPAN class=kwrd>></</SPAN><SPAN class=html>script</SPAN><SPAN class=kwrd>></SPAN>
  asp:PlaceHolder>
  <% =jQueryScriptBlock %>

后台声明变量:

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

 <STYLE type=text/css>



.csharpcode, .csharpcode pre
{
	font-size: small;
	color: black;
	font-family: consolas, "Courier New", courier, monospace;
	background-color: #ffffff;
	/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt 
{
	background-color: #f4f4f4;
	width: 100%;
	margin: 0em;
}
.csharpcode .lnum { color: #606060; }</STYLE><br><br><BR>

 

 

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

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

/// <reference path=<SPAN class=str>"jquery-1.3.2-vsdoc2.js"</SPAN> /><BR>

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

 

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

 

七.总结

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

In subsequent articles we will learn more about jQuery selectors, events, utility functions, animations, plug-ins, etc.
Download the code package of this article http://xiazai.jb51. net/200912/yuanma/Code-jQueryStudy-1.rar