JS原生代码实现简单的二级联动
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <select id="province"> <option value="">请选择省份</option> <!-- <option value="四川">四川</option> <option value="湖北">湖北</option> <option value="江苏">江苏</option> --> </select> <select name="" id="citys"> <option value>请选择城市</option> </select> <script type="text/javascript"> data={"四川":["资阳","城都","南充"],"山西":["大同","太原"],"山东":["潍坊","菏泽","济南"]} console.log(typeof(data)) var pro=document.getElementById('province') var city_ele=document.getElementById("citys") //循环遍历对象 for(var i in data){ var ele=document.createElement("option")//创建option节点 ele.innerHTML=i; pro.appendChild(ele);//循环遍历将省份添加到select省份下面 // console.log(i) } //onchange 域的内容被改变 //onselect 文本被选中 pro.onchange=function (argument) { // body... //console.log(this.selectedIndex);//选择索引值 console.log(this.options[this.selectedIndex]) //this这里的this代指pro标签，this.options指的是option标签集合，this.selectedIndex获取被选中的元素下标 var citys=data[this.options[this.selectedIndex].innerHTML]//通过选中的省份获取城市数组 city_ele.options.length=1;//初始化城市长度 for (var i = 0;i<citys.length;i++) {
//遍历城市长度 var ele=document.createElement("option") ele.innerHTML=citys[i] city_ele.appendChild(ele)//添加option标签 } } </script> </body> </html>
JS实现正反选
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> </style> </head> <body> <button onclick="selectAll()">全选</button> <button onclick="cancel()">取消</button> <button onclick="reverse()">反选</button> <table border="1px"> <tr> <td><input type="checkbox" name=""></td> <td>111</td> <td>111</td> </tr> <tr> <td><input type="checkbox" name=""></td> <td>222</td> <td>222</td> </tr> <tr> <td><input type="checkbox" name=""></td> <td>333</td> <td>333</td> </tr> </table> <script> function selectAll(){ var inputs=document.getElementsByTagName("input") for (var i=0;i<inputs.length;i++){ //var input=input[i] //input.checked=true全选 inputs[i].checked="checked"; } } function cancel(){ var inputs=document.getElementsByTagName("input") for (var i=0;i<inputs.length;i++){ //var input=input[i] //input.checked=true 取消 inputs[i].checked=""; } } function reverse(){ var inputs=document.getElementsByTagName("input") for (var i=0;i<inputs.length;i++){ var input=inputs[i]; //input.checked=true 反选 if(input.checked){ input.checked=false; } else{input.checked=true;} } } </script> </body> </html>
JS事件传播(冒泡事件)
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .outer{ width: 300px; height: 300px; background-color: yellow; } .inner{ width: 100px; height: 100px; background:green; } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> <script> var inner=document.getElementsByClassName('inner')[0]; //console.log(inner); //冒泡事件 inner.onclick=function(event){ alert("inner") //阻止事件向外层传播传播 event.stopPropagation() //console.log(this) } var outer=document.getElementsByClassName("outer")[0]; outer.onclick=function(){ alert("outer") } /* Event对象代表事件状态，比如事件在其中发生的元素，键盘按键的状态 鼠标的位置，鼠标按钮的状态，事件通常与函数结合使用，函数不会再事件发生前 被执行！event对象在事件发生时系统已经创建好了，并且会在事件函数被调用时传给事件函数，我们获得仅仅需要接受一下就好 比如onkeydown，我们想知道那个键按下，需要问下event对象的属性，这里就KeyCode */ </script> </body> </html>
JS模态对话框
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.content{
height: 1800px;
background-color: pink;
}
.shade{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: gray;
opacity: 0.5;
//opacity 透明度
}
.model{
200px;
height: 200px;
background-color: bisque;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
/*height: 50%*/
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="content">
<button onclick="func()">show</button>
hello world
</div>
<div class="shade hide"></div>
<div class="model hide">
<button onclick="cancel()">show</button>
</div>
<script type="text/javascript">
function func (argument) {
var ele_shade=document.getElementsByClassName('shade')[0]
var ele_model=document.getElementsByClassName('model')[0]
ele_model.classList.remove("hide")
ele_shade.classList.remove("hide")
}
function cancel(){
var ele_shade=document.getElementsByClassName("shade")[0]
var ele_model=document.getElementsByClassName("model")[0]
ele_model.classList.add("hide")
ele_shade.classList.add("hide")
}
</script>
</body>
</html>