Jquery is really not difficult ~ Usage and performance of the second Selector

Back to directory

After writing the first time, I saw my friends' replies and pointed out that ICodeI did not use ide because of the rush of time. I did not use ide. I forgot my case because of my poor memory. Fortunately, I went home at night and changed it with, you can't help yourself.

Starting from this lecture, We will directly contact a JQ class library to learn about JQ writing and some common JQ commands. Today we mainly talk about the selector in JQ, this is also a major feature of JQ. It can be seen from its name jquery that the main skill is reflected in the query.

For the code written in <SCRIPT> </SCRIPT>, we generally write the code in the window in the JS environment. onload = function (){...} in the code block, this means that after the page is loaded, the JS Code block is executed. For JQ, it also has a similar method $ (function () {...}); we will write the code segment here. Sometimes, if you do not want to write it like this (JS Code is usually put in the

Id Selector

 
Alert ($ ("# Name"). Val ());//Value of the input element whose output ID is name
 

Class Selector

Alert ($ (". Nameclass"). Val ());//Output the value of an input element with the CSS name nameclass
 

Special Selector

 
Alert ($ ("Input [type = text] [name = Name]"). Val ())//Value of the input element whose output type is text and name
 

 //  Select the specified select element:  Function chekstatus (o) {$ (  '  # Orderstatus  ' ). Find ('  Option [value =  ' + O + '  ]  ' ). ATTR ( '  Selected  ' , True  ); $ (  '  # Search_btn  '  ). Trigger ();}  // Select All $ ( '  # Selectall  '  ). Click (function (){  If ( This . Checked  ) {$ (  '  . Forshop: Not (: checked)  '  ). Each (function (){  This . Click ();});}  Else  {$ (  '  . Forshop: checked  '  ). Each (function (){  This  . Click ();});}});  //  Whether selected items exist $ ( '  # Delselectproduct  ' ). Click (function (){  If ($ ( '  . Protuctitem: checked  ' ). Size () = 0  ) {Alert (  '  Select baby  '  );  Return   False  ;}  // Select the specified option based on the index and add the CSS style for the option  Function chekstatus (o) {$ (  '  # Orderstatus  ' ). Find ( '  Option  ' ) [O]. Selected = True  ; $ (  '  # Tabs  ' ). Find ( '  Dd ' ). Removeclass ( '  Cur  ' ) [O]). addclass ( '  Cur  '  ); $ (  '  # Search_btn  ' ). Trigger ( '  Click  '  );}  // Adds a color-changing effect to the row of the table, and then changes the color after you click the row.      VaR $ TRS = $ ( "  # Define ke_div> table> tbody> tr  " ); //  Select all rows $ TRS. Filter ( "  : Odd  " ). Addclass ( "  Odd  " ); //  Add an odd style to an odd number of rows $ TRS. Filter ( "  : Even  " ). Addclass ( "  Even  " ); //  Add an odd style to an even row 

The following are some selector skills that we need to know.

             //  (1) wildcard: $ ( "  Input [ID ^ = 'code']  " ); // All input tags whose ID attribute starts with code $ ( "  Input [ID $ = 'code']  " ); //  All input tags whose ID attribute ends with code $ ( "  Input [ID * = 'code']  " ); //  All input tags whose ID attribute contains code  //  (2) Select an index $ ( " Tbody TR: Even  " ); //  Select All tr tags with an even Index $ ( "  Tbody TR: odd  " ); //  Select All tr tags with an odd Index  //  (3) obtain the number of inputs of the next level node of jqueryobj. Jqueryobj. Children ( "  Input  " ). Length;  //  (4) obtain all the <A> labels under the child node with the class as main $ ( "  . Main>  "  );  //  (5) Select the adjacent tag Jqueryobj. Next ( "  Div  " ); //  Get a div next to the jqueryobj tag. nextall gets all //  (6) Select an index $ ( "  Div  " ). Eq ( 0 ); //  Obtain the first Div tag  //  Filter $ ( "  # Code input: Not ([ID ^ = 'code'])  " ); // The ID is a code tag that does not contain all input tags whose IDs start with code. 

 

Some selectors are frequently used in projects as I listed above. In fact, every one of us can write specific JQ code as long as we understand their direct positive meanings, of course, whether the code efficiency is efficient requires further efforts,

In short, to achieve the basic needs of the function, just the first step!

TIPS: $ ("#...") the return value of these selectors is a JQ object, and it can directly operate internal events of JQ, such as click and Mouseover events.

Now, we have finished writing the JQ selector. Thank you for reading it!

Back to directory