Web前端第四季(jQuery):五:402-全选和全不选功能+403-属性选择器和属性设置+501-二级省市联动

全选\全部不选
1，先选择全选按钮
2，添加事件
$("#selectBtn").click(function(){
$("tbody input").attr("checked",this.checked);
$("tbody input").prop("checked",this.checked);
});

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">

		</style>

		<script type="text/javascript" src="js/jQuery/jQuery%20Core%203.3.1-uncompressed.js"></script>

		<script type="text/javascript">
			$(function() {
				// $("#myTable tr:even").css("background-color", "aliceblue");
				// #myTable：祖先选择器：，只对myTable表格起作用
				//tbody:只对tbody起作用
				// tr:even：偶数行
				// tr.odd：基数行
				// $("#myTable tbody tr:even").css("background-color", "aliceblue");
				// $("#myTable tr:odd").css("background-color", "beige");
				// $(祖先 后代)
				// $("table td").css("background-color", "beige");
				// $("#myTable td").css("background-color", "beige");

				//后代选择器：不管是儿子、孙子等等都可以，只要是后代就可以
				// $("div span").css("background-color", "red");

				//儿子：必须是父子关系，不包括孙子等关系
				// $("div>div").css("background-color", "green");
				
				//#selectBtn:找到selectBtn物体，然后添加点击事件，
				//prop添加状态：和被点击的selectBtn的同样的点击状态
				$("#selectBtn").click(function(){
					$("tbody input[name='select']").prop("checked",this.checked);
				});

			});
		</script>
	</head>
	<body>
		<div id="">
			<p>
				asdad
				<span id="">
					all
				</span>
			<div>
				asdqwebsmndbhfkh爱斯达克比那时
			</div>
			</p>

		</div>

		<table id="myTable" border="1" cellspacing="" cellpadding="">
			<!-- thead表头标签 ：让此内容在表的开头-->
			<thead>
				<tr>
					<td><input type="checkbox" name="" id="selectBtn" value="" /></td>
					<th>收费单位</th>
					<th>付款方式</th>
					<th>结算方式</th>
					<th>状态</th>
				</tr>
			</thead>

			<!-- tbody表身体标签 -->
			<tbody>
				<tr>
					<td><input type="checkbox" name="select" id="" value="" /></td>
					<td>XX有限公司</td>
					<td>手机</td>
					<td>支付宝</td>
					<td>已付款</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="select" id="" value="" /></td>
					<td>XX有限公司</td>
					<td>手机</td>
					<td>支付宝</td>
					<td>已付款</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="select" id="" value="" /></td>
					<td>XX有限公司</td>
					<td>手机</td>
					<td>支付宝</td>
					<td>已付款</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="select" id="" value="" /></td>
					<td>XX有限公司</td>
					<td>手机</td>
					<td>支付宝</td>
					<td>已付款</td>
				</tr>
			</tbody>

			<!-- tfoot表尾标签：内容在表的结尾 -->
			<tfoot>
				<tr>
					<td></td>
					<td>统计</td>
					<td>统计</td>
					<td>统计</td>
					<td>统计</td>
				</tr>
			</tfoot>


		</table>
		<table id="" border="1" cellspacing="" cellpadding="">
			<tr>
				<th>收费单位</th>
				<th>付款方式</th>
				<th>结算方式</th>
				<th>状态</th>
			</tr>
			<tr>
				<td>XX有限公司</td>
				<td>手机</td>
				<td>支付宝</td>
				<td>已付款</td>
			</tr>
			<tr>
				<td>XX有限公司</td>
				<td>手机</td>
				<td>支付宝</td>
				<td>已付款</td>
			</tr>
		</table>
	</body>
</html>

操作:2:成功:403-属性选择器和属性设置

1.运行结果:成功:

参考网址：https://api.jquery.com/category/selectors/attribute-selectors/

操作:3:成功:501-二级省市联动

1.运行结果:成功:

参考：https://api.jquery.com/append/

省市联动
1、选择器
2、添加事件
$("#province").change(
funtion(){

}
);
3、清空下拉列表
$("#city").empty();

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jQuery/jQuery%20Core%203.3.1-uncompressed.js"></script>
		<style type="text/css"></style>


		<script type="text/javascript">
			//制作二位数组
			var arr_province = new Array(5);
			arr_province[0] = new Array("北京市");
			arr_province[1] = new Array("合肥市", "芜湖市", "阜阳市"); //数组1是安徽省，里面元素是安徽省的城市
			arr_province[2] = new Array("郑州市", "洛阳市", "驻马店市");
			arr_province[3] = new Array("西安市", "宝鸡市", "延安市");
			arr_province[4] = new Array("菏泽市", "淄博市", "济南市");

			$(function() {
				$("#province").change(function() {
					//清空id为city的选项
					$("#city").empty();
					var provinceID = this.value;
					console.log(provinceID);
					if(provinceID==-1){
						$("#city").html("<option value=\"-1\">--请选择--</option>");
					}
					else{
						for(var i=0;i<arr_province[provinceID].length;i++){
							var option=document.createElement("option");
							option.innerText=arr_province[provinceID][i];
							$("#city").append(option);
						}
					}
				});
			});
		</script>
	</head>
	<body>
		<!-- 下拉列表：省份 -->
		<select id="province">
			<option value="-1">--请选择--</option>
			<option value="0">北京市</option>
			<option value="1">安徽省</option>
			<option value="2">河北省</option>
			<option value="3">陕西省</option>
			<option value="4">山东省</option>
		</select>

		<!-- 下拉列表：城市 -->
		<select id="city">
			<option value="-1">--请选择--</option>
		</select>
	</body>
</html>