Jquery syntax Basics

Source: http://www.cnblogs.com/A_ming/archive/2011/05/04/2036293.html

 

Jquery syntax Basics

Basic Syntax:

$ ("HTML element"). Action ()

Instance:
$ (This). Hide (); hide the current element

$ ("P"). Hide (); hide all paragraphs

$ ("P. test"). Hide (); hide all paragraphs of class = "test"

$ ("# Test"). Hide (); hide all Id = "test" Elements

Document-ready Functions

$ (Document). Ready (function (){

--------
});

This is to prevent the document from running jquery code before it is fully loaded (ready.

The following are two cases where the operation fails if the function is run before the document is fully loaded:

? Tries to hide a nonexistent element.
? Obtain the size of the not fully loaded image.

. Divcss {
Background-color: # e5eecc;
Padding: 7px;
Border: solid 1px # c3c3c3;
}

Jquery element Selector

Jquery uses the CSS selector to select HTML elements.

$ ("P") Select the <p> element.

$ ("P. Intro") select all <p> elements of class = "Intro.

$ ("P # Demo") Select the first <p> element of ID = "Demo.

Jquery attribute Selector

Jquery uses an XPATH expression to select an element with a given attribute.

$ ("[Href]") selects all elements with the href attribute.

$ ("[Href = '#']") select all elements with an href value equal.

$ ("[Href! = '#'] ") Select all elements with an href value not equal.

$ ("Your href00000000'.jpg ']") select all elements whose href values end with ". jpg.

Jquery CSS Selector

The jquery CSS selector can be used to change the CSS attributes of HTML elements.

The following example changes the background color of all P elements to Red:

$ ("P" ).css ("background-color", "Red ");

More instances

$ (This) Current HTML Element
$ ("P") All <p> Elements
$ ("P. Intro") All <p> elements of class = "Intro"
$ (". Intro") All class = "Intro" Elements
$ ("# Intro") id = "Intro" first element
$ ("Ul Li: First") the first <li> element of each <ul>
$ ("Your href00000000'.jpg ']") All attributes with the href attribute ending with ". jpg"
("Div # intro. Head") All the class = "head" elements in the <div> element of ID = "Intro"

Jquery event Functions

Jquery event handler is the core function in jquery.
An event handler is a function automatically called when an event occurs in HTML.
Triggered is a frequently used term.

Jquery Name Conflict

Jquery uses the $ symbol as an introduction to jquery.
Some other functions in the Javascript Library (such as prototype) also use the $ symbol.
Jquery uses noconflict () to solve this problem.
VaR JQ = jquery. noconflict () helps you replace the $ symbol with your own name (such as JQ.

Jquery events

The following are examples of event functions in jquery:

$ (Document). Ready (function) Readiness event of the document (when the HTML document is ready for use)
$ (Selector). Click (function) Click Event of the selected Element
$ (Selector). dblclick (function) double-click event of the selected Element
$ (Selector). Focus (function) Get focus event of the selected Element
$ (Selector). Mouseover (function) the mouse hover event of the selected Element

Jquery hide and display

Using the hide () and show () functions, jquery supports hiding and displaying HTML elements:
You can set two optional parameters for hide () and show (): Speed and callback.
The callback parameter is the name of the function executed after the hide or show function is complete.
The speed parameter can be set to "slow", "fast", "normal", or milliseconds.

Jquery Switch

The jquery toggle () function uses the show () or hide () function to switch the visible state of HTML elements.
Hide the displayed elements.
The speed parameter can be set to "slow", "fast", "normal", or milliseconds.

Jquery slide Function

-Slidedown, slideup, slidetoggle

Jquery has the following slide functions:

$ (Selector). slidedown (speed, callback)
$ (Selector). slideup (speed, callback)
$ (Selector). slidetoggle (speed, callback)

The peed parameter can be set to "slow", "fast", "normal", or millisecond.
The callback parameter is the name of the function that is executed after the hide or show function is complete.

Jquery fade Function

-Fadein (), fadeout (), fadeto ()

Jquery has the following fade functions:

$ (Selector). fadein (speed, callback)
$ (Selector). fadeout (speed, callback)
$ (Selector). fadeto (speed, opacity, callback)

The peed parameter can be set to "slow", "fast", "normal", or millisecond.
The opacity parameter in the fadeto () function specifies that the given Opacity is diminished.
The allback parameter is the name of the function that is executed after the hide or show function is complete.

Jquery Custom Animation

Syntax for creating a Custom Animation using the jquery function:

$ (Selector). animate ({Params}, [duration], [easing], [callback]) the key parameter is Params.
It defines the attributes for generating animations. You can set multiple such attributes at the same time:
Animate ({width: "70%", opacity: 0.4, marginleft: "0.6in", fontsize: "3em "});
The second parameter is duration. It defines the time used for animation.
It is set to "slow", "fast", "normal", or millisecond.
HTML elements are static by default and cannot be moved.
To make the elements move, set the position of CSS to relative or absolute.

Change HTML content

Syntax
Contents (selector).html (content) HTML ()
The function changes the content of the matching HTML element (innerhtml ).

Add HTML content

Syntax
$ (Selector). append (content) append ()
The function appends content to the matched HTML element.

Syntax
$ (Selector). After (content) after ()
The function inserts HTML content after all matching elements.

Syntax
$ (Selector). Before (content) before ()
The function inserts HTML content before all matching elements.

Jquery CSS operations

Jquery has three important functions for CSS operations:

? ((Selector).css (name, value)
? Detail (selector).css ({properties })
? ((Selector).css (name)

CSS operation instance

The function CSS (name, value) sets the value for the given CSS attribute of all matching elements:

Instance
((Selector).css (name, value)
$ ("P" ).css ("background-color", "yellow ");

Function CSS ({properties}) simultaneously sets values for a series of CSS attributes of all matching elements:

Instance
Detail (selector).css ({properties })
$ ("P" ).css ({"background-color": "yellow", "font-size": "200% "});

The function CSS (name) returns the value of the specified CSS attribute:

Instance
((Selector).css (name)
Background (this).css ("background-color ");

Jquery size operation

Jquery has two important functions for dimensional operations:

? $ (Selector). Height (value)
? $ (Selector). Width (value)

Size operation instance

The height (value) function sets the height of all matching elements:

Instance
$ (Selector). Height (value)
$ ("# Id100"). Height ("200px ");

The function width (value) sets the width of all matching elements:

Instance
$ (Selector). Width (value)
$ ("# Id200"). Width ("300px ");

Ajax and jquery

The load function of query is a simple (but powerful) Ajax function. Its syntax is as follows:
$ (Selector). Load (URL, Data, callback)
Use a selector to define the HTML elements to be changed and use URL parameters to specify the web address of your data.
The data parameter is required only when you want to send data to the server.
You must use the callback parameter only when you need to trigger a function after completion.

Jquery Ajax request

Request description
$ (Selector). Load (URL, Data, callback) Load remote data to the selected Element
$. Ajax (options) Load remote data to the XMLHTTPRequest object
$. Get (URL, Data, callback, type) use http get to load Remote Data
$. Post (URL, Data, callback, type) uses http post to load Remote Data
$. Getjson (URL, Data, callback) uses http get to load remote JSON data
$. Getscript (URL, callback) loads and executes remote JavaScript files

(Selector) jquery element selector syntax

(URL) the URL of the loaded data (address)
Key/value object of data sent to the server
(Callback) functions executed when data is loaded
(Type) Type of the returned data (HTML, XML, JSON, jasonp, script, text)
(Options) all key/value pair options of the complete Ajax request