Home > Web Front-end > JS Tutorial > body text

The difference between jquery objects and dom objects

一个新手
Release: 2017-09-25 09:43:26
Original
1450 people have browsed it

1. The difference between the two

In layman's terms, the DOM object is taken out by document.get. In js, getElementsByTagName gets the element node and the dom element obtained is the dom object (dom tree)

Jquery objects are all jq objects taken out with $(). The objects generated after wrapping the DOM object with jq

jq method can only be called by jq object and is unique to jq. DOM cannot be used in jq object. any method of the object. The dom method can only be called by the dom object;

2. Mutual conversion

var $box = jQuery object;

var box = dom object;

1. Convert jq object to dom object

jQuery object cannot use methods in dom, but if you are not familiar with the methods provided by jq object, you can convert it through two methods

1) jq object is An array object (pseudo-array), you can get the corresponding dom object through the [index] subscript

$box[0].innerText = '';//Get the first

2 ) can also be obtained through get(index) subscript

$box.get(0).innerText = '';//Get the first

2.dom to jQuery;

The jQ objects we usually use are manufactured using the $() function. The #() function is a manufacturing factory for jQ objects.

So $(domObj); use it.

var box = document.getElementById("#box");
var $box = $(box);
$(function(){
var $box = $("#box");
var box = $box[0];
$box.click(function(){
if(box.style.color == red){
console.log("厉害啊");
}
})
})
Copy after login

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

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template