Home > Developer > Web Develop
JQuery is a library of JS, which encapsulates some of the features we commonly use in our development process to facilitate our invocation and improve our development efficiency.
JS Library is to put our common functions in a separate file, when we use, the direct reference to the page.
Related Information about jquery:
Official website: http://jquery.com/
Official website API Document: http://api.jquery.com/
Chinese API Documentation: HTTP://WWW.CSS88.COM/JQAPI-1.9/
The two main features of JQuery 2
Chained programming: For example .show() , and .html() can be even written .show().html() .
Implicit iteration: implicit corresponds to explicit. Implicit iterative means: loop through the inside of the method without having to loop it ourselves, simplifying our operation and making it easier for us to invoke.
3 basic steps for using JQuery
(1) Lead package
(2) Entry function
(3) Function implementation code (event handling)
The Code of the Guide package must be placed at the top of the JS code.
Example:
1<! DOCTYPE html>2"en">34<meta charset="UTF-8">5<title> introduction of Jquery</title>67<body>8<script src="Jquery-3.3.1.min.js"></script>9 Ten<div id="app"></div> One<divclass="Box"></div> A<divclass="Box"></div> -<script> -Console.log ($ ('#app')); theConsole.log ($ ('. Box')); -Console.log ($ ('Div')); -$('Div'). css ({ - 'width':'200px', + 'Height':'200px', - "Background-color":'Red', + 'Margin-top':'20px' A }) at -</script> - - -</body> -View Code4 entry function
The native JS entry function refers to the following: window.onload = function() {};
Native JS's entry function. All content on the page is loaded before execution. //Not only to wait for the text to load, but also to wait for the picture to be loaded before executing the function. window.onload = function () { alert (1); }
The entry function of jquery is written in the following ways:
Writing one:
1. When the document is loaded and the picture is not loaded, the function can be executed. $ (document). Ready (function () { alert (1); })
Two: (A concise version of the wording)
2. When the document is loaded and the picture is not loaded, the function can be executed. $ (function () { alert (1); });
Three:
3. When the document is loaded and the picture is loaded, the function is executed. $ (window). Ready (function () { alert (1); })
the difference between the jquery entry function and the JS entry function :
Difference One: The number of writing is different:
The entry function of Js can only occur once, and there will be an issue with event coverage multiple times.
The entry function of JQuery can occur any number of times, and there is no event coverage problem.
Difference two: The timing of execution is different:
The entry function of JS is only executed after all the file resources have been loaded. These file Resources include: page document, external JS file, external CSS file, image, etc.
The entry function of jquery is executed after the document has been loaded. The completion of the document loading means that the DOM tree is ready to be manipulated, without waiting for all external resources to be loaded to complete.
The order in which the document is loaded: From top to bottom, edge parsing edge execution.
Comparison of Dom objects and jquery objects in 5 JS
The element obtained through JQuery is an array containing the DOM objects in the native JS. Example:
For a DIV structure like this:
<div></div>
<div id= "App" ></div>
<div class= "box" ></div>
<div class= "box" ></div>
<div></div
The way to get these element nodes through native JS is:
var mybox = document.getElementById ("app"); Get a single element by ID var Boxarr = document.getelementsbyclassname ("box"); obtained by class is the pseudo-array var Divarr = document.getelementsbytagname ("div"); A pseudo-array is obtained through a tagThe way to get these element nodes through JQuery is: (Get arrays)
1 gets an array of Dom objects in the native JS containing the bread. 2 console.log ($ ('#app')); 3 console.log ($ ('. Box')); 4 Console.log ($ ('div'));They convert each other.
1. The DOM object is converted to a jquery object :
$ (JS object);
2. The jquery object is converted to a DOM object :
jquery Object [index]; Way 1 (recommended) jquery object. Get (index); Mode 2
After the JQuery object has been converted into a DOM object, you can invoke some of the functionality provided by the DOM directly. Such as:
$ (' div ') [1].style.backgroundcolor = ' yellow '; $ (' div ') [3].style.backgroundcolor = ' green ';Summary : If you want to set a property or method in any way, you must convert it to that type.
13-2 jquery Introduction
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
