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($){
/* 絶対安全な$エイリアスを使用したコード */
});