jquery Learning Notes

Note: The following data sources W3School.COM.CN

JQuery syntax

The jQuery syntax is for the selection of HTML elements, and you can perform certain operations on elements.

The underlying syntax is: $ (selector). Action ()

• Dollar sign ($) defines jQuery
• Selector (selector) "Query" and "find" HTML elements
• JQuery Action () performs an operation on an element

• Example

  $ (this). Hide ()-hides the current element

  $ ("P"). Hide ()-Hides all paragraphs

  $ (". Test"). Hide ()-hides all elements of class= "test"

  $ ("#test"). Hide ()-hides all elements of the id= "test"

• All jquery functions are in a document ready function (Note: This is to prevent the document from running JQuery code before it is fully loaded (ready). If the function is run before the document is fully loaded, the operation may fail)

JQuery Selector

The JQuery element selector and the property selector allow you to select HTML elements by tag name, property name, or content.

Selectors allow you to manipulate HTML element groups or individual elements.

In the HTML DOM terminology:

Selectors allow you to manipulate a group of DOM elements or a single DOM node.

JQuery element Selector

JQuery uses CSS selectors to select HTML elements.

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

$ ("P.intro") selects all the <p> elements of the class= "Intro".

$ ("P#demo") selects all <p> elements of the id= "demo".

JQuery Property Selector

JQuery uses an XPath expression to select an element with a given property.

$ ("[href]") selects all elements with an 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 all elements with an href value 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

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

jquery Learning Notes