В чем разница между селекторами jquery и селекторами js?

Ответ 1

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.

Ответ 2

Первый элемент 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";

Ответ 3

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.

Ответ 4

Селектор jQuery $('#myElement') возвращает объект jQuery.

Однако вы можете получить элемент DOM из объекта jQuery, выполнив $('#myElement')[0].

Итак, вы можете сделать $(object2).val('fill in with this text') или $(object2)[0].value = 'fill in with this text'