![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var obj = { name: "name", "person-age": 18 } // 访问 obj.name | obj["name"] obj["person-age"]
2.对象的属性可以任意添加与删除
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> <script> var obj={ name:'obj' }; console.log(obj.name); // 删除 delete obj.name; // 添加 obj.age=18;// 如果age的key已存在就是修改值, 不存在就是添加键值对, 添加的key任意 console.log(obj.age) // 注: 获取的页面元素(标签对象)也可以任意添加/删除属性 </script> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<body> <div class="ele" alert="OK">div div div</div> </body> <script> var ele = document.querySelector('.ele'); var info = ele.getAttribute('alert'); console.log(info); ele.setAttribute('alert', 'no ok'); ele.setAttribute('key', 'value'); console.log(ele); </script>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ 350px; height: 350px; margin: 100px auto 0; } .box div{ 70px; height: 70px; background-color: black; float: left; border-radius: 25%; } </style> </head> <body> <div class="box"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body> <script> var divs=document.querySelectorAll('.box div'); //重置颜色 for (let i=0;i<divs.length;i++){ divs[i].style.backgroundColor='yellow'; } //游戏实现 for (let i=0;i<divs.length;i++){ divs[i].onclick=function () { //修改自身 toggleBGColor(this); //修改上 if (i>4){ var topEle=divs[i-5]; toggleBGColor(topEle); } //下 if (i<20){ var btnEle=divs[i+5]; toggleBGColor(btnEle); } //右 if (i%5!=4) { var rightEle=divs[i+1]; toggleBGColor(rightEle); } //右 if (i%5!=0) { var leftEle=divs[i-1]; toggleBGColor(leftEle); } } } //单击改变颜色 function toggleBGColor(ele) { var bgColor=ele.style.backgroundColor; if (bgColor=='yellow'){ ele.style.backgroundColor='black'; } else { ele.style.backgroundColor='yellow'; } } </script> </html>
2.事件的绑定
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<div class="event_on1">事件的绑定1</div> <div class="event_on2">事件的绑定2</div> <script> var event_on1 = document.querySelector('.event_on1'); // 事件绑定的第一种方式 event_on1.onclick = function () { console.log(1) }; event_on1.onclick = function () { console.log(2) } // 事件绑定的第二种方式 var event_on2 = document.querySelector('.event_on2'); // 可以为一个元素绑定多个事件, 按绑定顺序依次执行 event_on2.addEventListener('click', function () { console.log("a") }); var action = function () { console.log("b") } event_on2.addEventListener('click', action); // 如何取消事件 event_on2.removeEventListener('click', action) </script>
3.事件对象
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
// 系统回调事件函数时, 传递了一个 事件(event) 实参 // 如果要使用传递来的实参 事件(event), 定义接收的 形参 即可 box.onclick = function(ev){ // 使用事件对象 // 特殊按键 eg: ev.altKey: true | false // 鼠标触发点: ev.clientX | ev.clientY // 取消冒泡 ev.cancelBubber = true; // 取消默认事件 return false; }