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選擇器有什麼區別？

回答

相關問題