jquery01-Introduction + syntax + Selector + Event

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