jquery选择器和js选择器之间有什么区别？

Question

一个菜鸟的简单问题.这些变量之间有区别吗？

var object1 = document.getElementById('myElement');
var object2 = $('#myElement');

另外,我能在object2上运行正常的js吗？例如,如果#myElement是<textarea>我可以做的:

object2.value = "fill in with this text";

或者,我必须这样做:

$(object2).val('fill in with this text');

或者,还有更好的方法吗？

Answer 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");

与其他答案一样,您可以使用数组解除引用(object2[0])或get()函数访问底层DOM对象,然后使用它给它一个值value.