前端5js：Dom：全选全不选，省市级联，隔行/触摸换色，表单校验
Posted 码农编程录
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端5js：Dom：全选全不选，省市级联，隔行/触摸换色，表单校验相关的知识，希望对你有一定的参考价值。
文章目录
1.Dom编程_查找节点：选择器
Dom作用：在.html文件里找标签，类似java中反射（一个类被加载进内存会自动生成class对象，通过这个class对象获取这个类中任何元素）。如下只有id是唯一的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>根据标签的属性找元素</title>
<script type="text/javascript">
window.onload = function (ev) { //页面加载事件，ev参数是鼠标移动获取坐标
var b2 = document.getElementById("b2");
b2.onclick = function (ev2) {
var array = document.getElementsByTagName("a");
for(var i=0; i < array.length; i++){
array[i].href = "http://www.baidu.com"
}
}
//111111111111111111111111111111111111111111111111111111111111111111111111111111
document.getElementById("b3").onclick = function (ev2) {
var array = document.getElementsByName("one")
for(var i=0; i < array.length; i++){
array[i].innerText = "嘻嘻"
}
}
//111111111111111111111111111111111111111111111111111111111111111111111111111111
document.getElementById("b4").onclick = function (ev2) {
var array = document.getElementsByClassName("two")
for(var i=0; i < array.length; i++){
array[i].innerText = "嘻嘻2"
}
}
}
</script>
</head>
<!--111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body>
<input type="button" value="(通过标签名)给a链接添加地址" id="b2" />
<input type="button" value="(通过name属性)给div设值" id="b3"/>
<input type="button" value="(通过类名)给div设值" id="b4"/>
<hr/>
<a>传智播客</a><br/>
<a>传智播客</a><br/>
<a>传智播客</a><br/>
<hr/>
<div name="one"></div>
<div name="one"></div>
<div name="one"></div>
<hr/>
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>
</body>
</html>
2.案例_全选全不选：商品选项勾选状态跟全选的勾选状态一致
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* 1. 先获取全选按钮的勾选状态
* 对象.checked = true/false （勾上为true，没勾上为false）
* 畸形写法的属性 js = boolean。包括checked/selected/disabled/readonly...
*
* 2. 然后找到所有的商品项，遍历,修改商品项的勾选状态 = 上面的勾选状态
*/
function selectAll() { // 全选/全不选
var all = document.getElementById("all");
console.log(all.checked) // boolean : true /false
var array = document.getElementsByName("item"); //item条目
for(var i=0; i < array.length; i++){
array[i].checked = all.checked
}
}
//111111111111111111111111111111111111111111111111111111111111111111111111111
/*
* 反选： 1. 然后找到所有的商品项
* 2. 遍历,修改商品项的勾选状态 与 自身原状态 相反
*/
function reverseSelect() {
var array = document.getElementsByName("item");
for(var i=0; i < array.length; i++){
array[i].checked = !array[i].checked
}
}
//111111111111111111111111111111111111111111111111111111111111111111111111111
/*
* 结账: 1. 然后找到所有的商品项
* 2. 遍历,如果 checked = true, 计入总账
*/
function total() {
var array = document.getElementsByName("item");
var total = 0; //var total 没有初始值，undefined
for(var i=0; i < array.length; i++){
if(array[i].checked){
total += parseInt(array[i].value) //类型转换，网页获取默认是字符串进行拼接
}
}
alert(total)
}
</script>
</head>
<!--11111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body>
<h3>商品价格列表</h3>
<input type="checkbox" name="item" value="1500" /> 山地自行车1500<br />
<input type="checkbox" name="item" value="200" /> 时尚女装200<br />
<input type="checkbox" name="item" value="3000" /> 笔记本电脑3000元<br />
<input type="checkbox" name="item" value="800" /> 情侣手表800<br />
<input type="checkbox" name="item" value="2000" /> 桑塔纳2000<br />
<hr/>
<input type="checkbox" id="all" onclick="selectAll()" />全选/全不选
<input type="button" id="reverse" onclick="reverseSelect()" value=" 反 选 "/>
<input type="button" value=" 结 账 " onclick="total()" /> <span id="result"></span>
</body>
</html>
3.属性_innerText和innerHTML：追加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* innerText : 内部文本(开闭标签之间的文本内容)
* innerHTML : 内部超文本 (识别标签语法)
*/
window.onload = function (ev) {
var div = document.getElementById("mydiv");
console.log(div.innerText) // 哈哈
// div.innerText = "嘻嘻" // 修改
// div.innerText = div.innerText + "嘻嘻" //如下简化
// div.innerText += "嘻嘻" // 追加
// div.innerText += "<a href='#'>呼呼</a>" //纯文本
div.innerHTML += "<a href='#'>呼呼</a>"
}
</script>
</head>
<!--1111111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body>
<div id="mydiv">
哈哈
</div>
</body>
</html>
4.案例_省市级联：0对应bj数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* 省市级联 : 省的选项改变,市的选项也要跟着改变
* 思路:
* 1. 事件 : 省标签的onchange事件
* 1. onclick : 鼠标点击触发
* 2. onchange : 当内容改变的时候触发
*
* 2. 执行逻辑
* 1. 首先得有省对应的市区数据 (事先准备)
* java：map : key="bj" value=bjArray
* js：没有map，把北京索引设为0。 bj : 0 -> bjArray
* 2. 获取省选项的value值, 去cityArray找数据
* 3. 拿到数据之后,遍历添加到 市选项那边
*/
var bj = ["朝阳区","海淀区","石景山区"]
var sh = ["航头区","黑马区","徐汇区"]
var fj = ["福州市","厦门市","莆田市","三明市"]
var js = ["宿迁市","淮安市","徐州市"]
var cityArray = [bj,sh,fj,js] // 二维数组 List<List> : 双重for循环
function selectCity() {
var province = document.getElementById("provinceId");
// console.log(province.value) //0，1，2，3 //不需要找到<option>，找到<select>就行 ，默认选中那个代表当前value值
var array = cityArray[province.value] // 自动转换 // var array = cityArray[parseInt(province.value)]
var city = document.getElementById("cityId");
city.innerHTML = "<option value=''>‐‐请选择市‐‐</option>" //重置 //坑: 每次重新选择之前,数据要清空
for(var i=0; i< array.length; i++){ //如下 "+array[i]+" 拼接字符串
city.innerHTML += "<option value=''>"+array[i]+"</option>" //超文本追加
}
}
</script>
</head>
<!--1111111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body>
<select id="provinceId" onchange="selectCity()">
<option>‐请选择‐</option>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">福建</option>
<option value="3">江苏</option>
</select>
<select id="cityId">
<option value="">‐‐请选择市‐‐</option>
<!-- <option value="">南京市</option>
<option value="">苏州市</option> -->
</select>
</body>
</html>
5.Dom编程_js修改css样式：.className
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.my{
font-size: 40px;
color: green;
}
.your{
font-size: 60px;
color: yellow;
}
</style>
<!--111111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<script>
/*
* 1. 直接修改 -> 行内样式
* a. js中,任何标签对象都有style属性,用于操作css
* b. 语法
* 标签对象.style.css属性
* css属性命名: font-size -> fontSize (小驼峰)(“-”在js中是非法标识符)
*
* 2. 类修改 -> 内部样式
* a. js中,任何标签对象都有className属性,用于操作css
* b. 语法
* 标签对象.className = 类选择器名字
*/
function method01() { //修改行内样式，平级关系可修改
var span1 = document.getElementById("span1");
span1.style.fontSize = "50px"
span1.style.color = "blue"
}
function method02() { //修改内部样式
var span2 = document.getElementById("span1"); //点击按钮2没效果，因为行内样式优先级高于内部样式
// var span2 = document.getElementById("span2"); //点击按钮2有效果，同是内部样式，后设置覆盖前设置
span2.className = "your"
}
</script>
</head>
<!--1111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body>
<input type="button" value="按钮1" onclick="method01()">
<input type="button" value="按钮2" onclick="method02()">
<hr>
<span id="span1" style="font-size: 30px;color: red">span</span> <br>
<span id="span2" class="my">span</span> <br> <!--调用my类选择器 -->
</body>
checkbox实现全选全不选