A brief introduction to Jquery and DOM objects_jquery

When learning jquery for the first time, you often cannot distinguish between DOM objects and Jquery objects. Let’s briefly explain the relationship and difference between them

1.DOM object (Document Object Model)

Document Object Model, each DOM can be represented as a tree. For example, the following is a simple web page code:

expressed as DOM:

We can get the nodes in the tree through getelementsByTayName or getelementsByTayId in JS. The elements obtained like this are DOM objects. DOM can use methods in JS, for example:

Copy code The code is as follows:

var domobj=document.getelementsByTayName("Name"); //Get the DOM object
var objhtml=domobj.innerHTML;                                                                                                                                                            

2.Jquery object

Jquery object is an object generated by wrapping DOM object with Jquery. It is unique to Jquery and can call methods in jquery, for example:

$("#foo").HTML();

Jquery object cannot call any method of DOM object, for example:

Copy code The code is as follows:$("#foo"). //An error will occur

3. Mutual conversion between DOM objects and Jquery objects

Before we convert them, we must first specify the style of defining variables. For example, when defining a Jquery object, add a $ symbol, for example:

 var $obj=Jquery对象

When defining a DOM object, there is no need to add any symbols. This can help us distinguish what object the variable is and improve the readability of the code, for example:

var domobj=DOM对象

When there is no method we want in the Jquery class library or we are not clear about the Jquery method, we can convert it into a DOM object. There are 2 methods to convert the Jquery object into a DOM object----[index ]/get(index)，

(1) The jquery object is an array object, and a DOM object is obtained through [index]. The code is as follows:

var $obj=$("#sc");
var obj=$obj[0];
alter(obj.checked);

(2) Another method is provided by Jquery itself, which is to obtain the DOM object through get(index), for example:

var $obj=$("#sc");
var obj=$obj.get(0);
alter(obj.checked);

4. Convert DOM object to Jquery object

The DOM object can be converted into a Jquery object through $(), for example:

var obj=document.getelementsByTayName("Name");
var $obj=$(obj);

The above is the entire content of this article, I hope you all like it.