Простой вопрос для noob. Есть ли разница между этими переменными?
var object1 = document.getElementById('myElement');
var object2 = $('#myElement');
Кроме того, могу ли я запустить обычный js файл на object2? Например, если #myElement является <textarea>, я могу:
object2.value = "fill in with this text";
или, я должен сделать:
$(object2).val('fill in with this text');
или, есть ли еще лучший способ?
var object1 = document.getElementById('myElement');
Вы получаете объект элемента DOM из этого вызова. Таким образом, вы используете свойство value, чтобы присвоить ему значение.
object1.value = "text";
var object2 = $('#myElement');
Вы получаете объект jQuery из этого вызова. Внутри объекта jQuery есть объект DOM. Подумайте о объекте jQuery как обложке для объекта DOM. Диаграмматически это выглядит примерно так (упрощенно):
jQuery ------------------+
| |
| Array ---------------+ |
| | | |
| | HTMLElement------+ | |
| | | | | |
| | | DOM properties | | |
| | | DOM element | | |
| | | methods | | |
| | | | | |
| | +----------------+ | |
| | there may be zero, | |
| | one or more such | |
| | objects inside | |
| +--------------------+ |
| jQuery properties |
| jQuery methods |
| |
+------------------------+
Так как object2 является объектом jQuery, вы используете функцию val(), чтобы дать ему значение. Вы не можете использовать свойство value, потому что оно не совпадает с объектом DOM.
object2.val("text");
Как и другие ответы, вы можете получить доступ к базовому объекту DOM с помощью разыменования массива (object2[0]) или функции get(), а затем присвоить ему значение с помощью value.
Первый элемент DOM, второй - объект jQuery со ссылкой на тот же элемент DOM.
Это не сработает: object2.value = "fill in with this text";, поскольку объект jQuery не имеет свойства .value, но это будет:
object1.value = "fill in with this text";
Чтобы получить необработанный элемент DOM из $('#myElement'), используйте [0] или .get(0) следующим образом:
$('#myElement')[0].value = "fill in with this text";
object2 теперь является объектом jQuery, поэтому его нельзя рассматривать как стандартный элемент. Однако вы можете получить его, указав object2[0], который дает вам первый элемент в объекте jQuery.
Итак, вы можете использовать object2[0].value = "fill in with this text"; или просто использовать jQuery .val(). Но также обратите внимание, что вам не нужно делать
$(object2).val('fill in with this text');
поскольку этого также будет достаточно:
object2.val('fill in with this text');
поскольку object2 уже является объектом jQuery.
Наконец, примечание: jQuery(object1) (где object1 уже является элементом DOM) предоставит вам объект jQuery так же, как если бы вы $('myElement'), но селектор jQuery в некоторых случаях может быть быстрее или оптимизирован над селектором документов, который является родным для браузера. Это не всегда будет быстрее, но в некоторых случаях это может быть.
.getElementById (как указано ниже) должен быть эквивалентно быстрым при выборе, но тогда есть накладные расходы на его наличие в объекте jQuery, поэтому он будет по своей природе медленнее, чем селектор по умолчанию. Просто зависит от того, что вы пытаетесь выполнить, natch.
Селектор jQuery $('#myElement') возвращает объект jQuery.
Однако вы можете получить элемент DOM из объекта jQuery, выполнив $('#myElement')[0].
Итак, вы можете сделать $(object2).val('fill in with this text') или $(object2)[0].value = 'fill in with this text'