Convert jquery objects and javascript objects (DOM objects) to each other_jquery

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 objects are 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.

Another example is this. When writing jQuery, I often write like this: this.attr("src","test.jpg"); but it is an error. In fact, this is a DOM object, and .attr("src" ,"test.jpg") is a jQuery method, so an error occurred. To solve this problem, you need to convert the DOM object into a jQuery object, such as $(this).attr("src","test.jpg");

1. Convert DOM object to jQuery object

For a DOM object, you only need to wrap the DOM object with $() to get a jQuery object, $(DOM object) Note: var is a defined variable

For example:

var v = document.getElementById("v"); //DOM对象
var $v = $(v); //jQuery 对象

After conversion, you can use any jQuery method.

2. Convert jQuery object into DOM object

Two conversion methods convert a jQuery object into a DOM object: [index] and .get(index);

(1) The jQuery object is a data object, and the corresponding DOM object can be obtained through the [index] method.

For example:

var $v = $("#v"); //jQuery 对象
var v = $v[0]; //DOM 对象
alert(v.checked); //检测这个checkbox是否被选中

(2) jQuery itself provides the corresponding DOM object through the .get(index) method

For example:

var $v = $("#v"); //jQuery 对象
var v = $v.get(0); //DOM对象 ( $v.get()[0] 也可以 )
alert(v.checked); //检测这个 checkbox 是否被选中

Through the above methods, jQuery objects and DOM objects can be converted to each other at will. It needs to be emphasized again: DOM objects can use methods in DOM, and jQuery objects cannot use methods in DOM.