jquery Basic Selector Summary

First, the basic selector

Case:

  <input type= "button" value= "selects the element with ID one." id= "btn1"/>  /*  CSS (name, value) * Name: Specifies the style name that corresponds to the content of the CSS Help document * * Value: Specifies the style value *  /$ ("#one"). CSS ("Background", "yellow");

  <input type= "button" value= "selects all elements of Class Mini." Id= "btn2"/>//jquery  supports operations similar to batching  $ (". Mini"). CSS (" Background "," yellow ");

  <input type= "button" value= "SELECT element name is all elements of Div." id= "Btn3"/>  $ ("div"). CSS ("Background", "yellow");

  <input type= "button" value= "selects all elements." id= "Btn4"/>  $ ("*"). CSS ("Background", "yellow");

  <input type= "button" value= "selects all of the span elements and the element with the ID of both." Id= "btn5"/>  //Multiple selectors are used side by side, with "," separating (the set)  $ ("span, #two "). CSS (" Background "," yellow ");

Second, level selector

Case:

  <input type= "button" value= "selects all div elements within the body." Id= "btn1"/>  //ancestor element and descendant element relationship  $ ("Body div"). CSS (" Background "," yellow ");

  <input type= "button" value= "within the body, select the child element is div. "Id=" btn2 "/>  //Parent-child element relationship  $ (" Body>div "). CSS (" Background "," yellow ");

  <input type= "button" value= "selects the next DIV element with ID one." id= "Btn3"/>  $ ("#one +div"). CSS ("Background", "yellow");

  <input type= "button" value= "selects all the div sibling elements that follow the element with the ID of". "Id=" Btn4 "/>  $ (" #two ~div "). CSS (" Background "," Yellow ");

  <input type= "button" value= "selects all of the div sibling elements for the element with ID of both." Id= "Btn5"/>  $ ("#two"). Siblings ("div"). CSS (" Background "," yellow ");

Three, basic filter selectors

Case:

  <input type= "button" value= "selects the first DIV element." id= "Btn1"/>  $ ("Div:first"). CSS ("Background", "yellow");

  <input type= "button" value= "selects the last div element." id= "btn2"/>  $ ("Div:last"). CSS ("Background", "yellow");

  <input type= "button" value= "selects all div elements that are not class one." Id= "Btn3"/>  //class is not an element of one, containing  $ ("div:") without the class attribute. Not ('. One ') '). CSS ("Background", "yellow");

  <input type= "button" value= "select the div element with an even number of index values." Id= "Btn4"/>  $ ("Div:even"). CSS ("Background", "yellow");

  <input type= "button" value= "select the div element with an odd index value." Id= "Btn5"/>  $ ("div:odd"). CSS ("Background", "yellow");

  <input type= "button" value= "selects an element with an index value equal to 3." Id= "Btn6"/>  $ ("Div:eq (3)"). CSS ("Background", "yellow");

  <input type= "button" value= "Select an element with an index value greater than 3." id= "Btn7"/>  $ ("DIV:GT (3)"). CSS ("Background", "yellow");

  <input type= "button" value= "Select an element with an index value of less than 3." id= "Btn8"/>  $ ("Div:lt (3)"). CSS ("Background", "yellow");

  <input type= "button" value= "selects all header elements." Id= "Btn9"/>  $ (": Header"). CSS ("Background", "yellow");

  <input type= "button" value= "selects all elements that are currently performing the animation." Id= "Btn10"/>  $ (": Animated"). CSS ("Background", "yellow");

Iv. Content Filter Selector

Case:

  <input type= "button" value= "select the div element that contains the text" Di "." Id= "Btn1"/>  $ ("Div:contains (' di ')"). CSS ("Background", " Yellow ");

  <input type= "button" value= "selects a div empty element that does not contain child elements (or text elements)." Id= "btn2"/>  $ ("Div:empty"). CSS ("Background", " Yellow ");

<span style= "White-space:pre" ></span>  <input type= "button" value= "selects the div element that contains the class mini element." Id= "Btn3"/>  $ ("Div:has ('. Mini ')"). CSS ("Background" , "yellow");

  <input type= "button" value= "selects the div element that contains the child element (or text element)." Id= "Btn4"/>  $ ("div:parent"). CSS ("Background", " Yellow ");

V. Visibility Filter Selector

Case:

  <input type= "button" value= "selects all visible div elements" id= "B1"/> $ ("div:visible"). CSS ("Background", "yellow"); <input type= "button" value= "selects all elements that are not visible and uses the show () method in JQuery to display them" id= "B2"/> $ ("Div:hidden"). Show (+). CSS ("  Background "," yellow "); <input type= "button" value= "Select all the text-hidden fields and print their values" id= "B3"/>var $inputs = $ ("Input:hidden");/* * jquery provides an implicit iteration method * each (callback) * * Callback: callback function, function (Index,domele) {} * * Index: Index value * * Domele:dom Object */$inputs. Each (function (index,  Domele) {alert (Domele.value)});  <input type= "button" value= "selects all the text-hidden fields and prints their values" id= "B4"/> var $inputs = $ ("Input:hidden");/* * jquery also provides a way to implicitly iterate * Jquery.each (object,callback) * * * Jquery.each () and each () method differ: * * each (): equivalent to the instance method in Java, $ (expr). each () * * Jquery.each (): Equivalent to a static method in Java, $.each () * * Jquery.each (object,callback) * object: An object or an array that needs to be repeated. * * Callback: callback function, function (Index,domele) {} * * Index: Index value * * Domele:dom object */$.each ($inputs, function (Index,domele) {// alert (domele.value);//alert ($ (DoMEle). Val ());/* * This is used: * * refers to the current page element content, where the element content can be called the DOM object * * This use, must be in a context * * Recommended: In real development, the use of this do not use */alert ($ (this). Val ());});

VI. Attribute Selector

Case:

  <input type= "button" value= "selects the div element that contains the title of the attribute." id= "Btn1"/>  $ ("Div[title"). CSS ("Background", "yellow");

  <input type= "button" value= "select the div element with the property title value equal to" test "." Id= "btn2"/>  $ ("div[title=test]"). CSS ("background "," yellow ");

  <input type= "button" value= "select attribute title value not equal to" test "div element (will also be selected without the attribute title)." Id= "Btn3"/>  $ ("Div[title!=test ] "). CSS (" Background "," yellow ");

  <input type= "button" value= "Select a DIV element with the title value starting with" TE "." Id= "Btn4"/>  $ ("Div[title^=te]"). CSS ("Background", "Yellow");

  <input type= "button" value= "select the div element with the property title value ending with" est "." id= "Btn5"/>  $ ("div[title$=est]"). CSS ("background "," yellow ");

  <input type= "button" value= "Select attribute Title value contains" es "div element." id= "Btn6"/>  $ ("div[title*=es]"). CSS ("Background", " Yellow ");

  <input type= "button" value= "Combo Property selector, first select the div element with the attribute ID, and then in the result select the element with the title value containing" es "." id= "btn7"/>  // Multiple attribute filter selectors are used side by side (intersection)  $ ("div[id][title*=es]"). CSS ("Background", "yellow");

Sub-element Filter Selector

Case:

  <input type= "button" value= "selects the 2nd child element under each of the div parent elements of class one." Id= "btn1"/>/* * *    Sub-element filter Selector special usage, to add a space before it * * The start position of the child element filter Selector is "1" *  /$ ("Div[class=one: Nth-child (1)"). CSS ("Background", "yellow");

  <input type= "button" value= "selects the first child element under each div parent element that is class one." Id= "btn2"/>  $ ("Div[class=one]: First-child"). CSS ("Background", "yellow");

  <input type= "button" value= "selects the last child element under each div parent element that is class one." Id= "Btn3"/>  $ ("Div[class=one]: Last-child"). CSS ("Background", "yellow");

  <input type= "button" value= "If class is just a single child element under the div parent element of one, select this child element." id= "Btn4"/>  $ ("Div[class=one]: o Nly-child "). CSS (" Background "," yellow ");

Viii. Form object property Filter Selector

Case:

<button id= "BTN1" > Assignment of input to a form .</button>       /**   available elements: <input name= "Add" value= "Available text box"/>  <br/> unavailable elements: <input name= "email" disabled= "disabled" value= "Unavailable text box"/><br/> available elements: <input name = "Che" value= "Available text box"/><br/> unavailable element: <input name= "name" disabled= "disabled" value=  "unavailable text box"/><br /> *//* * val (): Get and set * get: No parameter * * Set: Transfer transfer */$ ("Input:enabled"). Val ("xxxxx");

 <button id= "BTN2" > Assignment of unavailable input in form .</button>/* * Available elements: <input NA Me= "Add" value= "Available text box"/> <br/> unavailable elements: <input name= "email" disabled= "disabled" value= "Unavailable text box"/><br/ > Available elements: <input name= "che" value= "Available text box"/><br/> unavailable element: <input name= "name" disabled= "Disabled" value= " Unavailable text box "/><br/> *//* * val (): Get and set * get: Do not pass parameter * * Settings: Transfer transfer */$ (" Input:disabled "). Val (" xxxxx "); 

 <button id= "Btn3" > get the number of checkboxes selected .</button>/* <input type= "checkbox" Name= "Newsletter" checked= "checked" value= "test1"/>test1 <input type= "checkbox" name= "Newsletter" value= "Test2 "/>test2 <input type=" checkbox "name=" Newsletter "value=" test3 "/>test3 <input type=" checkbox "Name=" Newsletter "checked=" checked "value=" test4 "/>test4 <input type=" checkbox "name=" Newsletter "value=" Test5 "/> Test5 */alert ($ ("input[name=newsletter]:checked"). length); 

  <button id= "Btn4" > Get dropdown box selected content .</button>/* * drop-down        list 1:<br/><select name= "test" multiple= " Multiple "style=" height:100px "><option> Zhejiang </option><option selected=" selected "> Hunan </option ><option> Beijing </option><option selected= "selected" > Tianjin </option><option> guangzhou </ option><option> Hubei </option></select> <br/><br/> drop-down list 2:<br/> <select name= "Test2" ><option> Zhejiang </option><option> hunan </option><option selected= "selected" > Beijing </option><option> Tianjin </option><option> Guangzhou </option><option> Hubei </option> </select> */alert ($ ("select>option:selected"). Text ());

Nine, form selector

Case:

jquery Basic Selector Summary