jquery selector (name, attribute, Element) encyclopedia

The JQuery selector can be broadly divided into: the base selector, the hierarchy selector, the filter selector, and the form selector. The filter selector can be divided into: Simple filter selector, Content filter selector, visibility filter selector, attribute filter selector, child element filter selector, Form object attribute filter selector. The selector is the most basic thing in jquery, and here's how to use the jquery+%d1%a1%d4%f1%c6%f7/"target=" _blank >jquery Selector

Selectors are a central part of jquery because everything you do when you use jquery to manipulate the DOM is closely related to selectors-you have to pick the elements before you can take the next step. jquery uses common CSS selectors and XPath selectors that are familiar to most web designers and developers. In addition, there are some jquery customization selectors. It is these selectors that make jquery particularly flexible and easy to learn. Understanding how selectors work can make a solid foundation for making the most of the powerful features of jquery. In situations where CSS selectors are powerless, filters can give you more flexibility in selecting elements based on DOM features. People often use filters and selectors in combination, for depth control when selecting a specific element based on a standard, such as selecting elements based on the position of the element in a set of elements, or the visibility of the element, or some attributes of the form element, such as checked/unchecked or disabled. jquery provides a series of methods for adding, removing, or directly styling a CSS class for DOM elements.

Basic Selector

1. ID selector (Specify ID Element)
Set the element background color of id= "one" to black. (ID selector returns to a single element)

$ (document). Ready (function () {
$ (' #one '). CSS (' background ', ' #000 ');
}); 2. Class selector (traversing CSS class elements)
Set the element background color of class= "cube" to black

$ (document). Ready (function () {
$ ('. Cube '). CSS (' background ', ' #000 ');
}); 3. Element selector (traverse HTML element)
Set the text size of the P element to 12px

$ (document). Ready (function () {
$ (' P '). css (' font-size ', ' 12px ');
}); 4. * Selector (traverse all elements)
$ (document). Ready (function () {
Iterate through all the elements under the form, setting the font color to red
$ (' form * '). CSS (' color ', ' #FF0000 ');
}); 5. Parallel selector
$ (document). Ready (function () {
Set the P element and the margin of the DIV element to 0
$ (' P, div '). css (' margin ', ' 0 ');
});

Cascade selector:





$ ("Form input") select the INPUT element in all form elements


$ ("#main > *") Select all child elements of the ID value of main


$ ("label + input") selects the next INPUT element node for all the label elements, and the test selector returns all input label elements immediately following the label label with an input label


$ ("#prev ~ div") sibling selector, which returns all the div tags that belong to the same parent element for a LABEL element with ID prev











Filter Selector








Basic Filter Selector:





$ ("Tr:first") selects the first of all TR elements


$ ("Tr:last") selects the last of all TR elements


$ ("Input:not (: Checked) + span") filter out: All input elements of the checked selector





$ ("Tr:even") Select all TR elements of the 0,2,4 ... Element (Note: Since the selected element is an array, the ordinal number is starting at 0)





$ ("tr:odd") Select all TR elements of the 1,3,5 ... An element


$ ("Td:eq (2)") select the TD element with the serial number 2 in all TD elements


$ ("TD:GT (4)") Select all TD elements with serial number greater than 4 in TD elements


$ ("Td:ll (4)") Select all TD elements with a serial number less than 4 in the TD element








Content Filter Selector:





$ ("Div:contains (' John ')") Select elements in all div that contain John text


$ ("Td:empty") selects all arrays of TD elements that are empty (and not including text nodes)


$ ("Div:has (P)") Select all DIV elements that contain p tags


$ ("td:parent") Select all array of elements with TD as parent node








Visual Filter Selector:





$ ("Div:hidden") Select all the hidden div elements


$ ("div:visible") Select all the visual div elements








Attribute Filter Selector:





$ ("Div[id]") Select all DIV elements that contain ID attributes


$ ("input[name= ' newsletter ']") selects all input elements that have the Name property equal to ' newsletter '





$ ("input[name!= ' newsletter ']") selects all input elements that are not equal to ' newsletter ' for all name properties





$ ("input[name^= ' News") selects all the input elements with the name attribute beginning with ' News '


$ ("input[name$= ' News '") Select all the input elements with the name attribute ending with ' news '


$ ("input[name*= ' Man ']") Select all the name attributes containing the ' news ' INPUT element





