Home >Web Front-end >JS Tutorial >Implementation code for mutual conversion between jQuery objects and DOM objects_jquery

Implementation code for mutual conversion between jQuery objects and DOM objects_jquery

WBOY
WBOYOriginal
2016-05-16 18:33:31708browse

jQuery objects and DOM objects are converted into each other
jQuery objects and DOM objects

jQuery objects are objects generated by wrapping DOM objects with jQuery. The jQuery object is unique to jQuery. It can use methods in jQuery, but cannot use DOM methods; for example, $("#img").attr("src","test.jpg"); here $(" #img") is the jQuery object;

DOM object is some object operations inherent in Javascript. DOM objects can use methods inherent in Javascript, but cannot use methods in jQuery. For example: document.getElementById("img").src="test.jpg"; document.getElementById("img") here is the DOM object;

$("#img").attr(" src","test.jpg"); and document.getElementById("img").src="test.jpg"; are equivalent and correct, but $("#img").src="test .jpg"; or document.getElementById("img").attr("src","test.jpg"); are both wrong.
Let’s talk about an example: this is this. When I write jQuery, I often write like this: this.attr("src","test.jpg"); But it’s an error. 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, such as $(this).attr("src","test.jpg");

1. Convert the DOM object into a 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. $(DOM object)
For example: var v=document.getElementById("v"); //DOM object
var $v=$(v); //jQuery object
can be converted Feel free to use jQuery's methods.

2. Convert jQuery object to DOM object:
Two conversion methods convert a jQuery object into DOM object: [index] and .get(index);
(1) jQuery object is For a data object, the corresponding DOM object can be obtained through the [index] method.
For example: 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, through the .get(index) method, the corresponding DOM object
is obtained, such as: var $v=$("#v"); //jQuery object
var v=$v.get(0); //DOM object
alert(v.checked) //Detect whether this checkbox is selected

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn