jquery selector (name, attribute, Element) Daquan

JQuery selectors can be broadly divided into: basic selector, hierarchy selector, filter selector, form selector. Filter selectors can be divided into: Simple filter selector, Content filter selector, visibility filter selector, attribute filter selector, child element filter Selector, Form object property filter Selector. The selector is the most basic of jquery, and the following describes the use of 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 must first select the elements to proceed to the next step. jquery uses common CSS selectors and XPath selectors, which are familiar to the vast majority of web designers and developers. In addition, there are some jquery custom selectors. These selectors make jquery exceptionally flexible and easy to learn. Understanding how selectors work can make a solid foundation for leveraging the power of jquery. In situations where CSS selectors are too weak, filters give you more flexibility in selecting elements based on DOM features. Filters and selectors are often used in conjunction to provide depth control when selecting specific elements based on a criterion, such as when an element is selected based on the position of the element within a set of elements, or on the visibility of the element, or on certain attributes of the form element, such as checked/unchecked or disabled. jquery provides a range of methods for adding, removing, or styling a CSS class for DOM elements.

Basic Selector

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

$ (document). Ready (function () {
$ (' #one '). CSS (' background ', ' #000 ');
}); 2. Class selector (Traverse CSS class Element)
Sets 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 () {
Traverse all the elements under the form to set the font color to red
$ (' form * '). CSS (' color ', ' #FF0000 ');
}); 5. Parallel selector
$ (document). Ready (function () {
Set the margin of P element and DIV element to 0
$ (' P, div '). css (' margin ', ' 0 ');
});

Cascade selector:

$ ("form input") selects all the input elements in the form element
$ ("#main > *") Select all child elements with an ID value of main
$ ("label + input") selects all of the next INPUT element nodes of the label element, and the test selector returns all input label elements that follow the label tag directly followed by an input tag
$ ("#prev ~ div") sibling selector, which returns all the div tags that belong to the same parent element for the 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") filters out: All input elements of the checked selector

$ ("Tr:even") Select all of the TR elements of the section 0,2,4 ... Element (Note: The sequence number starts at 0 because the selected number of elements is an array.)

$ ("tr:odd") Select all of the TR elements of the section 1,3,5 ... An element
$ ("Td:eq (2)") select the TD element with the number 2 in all TD elements
$ ("TD:GT (4)") Select all TD elements in the TD element with an ordinal greater than 4
$ ("Td:ll (4)") selects all TD elements in the TD element with an ordinal less than 4


Content Filter Selector:

$ ("Div:contains (' John ')") Select all the elements in the div that contain the John text
$ ("Td:empty") Select all the arrays of TD elements that are empty (nor include text nodes)
$ ("Div:has (P)") Select all DIV elements that contain p tags
$ ("td:parent") Select all the element array with TD as parent node


Visual Filter Selector:

$ ("Div:hidden") Select all the hidden div elements
$ ("div:visible") Select all of the visual DIV elements


Attribute Filter Selector:

