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

});
});