jQuery中的几个案例：隔行变色、复选框全选和全不选

最新推荐文章于 2024-05-14 19:02:10 发布

devlgdg1924

最新推荐文章于 2024-05-14 19:02:10 发布

阅读量167

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sean-zeng/p/11024815.html

版权

1 表格隔行变色
1 技术分析：
1 ）基本过滤选择器：
odd:
even:
2 ）jq添加和移除样式：
addClass();
removeClass();
2 代码实现

    <script src="js/jquery1.11.3/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
            $("tr:odd").css("background-color","#CC6");
            $("tr:even").css("background-color","#CF0");
        });
    </script>

2 复选框全选、全不选
1 技术分析
1）jq对属性的操作方法
.attr();
一：().attr(“src”);二：().attr(“src”, “test.jsp”);
三：$().attr({“src”: “test.jsp” , “width”: “100”});
.removeAttr();
同上的用法还有：
.prop()、removeAttr()、addClass()、removeClass();
2 代码实现

$(function(){
        $("#selectAll").click(function(){
            if($("#selectAll").prop("checked") == true){
                $(":checkbox[name='select']").prop("checked", true);   
            }else{
                $(":checkbox[name='select']").prop("checked", false);
            }
        });

        //简化
        $("#selectAll").click(function(){

                    $(":checkbox[name='select']").prop("checked", $("#selectAll").prop("checked"));   

        });
    });