javascript - jQuery append() html 语法行为

Question

我正在学习使用 jquery 并正在制作一些测试页面以供练习。

对于这个例子，我使用 jquery 将一个函数“showAddToDb()”绑定(bind)到一个按钮。按下该按钮时，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 调用，但我不确定为什么在这种特殊情况下我需要它。另外，我是否还应该用 $() 包装所有其他变量？追加？它按原样工作，但我在网上看到了一些这样做的例子，但没有解释原因。

Answer 1

如果您不将该字符串传递给 jQuery，那么它就是一个字符串。请注意，稍后您将“表单”变量用作 jQuery 对象:

form.append(formName);

所以最好是一个!您还可以引入一个新变量:

var $form = $(form); // assuming "form" was a plain string

然后:

$form.append(formName);
// etc, with "$form" instead of "form"

有些人喜欢通过给变量命名以“$”开头来标记保存 jQuery 对象的变量。这是个人喜好问题。

您不必包装其他字符串，因为它们会直接交给 jQuery API。该代码将知道如何处理它们。但是，如果您确实将它们包装为 jQuery 对象，那也可以，因为 jQuery 会做正确的事情。