Any conversion between jquery objects and DOM objects_jquery
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 jQuery objects are generated by wrapping DOM objects, jQuery cannot use any methods of DOM objects. Similarly, DOM objects cannot use 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.
Before discussing the mutual conversion between jquery objects and DOM objects, first agree on the style of defining variables. If you obtain a jquery object, add $ in front of the variable, for example
var $varible = jquery object;
If the DOM object is obtained, it is defined as follows:
var varible = DOM object;
1. Convert jquery object to DOM object:
Jquery objects cannot use methods in DOM, but if you are not familiar with the methods provided by jquery objects, or there are no methods that jquery wants to encapsulate, you have to use DOM objects, namely [index] and get[index].
(1) The jquery object is an array object, and the corresponding DOM object can be obtained through the [index] method.
The jquery code is as follows
<body>
<p>my</p>
<p>my</p>
<script src="jquery-2.1.4.min.js"></script>
<script>
var $cr = $("p"); //jquery对象
var cr = $cr[1]; //dom对象
var ct = $cr.get(0) //第二种转换为DOM对象的方式
cr.innerHTML = "you" //检测是否转换成功，可以用DOM方法 输出结果为第二个my改成了you
ct.innerHTML = 'fuck' //输出结果第一个my改成了fuck
</script>
</body>
(2).DOM object converted to jquery object:
For a DOM object, you only need to wrap the DOM object with $(), and then you can get a jquery object. The method is $(DOM object).
The jquery code is as follows:
<body>
<p>my</p>
<p>my</p>
<script src="jquery-2.1.4.min.js"></script>
<script>
var cr = document.getElementsByTagName("p") //DOM对象
var $cr = $(cr); //jquery对象
$cr.eq(0).("fuck"); //检测是否转换成功，可以用jquery方法 输出结果为第二个my改成了fuck
$cr.eq(1).html("you"); //输出结果为my改成you
</script>
</body>
After conversion, you can use jquery methods arbitrarily.
Through the above methods, jquery objects and DOM objects can be converted to each other arbitrarily.
Finally, it is emphasized again that only DOM objects can use DOM methods. jquery objects cannot use methods in DOM, but jquery objects provide a more complete set of tools for operating DOM.
Hope you all will like this article.
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
1670
14
1428
52
1329
25
1276
29
1256
24
A simple guide to converting USDT ERC20 to TRC20
Jan 18, 2024 pm 06:09 PM
We teach you step by step how to convert USDTERC20 to TRC20 network. This is because many people like to move the USDT stablecoin from the Ethereum network to the Tron network to save on transaction fees. So, if you want to convert your ERC-20 tokens to TRC-20, I believe this tutorial will be helpful to you. The difference between ERC-20 and TRC-20 ERC-20 tokens and TRC-20 tokens represent tokens based on the Ethereum network and the Tron network respectively. There are some differences between the two networks, mainly in the following aspects: First, the Ethereum network often faces congestion and high gas fees, which may lead to transaction delays and high transaction costs. In comparison, the Tron network is relatively less congested
Practical tips for converting full-width English letters into half-width form
Mar 26, 2024 am 09:54 AM
Practical tips for converting full-width English letters into half-width forms. In modern life, we often come into contact with English letters, and we often need to input English letters when using computers, mobile phones and other devices. However, sometimes we encounter full-width English letters, and we need to use the half-width form. So, how to convert full-width English letters to half-width form? Here are some practical tips for you. First of all, full-width English letters and numbers refer to characters that occupy a full-width position in the input method, while half-width English letters and numbers occupy a full-width position.
Golang time processing: How to convert timestamp to string in Golang
Feb 24, 2024 pm 10:42 PM
Golang time conversion: How to convert timestamp to string In Golang, time operation is one of the very common operations. Sometimes we need to convert the timestamp into a string for easy display or storage. This article will introduce how to use Golang to convert timestamps to strings and provide specific code examples. 1. Conversion of timestamps and strings In Golang, timestamps are usually expressed in the form of integer numbers, which represent the number of seconds from January 1, 1970 to the current time. The string is
How to convert a virtual machine to a physical machine?
Feb 19, 2024 am 11:40 AM
Converting a virtual machine (VM) to a physical machine is the process of migrating a virtual instance and associated application software to a physical hardware platform. This conversion helps optimize operating system performance and hardware resource utilization. This article aims to provide an in-depth look at how to make this conversion. How to implement migration from virtual machine to physical machine? Typically, the conversion process between a virtual machine and a physical machine is performed outside the virtual machine by third-party software. This process consists of multiple stages involving the configuration of virtual machines and the transfer of resources. Prepare the physical machine: The first step is to ensure that the physical machine meets the hardware requirements for Windows. We need to back up the data on a physical machine as the conversion process will overwrite the existing data. *Username and password for an administrator account with administrator rights to create system images. will be virtual
How to convert AI files to CDR format
Feb 19, 2024 pm 04:09 PM
AI files refer to vector graphics files created by Adobe Illustrator (AI for short) software, while CDR files refer to vector graphics files created by CorelDRAW software. Since these two softwares are developed by different manufacturers, their file formats are different and cannot be directly converted to each other. However, we can convert AI files to CDR files through some methods. A commonly used conversion method will be introduced below. Step 1: Export AI files to EPS format AdobeIllust
Detailed explanation of the implementation method of converting PHP months to English months
Mar 21, 2024 pm 06:45 PM
This article will introduce in detail how to convert months in PHP to English months, and give specific code examples. In PHP development, sometimes we need to convert digital months to English months, which is very practical in some date processing or data display scenarios. The implementation principles, specific code examples and precautions will be explained in detail below. 1. Implementation principle In PHP, you can convert digital months into English months by using the DateTime class and format method. Date
How to convert ODT to Word in Windows 11/10?
Feb 20, 2024 pm 12:21 PM
In this article, we will show you how to convert OpenDocumentTextDocument (ODT) files to Microsoft Word (Docx, DOC, etc.). Format. How to Convert ODT to Word in Windows 11/10 Here is how you can convert ODT documents to DOC or DOCX format on Windows PC: Convert ODT to Word using WordPad or Word The first method we are going to show you Is to use WordPad or MicrosoftWord to convert ODT to Word. Here are the steps to achieve this: First, open the WordPad app using the Start menu. Now, go to
How to convert full-width English letters into half-width letters
Mar 25, 2024 pm 02:45 PM
How to convert full-width English letters into half-width letters In daily life and work, sometimes we encounter situations where we need to convert full-width English letters into half-width letters, such as when entering computer passwords, editing documents, or designing layouts. Full-width English letters and numbers refer to characters with the same width as Chinese characters, while half-width English letters refer to characters with a narrower width. In actual operation, we need to master some simple methods to convert full-width English letters into half-width letters so that we can process text and numbers more conveniently. 1. Full-width English letters and half-width English letters
