jQuery

jQueryとは

JavaScriptで記述された、JavaScript用のライブラリです。

なお、jQueryオブジェクトは省略して$オブジェクトでも使用できます。

jQueryオブジェクト

$(Selectors [, Context])

セレクタで指定した内容にマッチした要素をjQueryオブジェクトで取得します。

なお、セレクタはCSSと同様の指定ができます。

引数説明
SelectorsCSSセレクタCSSセレクタの形式で指定します
Context(省略可能)CSSセレクタ検索対象を絞ることができます

サンプル

$("#hoge")         // 「全て」の中から「#hoge」を取得
$(".hoge", #fuga)  // 「#fuga」の中にある「.hoge」を取得

メモ

  • 対応:var1.0 ~
  • 返値:jQueryオブジェクト

$(DOM)

引数にDOM要素を設定すると、DOM要素をjQueryオブジェクトに変換します。

引数説明
DOMDOM要素

サンプル

var hoge = jQuery(document.getElementsByTagName("div")[0]);

メモ

  • 対応:var1.0 ~
  • 返値:jQueryオブジェクト

$(jQuery)

引数にjQueryオブジェクトを設定すると、jQueryオブジェクトを複製できます。

引数説明
jQueryjQueryオブジェクト

サンプル

var hoge = jQuery("div");
var fuga = jQuery(hoge);

メモ

  • 対応:var1.0 ~
  • 返値:jQueryオブジェクト

$(Object/Array)

引数にObjectオブジェクトを設定することでjQueryオブジェクトに変換できます。

引数説明
ObjectObjectオブジェクト

サンプル

testObj = {aaa:"my id is aaa", bbb:"my id is bbb"};
$(function () {
	$("div").click(function(){
		var myName = $(testObj).prop(this.id);
		alert(myName)
	});
});

メモ

  • 対応:var1.0 ~
  • 返値:jQueryオブジェクト

$()

引数に何も設定しないと、空のjQueryオブジェクトを返します。

ver1.4未満では引数を設定しないとdocumentが返ってきていました。

保存したjQueryオブジェクトをリセット(何も選択されていない状態)する時や、変数の初期値として利用します。

メモ

  • 対応:var1.4 ~
  • 返値:jQueryオブジェクト

サンプル

DOMの読み込み完了時に実行

基本形

$(document).ready(function(){...});

省略形

$(function(){...});

非推奨

$().ready(function(){...});