目录
2.想:记录笔记,下次不用看视频,直接看笔记就可以快速回忆。
7.Web前端第三季(JavaScript):我自己写的笔记博客
一.目的
1.想:学习前端知识
2.想:记录笔记,下次不用看视频,直接看笔记就可以快速回忆。
二.参考
1.我自己代码的GitHub网址
GitHub - xzy506670541/WebTest: SIKI学院的Web前端
2.SIKI学院:我参考此视频实操
- 我参考此视频实操
3.w3school官网:当做字典使用
4.菜鸟教程:当做字典使用
5.Web前端第一季(HTML):我自己写的笔记博客
6.Web前端第二季(CSS):我自己写的笔记博客
7.Web前端第三季(JavaScript):我自己写的笔记博客
三.注意
操作:1:成功:402-全选和全不选功能
1.运行结果:成功:
- #selectBtn:找到selectBtn物体,然后添加点击事件,
- prop添加状态:和被点击的selectBtn的同样的点击状态
全选\全部不选
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>