JS 对于属性的操作、对内容的操作、定时器
一、JS对于属性的操作
对象.setAttribute('属性名','值'); - 添加属性
对象.getAttribute('属性名'); - 获取属性值，如无此属性，那么返回null
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.div1 {
width: 100px;
height: 50px;
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="div1" dd="1"></div>
<div class="div1" dd="1"></div>
<div class="div1" dd="0"></div>
<div class="div1" dd="0"></div>
<div class="div1"></div>
<div class="div1"></div>
</body>
</html>
<script type="text/javascript">
var aa = document.getElementsByClassName("div1");
for (var i = 0; i < aa.length; i++) {
if (aa[i].getAttribute("dd") == "1")
aa[i].style.backgroundColor = "green";
else if (aa[i].getAttribute("dd") == "0")
aa[i].style.backgroundColor = "yellow";
else
aa[i].style.backgroundColor = "red";
}
</script>
对象.removeAttribute('属性名'); - 移除属性
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<input type="button" value="按钮1" id="dd1" />
<input type="button" value="按钮2" id="dd2" />
</body>
</html>
<script type="text/javascript">
var aaa = document.getElementById("dd1");
var bbb = document.getElementById("dd2");
//按钮1的点击事件
aaa.onclick = function () {
//按钮1添加一个属性不可用
this.setAttribute("disabled", "disabled");
//获取aaa中属性value的值
var ccc = this.getAttribute("value");
alert(ccc);
}
//bbb的点击事件
bbb.onclick = function () {
//移除aaa的disabled属性
aaa.removeAttribute("disabled");
}
</script>
2.验证5+5=？
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
5+5=
<input type="text" id="dd1" data="10" />
<input type="button" id="dd2" value="验证"/>
</body>
</html>
<script type="text/javascript">
var aaa = document.getElementById("dd1");
var bbb = document.getElementById("dd2");
//bbb的点击事件
bbb.onclick = function () {
var txt = aaa.getAttribute("data");
if (txt == aaa.value)
alert("正确");
else
alert("笨蛋");
}
</script>
3.彩虹导航栏，移入变为灰色，移除变为原来的颜色。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.div1 {
width: 100px;
height: 50px;
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="div1" style="">" dd="red"></div>
<div class="div1" style="">" dd="blue"></div>
<div class="div1" style="">" dd="green"></div>
<div class="div1" style="">" dd="pink"></div>
<div class="div1" style="">" dd="purple"></div>
<div class="div1" style="">" dd="yellow"></div>
</body>
</html>
<script type="text/javascript">
var aaa = document.getElementsByClassName("div1");
//中间变量存颜色
var color;
for (var i = 0; i < aaa.length; i++) {
//鼠标移入事件
aaa[i].onmouseover = function () {
color = this.style.backgroundColor;
this.style.backgroundColor = "gray";
}
//鼠标移除事件
aaa[i].onmouseout = function () {
this.style.backgroundColor = color;
}
//鼠标点击事件
}
</script>
二、操作内容
1、赋值添加操作：（1）、普通元素.innerText="值"；---以文本形式执行，不会执行其中代码；
（2）、普通元素.innerHTML=“值”；---可识别编程语句，并执行其中代码
（3）表单元素：表单元素.value="值" 或直接添加属性（setAttribute）
2、取值：（1）变量名=普通元素.innerText；----以文本形式取出其中所有文本代码
（2）变量名=普通元素.innerHTML；---只取出其中文本，不会代码
（3）表单元素：变量名=表单元素.value
例：
<style type="text/css">
#div1 {
width: 200px;
height: 200px;
background-color: green;
}
.div2 {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
<script>
var nav1 = document.getElementById("div1");
nav1.onclick = function () {
this.innerHTML = "<div class='div2'>这是内容</div>";
}
nav1.onmouseover = function () {
this.innerText = "<span>这也是内容</span>";
}
</script>
三、操作相关元素：
（1）同辈操作：1、变量名.nextSibling--找变量的下一个同辈元素，注意空格回车换行（如果有两个空格则再加一个.nextSibling）
2、变量名.previousSibling--找变量的上一个同辈元素，注意包含空格回车换行（如果有两个空格则再加一个.previousSibling）
（2）父辈级操作：1、变量名.parentNode--找变量的上一级父级元素
2、变量名.childNodes---找变量的下一级子元素，找出的是数组
3、变量名.firstChild---找第一个子级元素 lastChild---找最后以个子级元素，childNodes[i]---找第i个子级元素
4、alert（nodes[i]instanceof Text）;--判断是不是文本，返回true/false
定时器：
window.setTimeout(function(){},间隔时间毫秒); 延迟执行，只执行一次（相当于我们生活中的定时炸弹只是执行一次）
window.setInterval(function(){},间隔的时间毫秒); - 无限循环，每一次循环有间隔时间，一般不要小于20毫秒 - 它是有返回值的，可以用一个变量来接收这个定时器对象
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> #btn1 { position: absolute; left:500px; } </style> </head> <body> <input type="button" value="按钮" id="btn1" /> </body> </html> <script type="text/javascript"> var oBtn1 = document.getElementById('btn1'); oBtn1.onclick = function () { var timer = window.setInterval(function () { if (oBtn1.offsetLeft < 0) { window.clearInterval(timer); } oBtn1.style.left = oBtn1.offsetLeft - 10 + 'px'; }, 20); }
说明：当点击按钮的时候，按钮会你每隔0.02会从右向左移动10px；知道它距离左边的距离小于零时停止，要是想让它从左到右，只要让它的offsetLift的值加10px，还必须设置它的宽度用他的.offsetWidthwindow.clearInterval(要关闭的定时器对象); 一旦执行这句代码，会立刻停止此定时器对象的执行
