<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>JQuery应用</title>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script>
$(function() {
$("table").attr("bgcolor", "red"); //设置表格的背景颜色
$("tr").attr("bgcolor", "#3366CC"); //为单数行表格设置背景颜色
$("tr:even").css("background-color", "#CC0000"); //为双数行表格设置背颜色素
$("table").css("width", "300px"); //为表格添加样式，设置表格长度为300像素
});
// 复选框的全选和全不选
$(function() {
// 获得上面的复选框
var $selAll = $("#selAll");
$selAll.click(function() {
if($selAll.prop("checked") == true) {
// 上面的复选框已被选中
$(":checkbox[name='selone']").prop("checked", true);
} else {
// 上面的复选框没被选中
$(":checkbox[name='selone']").prop("checked", false);
}
});
});
//3、使用JQ实现省市联动
$(function() {
var i = 0;
var arr = new Array(3);
arr[0] = new Array("增城", "新塘", "长安");
arr[1] = new Array("玉林", "容县", "博白");
arr[2] = new Array("成都", "广元", "攀枝花");
$("[name='pro']").change(function() {
//获取省的下拉选的值
var $pro = $("[name='pro']").val();
//获取市的下拉选
var $citys = $("[name='city']");
//初始化 用一种创建标签增加内容的方式
$citys.html($("<option>").html("-请选择-"));
//遍历数组
$(arr[$pro]).each(function() {
//把二维数组增加到下拉选框内
$citys.append("<option>" + arr[$pro][i] + "</option>");
i++;
if(i >= 3) {
i = 0;
}
});
});
});
</script>
</head>
<body>
<!--1、使用JQ实现表格隔行换色
2、使用JQ的表格全选和全不选
3、使用JQ实现省市联动
-->
<div class="d1">
<table border="1" cellspacing="0" cellpadding="0" id="tb">
<tr>
<td><input type="checkbox" name="selone" id="selAll" value="" />1</td>
<th colspan="2">使用JQ实现表格隔行换色</th>
</tr>
<tr>
<td><input type="checkbox" name="selone" id="sel" value="" />1</td>
<td colspan="2">Data</td>
</tr>
<tr>
<td><input type="checkbox" name="selone" id="sel" value="" />1</td>
<td colspan="2">Data</td>
</tr>
<tr>
<td><input type="checkbox" name="selone" id="sel" value="sel" />1</td>
<td colspan="2">Data</td>
</tr>
<tr>
<td><input type="checkbox" name="selone" id="sel" value="" />1</td>
<td colspan="2">Data</td>
</tr>
</table>
</div>
<div class="d2">
<h1>省级二级联动</h1>
<select name="pro">
<option selected="selected">---请选择---</option>
<option value="0">广东省</option>
<option value="1">广西省</option>
<option value="2">四川省</option>
</select>
<select name="city">
<option selected="selected">---请选择---</option>
</select>
</div>
</body>
</html>