jquery Basic Finishing 1

jquery Basic Finishing <1>

@[Basic Example | Based on bootstrap Framework]

[TOC]

About jquery

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

jquery syntax

The underlying syntax is: $ (selector). Action ()

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

//所有 jQuery 函数位于一个 document ready 函数中$(document).ready(function(){-------});

jquery selector jquery element Selector

JQuery uses CSS selectors to select HTML elements.

• $ ("P") selects the <p> element.
• $ ("P.intro") selects all elements of the class= "Intro" <p> .
• $ ("P#demo") Select all elements of Id= "demo" <p>

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"

JQuery CSS Selector

$("p").css("background-color","red");

Form
| grammar | description
|---|---
|$ (This) | Current HTML Element
|$ ("P") | All <p> elements
|$ ("P.intro") | All elements of class= "Intro" <p>
|$ (". Intro") | All elements of class= "Intro"
|$ ("#intro") | id= Elements of "Intro"
|$ ("ul Li:first") | <ul>the first element of <li> each
|$ ("[href$=. jpg]") | All href attributes with attribute values ending with ". jpg"
|$ ("Div#intro. Head") | id= <div> all class= "head" elements in Elements of "Intro"

jquery Events

Common jquery Events
-$ (document). Ready (function) to bind functions to a document's readiness event (when it is finished loading)

• $ (selector). Click to trigger or bind a function to a clicked event of the selected element
• $ (selector). DblClick (function) triggers or binds a function to a double-click event of the selected element
• $ (selector). focus (function) triggers or binds a function to the Focusable event of the selected element

• $ (selector). mouseover (function) triggers or binds a function to a mouse hover event of the selected element
  More jquery Events

  jquery effects (1) jquery hidden and displayed

  "' JavaScript
  $ (selector). Hide (Speed,callback);
  $ (selector). Show (Speed,callback);
  The optional speed parameter specifies the rate of concealment/display, which can take the following values: "Slow", "fast", or milliseconds.
  The optional callback parameter is the name of the function that is executed after the hide or display is complete.

Example
$ ("#hide"). Click (function () {
$ ("P"). Hide ();
});
$ ("#show"). Click (function () {
$ ("P"). Show ();
});
Javascript
$ (selector). Toggle (Speed,callback);
Example
$ ("button"). Click (function () {
$ ("P"). Toggle ();
});
```

jquery fades

With JQuery, you can implement the fade-out effect of elements.
JQuery has the following four methods of fade:

• FadeIn ()
• FadeOut ()
• Fadetoggle ()
• FadeTo ()

FadeIn

JQuery fadeIn () for fading in hidden elements
Syntax $ (selector). FadeIn (Speed,callback);

$("button").click(function(){  $("#div1").fadeIn();  $("#div2").fadeIn("slow");  $("#div3").fadeIn(3000);});

FadeOut

The JQuery FadeOut () method is used to fade out visible elements.
$ (selector). FadeOut (Speed,callback);

$("button").click(function(){  $("#div1").fadeOut();  $("#div2").fadeOut("slow");  $("#div3").fadeOut(3000);});

Fadetoggle

The JQuery Fadetoggle () method can be toggled between the fadeIn () and the FadeOut () method
$ (selector). Fadetoggle (Speed,callback);

$("button").click(function(){  $("#div1").fadeToggle();  $("#div2").fadeToggle("slow");  $("#div3").fadeToggle(3000);});

FadeTo

The JQuery FadeTo () method allows the gradient to be given opacity (values between 0 and 1)
$ (selector). FadeTo (Speed,opacity,callback);

$("button").click(function(){  $("#div1").fadeTo("slow",0.15);  $("#div2").fadeTo("slow",0.4);  $("#div3").fadeTo("slow",0.7);});

jquery Swipe

With JQuery, you can create slide effects on elements.
JQuery has the following sliding methods:

• Slidedown ()
• Slideup ()

• Slidetoggle ()

  Slidedown

  The JQuery Slidedown () method is used to slide the element down.
  $ (selector). Slidedown (Speed,callback);

  $("#flip").click(function(){  $("#panel").slideDown();});

  Slideup

  JQuery Slideup () method for sliding an element up
  $ (selector). Slideup (Speed,callback);

  $("#flip").click(function(){  $("#panel").slideUp();});

  Slidetoggle

  The JQuery Slidetoggle () method can be toggled between the Slidedown () and the Slideup () method. To slide an element up
  $ (selector). Slidetoggle (Speed,callback);

  $("#flip").click(function(){  $("#panel").slideToggle();});

jquery Basic Finishing 1