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

一个简单的问题。这些变量之间有区别吗

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

另外，我能在object2上运行普通的js吗？例如，如果#myElement是

，我可以执行以下操作：

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

或者，我必须：

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

或者，还有更好的方法吗

var object1 = document.getElementById('myElement');

您可以从这个调用中获得一个DOM元素对象。因此，您可以使用

value

属性为其指定一个值

object1.value = "text";

---

您将从此调用中获得一个jQuery对象。jQuery对象内部是一个DOM对象。将jQuery对象看作DOM对象的包装器。从图表上看，它是这样的（简化）：

由于

object2

是一个jQuery对象，因此可以使用

val（）

函数为其赋值。不能使用

值

属性，因为它与DOM对象不同

object2.val("text");

---

与其他答案一样，您可以使用数组解引用（

object2[0]

）或

get（）

函数访问底层DOM对象，然后使用

value

给它一个值，object2现在是一个jQuery对象，因此不能被视为标准元素。但是，您可以通过引用

object2[0]

来获得它，这将为您提供jQuery对象中的第一个元素

因此，您可以使用

object2[0].value=“填写此文本”

或者您可以使用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对象中使用它会带来开销，因此本质上比默认选择器慢。当然，这取决于您要完成的任务。

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

这不起作用：

object2.value=“填写此文本”

因为jQuery对象没有

.value

属性，但这将：

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

要从

$（“#myElement”）

获取原始DOM元素，请使用

[0]

或

.get（0）

如下所示：

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

jQuery选择器

$（'#myElement'）

返回jQuery对象

但是，您可以通过执行

$（'#myElement'）[0]

从jQuery对象中获取DOM元素

因此，您可以执行

$（object2）。val（'fill with this text'）

或

$（object2）[0]。value='fill with this text'

$（'ideelement'）。val（）

将返回元素的值 以及

document.getElementById（'ideElement'）.value

。 这是我在这个平台上的第一篇文章，我正在尝试格式化它 尽可能多

这是我的chrome devtool

$（'idelement'）

和

document.getElementById（'ideElement'）

非常不同，因为它们 使用jquery将不同的数据结构输出到检索到的值使用

$（'idelement'）.val（）

而不是

$（'idelement'）。如果您使用javascript，则使用value

document.getElementById（'ideElement'）.value

not

document.getElementById（'ideElement'）.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"

document.getElementById（'compond\u amount\u txt'）
​
$（“#复合金额_txt”）
w、 fn.init[input#compond_amount_txt.form control]0:
输入#compond_amount_txt.form-controllength:1_uuuproto_uuu:Object（0）
$（'#复合金额''U txt'）。值
未定义
$（'#compond_amount_txt'）.val（）
"10000"
document.getElementById（'compond\u amount\u txt'）.val（）
VM4296:1未捕获类型错误：document.getElementById（…）.val不是
功能
时间：1:47
（匿名）@VM4296:1
document.getElementById（'compond\u amount\u txt'）.value
"10000"

为了进一步明确说明，您不能在jQuery对象上使用vanilla js方法，因为它们是一组元素（即使它只在元素上生成）。我不会将其描述为jQuery对象的“内部”，它只是引用了相关元素，没有“容器”就像正在发生的行为：）@NickCraver~直到你拆开它，不是吗？如果只向

jQuery（）

函数传递一个ID选择器，它将剥离

#

并将结果ID传递给

文档.getElementById（）

。不过，只有在这种情况下。@BoltClock~是的，我想我应该忽略这一部分，因为by-ID应该是一个1对象的返回，而且速度非常快，但我想说明的是，使用jQuery选择器作为常规做法并不是一件可怕的事情。（是的，是的，我知道，一切都是适度的，还有开销之类的；）

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

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"