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库。