DOM之几个事件的应用
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .c1 { height: 200px; width: 200px; border-radius: 50%; } .bg_red { background-color: red; } .bg_green { background-color: green; } </style> </head> <body> <input type="button" id="b1" value="开关" onclick="change();"> <input type="button" id="b2" value="开关"> <div class="c1 bg_red"></div> <script> function change() { //找到c1这个便签 var c1Ele = document.getElementsByClassName('c1')[0]; //修改classlist c1Ele.classList.toggle("bg_green"); } //通过js代码绑定事件 var b2Ele = document.getElementById('b2'); b2Ele.onclick = ()=> { change(); } </script> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <input type="text" id="i1" value="海飞丝" onfocus="f(this);"> <input type="text" id="i2" value="辣条" onfocus="f(this);"> <input type="text" id="i1" value="海飞丝" > <input type="text" id="i2" value="辣条"> <script> // function f( // // self // ) // { // self.value = ''; // // } //给i1设置获取光标的事件 var i1Ele = document.getElementById('i1'); i1Ele.onfocus = function () { //将自己的value值设置为"" this.value = ""; }; //给i1绑定一个失去光标焦点的事件 i1Ele.onblur = function () { this.value = '海飞丝' } </script> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <select id="province"> <option>请选择省：</option> </select> <select id="city"> <option>请选择市：</option> </select> <script> var s1Ele = document.getElementById('province'); var s2Ele = document.getElementById('city'); var data = {"上海": ["黄浦区", "静安区"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]}; //将省直辖市数据填充到第一个select中 for (let k in data) { console.log(k); //创建option标签 let tmp = document.createElement('option'); tmp.innerText = k; //将创建的tmp添加到 第一个select中 s1Ele.appendChild(tmp); } //当第一个select框的值发生改变之后才去更新第二个select框 s1Ele.onchange = function () { //清空第二个select框的option选项 s2Ele.innerHTML = ""; let p = document.createElement("option"); p.innerText = "请选择市"; s2Ele.appendChild(p); //拿到第一个select框的值是什么 console.log(this.value); let provine = this.value; //将省 对应的市信息，填充到第二个select中 for (let i=0;i<data[provine].length;i++) { let tmp = document.createElement('option'); tmp.innerText = data[provine][i]; s2Ele.appendChild(tmp); } } </script> </body> </html>
