2

私はjqueryの使い方を学んでおり、練習用にいくつかのテストページを作成しています.

この例では、jquery を使用して関数「showAddToDb()」をボタンにバインドします。そのボタンが押されると、jquery は次の html フォーム コードを id "memberContent" でラベル付けされた div に追加する必要があります (ここでは省略しています)。

 $(document).ready(function() {
        $('#addToDb').bind('click',showAddToDb);
 });
 function showAddToDb() {
        var form = $("<div></div>");
        var formName = "<div class=\"formRow\"><label for=\"name\">Name: </label><input class=\"nameInput\" type=\"text\" name=\"name\"/></div>";
        var formLocation = "<div class=\"formRow\"><label for=\"location\">Location: </label><input class=\"locationInput\" type=\"text\" name=\"location\"/></div>";
        var formDes = "<div class=\"formRow\"><label for=\"description\">Description: </label><textarea class=\"descriptionInput\" name=\"description\" rows=\"10\" maxlength=\"1000\"></textarea></div>";
        var formPrice = "<div class=\"formRow\"><label for=\"price\">Price: </label><input class=\"priceInput\" type=\"text\" name=\"price\"/></div>";
        var formSubmit = "<div class=\"formRow\"><button onclick=\"addToDb()\">Submit</button></div>";
        form.append(formName);
        form.append(formLocation);
        form.append(formDes);
        form.append(formPrice);
        form.append(formSubmit);
        $('#memberContent').append(form);
    }

上記のコードは機能しますが、機能させるのに苦労しました。私の質問は、なぜ機能するのかです。var form = "<div></div>";機能させるには、関数の最初の行を から に変更する必要がありましたvar form = $("<div></div>");

ドル記号が jquery 呼び出しを表していることは知っていますが、この特定のケースでドル記号が必要な理由がわかりません。$()また、追加のために他のすべての変数もラップすることになっていますか? そのままで機能しますが、理由を説明せずにこれを行う例をオンラインでいくつか見ました。

4

3 に答える 3

1

var form = "<div></div>";機能させるには、関数の最初の行を から に変更する必要がありましたvar form = $("<div></div>");

最初のコードで on a stringを使用しようとしたappendため、関数が DOM オブジェクトを予期しているため、これは機能しません。これを使用する$("<div></div>");と、文字列が DOM オブジェクトに変換されるため、append()関数呼び出しが有効になります。プレーンな JavaScript を使用して文字列を DOM オブジェクトに変換した場合は、関数が必要になりcreateElement()ます。

これはプレーンなJavaScriptです

var form = document.creatElement('div') // works

ご存知のとおり、これは jQuery です

var form = $('<div></div>'); // works

これはDOMオブジェクト関数では機能しません

 var form = "<div></div>"; // won't work with .append()

var form = "<div></div>";最初の 2 つは、javascript 文字列を作成するだけの場合とは異なり、DOM div オブジェクトを作成します。たとえば、DOM オブジェクト関数を使用する場合はappend()、JavaScript 変数を最初の 2 つの例のように DOM オブジェクトに変換する必要があります。

于 2013-07-14T14:50:32.027 に答える