Basic knowledge and examples of jquery entry (collation) _jquery

Source: Internet
Author: User
Tags jquery library
1.Juqery is an excellent framework for JavaScript. It is lightweight JS library, it is compatible with CSS3, also compatible with various browsers (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+), jQuery2.0 and subsequent versions will no longer support IE6/7/8 browsers. jquery makes it easier for users to handle HTML documents, events, animations, and easily provide Ajax interaction for the site.

One of the big advantages of jquery is that it has a full documentation and a variety of applications that are detailed, as well as a number of mature plug-ins to choose from. jquery allows the user's HTML page to keep the code and HTML content separate, that is, you don't have to insert a bunch of JS into the HTML to invoke the command, just define the ID.

When using the jQuery2.0 frame, what I want to say is that if some of the code is not running in Eclipse, the browser kernel is too low, as long as it can be displayed under a newer browser.

The 2.jQuery library contains the following features:
· HTML element Selection
· HTML element Operations
· CSS actions
· HTML Event functions
· JavaScript Effects and animations
· HTML DOM Traversal and modification
· Ajax
· Utilities
3.Google and Microsoft support for JQuery is good.
If you don't want to store the jquery library on your own computer, you can load the CDN jquery core file from Google or Microsoft.
Using Google's CDN
Copy Code code as follows:

<script type= "Text/javascript" src= "http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js "></script>

Using the Microsoft CDN
Copy Code code as follows:

<script type= "Text/javascript" src= "http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js "></script>

Basic syntax:
JQuery Syntax Examples
$ (this). Hide ()
Demonstrates the JQuery hide () function, which hides the current HTML element.
$ ("#test"). Hide ()//Read ID
Demonstrates the JQuery hide () function, which hides the elements of id= "test".
$ ("P"). Hide ()
Demonstrates the JQuery hide () function, which hides all <p> elements. This allows you to read the labels directly
$ (". Test"). Hide ()
Demonstrates the JQuery hide () function, which hides all elements of class= "test". Read the element node of class

There are many types of jquery selectors: the jquery element selector
JQuery uses the CSS selector to select HTML elements.
$ ("P") select <p> element.
$ ("P.intro") selects all <p> elements of the class= "Intro".
$ ("P#demo") selects all <p> elements of Id= "demo".
JQuery Property Selector
JQuery uses an XPath expression to select an element with the given property.
$ ("[href]") selects all elements with the 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 elements with all href values ending with ". jpg".
JQuery CSS Selector
The JQuery CSS selector can be used to change the CSS properties of HTML elements.

The following example changes the background color of all p elements to red:
Instance
Copy Code code as follows:

$ ("P"). CSS ("Background-color", "Red");


JQuery Events
Here are some examples of event methods in JQuery:

Event function bind function to
$ (document). Ready (function) To bind a function to a ready event for a document (when the document completes loading)
$ (selector). Click (function) Trigger or bind a function to a click event of a selected element
$ (selector). DblClick (function) A double-click event that triggers or binds a function to a selected element
$ (selector). focus (function) Triggers or binds a function to the selected element's Get focus event
$ (selector). MouseOver (function) A mouse hover event that triggers or binds a function to a selected element

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.