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

你的意思是像DOM创建一样的禅编码。你可以在网页上找到禅宗编码的语法 zen coding google project page .

1 download and add the zen-0.1.a.js file

2将此函数添加到项目中

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

三。创建jQuery dom时使用:

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

.adorn() 你想做什么:

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

以上创建了一个 div ,拍打 ID 和一个 Class 并将其附加到 body appendTo

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

Simple example page created with adorn.

与使用一个continuos字符串相反,我发现将每个类、id、值等作为参数传入更容易,因为这样可以清楚地描述它们。

语法:

• .blah -添加类 blah
• #blah 废话
• >blah -将此附加到
• h:blah -将innerHTML设置为 废话
• v:blah -将值设置为 废话
• ... 您可以轻松地添加新功能。

请注意,使用冒号时,它可以是任何单个字符,而不必是冒号,因此 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 );

我不认为你能做到这一点,我更清楚的是你能做到

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

div被创建,您可以将事件和内容直接附加到变量中

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

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