ホームページ >ウェブフロントエンド >jsチュートリアル >Jquery コア関数についての簡単な説明_jquery
Jquery では、すべての DOM オブジェクトが Jquery オブジェクトにカプセル化され、Jquery オブジェクトのみが Jquery メソッドまたはプロパティを使用して対応する操作を実行できます。
そのため、Jquery は、DOM オブジェクトを Jquery オブジェクトにカプセル化できる関数を提供します。これは、ファクトリ関数としても知られる、Jquery コア関数 jquery() です。
jquery コア関数には、次の 7 つのオーバーロードがあります。
jquery() この関数は空の jquery オブジェクトを返します。
jquery(elements) この関数は、1 つ以上の DOM 要素を Jquery オブジェクト (または jquery コレクション) に変換します
jquery(callback) この関数は jquery(document).ready(callback) の略称です。 この関数は、DOM ドキュメントがロードされた後に実行される関数をバインドします。 DOM のロード時に実行する必要があるページ上のすべての jquery 操作をこの関数に含める必要があります。この関数はページ上に複数回表示される場合があります。
jquery(式,[コンテキスト])
jquery(html)
jquery(html,props)
jquery(html,[ownerDocument])
詳しく見てみましょう
jQuery(式, [コンテキスト])
この関数は、CSS セレクターを含む文字列を受け取り、この文字列を使用して一連の要素を照合します。
DOM オブジェクトはそれぞれ doc[0] と doc[1] を通じて取得できます。その他は jQuery オブジェクトに固有のプロパティとメソッドです。実際、jQuery オブジェクトは DOM オブジェクトをラップし、DOM 要素に対するいくつかの操作も含みます。 .jQueryメソッド。
jQuery を使用するプロセスにおいて、ほとんどの場合、最初のステップであり最も重要なステップは、操作対象の DOM オブジェクトをラップする jQuery オブジェクトを取得し、取得した jQuery オブジェクトのメソッドを呼び出して処理を完了することです。 . DOM オブジェクトに対する操作。
たとえば
1. #first コンテキストでノード p を持つすべての要素を検索し、対応する値をループで表示します。
$(function() { var items = $("p", "#first"); $.each(items, function(i, n) { alert(i); }); });
i は対応するインデックス、n は対応するノード
2. すべての p 要素を検索します。これらの要素は div 要素の子要素である必要があります。
HTML コード:
1
jQuery コード:
$("div > p");
結果:
[ e388a4556c0f65e1904146cc1a846bee294b3e26ee717c64999d7867364b1b4a3 ]
3. ドキュメントの最初の形式で、すべてのラジオ ボタンを見つけます (つまり、タイプ値が radio の入力要素)。
jQuery コード:
$("input:radio", document.forms[0]);
jQuery(html, [ownerDocument])
提供された生の HTML マークアップ文字列に基づいて、jQuery オブジェクトでラップされた DOM 要素を動的に作成します。手書きの HTML 文字列、テンプレート エンジンやプラグインによって作成された文字列、または AJAX 経由でロードされた文字列を渡すことができます。
jQuery(html, props)
提供された生の HTML マークアップ文字列に基づいて、jQuery オブジェクトでラップされた DOM 要素を動的に作成します。一連のプロパティ、イベントなどを同時に設定します。パラメータ
htmlString
DOM 要素を動的に作成するために使用される HTML タグ文字列
プロップマップ
新しく作成された要素にアタッチするためのプロパティ、イベント、メソッド
例
説明:
div 要素 (およびその中のすべてのコンテンツ) を動的に作成し、body 要素に追加します。この関数内で、マークアップから DOM 要素への変換は、要素を一時的に作成し、要素の innerHTML プロパティを指定されたマークアップ文字列に設定することによって実現されます。したがって、この機能には柔軟性と制限があります。
jQuery コード:
$("<div>", { "class": "test", text: "Click me!", click: function(){ $(this).toggleClass("test"); } }).appendTo("body");
DOM がロードされたら、その中の関数を実行します。
jQuery コード:
$(function(){ // 文档就绪 });