The corresponding method of the jquery object DOM object cannot be used, and the corresponding method of the DOM object jquery cannot be used. Therefore, you should pay attention to the conversion between Jquery objects and DOM objects in a specific project. At the beginning, you may not know which jQuery objects and DOM objects are jQuery objects. As for DOM objects, we don't have much to explain, and we have too many contacts. Next we will focus on jQuery and the conversion between the two.
In the past few days, I will summarize some of jQuery's usage methods, hoping to help jQuery beginners.
Today we mainly look at the conversion between jQuery objects and dom objects. After understanding this, it will be much easier to use jQuery in the future.
1. Method Name Conflict solution when using jQuery, we should first avoid conflicts between jQuery and other class libraries or custom js. First look at the simplest piece of code:
The Code is as follows:
JQuery (document). ready (function (){
Alert ("Welcome! ");
});
$ (Document) is not used here, because we often define the $ (id) method to obtain elements and define the $ () method in class libraries such as prototype. Therefore, we recommend that you use jQuery ("# id") to avoid conflicts.
2. Mutual conversion between jQuery objects and dom objects jQuery objects to dom objects: jQuery ("# id") obtains a jQuery object, which is different from a common dom object, therefore, you cannot directly use methods defined by dom objects. Because the jQuery object itself is a set, you can convert the jQuery object into a dom object through indexes. For example, jQuery ("# id") [0] is a dom object. See the following example:
The Code is as follows:
Content 1 to be displayed
Content 2 to be displayed
Content to be displayed 3
To obtain the content in the span, use the following methods.
The Code is as follows:
// JQuery method to obtain the first span content
JQuery ("# show span" ).html ();
// Obtain the third span content
JQuery ("# show span") [2]. innerHTML;
// Eq () returns the jQuery object, starting with eq (0. Obtain the second span content
JQuery ("# show span"). eq (1) [0]. innerHTML;
// Get () directly returns the dom object, starting with get (0. Get the third span content
JQuery ("# show span"). get (2). innerHTML;
Convert a dom object to a jQuery object: Use jQuery () to convert a dom object to a jQuery object. For example:
The Code is as follows:
JQuery (document. getElementById ("show" cmdlets .html ();
Output result:
The Code is as follows:
Content 1 to be displayed
Content 2 to be displayed
Content to be displayed 3
In this way, the conversion between jQuery objects and dom objects is realized. For example, you want to focus on the text box with the id as focus. Only:
The Code is as follows:
JQuery ("# focus") [0]. focus ();
What is a jQuery object?
--- It is the object generated after DOM object is packaged using jQuery. JQuery objects are unique to jQuery and can be used in jQuery.
For example:
$ ("# Test" example .html () means to get the html code in the element with the ID of test. Here, html () is the method in jQuery.
This code is equivalent to implementing code with DOM:
The Code is as follows:
Document. getElementById ("id"). innerHTML;
Although jQuery objects are generated after packaging DOM objects, jQuery cannot use any methods of DOM objects. Similarly, DOM objects cannot use methods in jQuery. If they are used improperly, an error is returned. For example, $ ("# test"). innerHTML and document. getElementById ("id" ).html () are all incorrect.
Note that the DOM object obtained by using the # id as the selector is the DOM object obtained by the jQuery object and document. getElementById ("id"). These two are not equivalent. See the conversion between the two.
Since jQuery is different but also related, jQuery objects and DOM objects can also be converted to each other. Before the conversion, we first give a convention: If a jQuery object is obtained, we add $ before the variable, for example, var $ variab = jQuery object; if the DOM object is obtained, it is the same as the common convention: var variab = DOM object. This Convention is only convenient for explanation and difference. It is not specified in actual use.
Convert a jQuery object to a DOM object:
Two conversion methods are used to convert a jQuery object to a DOM object: [index] And. get (index );
(1) The jQuery object is a data object. You can use the [index] method to obtain the corresponding DOM object.
For example:
The Code is as follows:
Var $ v = $ ("# v"); // jQuery object
Var v = $ v [0]; // DOM object
Alert (v. checked) // checks whether the checkbox is selected
(2) jQuery provides the. get (index) method to obtain the corresponding DOM object.
For example:
The Code is as follows:
Var $ v = $ ("# v"); // jQuery object
Var v = $ v. get (0); // DOM object
Alert (v. checked) // checks whether the checkbox is selected
Convert a DOM object to a jQuery object:
For a DOM object, you only need to wrap the DOM object with $ () to obtain a jQuery object. $ (DOM object)
For example, var v = document. getElementById ("v"); // DOM object
Var $ v = $ (v); // jQuery object
After conversion, you can use the jQuery method at will.
Using the above method, you can convert jQuery objects and DOM objects to each other. Note that only DOM objects can use methods in DOM. jQuery objects cannot use methods in DOM.
Conversion case:
Method for getting JQUERY objects
Var jqueryObject = $ ("# test"); // jqeuryObject is a Jquery object. It can use all jquery methods but cannot be used.
Var jqueryObject = $ ("# test"); // jqeuryObject is a Jquery object. It can use all jquery methods but cannot be used.
DOM object Method
Var DOMObject = document. getElementById ("test"); // DOMObject is a DOM object. It can use all DOM methods, but cannot use jquery methods.
Var DOMObject = document. getElementById ("test"); // DOMObject is a DOM object. It can use all DOM methods, but cannot use jquery methods.
Jquery object-> DOM object
Var jqueryObject = $ ("# test"); // obtain the jquery object
Var DOMObject = jqueryObject [0]; // convert a jquery object to a DOM object
Var jqueryObject = $ ("# test"); // obtain the jquery object
Var DOMObject = jqueryObject [0]; // convert a jquery object to a DOM object
DOM object-> jquery object
Var DOMObject = document. getElementById ("test"); // get the DOM object
Var jqueryObject = $ (DOMObject); // convert a DOM object to a jquery object
When using jquery, you sometimes need to use the method of the original DOM object. For example, when calling some methods of Activex control, you need to convert the jquery object to a DOM object. The conversion method is as follows:
Method 1: $ ("xxx") [index]
Method 2: $ ("xxx"). get (index)
Method 3: $ ("xxx"). eq (index) [0]
