Может ли jQuery создать элемент с помощью селектора?

Question

Обычно я хотел бы создать элемент в jQuery, как это $('<div id="errors" class="red"></div>')

Могу ли я создать элемент с заданным селектором, используя что-то вроде $.create("div#errors.red")? Где это вернуло бы объект jQuery, представляющий div с идентификатором errors и классом red?

Answer 1

То, что вы имеете в виду, это Zen Coding как создание DOM. Синтаксис кодирования дзен можно найти на странице проекта Google * кодирование дзен .

Использование будет:

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 и Class и добавляет все это к body. Обратите внимание, что вы можете добавить синтаксис appendTo в любом порядке, так что это тоже будет работать:

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

Простой пример страницы, созданной с помощью adorn.

В отличие от использования одной непрерывной строки, я обнаружил, что проще передавать каждый класс, идентификатор, значение и т. Д. В качестве аргумента, поскольку это четко их очерчивает.

Синтаксис:

• .blah - добавляет класс blah
• #blah - устанавливает id на blah
• >blah - добавляет это к blah
• h:blah - устанавливает для innerHTML значение blah
• v:blah - устанавливает значение blah
• На данный момент доступно 9 вариантов
• ... вы можете легко добавлять новые функции.

Обратите внимание, что при использовании двоеточия может быть любой отдельный символ, необязательно двоеточие, поэтому h-blah также будет работать.

Другое использование:

Приятной особенностью этого плагина является то, что его можно использовать не только для украшения только что созданных элементов, но и для украшения существующих элементов. Например, чтобы добавить 3 класса и установить HTML-код для всех элементов div на странице:

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

jsFiddle пример

Наконец, если вы случайно указали не тот ярлык. Класс ошибки добавлен к элементу , чтобы упростить отладку, но все не сломается.

Как это работает:

Сердце этого плагина использует автоматически доступный массив аргументов для хранения всех переданных опций. Параметры анализируются с помощью оператора 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

Вы можете попробовать этот метод:

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

Answer 4

Я не думаю, что вы можете сделать это, тем ближе, что я знаю, что вы можете сделать

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

div создан, и вы можете добавлять события и прочее непосредственно к переменной

используя этот плагин http://mg.to/2006/02/27/easy-dom-creation-for-jquery-and-prototype