<!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>2018.7.5 jQuery学习
原文地址：https://www.cnblogs.com/qichunlin/p/9266173.html