


Method to convert html string into jquery dom object in javascript_javascript skills
The original html string is as follows:
var text="<div id='overLay' style='width:50px;height:60px;background:url(imgs/back.png) left top no-repeat; position: absolute;'>" + "<img style='margin-left:4px;margin-top: 3px;' src='ima.png' width='43px' height='43px'/>" + "</div>";
1. Next, use the Jquery library to convert the text string variable into a Jquery object.
Jquery code is as follows:
alert($(text).html());
Where $(text) converts the text string into a Jquery object, and finally uses the html() of the Jquery object to output the html content in the form of a string. The result is as follows:
<img style='margin-left:4px;margin-top: 3px;' src='ima.png' width='43px' height='43px'/>
It shows that the $(text)Jquery object represents the outermost html element div.
2. Convert Jquery objects and DOM objects to each other.
The code is as follows:
var element= $(text).get(0) //element就是一个dom对象 var jqueryobj=$(element);//jqueryobj就是一个Jquery对象。
Note: The difference between DOM objects and Jquery objects
In my understanding, Jquery objects and DOM objects are encapsulated html elements. You can operate html element nodes to facilitate programming, but some methods between them cannot be shared, such as the html() method of the Jquery object. , the DOM object cannot be used; and the GetElementById() of the DOM object cannot be used by the Jquery object. Therefore, mutual conversion can be performed when necessary.
3. Use js code to convert the text string variable into a DOM object.
js code is as follows:
/*字符串转dom对象*/ function loadXMLString(txt) { try //Internet Explorer { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async="false"; xmlDoc.loadXML(txt); //alert('IE'); return(xmlDoc); } catch(e) { try //Firefox, Mozilla, Opera, etc. { parser=new DOMParser(); xmlDoc=parser.parseFromString(txt,"text/xml"); //alert('FMO'); return(xmlDoc); } catch(e) {alert(e.message)} } return(null); }
The js code converting the text string into a DOM object is related to the browser, so. . . . . . Write separately.
In this way, the conversion of html strings to Jquery objects and DOM objects is realized.
Introduction to mutual conversion methods between jQuery objects and dom objects
When you first start learning jQuery, you may not be able to tell which are jQuery objects and which are DOM objects. As for the DOM object, there is not much explanation. We have come across too many. Let’s focus on jQuery and the conversion between the two.
What is a jQuery object?
---It is the object generated by wrapping the DOM object through jQuery. The jQuery object is unique to jQuery and can use methods in jQuery.
For example:
$("#test").html() means: get the html code in the element with ID test. Among them, html() is a method in jQuery
This code is equivalent to using DOM to implement the code:
document.getElementById("id").innerHTML;
Although the jQuery object is generated after wrapping the DOM object, jQuery cannot use any method of the DOM object. Similarly, the DOM object cannot use the methods in jQuery. If used indiscriminately, an error will be reported. For example: $("#test").innerHTML, document.getElementById("id").html() and other writing methods are wrong.
Another thing to note is that the jQuery object obtained by using #id as the selector and the DOM object obtained by document.getElementById("id") are not equivalent. Please see the conversion between the two below.
Since jQuery is different but also related, jQuery objects and DOM objects can also be converted to each other. Before converting the two, we first make a convention: if a jQuery object is obtained, then we add $ in front of the variable, such as: var $variab = jQuery object; if a DOM object is obtained, it is the same as usual. : var variab = DOM object; this convention is only for convenience of explanation and distinction, and is not stipulated in actual use.
Convert jQuery object to DOM object:
Two conversion methods convert a jQuery object into a DOM object: [index] and .get(index);
(1) The jQuery object is a data object, and the corresponding DOM object can be obtained through the [index] method.
For example:
var $v =$("#v") ; //jQuery对象 var v=$v[0]; //DOM对象 alert(v.checked) //检测这个checkbox是否被选中
(2) jQuery itself provides the corresponding DOM object through the .get(index) method
For example:
var $v=$("#v"); //jQuery对象 var v=$v.get(0); //DOM对象 alert(v.checked) //检测这个checkbox是否被选中
Convert DOM object to jQuery object:
For 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对象 var $v=$(v); //jQuery对象
After conversion, you can use any jQuery method.
Through the above methods, jQuery objects and DOM objects can be converted to each other arbitrarily. What needs to be emphasized again is that only DOM objects can use methods in DOM, and jQuery objects cannot use methods in DOM.

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics



Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...

There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.

JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID...

Discussion on the realization of parallax scrolling and element animation effects in this article will explore how to achieve similar to Shiseido official website (https://www.shiseido.co.jp/sb/wonderland/)...

In-depth discussion of the root causes of the difference in console.log output. This article will analyze the differences in the output results of console.log function in a piece of code and explain the reasons behind it. �...

Learning JavaScript is not difficult, but it is challenging. 1) Understand basic concepts such as variables, data types, functions, etc. 2) Master asynchronous programming and implement it through event loops. 3) Use DOM operations and Promise to handle asynchronous requests. 4) Avoid common mistakes and use debugging techniques. 5) Optimize performance and follow best practices.

JavaScript can be run in PowerPoint, and can be implemented by calling external JavaScript files or embedding HTML files through VBA. 1. To use VBA to call JavaScript files, you need to enable macros and have VBA programming knowledge. 2. Embed HTML files containing JavaScript, which are simple and easy to use but are subject to security restrictions. Advantages include extended functions and flexibility, while disadvantages involve security, compatibility and complexity. In practice, attention should be paid to security, compatibility, performance and user experience.
