JavaScript Framework Library-JQuery

JQuery is a JavaScript library. Reference JQuery

<! DOCTYPE html>
I. jquery installation add jquery to your Web page
To use jquery, you need to download the jquery library (which will be explained below) and then include it in the Web page you want to use.
The JQuery library is a JavaScript file that you can reference using the <script> tag of HTML:
Please note that the,<script> label should be located in the 
Tip: Are you wondering why we didn't use type= "Text/javascript" in the <script> tag?
In HTML5, you don't have to do that. JavaScript is the default scripting language in HTML5 and all modern browsers!
Download JQuery
There are two versions of jQuery available for download:

 
  

  
   
 
    
Production version-used in the actual website, has been streamlined and compressed.
 
    
Development version-for testing and development (uncompressed, readable code)
 
   
 
  
These two versions are available for download from jquery.com.
Tip: You can put the download file in the same directory as the page, which makes it easier to use.
Ii. JQuery Selector
In the previous chapters, we showed some examples of how to select HTML elements.
The key point is to learn how the JQuery selector accurately selects the elements that you want to apply the effect to.
The JQuery element selector and the property selector allow you to select HTML elements by tag name, property name, or content.
Selectors allow you to manipulate HTML element groups or individual elements.
In the HTML DOM terminology:
Selectors allow you to manipulate a group of DOM elements or a single DOM node.
JQuery element Selector
JQuery uses CSS selectors to select HTML elements.
$ ("P") select the <p> element.
$ ("P.intro") selects all the <p> elements of the class= "Intro".
$ ("P#demo") selects all <p> elements of the id= "demo".
JQuery Property Selector
JQuery uses an XPath expression to select an element with a given property.
$ ("[href]") selects all elements with an href attribute.
$ ("[href= ' # ']") selects all elements with an HREF value equal to "#".
$ ("[href!= ' # ']") selects all elements with an HREF value that is not equal to "#".
$ ("[href$= '. jpg ']") selects all elements with an href value ending with ". jpg".
More Selector instances
$ (this) current HTML element
$ ("P") all <p> elements
$ ("P.intro") <p> elements for all 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"
Iii. JQuery Events
JQuery is specifically designed for event handling.
JQuery Event functions
The jquery event handling method is the core function in jquery.
The event handler refers to the method that is called when certain events occur in the HTML. The term "triggered" (or "fired") by an event is often used.
The JQuery code is usually put into the 
Instance
In the example above, a function is called when the button's Click event is triggered:
$ ("button"). Click (function () {: Some code ...} )
This method hides all <p> elements:
$ ("P"). Hide ();
When the page is finished loading: can only be triggered
$ (document). Ready (function)
Bind a function to a document's Ready event (when the document finishes loading)
Iv. jquery effect 1) jquery hide () and show () hidden and displayed
With JQuery, you can use the Hide () and show () methods to hide and display HTML elements:
<! DOCTYPE html>
2) JQuery Fadetoggle () method fade in
The JQuery Fadetoggle () method can be toggled between the fadeIn () and the FadeOut () method.
If the element has faded out, fadetoggle () adds a fade effect to the element.
If the element has been faded in, fadetoggle () adds a fade effect to the element.
<! DOCTYPE html>
JQuery FadeIn () method
JQuery fadeIn () is used to fade in hidden elements.
Grammar:
$ (selector). FadeIn (Speed,callback);
The optional speed parameter specifies the length of the effect. It can take the following values: "Slow", "fast", or milliseconds.
The optional callback parameter is the name of the function that is executed after fading completes.
<! DOCTYPE html>
JQuery FadeOut () method
The JQuery FadeOut () method is used to fade out visible elements.
Grammar:
$ (selector). FadeOut (Speed,callback);
The optional speed parameter specifies the length of the effect. It can take the following values: "Slow", "fast", or milliseconds.
The optional callback parameter is the name of the function that is executed after fading completes.
<! DOCTYPE html>
3) JQuery Animation-animate () method
The JQuery animate () method is used to create custom animations.
Grammar:
$ (selector). Animate ({params},speed,callback);
The required params parameter defines the CSS property that forms the animation.
The optional speed parameter specifies the length of the effect. It can take the following values: "Slow", "fast", or milliseconds.
The optional callback parameter is the name of the function that is executed after the animation is completed.
<! DOCTYPE html>
JQuery Animate ()-Manipulate multiple properties
<! DOCTYPE html>
JavaScript Framework Library-JQuery