var obj = { name: "name", "person-age": 18 } // 访问 obj.name | obj["name"] obj["person-age"]
2.对象的属性可以任意添加与删除
<!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>
<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>
<!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.事件的绑定
<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.事件对象
// 系统回调事件函数时, 传递了一个 事件(event) 实参 // 如果要使用传递来的实参 事件(event), 定义接收的 形参 即可 box.onclick = function(ev){ // 使用事件对象 // 特殊按键 eg: ev.altKey: true | false // 鼠标触发点: ev.clientX | ev.clientY // 取消冒泡 ev.cancelBubber = true; // 取消默认事件 return false; }