JQuery learning notes (1): getting started with jquery learning notes
I recently learned about jQuery and saw several articles about jQuery on the Internet. I wrote a good post and shared it with you;
I. What is JQuery?What is JQuery? It is always a problem in my heart:
Learn from the summary of online students, you can observe from the following aspects.
To retrieve DOM text without using JQuery, perform the following operations:
| 1 | document.getElementById('info').value = 'Hello World!'; |
The operations for getting DOM text when using JQuery are as follows:
| 1 | $('#info').val('Hello World!'); |
Well, we can see that one of the advantages of using JQuery is to make the code more concise, so that developers are more focused on the logic itself.
Ii. What can JQuery do?
JQuery allows you to easily process HTML, events, and animation effects, and provides AJAX interaction for websites.
The jQuery Library provides the following functions: HTML element selection, HTML element operations, CSS operations, HTML event functions, JavaScript effects and animations, HTML | DOM traversal and modification, AJAX, and Utilities.
JQuery allows you to quickly and conveniently obtain DOM elements, dynamically modify page styles, dynamically change DOM content, respond to user interaction operations, add dynamic effects to pages, unify Ajax operations, and simplify common JavaScript tasks..
The above is a pertinent Review of JQuery. We can roughly observe the keywords in the excerpt:
That is, it facilitates DOM selection and operations, responds to user operations, and simplifies AJax operations.
3. What is DOM?
The DOM elements mentioned above are not understood. The following is a summary:
The full name of DOM is Document Object Model, which is a Document Object Model.
DOM elements allow you to easily manipulate HTML nodes, such as getting node content, adding some elements, and deleting some elements.
That is to say, DOM elements are closely related to HTML. It encapsulates tags in HTML into DOM elements for JavaScript operations.
| 123456789101112 | <html> <body> <div id="info"> <p>Test</p> </div> <script> window.onload = function(){ document.getElementById("info").innerHTML="success"; } </script> </body></html> |
Document. getElementById ("info") encapsulates the tag whose id is info into a DOM element. Then, you can conveniently operate on the DOM object, such as modifying its text content.
Iv. Relationship between JQuery and DOM
What is the difference between a JQuery object and a DOM object?
First, understand what JQuery objects are:
JQuery objects are the objects generated after DOM is packaged with JQuery. JQuery objects are unique to JQuery and can be used in various JQuery methods.
| 1 | $("#test").html(); |
Obtain the html code in the element with the ID of test. Here, html () is the method in jQuery.
This code serves the same purpose as implementing code with DOM:
| 1 | document.getElementById("id").innerHTML; |
Although jQuery objects are generated after packaging DOM objects, jQuery cannot use any methods of DOM objects. Similarly, DOM objects cannot use methods in jQuery.
Note that:
The # id is used as the selector to obtain the jQuery object, and the DOM object obtained by document. getElementById ("id") is not equivalent.
In addition, JQuery objects and DOM objects can be converted to each other.
JQuery object-> DOM object
Two conversion methods are used to convert a JQuery object to a DOM object: [index] And. get (index );
DOM object-> JQuery object
For a DOM object, you only need to wrap the DOM object with $ () to obtain a jQuery object. For example, $ (document. getElementById ("test "))
| 12 | var v1=document.getElementById("test"); // DOM objectvar v2=$(v1); // JQuery object |
After converting a DOM object to a JQuery object, you can use the JQuery method.
Note that only DOM objects can use methods in DOM. jQuery objects cannot use methods in DOM.
V. What is the role of "$" in JQuery?
After this problem is solved, we often see $ ('div '), $ (' # id'), $ ('. class. So what is the role of "$?
$ Is actually the alias of jQuery. Is a function provided by jQuery to encapsulate DOM elements and selectors into jQuery objects.
| 12 | var v1 = $('#id');var v2 = jQuery('#id'); |
The two are equivalent.
Therefore, "$" is actually a symbol. $ () replaces jQuery (). Of course, you can use other characters instead. "$"
| 12 | var jq = jQuery.noConflict();var v1 = jq('#id'); // Equivalent to var v1 =$ ('# id '); |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
