JQ Basic Skills

1.Jq Selector

 jquery element selector JQuery uses CSS selectors to select HTML elements. $ ("P") Select  <  p  >   element. $ ("P.intro") selects the  p "for all class=" Intro "  >   element. $ ("P#demo") selects all Id= "Demo"  <  p  >   element. 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". The jquery CSS selector 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");  

Selector Instance Pick * $ ("*") all elements #id $ ("#lastname") id= "LastName" element. Class $ (". Intro") All class= "Intro" Elements of Element $ ("P") all<P>element. Class.class $ (". Intro.demo") for all class= "Intro" and Class= "demo" Elements: First $ ("P:first"), and one <P>element: Last $ ("P:last")<P>element: Even $ ("Tr:even") all even numbers<TR>element: Odd $ ("tr:odd") all odd numbers<TR>element: EQ (Index) $ ("UL Li:eq (3)") in the list of fourth elements (index starting from 0): GT (NO) $ ("UL li:gt (3)") lists index greater than 3 yuan Vegetarian: LT (no) $ ("UL Li:lt (3)") lists elements with index less than 3: not (selector) $ ("Input:not (: Empty)") all non-nullable input elements: he Ader $ (": Header") All header elements<H1>-<h6>: Animated All animated elements: contains (text) $ (": Contains (' W3school ')") contains all elements of the specified string: Empty $ (": Empty") All elements of No Child (Element) node: Hidden $ ("P:hidden") all hidden<P>element: Visible $ ("table:visible") all visible tables S1,s2,s3 $ ("Th,td,.intro") all elements with matching selections [Attribu TE] $ ("[href]") all elements with href attribute [Attribute=value] $ ("[href= ' # ']") all href attribute values equal to "#" elements [Attribute!=value] $           ("[href!= ' # ']") all href attribute values are not equal to "#" elements [Attribute$=value] $ ("[href$= '. jpg ']") all href attribute values contain elements ending with ". jpg" : Input $ (": input") all<input>element: Text $ (": Text") all type= "Text "<input>elements: Password $ (":p assword") all type= "Password "<input>elements: Radio $ (": Radio") All Type= "Radio "<input>element: CheckBox $ (": checkbox") for all type= "checkbox"<input>element: Submit $ (": Submit") all type= "Submit"<input>element: Reset $ (": Reset") for all type= "reset"<input>element: Button $ (": Button") for all type= "button"<input>element: Image $ (": Image") for all type= "image"<input>element: File $ (": File") for all type= "file"<input>element: Enabled $ (": Enabled") All active input elements: Disabled $ (":d isabled") all disabled input elements: selected $ (" Selected ") All selected input elements: checked $ (": Checked ") All selected input elements

jQuery Selector

2.Jq Getting setup Content

Get:

• Text ()-Sets or returns the text content of the selected element
• HTML ()-Sets or returns the contents of the selected element (including HTML tags)
• Val ()-Sets or returns the value of a form field

Insert:

• Append ()-inserts content at the end of the selected element
• Prepend ()-Inserts content at the beginning of the selected element
• After ()-Inserts the content after the selected element
• Before ()-insert content before selected element

Delete

• Remove ()-Deletes the selected element (and its child elements)
• Empty ()-Removes child elements from the selected element

3.Jq ergodic Device

The JQuery traversal function includes methods for filtering, finding, and concatenating elements. Function description. Add () Adds an element to the collection of matching elements: Andself () adds the previous set of elements in the stack to the current collection: children () gets all child elements of each element in the matching element collection: closest () starts with the element itself , each step is matched to the ancestor element, and the first matching ancestor element is returned: contents () Gets the child elements of each element in the matching element collection, including the text and comment nodes: each () iterates over the JQuery object and executes the function for each matching element: End () ends the current chain The most recent filter operation and returns the matching elements collection back to the previous state: EQ () shrinks the matching element collection to a new element at the specified index: filter () shrinks the matching element collection to a new element that matches the selector or the matching function return value: Find () gets the current matching element in the collection for each  The descendant of the element, filtered by the selector: first () shrinks the matching element collection to the second element in the collection: has () shrinks the matching element collection to the collection that contains the descendants of a particular element: is () checks the current set of matching elements based on the selector, and returns if at least one of the matching elements exists. true: Last () shrinks the matching element collection to the final element in the collection: Map () passes each element in the current matching collection to the function, producing a new JQuery object that contains the return value: Next () gets the sibling element that is adjacent to each element in the matching elements collection: NE Xtall () gets all the sibling elements after each element in the matching element collection, filtered by the selector (optional): Nextuntil () obtains all the sibling elements after each element until it encounters the element that matches the selector: not () removes the element from the matching element collection: Offs Etparent () Gets the first parent element used for positioning: parent () obtains the current matching element in the collection of each element of the parents element, filtered by the selector (optional): parents () Gets the ancestor element of each element in the current matching element collection, filtered by the selector (optional): par Entsuntil () Gets the ancestor element of each element in the current matching element collection until it encounters an element that matches the selector. Prev () Gets the first sibling element immediately adjacent to each element in the matching element collection, filtered by the selector (optional): Prevall () gets the matching elementAll sibling elements before each element in the vegetarian collection, filtered by the selector (optional): Prevuntil () obtains all the sibling elements before each element until it encounters the element that matches the selector: siblings () gets the sibling elements of all the elements in the matching element collection, Filter by selector (optional): Slice () reduces the set of matching elements to a subset of the specified range.

View CodeWalk up the DOM tree

These jQuery methods are useful for traversing up the DOM tree:

• The parent () method returns the immediate parent element of the selected element.

    $ ("span"). parent ();

• The parents () method returns all the ancestor elements of the selected element, all the way up to the root element of the document ( $ ("span"). Parents ("ul");
• The Parentsuntil () method returns all ancestor elements between two given elements.

    $ ("span"). Parentsuntil ("div");

Walk down the DOM tree

Here are two jQuery methods for traversing the DOM tree down:

• The Children () method returns all the immediate child elements of the selected element.

    $ ("div"). Children ();

• The Find () method returns the descendant elements of the selected element, all the way down to the last descendant.

    $ ("div"). Find ("span");

The scope of the abbreviation search element

The three most basic filtering methods are: First (), Last (), and EQ (), which allow you to select a specific element based on its position within a set of elements.

Other filtering methods, such as filter () and not (), allow you to select elements that match or do not match a specified criterion.

JQuery eq () method

The EQ () method returns the element with the specified index number in the selected element.

The index number starts at 0, so the first element's index number is 0 instead of 1. The following example selects a second <p> element (index number 1):

Instance

$ (document). Ready (function () {  $ ("P"). EQ (1);});

JQ Basic Skills