jQueryについて　-Selectorsの基本-

/ システムソリューション部　

青木 (2009年9月28日 11:40)
システムソリューション部

jQueryをご存知でしょうか。
jQueryはJavaScriptのコーディングを支援するライブラリのことです。
記述の仕方はJavaScriptに似ていますが、
jQueryは、より見やすくスッキリ書くことが出来ます。

本日はSelectors（要素の選択）の基本部分について書きます。

■　#id
　　指定したidを持つ要素を選択します。
　　JavaScriptのdocument.getElementByIdに該当します。

　・JavaScript
　　document.getElementById("hoge")

　・jQuery
　　$("#hoge")

■　element
　　指定した要素を取得します。
　　JavaScriptのdocument.getElementsByTagNameに該当します。

　・JavaScript
　　document.getElementsByTagName("div")

　・jQuery
　　$("div")

■　.class
　　指定したclassを持つ要素を取得します。

　・jQuery
　　$(".hogeClass")

■　*
　　すべての要素を取得します

　・jQuery
　　$("*")

■　selector1, selector2, ..., selectorN
　　一度に複数のselectorを使用する事も可能です。

　・jQuery
　　$("#hoge, #fuga")

以下は、今回紹介したSelectorsを使用したサンプルコードです。
jQueryをダウンロード後に「jQuery.js」にファイル名を変更して頂き、
サンプルコードと同階層に配置することで確認できます。

jQueryはこちらからダウンロードすることが出来ます。
※「Download(jQuery);」のリンクをクリックしてください。

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--
function hoge() {
  // 「#id」を使用した例です。
  alert($("#hoge").val());

  // 「element」を使用した例です。
  textElements = $("input");
  alert(textElements[0].value);
  alert(textElements[1].value);

  // 「.class」を使用した例です。
  alert($(".hogeClass").val());

  // 「*」を使用した例です。
  alert("*選択でテキストの値を変更します。");
  $("*").val("change1");

  // 「selector1, selector2, ..., selectorN」を使用した例です。
  alert("selector1, selector2, ...選択でテキストの値を変更します。");
  $("#hoge, #fuga").val("change2");
}
//-->
</script>
</head>
<body onLoad="hoge();">
<form>
<input type="text" id="hoge" class="hogeClass" value="hoge">
<input type="text" id="fuga" value="fuga">
</form>
</body>
</html>

「システム開発ブログ」へのコメントやご意見等ありましたら、ファンページまでお願いします。 Facebook のファンページ

[PR]
他社のシステムも直します。資産を活かしてシステムリフォーム

システムのトラブル解決を承ります。すぐにシステムリフォームを体験できます

システム開発のアイロベックス（東京都新宿区）

/ システムソリューション部　  Tweet シェア

システム開発ブログ

最近の記事

カテゴリー

部署

月別アーカイブ

以前の部署別ブログ

検索

システム開発専用サイト

Windowsフォルダーアクセス権限確認ツール

Webとリアルをつなぐコンテンツマネージメントシステム

Twitter公式アカウントに認定されています