jquery selector (name, attribute, Element) Daquan

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.