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

简单的问题，一个noob。这些与变量有区别吗？jquery选择器和js选择器有什么区别？

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');

，或者是还没有更好的办法？

来源

2010-12-09 johnnietheblack

+1好题。 – wonde 2010-12-09 18:23:35

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的值。

来源

2010-12-09 17:52:27 BoltClock

要进一步明确说明，不能在jQuery对象上使用vanilla js方法，因为它们是一组元素（即使它只在元素上产生）。 – tbeseda 2010-12-09 17:55:09

很好的解释。 – wonde 2010-12-09 18:23:11

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');

因为对象2已经是一个jQuery对象。

最后一个音符：jQuery(object1)（其中object1是已经一个DOM元素）会给你一个jQuery对象一样$('myElement')过你，但jQuery选择在某些情况下是在文档更快或优化选择器是浏览器本地的。它不会总是更快，但在某些情况下可能会更快。

.getElementById（如下所述）在选择上应该相当快，但是在jQuery对象中存在这样的开销，因此它本质上比默认选择器慢。取决于你想要完成的事情，natch。

来源

2010-12-09 17:52:30 jcolebrand

第一个是DOM元素，第二个是引用了相同DOM元素的jQuery对象。

这是行不通的：object2.value = "fill in with this text";，因为jQuery对象不具有.value属性，但这样会：

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

从$('#myElement')获取原始的DOM元素，使用[0]或.get(0)是这样的：

$('#myElement')[0].value = "fill in with this text";

来源

2010-12-09 17:52:45

jQuery选择器$('#myElement')返回一个jQuery对象。

但是，您可以通过做$('#myElement')[0]从jQuery对象中获取DOM元素。

所以，你可以做$(object2).val('fill in with this text')或$(object2)[0].value = 'fill in with this text'

来源

2010-12-09 17:53:05 simshaun

-1

$('idelement').val()将返回元素的值以及document.getElementById('idelement').value。这是我在这个平台上的第一篇文章，我试图尽可能地格式化它。

这是从我的铬devtool输出$('idelement')和 document.getElementById('idelement')都非常不同，因为他们输出不同的数据结构来使用jQuery检索到的值是多少使用$('idelement').val()不$('idelement').value的情况下，u的使用JavaScript中使用 document.getElementById('idelement').value不document.getElementById('idelement').val()

希望这将有助于ü家伙

document.getElementById('compond_amount_txt') 
<input type="text" class="form-control" name="compond_amount_txt" id= 
"compond_amount_txt" value="10000" aria-describedby="basic-addon2"> 

$('#compond_amount_txt') 
w.fn.init [input#compond_amount_txt.form-control]0: 
input#compond_amount_txt.form-controllength: 1__proto__: Object(0) 

$('#compond_amount_txt').value 
undefined 

$('#compond_amount_txt').val() 
"10000" 

document.getElementById('compond_amount_txt').val() 
VM4296:1 Uncaught TypeError: document.getElementById(...).val is not a 
function 
at <anonymous>:1:47 
(anonymous) @ VM4296:1 

document.getElementById('compond_amount_txt').value 
"10000"

来源

2018-03-10 12:18:09

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

回答

相关问题