问题
What's the difference between classic Javascript code:
document.getElementById('theID')
and the jQuery version:
$('#theID')
回答1:
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.
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.
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.
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
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.
回答2:
Well in your second project, you might not have included the jQuery files at the the top.
回答3:
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.
回答4:
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
回答5:
There are the following differences between these two.
- jQuery
#idselector uses the JavaScriptdocument.getElementById()function - JavaScript's
document.getElementById()function throws an error if the element with the given id is not found, whereas jQuery #id selector will not throw an error. To check if an element is returned by the#idselector use length property. - JavaScript's
document.getElementById()and jQuery(#id) selector are not the same.document.getElementById()returns a raw DOM object where as jQuery('#id') selector returns a jQuery object that wraps the DOM object and provides jQuery methods. This is the reason you are able to call jQuery methods likecss(),click()on the object returned by jQuery. To get the underlying DOM object from a jQuery object write$('#id')[0] document.getElementById()is faster than jQuery('#id') selector. Usedocument.getElementById()over jQuery('#id') selector unless you need the extra functionality provided by the jQuery object.
回答6:
No difference, you just need to have the jQuery library installed and referenced in your project.
来源：https://stackoverflow.com/questions/6103766/difference-between-getelementbyid-and-jquery-smth