jquery Basic Learning

1. A popular JavaScript framework:

• Jquery
• Prototype
• MooTools
• These frameworks provide functions for common JavaScript tasks, including animations, DOM manipulation, and Ajax processing

2.jQuery uses CSS selectors (that is, HTML elements) to access and manipulate HTML elements (DOM objects) on a Web page.

3.jQuery is a library of JavaScript functions.

The JQuery library contains the following features:

HTML element Selection

HTML element manipulation

CSS actions

HTML Event functions

JavaScript Effects and animations

HTML DOM Traversal and modification

Ajax

Utilities

The 4.jQuery library is located in a JavaScript file that contains all of the JQuery functions

　　

JQuery can be added to a Web page with the following markup:

<script type="text/javascript" src="jquery.js"></script> 
Note that the,<script> label should be located in the 
5. With JQuery, you can select (query) HTML elements and perform "actions" on them
JQuery Syntax Examples

 
 

  
  
 
   

     $ (this). Hide () demonstrates the jQuery hide () function, which hides the current HTML element. 
   
 
   

     $ ("#test"). Hide () demonstrates the jQuery hide () function, hiding elements of the id= "test". 
   
 
   

     $ ("P"). Hide () demonstrates the jQuery hide () function, hiding all <p> elements. 
   
 
   

     $ (". Test"). Hide () demonstrates the jQuery hide () function, hiding all elements of the class= "test". 
   
 
   

     The 6.jQuery syntax is for the selection of HTML elements, and you can perform certain operations on elements. 
   
 
  
 
 
The underlying syntax is: $ (selector). Action ()
The dollar sign $ defines the jquery selector.
(selector) "Query" and "find" HTML elements
JQuery Action () performs an operation on an element
7. All jquery functions are in one document ready function to prevent the document from running JQuery code before it is fully loaded (ready)
8.jQuery selector: Selectors allow you to manipulate element groups or individual elements
　　

 
 
 
  
  
 
   
 
    
$ (This)
 
    
Current HTML Element
 
   
 
   
 
    
$ ("P")
 
    
All <p> elements
 
   
 
   
 
    
$ ("P.intro")
 
    
All <p> elements of class= "Intro"
 
   
 
   
 
    
$ (". Intro")
 
    
All elements of class= "Intro"
 
   
 
   
 
    
$ ("#intro")
 
    
id= Elements of "Intro"
 
   
 
   
 
    
$ ("ul Li:first")
 
    
The first <li> element of each <ul>
 
   
 
   
 
    
$ ("[href$= '. jpg ']")
 
    
All href attributes with attribute values ending with ". jpg"
 
   
 
   
 
    
$ ("Div#intro. Head")
 
    
id= all class= "head" elements in the <div> element of "Intro"
 
   
 
  
 
 
 
9.jQuery Event: is specially designed for event handling. An event handler refers to a method that is called when certain events occur in HTML
The JQuery code is usually put in the 
10. If your site contains many pages, and you want your jquery function to be easy to maintain, then put your jquery function in a separate. js file.
Instead of directly writing jquery functions directly in the <script> tag in HTML. Refer to external files directly using the SRC attribute in the <script> tag.
11.
jquery uses the $ symbol as a way to profile jquery.
Functions in some other JavaScript libraries, such as Prototype, also use the $ notation.
JQuery uses a method called noconflict () to resolve the problem.
var jq=jquery.noconflict (), which helps you to use your own name (such as JQ) instead of the $ symbol.
12.
JQuery is specifically designed to handle HTML events, so your code is more appropriate and easier to maintain when you follow these guidelines:

 
 

  
  
 
   
Put all jQuery code in the event handler
 
   
Place all event handlers in the document-ready event handler
 
   
Put the JQuery code in a separate. js file
 
   
Rename the JQuery library if there is a name conflict
 
  
 
 
13.
Here are some examples of the event methods in JQuery:

 
 
 
  
  
 
   
 
    
Event function
 
    
bind function to
 
   
 
   
 
    
$ (document). Ready (function)
 
    
Bind a function to a document's Ready event (when the document finishes loading)
 
   
 
   
 
    
$ (selector). Click (function)
 
    
A click event that triggers or binds a function to the selected element
 
   
 
   
 
    
$ (selector). DblClick (function)
 
    
A double-click event that triggers or binds a function to the selected element
 
   
 
   
 
    
$ (selector). focus (function)
 
    
Trigger or bind a function to the Focusable event of the selected element
 
   
 
   
 
    
$ (selector). MouseOver (function)
 
    
Mouse hover event that triggers or binds a function to the selected element
 
   
 
  
 
 
 


jquery Basic Learning