jQuery学习教程(五):选择器综合实例
以下实例综合讲解了几个选择器的使用,同时演示了使用jQuery实现隔行换色、荧光棒特效、复选框checkbox全选反选效果
<script type= "text/javascript" > $( function (){ $( "table tr:even" ).addClass( "tdOdd" ); $( "th:first" ).css( "background" , "#B4C6C1" ); //首个 $( "table tr" ).mouseover( function (){ $( this ).addClass( "tdOver" );}).mouseout( function (){ $( this ).removeClass( "tdOver" );}).click( function (){ //荧光棒 $( ".tdClick" ).removeClass( "tdClick" );$( this ).addClass( "tdClick" ); }) //行锁定 $( "input:checkbox:first" ).click( function (){ $( "input:checkbox:not(input:checkbox:first)" ).each( function (){ //剔除本身 $( this ).attr( "checked" ,$( "input:checkbox:first" ).attr( "checked" )); }) }) $( "input:checkbox:not(input:checkbox:first)" ).click( function (){ var flag= true ; $( "input:checkbox:not(input:checkbox:first)" ).each( function (){ if (! this .checked){flag= false ;} //不可使用if($(this).attr("checked","false")){flag=false;}<P></P> }); $( "input:checkbox:first" ).attr( "checked" ,flag); }) }); </script> <style type= "text/css" > body{ font-size:12px; color: #366; } table{ border:none; background: #fefefe; width:100%; border-collapse:collapse; } th{ background: #CFDEC6; padding:4px; color: #000; } td,.tdNormal{ border: #cfdec6 solid 1px; padding:4px; background:fefefe; } .tdOdd{ background: #f1fefa; } .tdOver{ background: #F5FAF7; } </style> </head> <body> <table> <tr> <th>姓名</th> <th>年龄</th> <th>专业</th> </tr> <tr> <td>王洪剑</td> <td>22</td> <td>电气自动化</td> </tr> <tr> <td>李川川</td> <td>20</td> <td>计算机</td> </tr> <tr> <td>陈超</td> <td>22</td> <td>计算机</td> </tr> <tr> <td>秦玉龙</td> <td>21</td> <td>计算机</td> </tr> <tr> <td>刘威</td> <td>21</td> <td>计算机</td> </tr> <tr> <td>张会会</td> <td>21</td> <td>计算机</td> </tr> <tr> <td>胡海生</td> <td>30</td> <td>计算机</td> </tr> <tr> <td>吴雄</td> <td>22</td> <td>计算机</td> </tr> </table> |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步