getElementById和jquery $('#smth')之间的差异

时间:2022-03-30 22:27:00

What's the difference between classic Javascript code:

经典Javascript代码之间有什么区别:

document.getElementById('theID')

and the jQuery version:

和jQuery版本:

$('#theID')

5 个解决方案

#1


51  

document.getElementById returns a DOM object. This is the browser's native way of thinking about an element in the page. It has various methods and properties. These can be a little clunky to use.

document.getElementById返回一个DOM对象。这是浏览器本地思考页面中元素的方式。它有各种方法和属性。使用它们可能有点笨拙。

The jQuery object (created by the $ method) is a wrapper around a DOM element or a set of DOM elements. The normal properties and methods are not available; you get a selection of different methods that make the process of DOM manipulation more intuitive.

jQuery对象(由$ method创建)是一个围绕DOM元素或一组DOM元素的包装器。普通的属性和方法不可用;您可以选择不同的方法,使DOM操作过程更加直观。

The difference is more clear to see with multiple elements in the selection (as you would get with a class selector $('.someClass') for instance, but the methods on a jQuery selection are different to the ones on a native DOM element. They point to the same thing, but they are different ways of thinking about it and dealing with it.

通过选择中的多个元素可以看出差异更明显(例如,您可以使用类选择器$('。someClass'),但jQuery选择的方法与本机DOM元素上的方法不同。他们指出同样的事情,但他们是不同的思考方式和处理它。


As a final note, you can convert a jQuery selection into its native DOM element(s) with the get method (edit: or the alternative array-like syntax). So

最后,您可以使用get方法(编辑:或替代的类似数组的语法)将jQuery选择转换为其本机DOM元素。所以

document.getElementById('theID')

is exactly the same as

与...完全相同

$('#theID').get(0) // or $('#theId')[0]

Note, however, that you should use the first, as it has much better performance. Only use jQuery if you need the extra functionality it provides.

但请注意,您应该使用第一个,因为它具有更好的性能。如果您需要它提供的额外功能,请仅使用jQuery。

#2


0  

Well in your second project, you might not have included the jQuery files at the the top.

在你的第二个项目中,你可能没有在顶部包含jQuery文件。

#3


0  

Make sure to include

一定要包括

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

In your <head>

在你的中

If you don't load jQuery then you cannot use $ as jQuery is an external library and not part of JavaScript.

如果你不加载jQuery,那么就不能使用$,因为jQuery是一个外部库而不是JavaScript的一部分。

#4


0  

Not quite : If an element with that id is not existing on the page $("#id") will not work and the script will stop document.getElementById("id") will return null

不完全:如果页面上不存在具有该id的元素$(“#id”)将不起作用并且脚本将停止document.getElementById(“id”)将返回null

#5


-4  

No difference, you just need to have the jQuery library installed and referenced in your project.

没有区别,您只需要在项目中安装和引用jQuery库。

#1


51  

document.getElementById returns a DOM object. This is the browser's native way of thinking about an element in the page. It has various methods and properties. These can be a little clunky to use.

document.getElementById返回一个DOM对象。这是浏览器本地思考页面中元素的方式。它有各种方法和属性。使用它们可能有点笨拙。

The jQuery object (created by the $ method) is a wrapper around a DOM element or a set of DOM elements. The normal properties and methods are not available; you get a selection of different methods that make the process of DOM manipulation more intuitive.

jQuery对象(由$ method创建)是一个围绕DOM元素或一组DOM元素的包装器。普通的属性和方法不可用;您可以选择不同的方法,使DOM操作过程更加直观。

The difference is more clear to see with multiple elements in the selection (as you would get with a class selector $('.someClass') for instance, but the methods on a jQuery selection are different to the ones on a native DOM element. They point to the same thing, but they are different ways of thinking about it and dealing with it.

通过选择中的多个元素可以看出差异更明显(例如,您可以使用类选择器$('。someClass'),但jQuery选择的方法与本机DOM元素上的方法不同。他们指出同样的事情,但他们是不同的思考方式和处理它。


As a final note, you can convert a jQuery selection into its native DOM element(s) with the get method (edit: or the alternative array-like syntax). So

最后,您可以使用get方法(编辑:或替代的类似数组的语法)将jQuery选择转换为其本机DOM元素。所以

document.getElementById('theID')

is exactly the same as

与...完全相同

$('#theID').get(0) // or $('#theId')[0]

Note, however, that you should use the first, as it has much better performance. Only use jQuery if you need the extra functionality it provides.

但请注意,您应该使用第一个,因为它具有更好的性能。如果您需要它提供的额外功能,请仅使用jQuery。

#2


0  

Well in your second project, you might not have included the jQuery files at the the top.

在你的第二个项目中,你可能没有在顶部包含jQuery文件。

#3


0  

Make sure to include

一定要包括

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

In your <head>

在你的中

If you don't load jQuery then you cannot use $ as jQuery is an external library and not part of JavaScript.

如果你不加载jQuery,那么就不能使用$,因为jQuery是一个外部库而不是JavaScript的一部分。

#4


0  

Not quite : If an element with that id is not existing on the page $("#id") will not work and the script will stop document.getElementById("id") will return null

不完全:如果页面上不存在具有该id的元素$(“#id”)将不起作用并且脚本将停止document.getElementById(“id”)将返回null

#5


-4  

No difference, you just need to have the jQuery library installed and referenced in your project.

没有区别,您只需要在项目中安装和引用jQuery库。