jquery is a library of JavaScript functions, a lightweight "write less, do more" JavaScript library that 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
In addition to this, jquery offers a number of plugins.
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)
All of the above two versions can be downloaded from jquery.com. The JQuery library is a JavaScript file that is imported in the following ways:
<src= "Jquery-1.10.2.min.js"></script>
JQuery syntax
The jQuery syntax is done by selecting an HTML element and performing certain actions on the selected element. The syntax used by JQuery is a combination of XPath and CSS selector syntax.
Base syntax: $ (selector). Action()
- Dollar sign definition JQuery
- Selector (selector) "Query" and "find" HTML elements
- JQuery Action () performs an operation on an element
Instance:
$ (this). Hide ()-hides the current element
$ ("P"). Hide ()-Hides all paragraphs
$ ("p. Test"). Hide ()-Hides all class= "test" paragraphs
$ ("#test"). Hide ()-hides all elements of the id= "test"
Document Readiness Events
All JQuery functions are in a document ready function:
$ (document). Ready (function () { //JQuery methods go ...});
Concise notation (same as above):
$ (function () { //JQuery methods go here ...});
This is to prevent the document from running JQuery code before it is fully loaded (ready). If you run the function before the document is fully loaded, the operation may fail. Here are two specific examples:
- Trying to hide an element that doesn't exist
- Get the size of an image that is not fully loaded
JQuery Selector
The JQuery selector allows manipulation of an HTML element group or a single element, based on an element's ID, class, type, attribute, attribute value, and so on "find" (or select) an HTML element. It is based on a CSS selector that already exists, and in addition, it has a few custom selectors. All selectors in JQuery start with a dollar sign: $ ().
Element Selector
The JQuery element selector selects elements based on the element name. Select all <p> elements in the page: $ ("P")
#id Selector
The JQuery #id selector selects the specified element through the id attribute of the HTML element.
The ID of the element in the page should be unique, so you need to select a unique element in the page by #id selector.
Select the element syntax by ID as follows: $ ("#test")
. class Selector
The JQuery class selector can find elements through the specified class. The syntax is as follows: $ (". Test")
Syntax description |
$ ("*") Select all elements |
$ (this) to select the current HTML element |
$ ("P.intro") pick <p> element with class intro |
$ ("P:first") Select the first <p> element |
$ ("ul Li:first") Select the first <li> element of the first <ul> element |
$ ("ul li:first-child") Select the first <li> element of each <ul> element |
$ ("[href]") Select an element with an HREF attribute |
$ ("a[target= ' _blank ')" selects all <a> elements that have the target property value equal to "_blank" |
$ ("a[target!= ' _blank ')" selects all <a> elements for which the target property value is not equal to "_blank" |
$ (": Button") Select all the <input> elements and <button> elements of the type= "button" |
$ ("Tr:even") Select the <tr> element of the even position |
$ ("tr:odd") select the odd position of the <tr> element |
jquery Events
Common DOM Events |
Mouse events |
Keyboard events |
Form Events |
Document/Window Events |
Click |
KeyPress |
Submit |
Load |
Dbclick |
KeyDown |
Change |
Resize |
MouseEnter |
KeyUp |
Focus |
Scroll |
MouseLeave |
|
Blur |
Unload |
Common jquery Events |
Mouse events |
Document/Window Events |
|
Click () |
$ (document). Ready () Execute function after the document is fully loaded |
Hover () |
Dbclick () Double-click the element |
|
Focus () Element gets the spotlight |
MouseEnter () mouse pointer through element |
|
When Blur () loses focus |
MouseLeave () mouse pointer away from element |
|
|
MouseDown () The mouse pointer moves over the element and when the mouse button is pressed |
|
|
MouseUp () When the mouse button is released on the element |
|
|
The hover () method simulates a cursor hover event.
The specified first function (MouseEnter) is triggered when the mouse moves over the element, and the second function (MouseLeave) is triggered when the mouse moves out of the element.
$ ("#p1"). Hover ( function () { alert ("you entered p1!"); }, function () { alert ("Bye!"). Now you leave the p1! "); })
jquery01-Introduction + syntax + Selector + Event