Basic concepts and examples of getting started with jquery)

Last Update:2013-10-22 Source: Internet

Author: User

Tags jquery library

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

1. Juqery is an excellent javascript framework. It is a lightweight js library, compatible with CSS3, and compatible with various browsers (IE 6.0 +, FF 1.5 +, Safari 2.0 +, and Opera 9.0 + ), jQuery2.0 and later versions will no longer support IE6/7/8 browsers. JQuery allows you to easily process HTML documents, events, and animation effects, and provides AJAX interaction for websites.

Another major advantage of jQuery is its comprehensive documentation and detailed description of various applications. There are also many mature plug-ins to choose from. JQuery can ensure that the user's html page is separated from the code and html content. That is to say, you don't need to insert a bunch of JavaScript code in the html to call the command. You just need to define the id.

When using the jQuery2.0 framework, what I want to say through the above section is that if some code cannot run in eclipse, it indicates that the browser kernel is too low, you only need to display the effect in a browser of a higher version.

2. The jQuery library contains the following features:
· HTML element selection
· HTML element operations
· CSS operations
· HTML event Functions
· JavaScript special effects and animations
· Html dom traversal and Modification
· AJAX
· Utilities
3. Google and Microsoft have good support for jQuery.
If you do not want to store the jQuery library on your computer, you can load the CDN jQuery core file from Google or Microsoft.
Use Google CDN
Copy codeThe Code is as follows:
<Head>
<Script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs
/Jquery/1.4.0/jquery. min. js "> </script>
</Head>

Use Microsoft CDN
Copy codeThe Code is as follows:
<Head>
<Script type = "text/javascript" src = "http://ajax.microsoft.com/ajax/jquery
/Jquery-1.4.min.js "> </script>
</Head>

Basic Syntax:
JQuery syntax example
$ (This). hide ()
Demonstrate the jQuery hide () function to hide the current HTML element.
$ ("# Test"). hide () // read id
Demonstrate the jQuery hide () function to hide the element id = "test.
$ ("P"). hide ()
Demonstrate the jQuery hide () function to hide all <p> elements. // You can directly read tags.
$ (". Test"). hide ()
Demonstrate the jQuery hide () function to hide all the elements of class = "test. // Read the Element Node of the class

There are many Jquery selector types: 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 all <p> elements 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:
Instance
Copy codeThe Code is as follows:
$ ("P" ).css ("background-color", "red ");

JQuery events
The following are examples of event methods in jQuery:

Event Function	Bind a function
$ (Document). ready (function)	Bind the function to the ready event of the document (when the document is loaded)
$ (Selector). click (function)	Click events that trigger or bind a function to the selected Element
$ (Selector). dblclick (function)	Double-click event that triggers or binds a function to the selected Element
$ (Selector). focus (function)	Events that trigger or bind a function to the retrieved focus of the selected Element
$ (Selector). mouseover (function)	A mouse hover event that triggers or binds a function to the selected element.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More