1、引入jquery文件
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
2、HTML布局
<table border="1px" width="600px" id="table" >
<thead>
<tr>
<td><input id="check_all" type="checkbox" /></td>
<td>序号</td>
<td>手机</td>
<td>运行内存</td>
<td>价格</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>1</td>
<td>华为</td>
<td>64+3</td>
<td>1299</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>2</td>
<td>苹果</td>
<td>64+1</td>
<td>3899</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>3</td>
<td>vivo</td>
<td>64+3</td>
<td>1899</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>4</td>
<td>oppo</td>
<td>64+3</td>
<td>2599</td>
</tr>
</tbody>
</table>
3、jquery初始化函数
<script>
$(function(){
alert("123");
});
</script>
4、js代码
$(function(){
/*隔行变色*/
$("tr:even").css("background-color","#cccccc");
/*全选/全不选*/
$("#check_all").click(function(){
/*1、表单选择器+属性过滤器选择*/
$("input[type='checkbox']:gt(0)").prop("checked",this.checked);
/*2、层级选择器选择*/
//$("tbody>tr>td>input").prop("checked",this.checked);
});
});