Differences between JavaScript objects, DOM objects, and jquery objects, and detailed conversion explanations

1. JavaScript Objects

JavaScript provides multiple built-in objects, such as String, Date, Array, etc.

Objects are just special data types with properties and methods.

Access the properties of the object:

[javascript]

var message="Hello World!";

var x=message.length;

Create JavaScript object:

[javascript]

person=new Object();

person.firstname="Bill";

person.lastname="Gates";

person.age=56;

person.eyecolor="blue";

Use the object constructor :

[javascript] view plaincopy

function person(firstname,lastname,age,eyecolor)

{

this.firstname=firstname;

this.lastname=lastname;

this.age=age;

this.eyecolor=eyecolor;

}

[javascript]

var myFather=new person("Bill","Gates",56,"blue");

var myMother=new person("Steve"," Jobs",48,"green");

2. DOM object

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.

According to the W3C DOM specification, DOM is the application programming interface (API) of HTML and XML.

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.

HTML DOM is platform and programming language independent. It can be used by any programming language such as Java, JavaScript and VBScript.

DOM objects are objects we obtain using traditional methods (javascript).

3. jQuery object

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 usually points to the HtmlDocument object

selector The content of the selector passed in, such as: #yourId or .yourClass, etc.

If you pass $("#yourId") Method to get the jquery object,

and there is only one element with the id yourId in your page

Then $("#yourId")[0] is the HtmlElement element

The element obtained by document.getElementById("yourId") is The same

A simple understanding is that it is an object created by jQuery

jQuery object is an object generated by wrapping a DOM object through jQuery. The jQuery object is unique to jQuery. It can use methods in jQuery, but cannot use DOM methods.

4. The difference between DOM objects and jquery objects

[javascript]

var domObj = document.getElementById(" id"); //DOM object

var $obj = $("#id"); //jQuery object;

[javascript]

$("#img").attr("src","test .jpg"); //$("#img") here is to get the jQuery object;

[javascript]

document.getElementById("img").src="test.jpg";//document here .getElementById("img") is the DOM object;

Another example: this is this. I often write like this when writing jQuery:

this.attr("src","test.jpg");

But Just something wrong. In fact, this is a DOM object, and

.attr("src", "test.jpg")

is a jQuery method, so something went wrong. To solve this problem, you need to convert the DOM object into a jQuery object, for example:

$(this).attr("src","test.jpg");

5. Conversion of DOM objects and jquery objects

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.

Method: $(DOM object)

[javascript]

var v=document.getElementById(“v”); //DOM object

var $v=$(v); //jQuery object

jQuery object to DOM object:

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

(1) The jQuery object is a data object and can be passed [index] method to get the corresponding DOM object.

[javascript]

var $v =$(“#v”); //jQuery object

var v=$v[0]; //DOM object

alert(v.checked) //Detect this Whether the checkbox is selected

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

[javascript]

var $v=$(“#v”); //jQuery object

var v=$v.get(0); //DOM object

alert(v.checked) // Check whether this checkbox is selected