ページへのjQueryの追加
jQueryはクライアントスクリプトライブラリなので、ページにスクリプト参照を追加しなければなりません。jQueryのサイトからjQueryの最新バージョンをダウンロードすることができます。
ASP.NETページにjQueryを組み込むにはいくつか方法があります。
- ページ内の
<script>タグでローカルコピーを参照する。 - ScriptManagerでローカルコピーを参照する。
- ClientScriptオブジェクトを使ってリソースのスクリプトを埋め込む。
- jQuery.comまたはGoogle AJAX APIのリモートコピーを参照する。
jQuery.comもGoogleも、それぞれのサイトにjQueryスクリプトファイルをホストしています。Googleのリポジトリには、jQueryとjQuery.uiの両方のライブラリをロードするためのGoogle API動的リンクと静的ファイルが含まれています。この2つのサイトを比べると、Googleのサイトの方が速くて信頼性が高いようです。
私自身はライブラリのローカルコピーを持つようにしています。というのも、接続が断たれたときやオフライン状態で作業するときのことを考えて、自分のアプリケーションがオンラインリソースに依存しないようにしたいからです。私はWebアプリケーションの/scriptsフォルダに保存したローカルスクリプトを使用しています。本稿に掲載した例でも、このやり方を踏襲しています。次のコードはページにjQueryを追加するためのサンプルコードです。
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="scripts/jquery.js"
type="text/javascript"></script>
</head>
<body>
スクリプトを組み込むそれぞれの方法の長所と短所について詳しく知りたい方は、このブログ投稿を参照してください。
セレクタ入門
セレクタはjQueryの有用性を高めるものです。まずコンテンツを選択し、そこにjQueryの関数を適用します。次のようにすると、単一の要素を選択できます。
$("#gdEntries")
.css("border", "solid 1px navy");
あるいは、次のようにCSSクラス（.）で選択します。
$(".gridalternate")
.css("background", "lightsteelblue ");
複数のCSSセレクタをカンマで区切って選択することもできます。次の例では、2つのCSSクラスのどちらかに属する要素がマッチします。
$(".gridrow,.gridalternate")
.attr("tag", "row");
タグ名（div、tr、inputなど）で要素を選択し、それらの要素にフィルタを適用することもできます。次のコードでは、ボタンとしての入力要素をすべて選択し、それらにクリックハンドラをアタッチしています。
$("input:button,input:submit")
.click(function(event){
alert("clicked");
});
もっと複雑なセレクタとして、次のようにテーブル内の全行を選択するセレクタも考えられます。
$("#gdEntries>tbody>tr")
.css("border", "solid 1px red");
CSSに精通している方なら、このような形には見覚えがあるはずです。基本的にCSSスタイルシートで要素を選択するときと同じ構文を使用できます（ただし、前述の例で使用した:buttonフィルタは別です。jQueryではいくつものカスタムフィルタが追加されています）。つまり、独自の構文を使うのではなく、既知の構文を使えばよいのです。CSS要素選択は非常に強力であり、HTMLレイアウトがよく考えられていれば、ドキュメント内の任意の要素または要素群を容易に選択できます。
CSSの知識が錆びついている方のために、使用できる一般的なjQuery/CSSセレクタタイプを表1に示しておきます（詳細はセレクタ一覧を参照）。
| セレクタ | 例 | 説明 |
| 要素 | $("td") | HTML要素タグを選択します。 |
| #id | $("#divMessage") | IDによって要素を選択します。 |
| .cssクラス | $(".gridalternate") | CSSスタイルを選択します。 |
| セレクタ,セレクタ | $("input:button,input:text") | カンマで区切った複数のセレクタを組み合わせて1つの選択にします。 |
| 先祖 子孫 | $("#divMessage a") | セレクタ/要素/タグの間のスペースによってネストした要素が検索されます。この構文はCSSの先祖子孫構文に似ています。 |
| 親>子>子 | $("p>b") | 右側の要素/セレクタとマッチする要素またはセレクタ式の直接の全子供とマッチします。 |
| 前~兄弟~兄弟 | $("#row_11:nth-child(2)~td")$("~td") | 先行する式と同じレベルの次の兄弟とマッチします。この例では、あるテーブル行の列3-Nとマッチします。既存のjQueryインスタンスに対するfind()またはfilter()として使用するのが最適。 |
| 前+次の兄弟+次の兄弟 | $("#tdMoneyCol+td")$("+td") | 次の兄弟とマッチします。既存のjQueryオブジェクトに対するfind()またはfilter()で使用するのが最適。 |
| :フィルタ | $("input:button") | コロン（:）によってクエリにフィルタが適用されます。jQueryは3つのCSSフィルタといくつかのカスタムフィルタをサポートしています。例: :not、:button、:visible、:hidden、:checked、:first,nth-child(1)、:has、:is、:contains、:parent |
| [属性] | $("p[id^=pk_"] | 要素の属性を選択します。 = 等価の文字列 ^= ～で始まる $= ～で終わる *= ～を含む |
セレクタはかなり凝ったものにすることができます。例えば、次のコードではgdEntriesというテーブルからIDがpkで始まるセルをすべて選択し、それらの幅を30に設定しています。
$("#gdEntries>tbody>tr>td[id^=Pk]").width(30);
このようにして、さまざまな手段を駆使することにより、探している要素を正確に選び出すことができます。
