javascript getElementById 和 jquery $('#smth') 的区别

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6103766/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 19:27:46  来源:igfitidea点击:

Difference between getElementById and jquery $('#smth')

javascriptjquerygetelementbyid

提问by Andrew Ckor

What's the difference between classic Javascript code:

经典的Javascript代码有什么区别:

document.getElementById('theID')

and the jQuery version:

和 jQuery 版本:

$('#theID')

回答by lonesomeday

document.getElementByIdreturns 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 对象(由该$方法创建)是一个 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 getmethod (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。

回答by Naftali aka Neal

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

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

回答by Raynos

Make sure to include

确保包括

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

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

In your <head>

在你的 <head>

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

如果不加载,jQuery则无法使用,$因为 jQuery 是一个外部库,而不是 JavaScript 的一部分。

回答by Paulcraey

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

回答by spanky

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

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