jQueryの核心 - jQuery()メソッド

实例

div要素のすべての子要素であるp要素を探し、そのボーダー属性を設定します:

$("div > p").css("border", "1px solid gray");

実際に試してみましょう

定義と用法

jQuery()メソッドは、要素集合をマッチするCSS選択子を含む文字列を受け入れます。

jQuery()関数には3つの文法があります:

文法 1

CSS選択子を含む文字列を受け入れます:

jQuery(selector, [context]

詳細な用法

文法 2

オリジナルのHTMLの文字列を使用してDOM要素を作成します:

jQuery(html,ownerDocument]

詳細な用法

文法 3

DOMドキュメントが読み込まれた後に実行される関数をバインドします:

jQuery( callback )

詳細な用法

jQuery( selector, [ context ] )

この構文には以下のような使用法があります:

用法 1 :選択子環境を設定

语法

jQuery(selector, [context]

デフォルトでは、選択子はドキュメントのルートからDOMを検索します。ただし、$()にはオプションのcontextパラメータを設定できます。

例えば、コールバック内で要素を検索したい場合、以下の検索を限定できます:

实例

$("div.foo").click(function() {
  $("span", this).addClass("bar");
);

すでに span 选择子が this この環境に限定されているため、クリックされた要素内の span だけが追加の class を受け取ります。

内部では、選択子環境は .find() メソッドを通じて実現されていますので、$("span", this) は $(this).find("span") と等しいです。

jQuery の核心機能はすべてこの関数を通じて実現されています。jQuery のすべてはこの関数に基づいており、あるいはこの関数をある方法で使用しています。この関数の最も基本的な用法は、表現(通常は CSS 选择子で構成されています)を渡すことで、その表現に基づいてすべての一致する要素を検索することです。

デフォルトでは、context パラメータが指定されていない場合、$() は現在の HTML ドキュメント内で DOM 要素を検索します;context パラメータが指定されている場合(DOM 要素セットや jQuery オブジェクトなど)、その context 内で検索します。jQuery 1.3.2 以降では、その結果の要素順序は context 内での出現順序と等しいです。

用法 2 :DOM 要素の使用

语法

jQuery(element)

この関数は、他の方法で見つけた DOM 要素を使用して jQuery オブジェクトを作成することができます。この機能の一般的な用法は、this キーワードを callback ファンクションに渡した要素に対して jQuery のメソッドを呼び出すことです:

实例

$("div.foo".click(function() {
  $(this).slideUp();
);

この例では、要素がクリックされたときにスライドアニメーションを使用してその要素を非表示にします。ハンドラが受け取る this キーワード内のクリックされた項目は純 DOM 要素であり、jQuery のメソッドを呼び出す前に、その要素を jQuery オブジェクトで包装する必要があります。

この関数はまた、XML 文書や Window オブジェクト(DOM 要素ではありませんが)を有効なパラメータとして受け取ることができます。

Ajax 調用から XML データが返された後、$() 函数を使用して jQuery オブジェクトでデータを包装することができます。一旦完了すると、.find() や他の DOM 過濾メソッドを使用して XML 构造内の単一の要素を取得することができます。

用法 3 :jQuery オブジェクトのクローン

语法

jQuery(jQuery オブジェクト)

jQuery オブジェクトを $() 函数にパラメータとして渡すと、そのオブジェクトのコピーが作成されます。初期オブジェクトと同様に、新しい jQuery オブジェクトは同じ DOM 要素を参照します。

使用法 4 :空のコレクションの返却

语法

jQuery()

jQuery 1.4 では、無パラメータの jQuery() メソッドの呼び出しは空の jQuery コレクションを返します。以前の jQuery 版では、このようにすると document ノードの集合が返されます。

jQuery( html, [ ownerDocument ] )

この構文には以下のような使用法があります:

使用法 1 :新しい要素の作成

语法

jQuery(html,ownerDocument]

手書きの HTML 文字列やテンプレートエンジンやプラグインによって作成された文字列、または AJAX で読み込まれた文字列を渡すことができます。ただし、input 要素を作成する際には制限があります、第二个例を参照してください。

この文字列にはスラッシュ(例えば画像の URL)やアンダースコアが含まれることがあります。単一の要素を作成する場合、閉じタグや XHTML フォーマットを使用してください。例えば、span を作成する場合、$("<span/>") や $("<span></span>") を使用できますが、$("<span>") を使用することは推奨されません。jQuery では、この構文は $(document.createElement("span")) と等価です。

文字列を $() にパラメータとして渡すと、jQuery はその文字列が HTML であるかどうかをチェックします(例えば、文字列の特定の場所にタグがあるかどうか)。もしでない場合は、その文字列を選択器表現として解釈します、上記の説明を参照してください。しかし、文字列が HTML 片段の場合、jQuery はその HTML 片段で説明されている DOM 要素を作成しようとします。そして、これらの DOM 要素を参照する jQuery オブジェクトを生成し、返します:

实例

$("<p id="test">My <em>new</em> text</p>").appendTo("body");

HTML 片段が属性のないシンプルなタグよりも複雑であれば、例えば上記の HTML のように、要素の実際の作成プロセスはブラウザの innerHTML メカニズムによって完了されます。具体的には、jQuery は新しい <div> 要素を作成し、渡された HTML 片段に要素の innerHTML 属性を設定します。パラメータがシンプルなタグの場合、例えば $("<img />") や $("<a></a>")、jQuery は内生的な JavaScript createElement() 関数を通じて要素を作成します。

要确保跨平台兼容性,片段的结构必须良好。能够包含其他元素的标签必须成对出现(带有关闭标签):

$("<a href="http://jquery.com"></a>");

不过,jQuery 也允许类似 XML 的标签语法:

$("<a/>");

无法包含其他元素的标签可以关闭,也可以不关闭:

$("<img />");
$("<input>");

用法 2 :设置属性和事件

语法

jQuery(html,props)

对于 jQuery 1.4,我们可以向第二个参数传递一个属性映射。该参数接受能够传递给 .attr() 方法的属性的超集。此外,可以传递任意的事件类型,并可以调用下面的 jQuery 方法:val, css, html, text, data, width, height, or offset。

注意,Internet Explorer 不允许你创建 input 元素并改变其类型;您必须使用例如 "<input type="checkbox" />" 来规定类型。

实例

创建一个 <input> 元素,同时设定 type 属性、属性值,以及一些事件。

$("<input>", {
  type: "text",
  val: "Test",
  focusin: function() {
    $(this).addClass("active");
  },
  focusout: function() {
    $(this).removeClass("active");
  }
}).appendTo("form");

jQuery( callback )

允许你绑定一个在 DOM 文档载入完成后执行的函数。

该函数的作用如同 $(document).ready() 一样,只不过用这个函数时,需要把页面中所有需要在 DOM 加载完成时执行的其他 $() 操作符都包装到其中来。尽管从技术上来说,这个函数是可链接的,但真正以这种方式链接的情况并不多。

例子

当DOM加载完成后,执行其中的函数:

$(function() {
  // 文档就绪
);