What are the differences between jquery objects and dom objects?

Difference: The jQuery object is an object obtained using the selector of the jQuery class library. It is unique to jQuery. You can use the methods in jQuery, but you cannot use any method of the DOM object; the DOM object is obtained using javascript Objects obtained by methods, DOM objects cannot use jQuery methods.

Related recommendations: "jQuery Video Tutorial"

1. Dom object, jQuery object

1.1 Dom object

The Document Object Model, referred to as DOM, is a standard programming interface for processing extensible markup languages ​​recommended by the W3C organization.

• DOM is actually a document model described in an object-oriented manner. The DOM defines the objects required to represent and modify a document, the behaviors and properties of these objects, and the relationships between these objects.
• Through the DOM, you can access all HTML elements, along with the text and attributes they contain. The content can be modified and deleted, and new elements can also be created.
• DOM is platform and programming language independent. It can be used by any programming language such as Java, JavaScript and VBScript.
• DOM object is the object we obtain using traditional methods (javascript).
• DOM is precisely a specification standard for document objects (Document Object Model). The standard only defines properties and method behaviors.

1.2 jQuery object

1) Overview

The jQuery object is actually a JavaScript array. This array object contains 125 methods and 4 attributes

The 4 attributes are:

• jquery The current jquery framework version number
• length indicates the number of elements of the array object.
• context generally points to the HtmlDocument object.
• selector The passed in selector content

jquery object is the 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; conversely, Dom objects cannot use jquery methods.

2) The difference between jQuery objects and js objects

• jQuery objects belong to js arrays
• jQuery objects are generated by DOM objects wrapped by jQuery
• jQuery objects cannot use the methods and properties of the DOM object
• The DOM object cannot use the methods and properties of the jQuery object

3) Mutual conversion between jQuery objects and js objects

• js to jQuery object$(js object)
• jQuery object to js object

var doc2=$("#idDoc2")[0];   //转换jQuery对象为DOM对象  
doc2.innerHTML="这是jQuery的第一个DOM对象"  
  //使用jQuery对象本身提供的get函数来返回指定集合位置的DOM对象  
var doc2=$("#idDoc2").get(0);  
doc2.innerHTML="这是jQuery的第二个DOM对象"

2. Detailed description of jQuery object and DOM The difference and use of objects

2.1 jQuery object and DOM object

DOM object is the object we obtain using the traditional method (javascript), jQuery The object is the object obtained using the selector of the jQuery class library.

var domObj = document.getElementById("id"); //DOM对象
var $obj = $("#id"); //jQuery对象;

The jQuery object is an object generated by wrapping the DOM object through jQuery. It is unique to jQuery. If an object is a jQuery object, then you can use the methods in jQuery.

$("#foo").html(); //获取id为foo的元素内的html代码，html()是jQuery特有的方法

Equivalent to js:

document.getElementById("foo").innerHTML;

Note: Any method of the DOM object cannot be used in the jQuery object.

For example:

$("#id").innerHTML 和$("#id").checked之类的写法都是错误的

You can use

$("#id").html()和$("#id").attr ("checked")之类的 jQuery方法来代替。

Similarly, DOM objects cannot use jQuery methods. When learning jQuery, you should establish the correct concept and distinguish the difference between jQuery objects and DOM objects. After that, learning jQuery will be much easier.

2.2 Conversion between jQuery objects and DOM objects

2.2.1 Conversion of jquery objects into dom objects

jquery provides There are two methods to convert a jquery object into a dom object, namely [index] and get(index).
Some people may wonder why subscripts are used. Yes, the jquery object is an array object.
Example:

var $cr=$("#cr"); //jquery对象
var cr = $cr[0]; //dom对象 也可写成 var cr=$cr.get(0);
alert(cr.checked); //检测这个checkbox是否给选中

2.2.2 Convert dom object into jquery object

For a dom object, you only need to use $() to wrap the dom object. You can get a jquery object,
The method is $(dom object);
Example:

var cr=document.getElementById("cr"); //dom对象
var $cr = $(cr); //转换成jquery对象

After conversion, you can use any method in jquery.

3. To summarize

Only dom objects can use methods in dom. jquery objects cannot use methods in dom, but jquery objects provide a more complete set. Tools for manipulating dom.

The jquery objects commonly used are all manufactured through the $() function. The $() function is a manufacturing factory for jquery objects.

Note:

If the object obtained is a jquery object, then add $ in front of the variable, so that it is easy to identify which are jquery objects.

Example:

var $variable = jquery对象;

If the DOM object is obtained, the definition is as follows:

var variable = dom对象

For more programming-related knowledge, please visit: Programming Video ! !

The above is the detailed content of What are the differences between jquery objects and dom objects?. For more information, please follow other related articles on the PHP Chinese website!