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

Question

通常我会在jQuery中创建一个像$('<div id="errors" class="red"></div>')

这样的元素

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

Answer 1

插件

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

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

以上内容会在div和ID上创建Class，并将其全部附加到body。请注意，您可以按任何顺序添加appendTo语法，因此这也可以使用：

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

的 Simple example page created with adorn.

与使用一个连续字符串相反，我发现将每个类，id，值等作为参数传递更容易，因为这清楚地描述了它们。

语法：

• .blah - 添加了课程blah
• #blah - 将ID设置为blah
• >blah - 将此附加到blah
• h:blah - 将innerHTML设置为blah
• v:blah - 将值设置为blah
• 目前有9个选项
• ...您可以轻松添加新功能。

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

其他用途：

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

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

的 jsFiddle example

最后，如果你不小心传递了错误的标签。 An error class is added to the element 以简化调试，但事情不会中断。

工作原理：

此插件的核心是利用自动提供的 arguments array 来保存所有传入的选项。使用 switch statement 和 substring method 解析选项。

插件：

(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 2

你的意思是像DOM创建一样的Zen Coding。您可以在zen coding google project page上找到zen编码的语法。

用法是：

1。 download and add the zen-0.1.a.js file并将其添加到您的主页

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 3

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

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

创建了div，您可以将事件和内容直接附加到变量

使用此插件http://mg.to/2006/02/27/easy-dom-creation-for-jquery-and-prototype

Answer 4

您可以尝试以下方法：

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