Conversion between JQUERY objects and DOM objects_jquery

When you first start learning jQuery, you may not be able to tell which are jQuery objects and which are DOM objects. As for DOM objects, there is not much explanation. We have come across too many. Let’s focus on jQuery and the conversion between the two

In the past few days, I will summarize some methods of using jQuery, hoping to be of some help to jQuery beginners.

Today we will mainly look at the mutual conversion between jQuery objects and dom objects. If you understand this, it will be much easier to use jQuery in the future.

1. Solution to method name conflict When starting to use jQuery, we should first avoid conflicts between jQuery and other class libraries or custom js. Let’s look at the simplest piece of code first:

Copy code The code is as follows:

jQuery(document).ready(function() {
alert("Welcome!");
});

$(document) is not used here, because many times we define the $(id) method ourselves to obtain elements, and the $() method is also defined in class libraries such as prototype. Therefore, in order to avoid conflicts, it is recommended that you also use jQuery("#id").

2. Conversion between jQuery object and dom object jQuery object to dom object: jQuery("#id") obtains a jQuery object, which is different from the ordinary dom object, so it cannot be directly defined using the dom object method. Since the jQuery object itself is a collection, the jQuery object can be converted into a dom object through indexing. For example, jQuery("#id")[0] is a dom object. Look at an example below:

Copy code The code is as follows:

Content to be displayed 1
Content to be displayed 2
Content to be displayed 3

To get the content in span, the following methods are correct.

Copy code The code is as follows:

//jQuery method, get the first span content
jQuery("#show span").html();
//Get the third span content
jQuery("#show span")[2].innerHTML;
//eq() returns the jQuery object, starting from eq(0). Get the second span content
jQuery("#show span").eq(1)[0].innerHTML;
//get() returns the DOM object directly, starting from get(0). Get third span content
jQuery("#show span").get(2).innerHTML;

Convert dom object to jQuery object: Use jQuery() to convert dom object to jQuery object. Such as:

Copy code The code is as follows:

jQuery(document.getElementById("show")).html();

The output result is:

Copy code The code is as follows:

Content to be displayed 1
Content to be displayed 2
Content to be displayed 3

In this way, the mutual conversion between jQuery objects and dom objects is realized. For example, if you want the focus to stay on the text box with the id of focus. Just:

Copy code The code is as follows:

jQuery("#focus")[0].focus();

What is a jQuery object?

---It is the object generated by wrapping the DOM object through jQuery. The jQuery object is unique to jQuery and can use methods in jQuery.

For example:

$("#test").html() means: get the html code in the element with ID test. Among them, html() is a method in jQuery

This code is equivalent to using DOM to implement the code:

Copy code The code is as follows:

document.getElementById("id").innerHTML;

Although the jQuery object is generated after wrapping the DOM object, jQuery cannot use any method of the DOM object. Similarly, the DOM object cannot use the methods in jQuery. If used indiscriminately, an error will be reported. For example: $("#test").innerHTML, document.getElementById("id").html() and other writing methods are wrong.

Another thing to note is that the jQuery object obtained by using #id as the selector and the DOM object obtained by document.getElementById("id") are not equivalent. Please see the conversion between the two below.

Since jQuery is different but also related, jQuery objects and DOM objects can also be converted to each other. Before converting the two, we first make a convention: if a jQuery object is obtained, then we add $ in front of the variable, such as: var $variab = jQuery object; if a DOM object is obtained, it is the same as usual. : var variab = DOM object; this convention is only for convenience of explanation and distinction, and is not stipulated in actual use.

Convert jQuery object to 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.

Such as:

Copy code The code is as follows:

var $v =$("#v"); //jQuery object
var v=$v[0]; //DOM object
alert(v.checked) //Check whether this checkbox is checked

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

Such as:

Copy code The code is as follows:

var $v=$("#v"); //jQuery object
var v=$v.get(0); //DOM object
alert(v.checked) //Check whether this checkbox is checked

Convert DOM object to 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

After conversion, you can use any jQuery method.

Through the above methods, jQuery objects and DOM objects can be converted to each other arbitrarily. What needs to be emphasized again is that only DOM objects can use methods in DOM, and jQuery objects cannot use methods in DOM.


Conversion case:
Methods to obtain JQUERY objects

var jqueryObject = $("#test"); //jqeuryObject is a Jquery object. It can use all methods of jquery but cannot use
var jqueryObject = $("#test"); //jqeuryObject is a Jquery object. It can use all jquery methods but cannot use
Methods of DOM objects

var DOMObject = document.getElementById("test");//DOMObject is a DOM object. It can use all methods of DOM, but cannot use jquery methods
var DOMObject = document.getElementById("test");//DOMObject is a DOM object. It can use all methods of DOM, but cannot use jquery methods
jquery object->DOM object

var jqueryObject = $("#test");//Get jquery object
var DOMObject = jqueryObject[0];//Convert jquery object to DOM object
var jqueryObject = $("#test");//Get jquery object
var DOMObject = jqueryObject[0];//Convert jquery object to DOM object
DOM object->jquery object
var DOMObject = document.getElementById("test");//Get the DOM object
var jqueryObject = $(DOMObject);//Convert DOM object to jquery object

When using jquery, sometimes you need to use the methods of the original DOM object. For example, when calling certain methods of the Activex control, you need to convert the jquery object into a DOM object. The conversion method is as follows:

Method 1: $("xxx")[index]
Method 2: $("xxx").get(index)
Method 3: $("xxx").eq(index)[0]