Detailed example code of how to convert jquery objects and DOM objects into each other

The jQuery object is an object generated by wrapping the DOM object through 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"); is equivalent to document.getElementById("img").src = "test.jpg"; is 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 the DOM object into a 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 to DOM object

Two conversion methods talk about converting 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. What needs to be emphasized again is: DOM objects can be used in DOM. Methods, jQuery objects cannot use methods in the DOM.

The above is the detailed content of Detailed example code of how to convert jquery objects and DOM objects into each other. For more information, please follow other related articles on the PHP Chinese website!