Home > Web Front-end > JS Tutorial > How to convert html dom object to jquery object

How to convert html dom object to jquery object

青灯夜游
Release: 2023-01-06 11:14:22
Original
3100 people have browsed it

Conversion method: If it is already a DOM object, you only need to wrap the DOM object with "$()" to get a jQuery object. The specific syntax format is "$(DOM object)".

How to convert html dom object to jquery object

The operating environment of this tutorial: windows7 system, jquery1.10.0 version, Dell G3 computer.

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 .

For example:

var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象
Copy after login

After processing the ordinary DOM object into a jQuery object through the $(DOM) method, we can call the jQuery method.

HTML code

<div>元素一</div><div>元素二</div><div>元素三</div>
Copy after login

JavaScript code

var div=document.getElementsByTagName(&#39;div&#39;);//DOM对象
var $div=$(div);//jQuery对象
var $first=$div.frist();//找到第一个div元素
$first.css(&#39;color&#39;,&#39;red&#39;);//给第一个元素设置颜色
Copy after login

Get the elements of the div node through getElementsByTagName. The result is a DOM collection object, but this object is an array collection (3 div elements). Convert it into a jQuery object through the $(div) method, find the first element and change its color by calling the first and css methods in the jQuery object.

Recommended related video tutorials: jQuery Tutorial (Video)

The above is the detailed content of How to convert html dom object to jquery object. 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