$ ("input[id][name$= ' man ')" can use multiple properties for joint selection, which is to get all the elements that contain the id attribute and then the attribute ends with a man








child element Filter Selector:





$ ("div span:first-child") returns an array of the first child nodes of all DIV elements


$ ("div span:last-child") returns an array of the last nodes of all DIV elements


$ ("div button:only-child") returns an array of all child nodes in all div with only one child node








Form element selector:





$ (": Input") Select all form input elements, including input, textarea, select and button


$ (": Text") Select all text input elements


$ (":p assword") Select all password input elements


$ (": Radio") Select all radio input elements


$ (": CheckBox") Select all checkbox input elements


$ (": Submit") Select all submit input elements


$ (": Image") Select all image input elements


$ (": Reset") Select all reset input elements


$ (": Button") Select All button input elements


$ (": File") Select all file input elements


$ (": Hidden") Select the hidden fields of all input elements or forms that are of type hidden








Form element Filter Selector:





$ (": Enabled") Select all operable form elements


$ (":d isabled") Select all of the form elements that are not operable


$ (": Checked") Select all of the checked form elements


$ ("Select Option:selected") Select the element to be selected in the child elements of all Select

Here is a table for everyone's reference

Selector	Describe	Return	Example
Basic Selector
#id	Matches an element based on the given ID	A single element	$ ("#test") select an element with the ID test
. class	Matches the element based on the given class name	Collection elements	$ (". Test") Select element with test class
Element	Matches the element based on the given element name	Collection elements	$ ("P") Select all p elements
*	Match all elements	Collection elements	$ ("*") Select all elements
Selector1,selector2,....., Selectorn	The elements that match each selector are merged and returned together	Collection elements	$ ("Div,span,p.myclass") Select all Div,span and a set of elements that have a P label of class MyClass
Hierarchy Selector
$ ("ancestor descendant")	Select all descendant (descendant) elements in the ancestor element	Collection elements	$ ("div span") Select all span elements in all div
$ ("Parent > Child")	Select the child element under the parent element, which is different from $ ("ancestor descendant"), and $ ("ancestor descendant") to select descendant elements	Collection elements	$ ("Div>span") Select the name under the DIV element to be a child element of span
$ ("prev + next")	Select the next element immediately after the Prev element	Collection elements	$ (". One+div") Select the next div element with class one
$ ("prev~siblings")	Select all siblings elements after the Prev element	Collection elements	$ ("#two ~div") Select all div sibling elements after the element with ID two
Basic Filter Selector
: A	Select the first element	A single element	$ ("Div:first") selects the first DIV element in all DIV elements
: Last	Select the last Element	A single element	$ ("Div:last") selects the last div element in all DIV elements
: Not (selector)	Removes all elements that match a given selector	Collection elements	$ ("Input:not (. MyClass)") Select the element that class is not MyClass
: Even	Select the index is all the elements of an even number, the index is starting from 0	Collection elements	$ ("input:event") Select INPUT element with an even number index
: Odd	Select the index is an odd number of all elements, the index is starting from 0	Collection elements	$ ("input:odd") select an odd INPUT element for an index
: EQ (Index)	Select the element with index equal to index (index starting from 0)	Collection elements	$ ("Input:eq (1)") Select INPUT element with index equal to 1
: GT (Index)	Select an element with index greater than index (index starting from 0)	Collection elements	$ ("INPUT:GT (1)") Select INPUT element with index greater than 1 (note: Greater than 1, excluding 1)
: LT (Index)	Select an element with index less than index (index starting from 0)	Collection elements	$ ("Input:lt (1)") Select INPUT element with index greater than 1 (note: Less than 1, excluding 1)
: Header	Select all the header elements, such as H1,h2,h3	Collection elements	$ (": Header") Select all H1,h2,h3 in the Web page ...
: Animated	Select all elements that are currently executing the animation	Collection elements	$ ("div:animted") Select the div element that is executing the animation
Content Filter Selector
: Contains (text)	Select elements with text content of "text"	Collection elements	$ ("Div:contains (' Me ')") Select the div element that contains the text "I"
: Empty	Select an empty element that does not contain child elements or text	Collection elements	$ (div:empty) Select a div empty element that does not contain resources (including text elements)
: Has (selector)	Select the element that contains the element that the selector matches	Collection elements	$ ("Div:has (P)") select the div element that contains the P element
:p arent	Select elements that contain child elements or text	Collection elements	$ ("div:parent") Select a DIV element that has child elements (including text elements)
Visibility Filter Selector
: Hidden	Select all elements that are not visible	Collection elements	$ (": Hidden") selects all elements that are not visible. Including the "Input type=" hidden "/", "div style=" display:none "and" div style= "Visibility:hidden" and other elements. If you want to select only the INPUT element, you can use $ ("Input:hidden")
: Visible	Select all visible elements	Collection elements	$ ("div:visible") Select all the visible div elements
Attribute Filter Selector
[Attribute]	Select the element that owns this property	Collection elements	$ ("Div[id]") Select the element that owns the property ID
[Attribute=value]	Select the element of value for the property	Collection elements	$ ("div[title=test]") Select a DIV element with property title "Test"
[Attribute!=value]	To select an element of the property that is not equal to value	Collection elements	$ ("div[title!=test]") Select the Divy element with the property title not equal to "test" (note: a DIV element with no attribute title is also selected)
[Attribute^=value]	Select the element that the value of the property starts with	Collection elements	$ ("div[title^=test]") Select the div element with property title starting with "Test"
[Attribute$=value]	Select the element that ends the value of the property	Collection elements	$ ("div[title$=test]") Select the div element with property title ending with "test"
[Attribute*=value]	Select the element with value for the property	Collection elements	$ ("div[titel*=test]") Select the div element containing ' test ' in the property title
[Selector1] [Selector2] [Selectorn]	The property selector is merged into a composite property selector that satisfies multiple conditions. Each time you choose, reduce the scope once.	Collection elements	$ ("div[id][title$= ' Test ']") Select the div element that owns the property ID and the property title ends with "test"
child element Filter Selector
: Nth-child (Index/event/odd/equation)	Select the index child element or parity element under each parent element. (index from 1)	Collection elements	: EQ (index) matches only one element, and: Nth-child will match elements for each parent element, and: The Index of Nth-child (index) starts at 1, and EQ (index) is from 0.
: Frist-child	Select the first child element of each parent element	Collection elements	: First returns only a single element, and: The First-child selector matches each parent element. For example $ ("ul li:first-child"); Select the first LI element in each UL
: Last-child	Select the last child element of each parent element	Collection elements	Similarly,: Last returns only a single element, and: The Last-child selector matches the final child element for each parent element. For example $ ("ul li:last-child"); Select the last Li element in each UL
: Only-child	If an element is the only child element in its parent element, it will be matched. If the parent element contains other elements, it will not be matched	Collection elements	$ (UL Li:only-child) in the UL selection is the only element of the LI element
Form Object Properties Filter Selector
: Enabled	Select all available elements	Collection elements	$ ("#form1: Enabled") Select all available elements within a form with ID "Form1"
:d isabled	Select all unavailable elements	Collection elements	$ ("#form2:d isabled") Select all unavailable elements in a form with id "Form2"
: Checked	Select all selected elements (Radio box, check box)	Collection elements	$ ("input:checked") selects all selected input elements
: Selected	Select All selected option elements (drop down list)	Collection elements	$ ("select:selected"); Select all selected option elements
Form Object Properties Filter Selector
Collection elements	Collection elements	Collection elements	Collection element A

Ways to insert Nodes

Method	Describe	Example
Append ()	Append content to each matching element	HTML code: "P" I want to say "/P" jquery Code: $ ("P"). Append ("B" Hello "//"); Results: "P" I would like to say: "B" Hello "//" "/P"
Appendto ()	Chases all matching elements into the specified element. In fact, using this method reverses the operation of General $ (A). Append (b), not chasing B to a, but appending A to B	HTML code: "P" I want to say "/P" jquery Code: $ (hello "B"). Appendto ("P"); Results: "P" I would like to say: "B" Hello "//" "/P"
Prepend ()	Like each matching element of the internal front content	HTML code: "P" I want to say "/P" jquery Code: $ ("P"). Prepend ("B" Hello "//"); Results: "P" "B" Hello "/" I would like to say: "/P"
Prependto ()	All matching elements are placed in front of the specified element. In fact, using this method reverses the normal $ (A). Prepend (b) operation, instead of placing B in front of a, but placing A before the B	HTML code: "P" I want to say "/P" jquery Code: $ ("B" Hello "/"). Prependto ("P"); Results: "P" "B" Hello "/" I would like to say: "/P"
After	Insert content after each matching element	HTML code: "P" I want to say "/P" jquery Code: $ ("P"). After ("B" Hello "//"); Results: "P" I would like to say: "/P" "B" Hello "/"
InsertAfter ()	Inserts all matching elements behind the specified element. In fact, using this method reverses the normal $ (A). After (b) operation, instead of inserting b behind a, insert a into B	HTML code: "P" I want to say "/P" jquery Code: $ ("B" Hello "/"). InsertAfter ("P"); Results: "P" I would like to say: "/P" "B" Hello "/"
Before ()	Insert content before each matching element	HTML code: "P" I want to say "/P" jquery Code: $ ("P"). Before ("B" Hello "//"); Results: "B" Hello "/" "P" I would like to say: "/P"
InsertBefore ()	Inserts all matching elements in front of the specified element. In fact, using this method reverses the normal $ (A). Before (b) operation, instead of inserting b in front of a, but inserting a in front of B	HTML code: "P" I want to say "/P" jquery Code: $ ("B" Hello "/"). InsertBefore ("P"); Results: "B" Hello "/" "P" I would like to say: "/P"

Load () method parameter interpretation

Parameter name	Type	Description
Url	String	Request URL address of HTML page
Data (optional)	Object	Key/value data sent to the server
Callback (optional)	Function	callback function when the request completes, whether the request succeeds or fails

$.get () Method parameter interpretation

parameter name Called type description url String The URL address of the requested HTML page data (optional) Object sent to the server's Key/value will act as a Querystri Ng the callback function when callback (optional) function Load succeeds is attached to the request URL (only if the return state of the response is Success to call this method automatically passes the request result and state to the method type (optional) String Server return content format, including X Ml.html.script.json.text and _default

Parameter name	Type	Description