Introduction of 01-jquery

1. Why use jquery

When using JS to write code, you will encounter some problems:

• The Window.onload event has an event coverage problem, so only one event can be written.

• Poor code tolerance.

• Browser compatibility issues.

• Writing is cumbersome and the amount of code is much.

• The code is messy and the pages are all over the place.

• Animation effects are difficult to implement.

The advent of jquery can solve the above problems.

What is JQuery

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/

Learning jquery, what is the main thing to learn

In the early stages, learning how to use jquery to manipulate the DOM is essentially learning the work API that jquery encapsulates.

The common feature of these APIs is that almost all are methods. Therefore, when using the jquery API, are method calls, that is, to add parentheses (), the parentheses are the corresponding parameters, the parameters are different, the function is different.

The first code of jquery

Use native JS to achieve the following code effect:

<! DOCTYPE html>
 If you write in JQuery, keep the other code unchanged,  <script>, and the  section of the code is modified to: (Need to be introduced in advance) 
 
<! DOCTYPE html>
Two major features of JQuery
 
  

  
   
 
    
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.
 
   
 
  
The basic steps of using jquery with jquery
(1) Lead package
(2) Entry function
(3) Function implementation code (event handling)
Main: entry function (important)
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.
jquery's$Symbol
JQuery uses $ symbolic reasons: It is simple to write, distinct from other characters, and easy to remember.
jquery takes up two of our variables: $ and jquery. When we print them both in the code:
  <script src= "Jquery-3.3.1.js" ></script>    <script>        console.log ($);        Console.log (jQuery);        Console.log ($===jquery);    </script>
Printing results:
As you can see from the printout, $ stands for jQuery.
How do you understand the symbols in jquery $ ?
 $ It actually represents a function name as follows:
    $(); Call the above our custom function $    $ (document). Ready (function () {});//Call the entry function    $ (function () {});//Call the entry function    $ ("#btnShow") Gets the id attribute of the btnshow element    $ ("div")//gets all div tag elements
As shown above, the functions within JQuery, $ depending on the parameters passed in, make different calls and implement different functions. The jquery object is returned.
In addition to this JS library, jquery $ provides another function: jquery. jquery functions $ are related to functions: jQuery === $ .
The difference between DOM object and jquery object in JS (emphasis, difficulty)
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 tag
The way to get these element nodes through JQuery is: (Get arrays)
  Gets an array of Dom objects in the native JS containing the bread.
Console.log ($ (' #app '));
Console.log ($ ('. box '));
Console.log ($ (' div '));
Sets the style of the current 4 div:
$ (' div '). css ({                ' width ': ' 200px ',                ' height ': ' 200px ', '                background-color ': ' Red ',                ' margin-top ': ' 20px '            })
Since jquery comes with the CSS () method, we can also set CSS properties directly in the code for the Div.
Summary : jquery is simply repackaging the DOM object to have a jquery approach.
The mutual transformation of the two
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.
Example:
Interlaced color change
The code is as follows:
<! DOCTYPE html>
The effect is as follows:
Introduction of 01-jquery