jQuery objects and DOM objects

Preface

To write any JavaScript program, we must first obtain the object. The jQuery selector can completely change the way we usually obtain objects. It can obtain objects with almost any semantics, such as "own title attribute and the value contains the <a> element of test". To complete these tasks, you only need to write a jQuery selector string. Learning jQuery selectors is the most important step in learning jQuery.

Dom object and jQuery wrapper set

Whether we are writing a program or reading API documentation, we must always pay attention to distinguishing between Dom objects and jQuery wrapper sets.

1. Dom object

In traditional JavaScript development, we first obtain the Dom object, such as:

var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");

We often use document The .getElementById method gets a single Dom object based on id, or the document.getElementsByTagName method gets a collection of Dom objects based on HTML tag names.

In addition, in the event function, you can use this in the method function to reference the event trigger object (but there is a problem in IE6 in the multicast event function), or use the target (Firefox) or srcElement (IE6) of the event object ) to obtain the Dom object that triggered the event.

Note that what we get here are all Dom objects. Dom objects also have different types such as input, div, span, etc. Dom objects have limited properties and methods.

2. jQuery packaging set

jQuery packaging set can be said to be an expansion of the Dom object. In the world of jQuery, all objects, whether one or a group, are encapsulated into a jQuery packaging set. For example, getting a jQuery packaging set containing an element:

var jQueryObject = $("#testDiv");

jQuery packaging set is treated as an object called together. The jQuery wrapper set has a rich set of properties and methods.

3. Conversion between Dom objects and jQuery objects

(1) Dom to jQuery packaging set

If you want to use the functions provided by jQuery, you must first construct a jQuery wrapper set. We can use the jQuery selector that will be introduced in this article to directly construct a jQuery wrapper set, for example:

$("#testDiv");

The wrapper set constructed by the above statement only contains one element whose id is testDiv.

Or we have already obtained a Dom element, such as:

var div = document.getElementById("testDiv");

In the above code, div is a Dom element, we can convert the Dom element into a jQuery wrapper set:

var domToJQueryObject = $(div);

(2) jQuery wrapper set to Dom object

jQuery wrapper set is a collection, so we can access a certain element in it through the indexer:

var domObject = $("#testDiv")[0];

Note that what is returned through the indexer is no longer a jQuery packaged set, but a Dom object!

Some traversal methods of jQuery packaged sets, such as each(), can pass the traversal function. In the traversal function This is also a Dom element, for example:

$("#testDiv").each(function() {
  alert(this)
});

What if we want to use jQuery's method to operate the Dom object? Just use the conversion method introduced above:

$("#testDiv").each(function() {
  $(this).html("修改内容")
});

Summary: First let Everyone understands the concepts of Dom objects and jQuery packaging sets, which will greatly speed up our learning. As long as you can distinguish between the two, you can become clear when writing programs.