$ ("Div[id]") Select all DIV elements that contain the id attribute
$ ("input[name= ' newsletter ')" selects all the name attributes equal to the INPUT element of ' newsletter '

$ ("input[name!= ' newsletter ')" selects all the name attribute not equal to ' newsletter ' INPUT element

$ ("input[name^= ' News ')") Select all the name attributes to start with ' news ' INPUT element
$ ("input[name$= ' News ')") Select all the name attributes to end with ' news ' INPUT element
$ ("input[name*= ' Man ')") Select all the name attributes that contain the ' news ' INPUT element

$ ("input[id][name$= ' Man ')") can use multiple attributes for federated selection, which is to get all the elements that contain the id attribute and then the property 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 the child nodes that have only one child node in all Div


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 the checkbox input elements
$ (": Submit") Select all the submit input elements
$ (": Image") Select all the image input elements
$ (": Reset") Select all the reset input elements
$ (": Button") Select all the button input elements
$ (": File") Select all the file input elements
$ (": Hidden") Select all input elements of type hidden or hidden fields of the form


Form element Filter Selector:

$ (": Enabled") Select all the actionable form elements
$ (":d isabled") Select all the non-actionable form elements
$ (": Checked") Select all of the checked form elements
$ ("select Option:selected") selects all selected elements in the child element of the Select

Take a table below for your reference

Selector Selector	Describe	Return	Example
Basic Selector
#id	Matches an element according to the given ID	Single element	$ ("#test") select element with ID test
. class	Matches the element according to the given class name	Collection elements	$ (". Test") to select an element of class test
Element	Matches an element based on the given element name	Collection elements	$ ("P") selects all P-elements
*	Match all elements	Collection elements	$ ("*") Select all elements
Selector1,selector2,....., Selectorn	Merges the elements of each selector to return together	Collection elements	$ ("Div,span,p.myclass") selects all Div,span and a set of elements that have a P tag of class MyClass
Hierarchy Selector
$ ("ancestor descendant")	Selects all descendant (descendant) elements in the ancestor element	Collection elements	$ ("div span") selects all the span elements in all div
$ ("Parent > Child")	Select the child element under the parent element, which differs from $ ("ancestor descendant"), and $ ("ancestor descendant") selects the descendant element	Collection elements	$ ("Div>span") Select child element under DIV element named span
$ ("prev + next")	Select the next element immediately after the Prev element	Collection elements	$ (". One+div") Select the next div element of class
$ ("prev~siblings")	Selects all siblings elements after the Prev element	Collection elements	$ ("#two ~div") selects all the div sibling elements that follow the element with the ID of both
Basic Filter Selector
: First	Select the first element	Single element	$ ("Div:first") selects the first DIV element in all DIV elements
: Last	Select the last Element	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 an element of class other than MyClass
: Even	Select all elements with an even number of indexes, starting from 0	Collection elements	$ ("input:event") Select INPUT element with an even number of indexes
: Odd	Selects all elements with an odd number of indices, starting from 0	Collection elements	$ ("input:odd") Select index is an odd INPUT element
: EQ (Index)	Select an 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, not including 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, not including 1)
: Header	Select all the caption elements, such as H1,H2,H3, etc.	Collection elements	$ (": Header") Select all the h1,h2,h3 in the Web page ...
: Animated	Selects all elements that are currently performing an animation	Collection elements	$ ("div:animted") pick the div element that is performing the animation
Content Filter Selector
: Contains (text)	Select the element with the text content as "text"	Collection elements	$ ("Div:contains (' I ')") Select the div element that contains the text "I"
: Empty	Select empty elements that do 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 an element that contains 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. Elements such as "Input type=" hidden "/", "div style=" display:none "and" div style= "Visibility:hidden" are included. If you want to select only the INPUT element, you can use $ ("Input:hidden")
: Visible	Select all visible elements	Collection elements	$ ("div:visible") selects all 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 an element with the value of a property	Collection elements	$ ("div[title=test]") Select the div element with the property title test
[Attribute!=value]	Select an element of an attribute that is not equal to value	Collection elements	$ ("div[title!=test]") Select the Divy element with the attribute title not equal to "test" (note: div elements with no attribute title will also be selected)
[Attribute^=value]	Select the element with the value of the property starting with value	Collection elements	$ ("div[title^=test]") Pick property title div element starting with "test"
[Attribute$=value]	Select an element that ends with the value of the property as value	Collection elements	$ ("div[title$=test]") Pick property title div element ending with "test"
[Attribute*=value]	Select the value of the attribute that contains the element of value	Collection elements	$ ("div[titel*=test]") Select attribute title contains ' test ' div element
[Selector1] [Selector2] [Selectorn]	A composite property selector is combined with a property selector to satisfy multiple conditions. Reduce the range once per selection.	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 the odd and even element under each parent element. (index from 1)	Collection elements	: EQ (index) matches only one element, whereas: Nth-child will match elements for each parent element, and the index of Nth-child (index) starts at 1, and: EQ (index) is calculated from 0
: Frist-child	Select the first child element of each parent element	Collection elements	: First returns only a single element, whereas: The First-child selector will match each parent element with the one child 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, whereas: The Last-child selector matches each parent element to the final child 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 UL Select the LI element that is the only child element
Form object property Filter Selector
: Enabled	Select all available elements	Collection elements	$ ("#form1: Enabled") selects all available elements in a form with id "Form1"
:d isabled	Select all unavailable elements	Collection elements	$ ("#form2:d isabled") Select all the unavailable elements in the 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 property Filter Selector
Collection elements	Collection elements	Collection elements	Collection element A

Methods for inserting 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 "/C"); Results: "P" I would like to say: "B" Hello "/C" "/P"
AppendTo ()	Chases all matching elements into the specified element. In fact, using this method is reversed by the general $ (A). Append (b) operation, not to chase B to a, but to append a to B	HTML code: "P" I want to say "/P" jquery Code: $ ("B" Hello "/C"). AppendTo ("P"); Results: "P" I would like to say: "B" Hello "/C" "/P"
Prepend ()	Inside the front content like each matched element	HTML code: "P" I want to say "/P" jquery Code: $ ("P"). Prepend ("B" Hello "/C"); Results: P "B" Hello "/b" I would like to say: "/P"
Prependto ()	Place all matching elements in front of the specified element. In fact, using this method is reversed by the normal $ (A). Prepend (b) operation, which does not place B in front of a, but rather a front to B	HTML code: "P" I want to say "/P" jquery Code: $ ("B" Hello,/b "). Prependto (" P "); Results: P "B" Hello "/b" 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 "/C"); Results: "P" I would like to say: "/P" "B" Hello "/b"
InsertAfter ()	Inserts all matching elements behind the specified element. The actual use of this method is to reverse the normal $ (a). After (b) operation, instead of inserting b behind a, insert a into the back of B	HTML code: "P" I want to say "/P" jquery Code: $ ("B" Hello,/b "). InsertAfter (" P "); Results: "P" I would like to say: "/P" "B" Hello "/b"
Before ()	Insert content before each matching element	HTML code: "P" I want to say "/P" jquery Code: $ ("P"). Before ("B" Hello "/C"); Results: "B" Hello "/b" "P" I want to say: "/P"
InsertBefore ()	Inserts all matching elements to the front of the specified element. In fact, using this method is reversed by the normal $ (A). Before (b) operation, instead of inserting b into front of a, insert a into front of b	HTML code: "P" I want to say "/P" jquery Code: $ ("B" Hello,/b "). InsertBefore (" P "); Results: "B" Hello "/b" "P" I want to say: "/P"

Load () method parameter interpretation

Parameter name	Type	Description
Url	String	Request the URL address of an 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	Type	Description
Url	String	URL address of the requested HTML page
Data (optional)	Object	Key/value data sent to the server is appended as QueryString to the request URL
Callback (optional)	Function	The callback function when loading succeeds (the method is called only if the return state of response is success) automatically passes the request result and state to the method
Type (optional)	String	Format of content returned by the server, including Xml.html.script.json.text and _default

Parameter name	Type	Description

jquery selector (name, attribute, Element) Daquan