Selectors in jquery

Source: Internet
Author: User
Tags jquery library

With the selector $ in the jquery library, the thread can get a reference to the interface element so that the ready (), click () method can be called to associate the user event with the action method, and also call Show (), Hide (), toggle (), Slideup (), Slidedown () implements jquery's built-in animation effects.

Further, if you use jquery easing, the arguments for the corresponding function are not strings but dictionaries, and you can get rich results. The code for using jquery easing is as follows:

$ (Element). Slideup ({           easing:method,      

Parameter duration: Defines the animation motion time, milliseconds, actually is the speed, the time is shorter, the movement speed is quicker.
Parameter easing: Specify the animation effect, easing JS provides a variety of animation effects, there are uniform motion, variable acceleration motion, cushioning the effect of fluctuations.
Parameters complete: After the end of the animation callback function callback, you can customize the call function after the end of the animation.

Of course it's going to be first or an element. Here's how to use selectors:

$("#myELement"Select an element with an ID value equal to myelement, the ID value cannot be duplicated in the document only one ID value is myelement so get the unique element $ ("Div"Select all div tag elements, return the DIV element array $ (". MyClass"Select all elements of CSS using the MyClass class $ ("*"Select all the elements in the document, and you can select them in a variety of ways: for example, $ ("#myELement, Div,.myclass") Cascade selector: $ ("Form Input"Select all of the input elements in the form element $ ("#main > *"Select all the child elements of the ID value of main, $ ("label + input"selects the next INPUT element node of all the label elements, and the test selector returns a LABEL element with all input tags directly following the label tag ("#prev ~ Div"the sibling selector, which returns all of the tag elements that are ID prev, belongs to the same parent element of the DIV tag Base filter selector: $ ("Tr:first") Select the first $ of all TR elements ("Tr:last") Select the last $ of all TR elements ("input:not (: checked) + span"filter out: All input elements of the checked selector $ ("Tr:even"Select all the TR elements of the 0,2,4... ... Element (note: Because multiple elements are selected as an array, the sequence number is starting from 0) $ ("tr:odd"Select all the TR elements of the 1,3,5... ... Elements of $ ("Td:eq (2)"Select the TD element with the ordinal 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 $ (": Header") $("div:animated") Content Filter Selector: $ ("div:contains (' John ')"Select all the elements in the div that contain the John text $ ("Td:empty"Select all the array of TD elements that are empty (nor include text nodes) $ ("Div:has (P)"Select all DIV elements that contain the P tag $ ("td:parent"Select all the element arrays with TD as parent node to visualize the filter selector: $ ("Div:hidden"Select all of the hidden div elements $ ("div:visible"Select all of the visual div element properties of the filter selector: $ ("Div[id]"Select all DIV elements that contain the id attribute $ ("input[name= ' Newsletter ']"Select all the Name property equals'Newsletter'the INPUT element $ ("input[name!= ' Newsletter ']"Select all the Name property is not equal to'Newsletter'the INPUT element $ ("input[name^= ' News ']") Select all the name properties to'News'the INPUT element starting with $ ("input[name$= ' News ']") Select all the name properties to'News'the end of the INPUT element $ ("input[name*= ' man ']") Select all the name properties that contain'News'the INPUT element $ ("input[id][name$= ' man ']"You can use multiple properties for federated selection, which is to get all the element elements that contain the id attribute and then the property to end with man: $ ("ul Li:nth-child (2)"),$("ul li:nth-child (ODD)"),$("ul Li:nth-child (3n + 1)")  $("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 of the div that have only one child node in the form element selector: $ (": Input"Select all the form input elements, including input, textarea, select, and button $ (": Text"Select all the text INPUT element $ (":p Assword") Select all the password input elements $ (": Radio") Select all the radio input elements $ (": CheckBox") Select all the checkbox INPUT element $ (": 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 form's hidden fields 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"Select the text value of the previous TD for the selected element in all of the Select's child elements to select a name of "S_03_22″" ("input[@ name") of the input text box .=S_03_22]. The parent (). Prev (). Text () name begins with "S_" and is not $ ("input[@ name" ending with "_r" ).^='S_']“). not("[@ name $='_r'] ") A value of $ (" input[@ name ") selected by radio named Radio_01=Radio_01]        [@checked] "). Val (); $("A B"finds all child nodes under the a element, including the non-direct child node $ ("a>b"find the direct child node under the A element $ ("a+b"find the sibling node after the a element, including the non-direct child node $ ("a~b"find the sibling nodes that follow the a element, not including the non-direct child nodes1. $ ("A B"Find all the sub-nodes under the a element, including the non-direct child node Example: Find all the INPUT element HTML code in the form:<form><label>name:</label><input name="name"/><fieldset> <label>Newsletter:</label> <input name="Newsletter"/></fieldset></form><input name="None"/>jQuery Code: $ ("Form Input") Results: [<input name="name"/&gt, <input name="Newsletter"/> ]  2. $ ("a>b"Find an example of a direct child node below the A element: matches all the child input elements in the form. HTML Code:<form><label>name:</label><input name="name"/><fieldset> <label>Newsletter:</label> <input name="Newsletter"/></fieldset></form><input name="None"/>jQuery Code: $ ("form > Input") Results: [<input name="name"/> ]  3. $ ("a+b"find the sibling node behind the a element, including the non-direct child node example: matches all the INPUT element HTML code that follows the label:<form><label>name:</label><input name="name"/><fieldset> <label>Newsletter:</label> <input name="Newsletter"/></fieldset></form><input name="None"/>jQuery Code: $ ("label + input") Results: [<input name="name"/&gt, <input name="Newsletter"/> ]   4. $ ("a~b"Find the sibling nodes that follow the a element, not including the non-direct child nodes

Here's an example: find all input elements with form peers

jQuery Code: $ ("form ~ input"<input name= "None"/>]

Selectors in jquery

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.