My Learning methods: first introduction, Advanced level! This series of articles is divided into: basic, level, simple, content, visibility, attribute, child element, form, form object attribute of 9 articles altogether.
Detailed introduction Page http://demo.jb51.net/html/jquery/jQuery-Selector.html
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>jQuery-Selectors</title> <script src=" Http://img.jb51.net/jslib/jquery /jquery-1.3.2.min.js "type=" Text/javascript ></script> <style type= "Text/css" >. div {width:95%; margin-left:15px; margin-top:15px; margin-right:15px; padding-left:5px; padding-top:5px; padding-bottom:5px; Background-color: #ccc; border: #999 1px solid; line-height:30px; font-size:13px; font-family: Microsoft Ya-hei; }. Blue{color:blue;} . Green{color:green;} . button{border:green 1px solid;width:100px;} . xiaobiao{Font-weight:bold;} . red_test{background-color:red color:white; width:300px; height:30px;} . Li_test{border: #000 1px solid;} </style> ≪/head> <body> <div class= "div" > <div >jquery-selectors (selector) use (first, basic) </div> this series of articles mainly about JQ Uery frame Selector (selectors) use method, I will be an example of the way to tell, to a simple, comprehensive basis, will not involve very deep, my learning methods: First, Advanced level! <br> This series of articles are divided into: basic, level, simple, content, visibility, attribute, child element, form, form object attribute of 9 articles. <br> you have any suggestions or comments on this series of articles please send to the mailbox: Sjzlgt@qq.com <br> because it is the first time to write a technical series of articles, it is inevitable that errors or code bugs, welcome to thank! <br> you can go to the jquery website to learn more about jquery knowledge. <br> <span ><strong> Copyright: Daytime Blog Reprint please keep the source and copyright information! </strong></span> </div> <div class= "div" > <span class= "Xiaobiao" >1. #id用法 </span><br> definition: Matches an element based on the given ID. <br> return value:element<br> parameter: ID (String): For searching, the value given in the id attribute of the element <br> instance: Change the border of the Div with id "div_red" to red <BR&G T <span > Code: $ ("#div_red"). CSS ("Border", "Red 2px solid"); <span class= "Green" >//click on the button one will execute this code </span></span><br> <div id= "div_red" > div id= "div_" Red "<input type=" button "id=" btn_red "value=" buttons One "class=" button "/> <scriptType= "Text/javascript" > $ ("#btn_red"). Click (function () {$ (#div_red). CSS ("Border", "2px solid Red"); }); </script> </div> Extensions: #id中的id可以是页面任何元素的id, such as Input,btuuon,div,table,span and so on </div> <div class= "Div" > <span class= "Xiaobiao" >2. Element usage </span><br> definition: matches all elements according to the given element name. <br> return value:array<element><br> parameter: Element (String): An element to search for. The label name that points to the DOM node. <br> Example: Change the text color in the page <P> markup to red <br> <span > Code: $ ("P"). CSS ("Color", "red"); <span class= "Green" >//Click on button Two to execute this code </span></span> <p id= "P1" >p tag 1 id= "P1" </p> <p >p Mark 2 No id</p> ; Input type= "button" id= "btn_p_red" value= "button two" class= "button"/><br> <script type= "Text/javascript" > $ ("#btn_p_red"). Click (function () {$ ("P"). CSS ("Color", "red"); }); </script> Extensions: Parameter values can be any element of the page, such as Div,button,div,table,tr,td,p,h1,span,input </div> <div class= "div" > & Lt;span class= "Xiaobiao" >3. . Class Usage </span><br> definition: Matches an element based on a given class (style name). <br> return Value:array<element><br> parameter: Class (String) one to search for (style name). An element can have more than one class (style name), as long as one fit can be matched to. <br> Example: Change the background color of the element that references the ". Red_test" style to the blue <br> <span > Code: $ (". Red_test"). CSS ("Background-color", " Blue "); <span class=" green ">//Click button Three will execute this code </span></span> <div id=" div_red_1 "class=" Red_test " > div id= "div_red_1" calss= "red_test" </div> <div id= "Div_red_2" > DIV id= "div_red_2" without class </div& Gt <span id= "Span_red_1" class= "red_test" > Span id= "span_red_1" calss= "Red_test" </span><br> <input Type= "text" id= "txt_red_1" value= ' INPUT id= "txt_red_1" class= "red_test" ' class= red_test '/><br> ' <input Type= "button" id= "Btn_red_1" value= "button three" class= "button"/><br> <script type= "Text/javascript" > $ ("#btn _red_1 "). Click (function () {$ (". Red_test "). CSS (" Background-color "," Blue "); }); </script> Extensions: You can look at the jquery official online Selectors/.classInstance. </div> <div class= "div" > <span class= "Xiaobiao" >4. * Usage </span><br> definition: Match all elements to search with context. <br> return value:array<element><br> instance: View the number of all elements in the page <br> <span > Code: $ ("*"). Length;<span class= "Green" >//Click button Four will execute this code </span></span><br> <input type= "button" id= "Btn_4" value= "button four" class= "button"/><br> <script type= "Text/javascript" > $ ("#btn_4"). Click (the number of all elements on the page of the function () {alert () is: ' +$ ("*"). length+ "a"); }); </script> Extensions: You can take a look at the examples of selectors/* on the jquery official web site. </div> <div class= "div" > <span class= "Xiaobiao" >5. Selector1,selector2,selectorn usage </span><br> Definition: The elements that match each selector are merged and returned together. You can specify as many selectors as you want, and merge the matching elements into one result. <br> return value:array<element><br> parameter: Selector1 (Selector): A valid selector Selector2 (Selector): Another valid selector select OrN (Selector): (optional) Any number of valid selectors <br> instances: Change the border of <Li> elements that have the li_test style of all references on the page and the <Li> element with id "li_red" to Green, Width is 5px<br> <span > Code: $ (". Red_test, #btn_5"). CSS ("Border", "5px solid Green"); <span class= "green" >//Click Button Five will execute this code </span ></span><br> <ul> <li class= "li_test" >li class= "li_test" </li> <li id= "li_red" >li id= "li_red" </li> <li>Li</li> <li class= "li_test" >li class= "Li_test" </li> <li >Li</li> <li>Li</li> </ul> <input type= "button" id= "Btn_5" value= "button" class= "buttons"/& Gt <br> <script type= "Text/javascript" > $ ("#btn_5"). Click (function () {$ (". Li_test, #li_red"). CSS ("border", "5px solid Green"); }); </script> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Note: Because jquery needs to be loaded, please refresh after running to see the effect.
