jquery Selector Usage Notes

In jquery The selector is a very important thing, almost do nothing without it, below I summed up the use of jquery several selectors. To facilitate the use of directly behind!!

Hierarchy selector:

1.find ()://Find the element's child element and the grandson element (and all descendant elements). $ (' #box '). Find (' P '). CSS (' Color ', ' white ');//id for all P-tags under box change to     2.children ()://Find the element's child elements. $ (' #box '). Children (' P '). CSS (' Color ', ' white ');//id for all child elements of box The color of the P tag is   3.next ()://Find the next element of the element's same level element. $ (' #box '). Next (' P '). css (' font-size ', ' 26px ');//will be set to 26px with the next P-label font with ID box at the same level, if the next primary color is not a P-label then no effect $ (' #box '). Next (). CSS (' font-size ', ' 26px ');//will be set to 26px 4.nextAll () with the next label font with ID box at the same level     : all elements that match the same level as the element are found. $ (' #box '). Nextall (' P '). CSS (' Color ', ' red ');//will be set to Red $ (' #box ') with all P-label colors at the same level as Id=box. Nextall (). CSS (' Color ', ' red '); /will be with Id=box the same level after all the primary colors are set to Red     5.prev (), Prevall ()//And the above 3, 4 is just the difference between the former and the latter. 6.siblings ()://All of the sibling elements. $ (' #box '). Siblings (' P '). CSS (' color ', ' green ');//id=box all of the sibling elements for P tags are set to Green $ (' #box '). Siblings (). CSS (' Color ', ' Green '); all sibling elements of//id=box are set to    7.nextUntil ()://Search down until an element is encountered to stop the assignment action. $ (' #box '). Nextuntil (' P '). CSS (' color ', ' orange ');//The downward sibling of id=box is colored orange until it meets

Cascade selector:

$ ("form input")         //Select all the input elements in the form element $ ("#main > *")         //Select all the child elements of the ID value for main ("label + input")/     / Selects the next INPUT element node of all the label elements, and the test selector returns a label tag with all input tags followed by a label ("#prev ~ div")       //sibling selector. The selector returns all the DIV tags that belong to the same parent element for the label element with ID prev

Basic Filter Selector:

$ ("Tr:first")              //Select all TR elements of the first $ ("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 section 0,2,4 ... Element (Note: Because the selected element is an array, the ordinal is starting from 0) $ ("tr:odd")             //   Select all the TR elements of the 1,3,5 ... Elements $ ("Td:eq (2)")          //Select all TD elements in the TD element   with ordinal 2 ("TD:GT (4)")            //Select all TD elements in TD element 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 John text $ ("Td:empty")           //Select all the array of TD elements that are empty (also excluding 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 hidden div elements $ ("div:visible")        //Select all the visual div elements

　　

Attribute Filter Selector:

$ ("Div[id]")              //Select all DIV elements containing the id attribute $ ("input[name= ' newsletter ')")    //Select all the name attribute equals ' newsletter ' of the INPUT element $ (" input[name!= ' newsletter ')  //Select all the name attribute not equal to ' newsletter ' of the INPUT element $ ("input[name^= ' News ']")        // Select all the name attributes to start with ' news ' INPUT element $ ("input[name$= ' News '")        //Select all the name attribute with ' news ' to end the INPUT element $ ("input[name*= ' Man ']")        //  Select all the Name property containing the ' news ' INPUT element $ ("input[id][name$= ' Man ')")   //can use multiple attributes for federated selection, The selector is to get all the elements that contain the id attribute and then the property ends with a man

child element Filter Selector:

$ ("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 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 the text INPUT element $ (":p Assword")         //  Select all password INPUT element $ (": Radio")                 //  Select all radio INPUT element $ (": 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 element $ (": Button")               //Select all the button INPUT element $ (": File")                    //Select all the file INPUT element $ (": 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-operational form elements $ (": Checked")          //  Select all checked elements of the form element $ ("SELECT option:selected")//Select all the elements in the sub-element of the Select to be selected

　　

　　

Common methods for finding elements

$ ("#myELement")//select id value equals myelement element, id value cannot be duplicated in document only one ID value is myelement so get the unique element $ ("div")//Select all div tag element, return DIV element array $ (". MyClass")//Select all elements of CSS using the MyClass class $ ("*")//Select all the elements in the document, you can use a variety of options for joint selection: for example $ ("#myELement, Div,.myclass")// Select the element with ID myelement and all div and class name MyClass $ ("input[@ name =s_03_22]"). Parent (). Prev (). Text ()//Select an input with the name "S_03_22″" The text value of the previous TD of the text box is $ ("input[@ name ^= ' S_"). Not ("[@ name $= ' _r ']")//The name begins with "S_" and is not $ ("_r") ending with "input[@" =radio_01][ @checked]). Val ();//A radio named radio_01 a value of $ ("a B")  //Find all child nodes under the a element, including non-direct child nodes $ ("a>b")  //Find direct child nodes below the A element $ ("A+b")//Find the sibling node behind the a element, including the non-direct child node $ ("a~b")//Find the sibling node behind the a element, excluding the non-direct child nodes

　　

　　

jquery Selector Usage Notes