Learn jquery from scratch (ii)

Before we learned how to get the use of jquery, let's look at some of the syntax of jquery. The basic syntax

$ (selector). Action ()。

• Dollar sign definition JQuery
• Selector (selector) "Query" and "find" HTML elements
• JQuery Action () performs an operation on an element

$ (this). Hide ()-hides the current element

$ ("P"). Hide ()-Hides all P tags

$ ("p. Test"). Hide ()-Hides all class= "test" p tags

$ ("#test"). Hide ()-hides all elements of the id= "test".

When we use jquery, we usually add the phrase, why do we add this sentence, and when the current DOM is loaded, the sentence inside the function is executed. This is done in order to prevent some of our HTML DOM from executing JavaScript when it is not finished loading. For example, we're going to hide a P element, but if we don't add it, we'll hide it if the P element is not loaded, and it will produce an error that doesn't work as expected.

$ (document). Ready (function () {   //JQuery methods go ...});

For example, in the following example, the P element will not be hidden after it is run. But if you add a previous sentence, there is a blank page, that is, the P element is hidden.

　　
$ (document). Ready (function () {}) can be abbreviated to $ (function () {})
jquery Selector
Element Selector
Select all <p> elements in the page: $ ("P")
　　
The #id selector jquery #id selector selects the specified element through the id attribute of the HTML element. The ID of the element in the page should be unique, so you need to select a unique element in the page by #id selector. Select the element syntax by ID as follows: $ ("#test")
　　
The. Class selector the jquery class selector can find elements through the specified class. The syntax is as follows: $ (". Test")
　　
$ ("*") Pick all elements $ (this) pick the current HTML element $ ("P.intro") pick the <p> element of class Intro $ ("P:first") pick the first <p> element $ ("ul Li:first") selected Take the first <ul> element of the first <li> element $ ("ul Li:first-child") pick the first <li> element of each <ul> element $ ("[href]") Select the element with the href attribute $ ("a[target= ' _blank ')") Select all the target attribute values equal to "_blank" of the <a> element $ ("a[target!= ' _blank '") Select all target property values not equal to "_blank" < The a> element $ (": Button") selects all the <input> elements of the type= "button" and the <button> element $ ("Tr:even") to select the <tr> element of the even position $ ("tr:odd" Select the odd position <tr> element
jquery Events:
What is an event?
The response of a page to a different visitor is called an event.
The event handler refers to the method that is called when certain events occur in the HTML.
Instance:

 
 

  
  
 
   
Move the mouse over the element.
 
   
Select radio button
 
   
Click on the element
 
  
 
 
The term "trigger" (or "fire") is often used in events such as: "Triggers KeyPress event when you press a key."
Common DOM Events:

 
 
 
  
  
 
   
 
    
Mouse Events
 
    
Keyboard Events
 
    
Form Events
 
    
Document/Window events
 
   
 
   
 
    
Click
 
    
KeyPress
 
    
Submit
 
    
Load
 
   
 
   
 
    
DblClick
 
    
KeyDown
 
    
Change
 
    
Resize
 
   
 
   
 
    
MouseEnter
 
    
KeyUp
 
    
Focus
 
    
Scroll
 
   
 
   
 
    
MouseLeave
 
    
 
    
Blur
 
    
Unload
 
   
 
  
 
 
 
Example: When we click on the P element, it disappears
$ (document). Ready (function ()        {            $ ("P"). Click (function ()            {                $ ("P"). Hide ();            });        });
Example: When we move the mouse over the P element, its background turns red and the background turns blue when the mouse leaves.
$ (document). Ready (function ()        {            $ ("P"). MouseOver (function ()            {                $ ("P"). CSS ("Background-color", "Re D ");            } );            $ ("P"). MouseLeave (function ()            {                $ ("P"). CSS ("Background-color", "Blue");            });        
　　
Learn jquery from scratch (ii)