jQuery objects and DOM objects are converted into each other
jQuery objects and DOM objects
jQuery objects are objects generated by wrapping DOM objects with jQuery. The jQuery object is unique to jQuery. It can use methods in jQuery, but cannot use DOM methods; for example, $("#img").attr("src","test.jpg"); here $(" #img") is the jQuery object;
DOM object is some object operations inherent in Javascript. DOM objects can use methods inherent in Javascript, but cannot use methods in jQuery. For example: document.getElementById("img").src="test.jpg"; document.getElementById("img") here is the DOM object;
$("#img").attr(" src","test.jpg"); and document.getElementById("img").src="test.jpg"; are equivalent and correct, but $("#img").src="test .jpg"; or document.getElementById("img").attr("src","test.jpg"); are both wrong.
Let’s talk about an example: this is this. When I write jQuery, I often write like this: this.attr("src","test.jpg"); But it’s an error. In fact, this is a DOM object, and .attr("src","test.jpg") is a jQuery method, so something went wrong. To solve this problem, you need to convert the DOM object into a jQuery object, such as $(this).attr("src","test.jpg");
1. Convert the DOM object into a jQuery object:
For a DOM object that is already a DOM object, you only need to wrap the DOM object with $() to get a jQuery object. $(DOM object)
For example: var v=document.getElementById("v"); //DOM object
var $v=$(v); //jQuery object
can be converted Feel free to use jQuery's methods.
2. Convert jQuery object to DOM object:
Two conversion methods convert a jQuery object into DOM object: [index] and .get(index);
(1) jQuery object is For a data object, the corresponding DOM object can be obtained through the [index] method.
For example: var $v =$("#v"); //jQuery object
var v=$v[0]; //DOM object
alert(v.checked) //Detect this Whether the checkbox is selected
(2) jQuery itself provides, through the .get(index) method, the corresponding DOM object
is obtained, such as: var $v=$("#v"); //jQuery object
var v=$v.get(0); //DOM object
alert(v.checked) //Detect whether this checkbox is selected