提供された生の HTML マークアップ文字列に基づいて、jQuery オブジェクトでラップされた DOM 要素を動的に作成します。一連のプロパティ、イベントなどを同時に設定します。
手書きの HTML 文字列、テンプレート エンジンやプラグインによって作成された文字列、または AJAX 経由でロードされた文字列を渡すことができます。ただし、入力要素を作成する場合には制限があります。2 番目の例を参照してください。もちろん、この文字列にはバックスラッシュだけでなくスラッシュ (画像アドレスなど) も含めることができます。個々の要素を作成するときは、終了タグまたは XHTML 形式を使用します。たとえば、スパンを作成するには、 $("") または $("") を使用できますが、 $("") は使用できません。推奨。 jQuery では、この構文は $(document.createElement("span")) と同等です。
jQuery 1.8 では、$(html,props) を通じて、任意の jQuery オブジェクトのメソッドまたはプラグインを使用できます。以前は、メソッド名の短いリストのみを使用でき、リストに追加する方法は文書化されていませんでした。今では、リストである必要はまったくありません。ただし、プラグインが HTML 属性と同じ名前で追加された場合、コードの動作が変わる可能性があることに注意してください。
jQuery(html [, ownerDocument]), jQuery(html, props)
受信文字列パラメーターが HTML コードの一部のように見える場合 (たとえば、文字列に
$('<p id="test">My <em>new</em> text</p>').appendTo('body');
HTML コードが単一のタグの場合、たとえば $(' ') または $('< a>') を使用すると、jQuery はブラウザのネイティブ メソッド document.createElement() を使用して DOM 要素を作成します。上記の例の $('
Mynewtext
') など、個別のタグよりも複雑な HTML フラグメントの場合は、次を使用します。ブラウザ innerHTML メカニズムは DOM 要素を作成します。このプロセスはメソッド jQuery.buildFragment() とメソッド jQuery.clean() によって実装されます。関連するコンテンツはそれぞれセクション 2.4 と 2.5 で説明されます。2 番目のパラメーター ownerDocument は、新しい DOM 要素を作成するドキュメント オブジェクトを指定するために使用されます。渡されない場合、デフォルトで現在のドキュメント オブジェクトが使用されます。
HTML コードが別のタグである場合、2 番目のパラメーターは、プロパティとイベントを含む共通オブジェクトである props にすることもできます。document.createElement() を呼び出して DOM 要素を作成した後、パラメーター props が jQuery メソッドに渡されます。 .attr()、その後の .attr() は、パラメーター props 内の属性とイベントを新しく作成された DOM 要素に設定します。
パラメーター プロパティの属性は、任意のイベント タイプ (「クリック」など) にすることができます。このとき、属性値は、新しく作成された DOM 要素にバインドされるイベント リスニング関数である必要があります。次の特別な属性: val、css、html、text、data、width、height、offset、対応する jQuery メソッド: .val()、.css()、.html()、.text()、.data()、. width() 、 .height() 、 .offset() が実行され、属性値がパラメータとして渡され、他のタイプの属性が新しく作成された DOM 要素に設定され、いくつかの特殊な属性も設定されます。 (タイプ、値、タブインデックスなど); クラスのスタイルは属性名 class で設定できますが、class は JavaScript の予約語であるため、クラスを引用符で囲む必要があります。たとえば、次の例では、p 要素を作成し、クラス スタイルを「test」に設定し、テキスト コンテンツを「Click me!」に設定し、クリック イベントをバインドして、body ノードの末尾に挿入します。 p 要素をクリックすると、クラス スタイルも切り替わります。 テスト:
$("<p/>", { "class": "test", text: "Click me!", click: function(){ $(this).toggleClass("test"); } }).appendTo("body");
サンプル コード:
p 要素 (およびその中のすべてのコンテンツ) を動的に作成し、body 要素に追加します。この関数内で、マークアップから DOM 要素への変換は、要素を一時的に作成し、要素の innerHTML プロパティを指定されたマークアップ文字列に設定することによって実現されます。したがって、この機能には柔軟性と制限があります。
jQuery コード:
$("<p><p>Hello</p></p>").appendTo("body");
説明:
要素を作成するには、type 属性も設定する必要があります。 Microsoft では、 要素の型は 1 回しか記述できないと規定しているためです。
jQuery コード:
// 在 IE 中无效: $("<input>").attr("type", "checkbox"); // 在 IE 中有效: $("<input type='checkbox'>");
説明:
p 要素 (およびその中のすべてのコンテンツ) を動的に作成し、body 要素に追加します。この関数内で、マークアップから DOM 要素への変換は、要素を一時的に作成し、要素の innerHTML プロパティを指定されたマークアップ文字列に設定することによって実現されます。したがって、この機能には柔軟性と制限があります。
jQuery コード:
$("<p>", { "class": "test", text: "Click me!", click: function(){ $(this).toggleClass("test"); } }).appendTo("body");
説明:
创建一个 元素,同时设定 type 属性、属性值,以及一些事件。
jQuery 代码:
$("<input>", { type: "text", val: "Test", focusin: function() { $(this).addClass("active"); }, focusout: function() { $(this).removeClass("active"); } }).appendTo("form");
jQuery( html, [ownerDocument] ) 的用途是通过 html 字符串创造相应的 node 节点,jQuery 分为了两种情况,一种是 html 是由一个标签组成的 html 字符串,比如
<span>I'm a SPAN</span>
这时, jQuery 会使用正则表达式匹配出这个 tag 的 tag name ,然后使用
document.createElement( tagName )
来生成这个 node ,而对于多个标签(还包括单个标签的前后有空白字符串)的情况,会这么处理:
先用 document.createDocumentFragment 创建一个 documentFragment
然后 用 document.createElement('p') ,创建一个 p
然后再 p.innerHTML = html ,创建 html 字符串对应的 node 节点
然后从 p 中得到这些节点,并返回
以上が所有者文書とはどういう意味ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。