所有者文書とはどういう意味ですか?

伊谢尔伦
リリース: 2017-06-16 14:35:45
オリジナル
2620 人が閲覧しました

提供された生の 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 コードの一部のように見える場合 (たとえば、文字列に が含まれている場合)、jQuery はこの HTML コードを使用して、新しい DOM 要素を作成し、これらの DOM 要素への参照を含む jQuery オブジェクトを作成します。たとえば、次のコードは HTML コードを DOM 要素に変換し、body ノードの最後に挿入します。

$(&#39;<p id="test">My <em>new</em> text</p>&#39;).appendTo(&#39;body&#39;);
ログイン後にコピー

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=&#39;checkbox&#39;>");
ログイン後にコピー

説明:

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&#39;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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート