ゼロから学ぶjQuery(1)

11572 ワード

1.jQueryクラスライブラリのダウンロード
ダウンロード先:
http://docs.jquery.com/Downloading_jQuery
上のアドレスは総ダウンロードリストで、中には多くのバージョンとタイプのjQueryライブラリがあり、主に以下のように分類されています.
1.4.1 (Release Notes) Minified , Uncompressed Documentation: Changelog , Visual Studio

Uncompressed:完全なjQueryクラスライブラリ
Minified:圧縮後のjQueryクラスライブラリは、本環境で使用する.
Visual Studio:このバージョンのjqueryクラスライブラリをVisual Studioに導入して、インテリジェントなセンシングを有効にする必要があります.
vsdocバージョンのjqueryライブラリを参照する必要があります

インテリジェントな感知があってjavascriptを書くのはC#と同じように速くて、便利で、気持ちがいいです.ほとんどの場合、1つの大文字と小文字のためにjavascriptヘルプファイルをクエリーすることなく、一度に作成に成功することができます.Visual StudioによるjQueryのインテリジェントな知覚を実現できる前提は、vsdocバージョンのjQueryクラスライブラリを導入することである.例では、「jquery-1.3.2-vsdoc 2.js」ファイルを導入する.minバージョンなどの他のバージョンのjQueryクラスライブラリを参照すると、スマートヒントは有効になりません.しかし、正式な環境では、1.3のために「min」バージョンのjqueryライブラリファイルを使用する必要があります.2バージョン番号を例として、各バージョンのサイズは以下の通りです.

1つ目は非圧縮jqueryライブラリである.gzip圧縮を有効にし、minバージョンのjqueryを使用する場合.jsは伝送中に19 KBに圧縮することができる.
スクリプトを更新した場合は、「Ctrl+Shift+J」ショートカットでVisual Studioのスマートセンシングを更新するか、「編集」>「IntelliSense->「Jscript Intellisense」をクリックしてJscript Intellisenseを更新できます.
从零开始学习jQuery(1)

Visual Studioでスクリプト・プロンプトを追加し、オンラインでminバージョンのスクリプト・ライブラリを使用できるようにするには、jQueryライブラリを次のように導入します.
2.制御コンパイル結果

    <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バージョンの1つのバグは、後続バージョンで解決することを期待している.実はみんなは1.2を完全に使うことができます.6バージョンのminライブラリ、このチュートリアルに関連するjquery機能、1.2.6バージョンは基本的にサポートされています.
if(false)を使用して、コンパイル後のページにvsdocバージョンjqueryライブラリの参照を含まないようにし、スクリプト参照をPlaceholderに入れてvisible=fasleを設定するなど、同様の考え方を用いることもできる.
3.バックエンド変数の使用
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>";

4.プログラミング
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>

ページには3つのボタンがあり、それぞれHello Worldの表示を制御し、その内容を隠し、修正するために使用される.
次の例を使用します.
(1)jQueryのIdセレクタ:$("#btnShow")
(2)イベントバインド関数bind()
(3)関数の表示と非表示を行う.show()とhide()
(4)要素内部htmlの関数html()を修正する

.独立したJSファイルでスクリプトインテリジェントセンシングを有効にする
ページ内の知能感知の問題を解決しましたが、実は独立しています.jsファイルでは、IntellisenseDemoでスクリプトのインテリジェントな感知を有効にすることができます.jsファイルに、次の文を追加します.

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

Jscript Intellisenseを更新すると、スクリプトにもスマートヒントが有効になっています.

なお、本明細書で説明するスクリプトインテリジェントセンシングは、jQueryクラスライブラリだけでなく、自分で作成したjavascriptコードにも適用される.

ComposerでPlease provide a valid cache pathとなったときの対応スクリプト

VSCodeでTypeScriptを書く時、エクスプローラーに .jsと.d.tsを表示しない方法