jQuery APIリファレンスjQuery Core:$(...) jQuery関数
- jQuery(expression[, context])〔要素集合をマッチするのに使用するCSSセレクタを含む文字列を受け取る〕
- jQuery(html[, ownerDocument])〔HTML文字列からDOM要素を生成 〕
- jQuery(elements)〔単一または複数のDOM要素をjQuery関数で囲う〕
- jQuery(callback)〔$(document).ready()の短縮形〕
jQuery(expression[, context])
要素集合をマッチするのに使用するCSSセレクタを含む文字列を受け取る
2009/2/27
jQuery関数は、要素にマッチするのに使用されるCSSセレクタを含む文字列を受け取り、マッチした要素をjQueryオブジェクトとして返します。
jQueryのコア関数は、この関数に集中します。 jQueryのすべてはjQuery関数に基づいているか、または何らかの形で使用します。 jQuery関数は、マッチする要素をすべて見つけ出し(通常はCSSからなる)式を渡すのに使われます。
contextを省略すると、$()は現在のHTMLドキュメントのコンテキスト内にあるDOM要素を探します。 contextにDOM要素またはjQueryオブジェクトを指定すると、expressionはそのcontextのコンテンツ内でマッチするものを探します。
-
第1引数expressionには、検索する式を文字列で指定します。 expressionにCSSを指定する際の文法は、Selectorを参照してください。
-
オプションの第2引数contextには、contextして使用するDOM要素、ドキュメント、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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>jQuery Core:$(...) jQuery関数:jQueryの使用例| jQuery</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#sample div > p").css({"border":"3px solid red","padding":"10px","width":"300px"}); }); </script> </head> <body> <div id="wrap"> <h1>jQuery Core:$(...) jQuery関数:jQueryの使用例| jQuery | jQuery</h1> <p>▼ID名が「sample」の要素内にあるdiv要素の子要素であるp要素に赤枠を付けます。</p> <!-- CODE --> <div id="sample"> <p>one</p> <div><p>two</p></div> <p>three</p> </div> <!-- CODE / --> </div> </body> </html>
jQuery(html[, ownerDocument])
HTML文字列からDOM要素を生成
2009/2/27
生のHTML文字列から、高速にDOM要素を生成します。
この関数に渡すHTML文字列は、タグ打ちしてもいいですし、テンプレートエンジンやプラグインを使用して生成したり、Ajaxで読み込んでもOKです。
単一要素を生成する場合は、終了タグやXHTML形式を使用できます。
例えば、$("<span/>")
とすればspan要素が生成されます。
jQuery v1.3からは、この構文は$(document.createElement("span"))
とするのと完全に同じです。
例えば、body要素内に動的にdiv要素を追加したい場合は、下記のように記述します。
内部的に要素が生成され、body要素のinnerHTMLプロパティに指定したHTML文字列(<div><p>テキスト</p></div>
)が挿入されます。
$("<div><p>テキスト</p></div>").appendTo("body");
-
第1引数htmlには、生成するHTML文字列を指定します。
-
オプションの第2引数ownerDocumentには、新しい要素が生成されるドキュメントを指定します。

<!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>jQuery Core:$(...) jQuery関数:jQuery(html[, ownerDocument])の使用例| jQuery</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("<div><p>Hello</p></div>").appendTo("#sample") }); </script> <style type="text/css"> #sample { border:3px solid red; background-color:#fff; width:400px; } #sample p { margin:10px; padding:10px; border:1px solid orange; } </style> </head> <body> <div id="wrap"> <h1>jQuery Core:$(...) jQuery関数:jQuery(html[, ownerDocument])の使用例 | jQuery</h1> <p>▼動的にdiv要素を作成し、ID名が「sample」の要素のinnerHTMLプロパティに挿入します。</p> <!-- CODE --> <div id="sample"></div> <!-- CODE / --> </div> </body> </html>
jQuery(elements)
単一または複数のDOM要素をjQuery関数で囲う
2009/2/27
指定した1つまたは複数のDOM要素を格納したjQueryオブジェクトを返します。
この関数は有効な引数として、XMLドキュメントやwindowオブジェクトを受け取ります。
-
第1引数elementsには、jQueryオブジェクトに格納するDOM要素を指定します。 要素、配列<要素>を指定可能です。
例:ページの背景色を黒色にします。
$(document.body).css("background", "black");
例:フォーム内のinput要素をすべて非表示にします。
$(myForm.elements).hide();

<!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>jQuery Core:$(...) jQuery関数:jQuery(elements)の使用例| jQuery</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#sample").css({"background":"orange","padding":"10px"}); }); </script> </head> <body> <div id="wrap"> <h1>jQuery Core:$(...) jQuery関数:jQuery(elements)の使用例 | jQuery</h1> <p>▼下記の要素の背景色をオレンジ色に設定します。</p> <!-- CODE --> <p id="sample">テキストテキストテキスト</p> <!-- CODE / --> </div> </body> </html>
jQuery(callback)
$(document).ready()の短縮形
2009/2/27
$(document).ready()
の短縮形です。
DOM要素の読み込みが終了した時に実行する関数を結び付けます。
この関数は、$document.ready()
と同じ動作で。操作可能なDO要素に依存するページで他の$()操作を囲うために使用すべきです。
ページ上にいくつでも$(document).ready
イベントを記述することができます。
readyイベントの詳細は、ready(fn)を参照してください。
第1引数callbackには、DOM要素が操作される準備ができた時に実行する関数を指定します。
例:DOMが操作される準備ができた時に関数を実行します。
$(function(){
/* DOM要素の準備ができた時に実行 */
});
例:グローバルなエイリアスに頼ることなく、$(document).ready()
と絶対安全なjQueryコードを書くための引数の両方の短縮形を使用します。
jQuery(function($){
/* 絶対安全な$エイリアスを使用したコード */
});