This series of articles is divided into: basic, level, simple, content, visibility, attribute, child element, form, form object attribute of 9 articles altogether.
This article explains:: Enabled,:d isabled,:checked,:selected usage.
Do you have any suggestions or comments on this series of articles please send to email: sjzlgt@qq.com
Because it is the first time to write a technical series of articles, it is inevitable that there will be errors or code bugs, welcomed the point, thank you!
After running, need to refresh under, load the jquery
<! 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> <title>jQuery-Selectors-9</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> </pead> <body> <div class= "div" > <div >jquery-selectUse of ORS (selectors) </div> This series of articles focuses on the use of the jquery Framework selector (selectors), which I will describe in an instance way that is simple, comprehensive, and will not involve very deep, my Learning method: Getting Started first , the 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. This article explains:: Enabled,:d isabled,:checked,:selected usage. Do you have any suggestions or comments on this series of articles please send to the mailbox: sjzlgt@qq.com because it is the first time to write a technical series of articles, it is inevitable that errors or code bugs, welcome to thank! You can go to the jquery website to learn more about jquery knowledge. <span ><strong> Copyright: Code-cat Blog: http://www.cnblogs.com/bynet reprint, please retain the original author, source and copyright information! </strong></span> </div> <div class= "div" > in IE6, IE7, Firefox under the test, the effect can be achieved. </div> <div class= "div" > <span class= "Xiaobiao" >1. : Enabled usage </span> definition: match all available element return values:array<element> instance: Change the background color of all available input elements in div with id "div_a1" to red <span ; Code: $ ("#div_a1 input:enabled"). CSS ("Background-color", "Red"); <span >//Click button One will execute this code </span></span > <div id= "div_a1" > div id= "div_a1" <span id= "SPAN_A1" > Span id= "span_a1" </span> <input Type= "text" value= "input text"/> <inpUT type= "text" value= "input text is not available" disabled= "disabled"/> <input "type=" text "value=" input text "/> type= "Password" value= "123123"/> <input type= "reset" value= "Reset not Available" disabled= "disabled"/> <input type = "Submit" value= "Submit"/> <textarea rows= "2" cols= "ten" >texteara</textarea> <select> <option >select</option> </select> <input type= "button" id= "btn_1" value= "button" class= "button"/> PT type= "Text/javascript" > $ ("#btn_1"). Click (function () {$ (#div_a1 input:enabled). CSS ("Background-color", "Red "); }); </script> </div> </div> <div class= "div" > <span class= "Xiaobiao" >2. :d isabled usage </span> definition: match all unavailable element return values:array<element> instance: Change the background color of all unavailable input elements in div with id "div_b1" to red <span > Code: $ ("#div_b1 input:disabled"). CSS ("Background-color", "Red"); <span >//Click Button II will execute this code </span></ span> <div id= "div_b1" > div id= "Div_b"1 "<span id=" SPAN_B1 "> Span id=" span_b1 "</span> <input type=" text "value=" input text "/> <in Put type= "text" value= "input text is not available" disabled= "disabled"/> <input "text" type= "input text" value= T type= "password" value= "123123"/> <input type= "reset" value= "Reset not Available" disabled= "disabled"/> <input E= "Submit" value= "Submit"/> <textarea rows= "2" cols= "ten" >texteara</textarea> <select> < option>select</option> </select> <input type= "button" id= "btn_2" value= "button two" class= "button"/> T;script type= "Text/javascript" > $ ("#btn_2"). Click (function () {$ ("#div_b1 input:disabled"). CSS (" Background-color "," Red "); }); </script> </div> </div> <div class= "div" > <span class= "Xiaobiao" >3. : Checked usage </span> definition: Matches all selected selected elements (check box, radio box, excluding option in Select) return value:array<element> instance: The ID is "DIV_C1" All of the elements in the div that contain the checked status check box are changed to Red <span > Code: $("#div_c1: Has (input[type= ' checkbox ']:checked)"). CSS ("Background-color", "Red"); <span >//Click button Three will execute this code </ span></span> <div id= "div_c1" > div id= "div_c1" <span id= "SPAN_C1" > Span id= "SPAN_C1" <inpu T type= "checkbox" checked= "Checked"/> </span> <div id= "div_c1_1" > div id= "div_c1_1" <input type= "C" Heckbox "/> </div> <div id=" div_c1_2 "> div id=" div_c1_2 "<input type=" checkbox "checked=" checked "/ > </div> <div id= "div_c1_3" > div id= "div_c1_3" <input type= "checkbox"/> </div> <div Id= "Div_c1_4" > div id= "div_c1_4" <input type= "Radio" checked= "checked"/> </div> <input type= "Rese T "value=" Reset is not available "disabled=" disabled "/> <input type=" Submit "value=" Submit "/> <input type=" button "id=" Btn_3 "value=" button three class= "button"/> <script type= "Text/javascript" > $ ("#btn_3"). Click (function () {$ ("#div_ C1:has (input[type= ' checkbox ']:checked). css ("Background-color", "Red"); }); </script> </div> <span ><strong> Note:: Has (selector) usage See content Chapter & Visibility Chapter 3rd, [type= ' checkbox '] Usage See property Chapter 2nd. </strong></span> </div> <div class= "div" > <span class= "Xiaobiao" >4. : Selected usage </span> definition: Matches all selected option element return value:array<element> instance: ID is "DIV_D1" The text value of the option element selected in all select elements in the div is written in div_d1_1 <span > code: var selectedtext=$ ("#div_d1: Selected"); <span >/ /Click on button Four to execute this code </span></span> <div id= "div_d1" > div id= "div_d1" <span id= "SPAN_D1" > Span id= " Span_d1 "<select> <option>span option1</option> <option selected=" selected ">span option2< /option> <option>span option3</option> </select> </span> <select> <option>div Select1</option> <option selected= "selected" >div c#</option> <option>div & Lt;option>div jquery</option> </select> <select> <option>div select2</option> <option>div apple</option > <option>div inter</option> <option selected= "selected" >div google</option> </select& gt; <select> <option>div select3</option> <option>div u.s.a.</option> <option >div u.k.</option> <option selected= "selected" >div china</option> </select> <div id= "di V_d1_1 "> DIV id=" div_d1_1 </div> <input type= "button" id= "Btn_4" value= "button four" class= "button"/> <s Cript type= "Text/javascript" > $ ("#btn_4"). Click (function () {var selectedtext=$ ("#div_d1: Selected"); for (Var i=0;i<selectedtext.length;i++) {$ ("#div_d1_1"). Append (i+1) + "." +selectedtext[i].text+ '); } }); </script> </div> <span ><strong> Note: Append (content) points to the internal content of an element, in future chapters will be explained, please pay attention. </strong></span> </div> </body> </ptMl>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
File package Download Http://xiazai.jb51.net/200912/yuanma/jQuery-Selectors-9-bynet.rar
