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>

  

posted @   潺莪  阅读(726)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示