2

そのため、jQuery でさまざまな方法で要素を作成する方法を知っています。しかし、今日までこれに出くわしたことはありません:

    var myspacer = $('<div />', {
        "id": "nav-spacer",
        "height": mynav.outerHeight()
    });

コードの後半で、この変数は jQuery の .before() メソッドを使用して DOM に追加されます。誰かがここで何が起こっているのか説明できますか? どのようなオブジェクトが作成されていますか? jQuery はこれを HTML 要素に変換する方法をどのように認識していますか?

4

4 に答える 4

5

これが関数$( html, props )の構文です。APIドキュメントで非常に明確に説明されています。jQuery()

html単一のスタンドアロンHTML要素(<div/>または<div></div>)を定義する文字列。

props新しく作成された要素を呼び出すための属性、イベント、およびメソッドのマップ。

関数が最初のパラメーターがhtmlスニペットのような文字列であると判断した場合、そのスニペットから新しい要素を作成します。2番目のパラメーターでマップを渡すと、新しく作成された要素に指定された属性が作成されます。

新しい要素はドキュメントに自動的に追加されませんが、それを追加するコードについて言及しているので、すでにそれを見ているよう.before()です。

于 2012-07-20T03:10:11.573 に答える
3

$( html, properties)jQuery構文によると、上記のコードは、jQuery オブジェクトとしてコンテンツを持たずにdivwithid="nav-spacer"およびheight供給された byメソッドを作成しますが、DOM には追加されません。mynav.outerHeight()

では$( html, properties)htmlは文字列、propertiesは属性/イベントのコレクションなどです。

別のアプローチは次のとおりです。

var myspacer = $('<div id="nav-spacer" height="'+ mynav.outerHeight() +'"></div>');

しかし、あなたのものはより読みやすく効率的です。

using.before()メソッドは、セレクターがparam としてmyspacer渡される直前に DOM に追加されます。.before()例:

myspacer.before('div.hello');

myspacerの前に次のように追加divclass=helloます:

<div id="nav-spacer" height="some_value"></div>
<div class="hello"></div>
于 2012-07-20T03:06:10.720 に答える
2

jQuery は$('<div/>')賢いので HTML like を渡すと新しい要素を作成します。:P 文字列が (セレクターではなく) HTML であることを認識し、別の方法で処理します。ドキュメントを参照してください。

新しい要素が作成されますが、自分で追加するまで DOM には追加されません。appendTo()

ドキュメントから: 「クロスプラットフォームの互換性を確保するには、スニペットの形式が適切である必要があります。他の要素を含めることができるタグは、終了タグとペアにする必要があります。」

編集:私は修正されたままです。明示的な終了タグなしで書くことができます。これは、HTML にネストされた要素が含まれていない限り機能します (もちろん)。ドキュメントの他の例を参照してください。$('<div/>')

// With nested elements and closing tags - HTML must be well formed
$("<div><p>Hello</p></div>").appendTo("body");

// Without closing tag - HTML is still well formed
$("<div/>", {
  "class": "test",
  text: "Click me!",
  click: function(){
    $(this).toggleClass("test");
  }
}).appendTo("body");

同様の質問:

于 2012-07-20T03:05:59.397 に答える
1

http://api.jquery.com/jQuery/#jQuery2

これにより、探している =D の説明が得られるはずです。

要約すると、これは迅速な JQuery のオンザフライ要素作成方法です。

于 2012-07-20T03:08:24.147 に答える