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

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"));   

        });
    });