JQuery Selector $
$ (Expression,[context]) return jQuery
Unit One
The CSS definition of expression is the element that you want to select in CSS syntax
// $("*"); Represents all element labels for a page
$ ("th, TD")//representing all <th><td> element labels
$ ("a")//representing all <a> element labels
$ ("Div#onlydiv"); Represents the Id=onlyidv element $ ("#ID") in the CSS selection to match the full document
$ ("#rating"); The element that represents the Id=rating
$ ("#orderedlist > li"); Represents id=orderedlist all child elements, but does not include child elements under child elements
$ ("#orderedlist li:last"); Represents the last element of Li in Id=orderedlist
$ ("#orderedlist Li:first"); Represents the first element of Li in a id=orderedlist
$ ("#orderedlist li:nth-child (0)"); Represents the Li (n) element in id=orderedlist n an array subscript
$ ("Button:only-child"); Represents the element in a CSS selection that is unique to the parent container
$ (". Stuff:empty"); Represents an empty element in a CSS selection
$ (". buttons:enabled"); Represents a normally enabled element in a CSS selection
$ (". buttons:disabled"); Represents a non-enabled element in a CSS selection
$ ("input:checked"); Represents a selected element in a CSS selection
$ ("Button:not (. not)"); Represents an element in the removal of not () in a CSS selection
$ ("Button.not"); Represents the element $ ("Class=not) in a CSS selection. Clss ") for full document matching
$ ("#orderedlist2 Li"); Represents a child element that id=orderedlist all child elements and includes all child elements
Alert ($ ("#orderedlist ~ li"). length);
$ ("#orderedlist,. Buttons,li"); elements that match a CSS selector
Expression selection based on element attributes
Alert ($ ("button[@class]"). length); Represents an element with the class attribute
Alert ($ ("button[@class =not"). length);//= element with class attribute with value equal to not
Alert ($ (' button[@class ^=not '). length);//Represents an element that has the class attribute and the beginning of the value matches not
Alert ($ (' button[@class $=not '). length);//Represents an element that has the class attribute and the end of the value matches not
Alert ($ (' button[@class *=not '). length);//Represents an element that has a class attribute and that matches not in the value
Expression XPath filter XPath syntax to represent the page elements that need to be selected
$ ("ol[@id ^= ' orderedlist ']"). Find ("Li:contains (' A ')"). each (function (i) {
$ (this). HTML ($ (this). html () + "bam!" + i);
$ (this). MouseOver (function () {
$ (this). CSS ("Color", "red");
// });
$ (this). Mouseout (function () {
$ (this). CSS ("Color", "#000");
// });
// });
Look for all the elements of the OL label and attribute Id=orderedlist, here are two ways to do this
ol[@id = ' orderedlist '] locates the parent element directly with each iteration
ol[@id = ' orderedlist ']/* child elements under all parent elements use Find (' child-element '). each () iteration
Unit Two
$ (HTML, [ownerdocument]) return jQuery
This function allows the HTML element text to be passed in, and the constructor produces the jquery object created by the HTML text, which can be either original or existing on the original page.
$ (' <p>hello</p> '). Appendto ("H2"); Generates a tagged text and appends it to the page H2 label
You can also remove the original page element to append
$ ("input", this). Appendto ("H2"); Note that the page elements taken out here are moving! Instead of copying
$ (elements) return jQuery
This function allows direct incoming DOM
$ (document.forms[0].elements). Appendto ("H2"); You can refer to the DOM documentation
$ (callback) return JQuery
Here are some instructions for selector
/*
Basis:
#id: Gets the object based on the object's ID property.
Element: Matches all objects of an HTML tag
. Class: Getting objects based on the class property of an object
*: Get all the objects
Selector1, Selector2, Selectorn: Get a collection of multiple selectors, no duplicates
Level selector:
Ancestor descendant: This selector is a space, which means that all the objects of the first selector are found first, and then all objects that match the second selector are found in his descendants node.
Parent > Child: This selector is the greater-than sign, which means that all the objects of the first selector are found first, and then all objects that match the second selector are found in his child node (not a grandchild node).
Prev + Next: This selector is the plus sign, which means that all the objects of the first selector are found first, and then the next node that follows the same level as his or her peers matches the object of the second selector.
Prev ~ siblings: This selector is the ~ number, which means that all the objects of the first selector are found first, and then the object that matches the second selector in all subsequent nodes of his sibling.
Base Filter Character:
: First: Matches one object in multiple objects
: Last: Matches the final object in multiple objects
: Not (selector): matches the item that removes the contents of the following selector
: even: Matches an even number in all objects
: Odd: Matches the first odd number in all objects
: EQ (Index): A separate element that matches a table
: GT (Index): matches all elements that are larger than a certain index
: LT (index): matches all elements that are less than a certain mark
: Header: Matches all header elements, such as H1,h2,h3,h4,h5,h6
: Animated: Match all elements that have an animation effect
Text Filter Character:
: Contains (text): Matches an object that internally owns the text element, including indirectly useful cases
: Empty: Matches all objects with no child elements
: Has (selector): Matches all objects that contain at least one child selector
:p arent: Matches all parent objects, and the parent object contains objects that contain only text
Visibility Filter Character:
: Hidden: Matches all hidden objects, or hidden types in input
: Visible: Match all visible objects
Property Filter Character:
[attribute]: matches all objects that have a property
[Attribute=value]: Matches an object that owns a property and value
[Attribute!=value]: Matches an object that owns a property and is not a value
[Attribute^=value]: Matches an object that has a property that starts with a value
[Attribute$=value]: Matches an object that owns a property and ends with a value
[Attribute*=value]: Matches an object that owns a property and contains a value
[Selector1] [Selector2] [Selectorn]: matches objects that meet multiple attribute selectors at the same time
Sub-filter Character:
: Nth-child (index/even/odd/equation): Matches an object in a child element of one of the subscript/even/odd/equality objects, where EQ (index) can only match the child element characteristics of a single object, and this method matches one of the child elements of multiple objects in common characteristics
: First-child: Match first child element
: last-child: Match Last child element
These two matches can also be matched to all child elements of multiple parent objects
: Only-child: If a parent element has only one child element, match this child element
Form Filter Characters
Name Type
: Input returns:array<element (s) >
Match the INPUT element in the form
: Text returns:array<element (s) >
Matches the element with input type text within the form
:p Assword returns:array<element (s) >
Matches the element with input type password in the form
: Radio Returns:array<element (s) >
Matches the element with input type radio in the form
: CheckBox returns:array<element (s) >
Matches the element in the form where the input type is a checkbox
: Submit Returns:array<element (s) >
Matches the element in the form where input type is submit
: Image returns:array<element (s) >
Elements that match the image inside the form
: Reset Returns:array<element (s) >
Match the element with the input type reset in the form
: Button Returns:array<element (s) >
Matches the element in the form with the input type button
: File Returns:array<element (s) >
The element that matches the input type of file in the form.
: Hidden Returns:array<element (s) >
Matches the element with input type hidden or hidden region within the form
: Enabled Returns:array<element (s) >
Match all enabled elements
:d isabled returns:array<element (s) >
Match all non-enabled elements
: Checked returns:array<element (s) >
Match all selected elements
: Selected Returns:array<element (s) >
Match all Drop-down list selected elements
*/
