jQuery の画期的な入門 第 1 章_jquery

1. 概要
2. はじめに
3. jQuery とは
jQuery は、Javascript スクリプト ライブラリのセットです。私のブログに「JavaScript スクリプト ライブラリ」シリーズがあります。 .NET クラス ライブラリの場合、ユーザーが使いやすくするために、いくつかのツール メソッドまたはオブジェクト メソッドをクラス ライブラリにカプセル化します。

jQuery はスクリプト ライブラリであり、「ライブラリ」ではないことに注意してください。 「フレームワーク」と同じです。たとえば、「システム アセンブリ」はクラス ライブラリであり、「ASP.NET MVC」はフレームワークです。jQuery ではスクリプトの参照管理と関数管理を解決できません。これらはスクリプト フレームワークが備えているものです。

スクリプト ライブラリは、コーディング ロジックを完成させ、ビジネス機能を実現するのに役立ちます。同時に、記述されたコードがよりエレガントで堅牢になります。インターネット上の豊富な jQuery プラグインにより、「jQuery を使えば毎日お茶を飲める」ようになりました。なぜなら、ASP を作成するとき、私たちはすでに巨人の肩の上に立っているからです。 NET MVC プロジェクトでは、jQuery クラス ライブラリが自動的に導入されていることがわかります。jQuery はほぼ Microsoft の公式スクリプト ライブラリです。完璧な統合とインテリジェント センシングのサポートにより、.NET と jQuery をシームレスに組み合わせることができます。 Dojo、ExtJS などの代わりに jQuery を選択してください。

jQuery には次の特徴があります。

1. 強力な関数関数を提供します。これらの関数関数を使用すると、さまざまな関数を迅速に完成させてコードを作成できます。

2. ブラウザーの互換性の問題を解決します。Web 開発者にとって、さまざまなブラウザーでの JavaScript スクリプトの互換性は、IE7 および Firefox では正常に動作するのに、IE6 では不可解な問題が発生することがよくあります。さまざまなブラウザーでさまざまなスクリプトを記述するのは面倒です。たとえば、jQuery の Event オブジェクトは、以前はすべてのブラウザーに共通するようにフォーマットされていました。 IE では、event.srcElements ですが、FF などの標準ブラウザーでは、event.target です。jQuery はイベント オブジェクトを統合するため、すべてのブラウザーでイベント オブジェクトを取得できます。 >
3 . リッチな UIjQuery を実装すると、グラデーション ポップアップ、レイヤーの移動などのアニメーション効果を実現でき、より良いユーザー エクスペリエンスを得ることができます。 IEやFFと互換性があり、大量のJavaScriptコードを実装するには多大な労力がかかりますが、一度書いてもあまり役に立たず、しばらくすると忘れてしまいます。

4. ほとんどの開発者が JavaScript について間違った理解を持っているため、jQuery を使用すると、そのようなアプリケーションを迅速に完成させることができます。 onclick が実際には匿名関数であることを知らずに、HTML 要素内で DOM を操作するためにロードするときに実行されたり、「onclick」属性をドキュメント オブジェクトに直接追加したりするなどです。これらのエラー スクリプトの知識を持つ技術担当者は、すべての開発作業を完了することもできます。 , しかし、そのようなプログラムは堅牢ではありません。たとえば、「ページ上に、ロード時に実行されるDOMを操作するステートメントを記述します。ページのコードが小さく、ユーザーがすぐにロードする場合は問題ありません。ページがロードされるとき」少し時間がかかると、ブラウザの「操作を終了します」エラーが発生します。jQuery には、これらの問題を解決するのに役立つ多くの簡単なメソッドが用意されています。jQuery を使用すると、これらの間違いを修正する知識が得られます。なぜなら、私たちは皆、標準的な正しい jQuery を使用しているからです。

5. 多すぎます。1 つずつ確認してください。4. Hello World jQuery
いつものように、jQuery の Hello World プログラムを作成します。 jQuery。

この章の完全なソース コードは、この記事の最後からダウンロードできます。
1. jQuery ライブラリをダウンロードします。
jQuery プロジェクトのダウンロードは Google コードに配置されます。ダウンロード アドレス:

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

上記のアドレスは、総ダウンロード リストです。これには、多くのバージョンと種類の jQuery ライブラリが含まれており、主に次のカテゴリに分類されています。 min: 正式な環境で使用される圧縮された jQuery クラス ライブラリ。例:

jquery-1.3.2.min.js

。 vsdoc: IntelliSense を有効にするには、このバージョンの jquery クラス ライブラリを Visual Studio に導入する必要があります。例: jquery-1.3.2-vsdoc2.js

。 リリース パッケージ: 非圧縮の jquery コード、ドキュメントおよびサンプル プログラムが含まれています。例: jquery-1.3.2-release.zip

2. 書き込みます。プログラム HTML ページを作成し、jQuery クラス ライブラリを導入し、次のコードを記述します。

コードをコピー

コードは次のとおりです。 :

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, 因为如今想编写跨浏览器的脚本真的是一件困难的事情!

後続の記事では、jQuery セレクター、イベント、ユーティリティ関数、アニメーション、プラグインなどについて詳しく説明します。
この記事のコード パッケージをダウンロードします http:// xiazai.jb51.net/200912/yuanma/Code-jQueryStudy-1.rar