jQuery 可以通过选择器创建元素吗？

Question

通常我会在 jQuery 中创建一个像这样的元素 $('

')

我可以创建一个给定选择器的元素吗使用类似 $.create("div#errors.red") 的东西？哪里会返回一个代表 div 的 jQuery 对象，其 id 为 errors ，类为 red ？

Answer 1

你的意思是像 DOM 创建那样的 Zen Coding。您可以在 zen 编码 Google 项目页面上找到 zen 编码的语法。

用法如下：

1. 下载并添加 zen-0.1.a.js 文件 并将其添加到您的主页

2. 将此函数添加到您的项目

var zen = function(input) {
  return jQuery(zen_coding.expandAbbreviation(input, 'html', 'xhtml'));
};

3. 使用以下命令创建 jQuery dom：

var dom = zen('div#id.class');
$('body').append(dom);

Answer 2

下面的插件

是我编写的一个插件，它允许您创建一个元素，只需用属性装饰它，然后将其附加到 DOM。以下是使用 .adorn() 实现您想要执行的操作的示例：

$("<div>").adorn("#errors",".red",">body");

上面创建了一个 div，添加了 ID 和 < code>Class 并将其全部附加到 body 中。请注意，您可以按任意顺序添加 appendTo 语法，因此这也有效：

$("<div>").adorn(">body","#errors",".red");

使用装饰创建的简单示例页面。

与使用一个连续字符串相反，我发现将每个类、id、值等作为参数传递更容易，因为这很明显描绘出它们。

语法：

• .blah - 添加类 blah
• #blah - 将 id 设置为 blah
• < code>>blah - 将其附加到 blah
• h:blah - 将innerHTML 设置为 blah
• v:blah< /code> - 将值设置为 blah
• 目前有 9 个选项
• ...您可以轻松添加新功能。

请注意，使用时，冒号可以是任何单个字符，它不必是冒号，因此 h-blah 也可以。

其他用途：

这个插件的好处是它不仅可以用来装饰新创建的元素，还可以用来装饰现有的元素。例如，添加 3 个类并为页面上的所有 div 设置 HTML：

$("div").adorn(".one",".two",".three","h:blah");

jsFiddle 示例< /strong>

最后，如果你不小心传入了错误的标签。 向元素添加错误类以简化调试，但事情不会休息。

它是如何工作的：

这个插件的核心是利用自动可用的参数数组来保存所有传入的选项。使用 switch 语句 和子字符串方法。

插件：

(function( $ ){
    jQuery.fn.adorn = function () {
          // Get the arguments array for use in the closure
        var $arguments = arguments;
          // Maintain chainability
        return this.each(function () {
            var $this = $(this);
            $.each($arguments, function(index, value) {
                  // These are just the options that quickly came
                  //   to mind, you can easily add more.
                  // Which option is used depends on the first
                  //   character of the argument passed in. The 2nd
                  //   char is sometimes used and sometimes ignored.
                switch (value.substring(0,1)) {
                    case "#":
                        $this.attr("id",value.substring(1));
                    break;
                    case ".":
                        $this.addClass(value.substring(1));
                    break;
                    case ">":
                        $this.appendTo(value.substring(1));
                    break;                          
                    case "a":
                        $this.attr("alt", value.substring(2));
                    break;
                    case "h":
                        $this.html(value.substring(2));
                    break;
                    case "i":
                        $this.attr("title", value.substring(2));
                    break;
                    case "s":
                        $this.attr("src", value.substring(2));
                    break;
                    case "t":
                        $this.attr("type", value.substring(2));
                    break;
                    case "v":
                        $this.attr("value", value.substring(2));
                    break;
                    default:
                          // if the wrong key was entered, create
                          // an error class.
                        $this.addClass("improper-adorn-label");
                }
            });
        });
    };
})( jQuery );

Answer 3

我不认为你可以做到这一点，我知道的更接近的事情是你可以

var newdiv = $.DIV({ className: "red", id: "errors"});

创建 div 并且你可以

使用这个插件 http://mg.to/2006/02/27/easy-dom-creation-for-jquery-和原型

Answer 4

你可以尝试这个方法：

$("<div id="errors" class="red"></div>").appendTo("body");