<style>
.even {
background-color: #999;
}
.odd {
background-color: #ccc;
}
</style>
/** *@author 传智播客
*/
var ul = document.getElementById("list");
//var lis = ul.getElementsByTagName("li");
//层级结构 childNodes 子节点
var children = ul.childNodes;
var j = 0;
for (var i = 0; i < children.length; i++) {
if (children.nodeType === 1) {//元素节点
if (j % 2 === 0) {//索引是偶数 在页面上是奇数
children.className = "odd";
} else {
children.className = "even";
}
j++;
}
}
/**
*@author 传智播客
*/
//查找元素
var ul = document.getElementById("list");
//获取元素的子节点
var children = ul.childNodes;
var j = 0;
for (var i = 0; i < children.length; i++) {
if (children.nodeType === 1) {
if (j % 2 === 0) {//取余
children.className = "odd";
} else {
children.className = "even";
}
j++;
}
}
//节点常用的属性 nodeType nodeValue nodeName
//文本节点
/*console.log(children[0].nodeType);//3
console.log(children[0].nodeValue);//文本节点的内容
console.log(children[0].nodeName);//#text*/
//元素节点
/*console.log(children[1].nodeType);//1
console.log(children[1].nodeValue);//元素节点的值都是null
console.log(children[1].nodeName);//标签名*/
//注释节点
/*console.log(children[3].nodeType);//8
console.log(children[3].nodeValue);//注释的内容
console.log(children[3].nodeName);//#comment*/
//console.log(children);
//属性节点
var attrNode = ul.getAttributeNode("id");
console.log(attrNode.nodeType);//2
console.log(attrNode.nodeValue);//属性值
console.log(attrNode.nodeName);//属性名
/**
*@author 传智播客
*/
//找人
var ul = document.getElementById("list");
var nodes = ul.childNodes;
//给每一个li注册事件 点击当前li排他
for (var i = 0; i < nodes.length; i++) {
var node = nodes;//每个节点
if (node.nodeType !== 1) {//1是元素节点 不等于1就不是元素节点
continue;
}
node.onclick = function () {
//排他
//干掉所有人
for (var i = 0; i < nodes.length; i++) {
var node = nodes;
if (node.nodeType !== 1) {//不是元素节点
continue;
}
node.className = "";
}
//留下我自己
this.className = "current";
};
}
/**
*@author 传智播客
*/
var ul = document.getElementById("list");
//ul.childNodes;//子节点
//console.log(ul.children);//子元素
var lis = ul.children;
for (var i = 0; i < lis.length; i++) {
lis.onclick = function () {
//干掉所有人
for (var i = 0; i < lis.length; i++) {
lis.className = "";
}
//留下我自己
this.className = "current";
};
}
产生 0123 中的一个随机数
/**
*@author 传智播客
*/
//产生 0123 中的一个随机数
var random = parseInt(Math.random() *3);
/**
*@author 传智播客
*/
//找人
var txtName = document.getElementById("txtName");
var txtPwd = document.getElementById("txtPwd");
//用户在文本框中输入内容的时候 判断用户名是否符合要求
//onkeyup 键盘弹起事件 onkeydown 键盘按下事件
txtName.onkeyup = function () {
//如果用户名太短或者太长都要提示错误
if (this.value.length < 3 || this.value.length > 6) {
//nextSibling 下一个兄弟节点
this.nextSibling.innerHTML = "用户名必须在3-6位之间";
} else {
this.nextSibling.innerHTML = "";
}
};
txtPwd.onkeyup = function () {
//如果用户名太短或者太长都要提示错误
if (this.value.length < 3 || this.value.length > 6) {
//nextSibling 下一个兄弟节点
//nextElementSibling 下一个兄弟元素
this.nextElementSibling.innerHTML = "密码必须在3-6位之间";
} else {
this.nextElementSibling.innerHTML = "";
}
};
//获取下一个兄弟元素的兼容函数
function getNextElement(element) {
if (element.nextElementSibling) {
return element.nextElementSibling;
} else {
var next = element.nextSibling;//下一个兄弟节点
while (next && next.nodeType !== 1) {//一直往后找的条件 1有 2不是我要的
next = next.nextSibling;//继续往后找兄弟节点
}
return next;
}
}
/**
*@author 传智播客
*/
var inputs = document.getElementById("box").getElementsByTagName("input");
//给每一个文本框绑定事件 获取焦点的 加背景色 失去焦点的 去掉背景色
for (var i = 0; i < inputs.length; i++) {
inputs.onfocus = function () {
this.style.backgroundColor = "red";
};
inputs.onblur = function () {
this.style.backgroundColor = "";
};
}
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) | 黑马程序员IT技术论坛 X3.2 |