<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.nodeSmall {
width: 50px;
height: 50px;
background: url("../bgs.png") no-repeat -159px -51px;
position: fixed;
right: 10px;
top: 40%;
} .erweima {
position: absolute;
top: 0;
left: -150px;
} .nodeSmall a {
display: block;
width: 50px;
height: 50px;
} .hide {
display: none;
} .show {
display: block;
} </style>
<script>
window.onload = function () {
// 需求：鼠标放到a链接上，显示二维码（添加show类名，去掉hide类名）
// 鼠标移开则隐藏二维码（添加hide类名，去掉show类名）
// 1：获取事件源
var a = document.getElementsByTagName("a")[0];
var div = document.getElementById("er");
// 2:绑定事件
a.onmouseover = fn1;
a.onmouseout = fn2;
function fn1() {
div.className = "erweima show"; } function fn2() {
div.className = "erweima hide";
} } </script>
</head>
<body>
<div class="nodeSmall" id="node_small">
<a href="#"></a>
<div class="erweima hide" id="er">
<img src="../456.png" alt="">
</div>
</div> </body>
</html>
隐藏二维码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
账号：<input type="text" value="欢迎光临...">
<button>禁用</button>
<button>解禁</button>
<br><br>
密码：<input type="password" value="aaaaa">
<script>
// 1:获取事件源
var inp = document.getElementsByTagName("input")[];
var btn1 = document.getElementsByTagName("button")[];
var btn2 = document.getElementsByTagName("button")[];
// 2:绑定事件
btn1.onclick = function () {
inp.disabled = "no";
};
btn2.onclick = function () {
inp.disabled = false; } </script> </body>
</html>
锁定输入框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
input {
width: 400px;
height: 46px;
padding-left: 5px;
color: #ccc;
font: 17px/46px "微软雅黑";
} label {
position: absolute;
top: 94px;
left: 56px;
font-size: 12px;
color: #ccc;
cursor: text;
} .hide {
display: none;
} .show {
display: block;
} </style>
</head>
<body> 京东：<input type="text" id="inp1" value="我是京东"/><br><br>
淘宝：<label for="inp2">我是淘宝</label><input id="inp2" type="text"><br><br>
placeholder: <input type="text" placeholder=" 我是placeholder"> <script>
// 1：获取事件源和相关元素
var inp1 = document.getElementById("inp1");
// 2：绑定事件
inp1.onfocus = function () {
if (this.value === "我是京东") {
inp1.value = "";
}
};
inp1.onblur = function () {
if (this.value === "") {
inp1.value = "我是京东";
}
};
// 设置淘宝的框
var inp2 = document.getElementById("inp2");
var lab = document.getElementsByTagName("label")[];
// 绑定事件，输入事件文字的输入和删除都会触发这个事件
inp2.oninput = function () {
if (this.value === "") {
lab.className = "show";
} else {
lab.className = "hide";
}
} </script> </body>
</html>
文本输入框焦点
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text"/><br><br>
<input type="text"/><br><br>
<input type="text"/><br><br>
<input type="text"/><br><br>
<input type="text"/><br><br>
<input type="text"/><br><br> <button>赋值</button><br><br>
<button>取值</button><br><br> <script>
//for循环赋值
//老三步
var inpArr = document.getElementsByTagName("input");
var btnArr = document.getElementsByTagName("button"); //赋值
btnArr[].onclick = function () {
//循环为每一个input赋值
for(var i=;i<inpArr.length;i++){
inpArr[i].value = i;
}
} //获取值
btnArr[].onclick = function () {
//循环获取nput的值赋值为一个数组
var newArr = [];
for(var i=;i<inpArr.length;i++){
newArr.push(inpArr[i].value);
}
console.log(newArr.join(" "));
} </script>
</body>
</html>
for循环为文本框赋值和取值
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.wrong {
border: 2px solid red;
}
.right {
border: 2px solid #91B81D;
}
</style>
</head>
<body> 账号：<input type="text" onblur="fn(this)"/><br><br>
密码：<input type="password" onblur="fn(this)"/> <script>
//需求：失去焦点的时候判断input按钮中的值，如果账号或密码在6-12个字符之间通过，否则报错。
//步骤：
//1.获取事件源
//2.绑定事件
//3.书写事件驱动程序 //3.书写事件驱动程序
function fn(aaa){
//html中的input标签行内调用function的时候,是先通过window调用的function，所以打印this等于打印window
// console.log(this)
//只有传递的this才指的是标签本身。
// console.log(aaa)
// console.log(this.value)
if(aaa.value.length < || aaa.value.length>){
aaa.className = "wrong";
}else{
aaa.className = "right";
}
}
</script>
</body>
</html>
输入不满足条件则变色
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
} .wrap {
width: 300px;
margin: 100px auto 0;
} table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
} th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
} th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
} td {
font: 14px "微软雅黑";
} tbody tr {
background-color: #f0f0f0;
} tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style> <script> window.onload = function () {
//需求1：点击上面的的input，下面全选或者反选。
//思路：获取了上面的input按钮，只需要判断，checked属性是true还是false，如果是true，下面的全部变成true；false同理。
//老三步
var topInp = document.getElementById("theadInp");
var tbody = document.getElementById("tbody");
var botInpArr = tbody.getElementsByTagName("input"); //绑定事件
topInp.onclick = function () {
//版本1
// for(var i=0;i<botInpArr.length;i++){
// if(topInp.checked === true){
// botInpArr[i].checked = true;
// }else{
// botInpArr[i].checked = false;
// }
// }
//费劲版
// if(topInp.checked){
// for(var i=0;i<botInpArr.length;i++){
// botInpArr[i].checked = true;
// }
// }else{
// for(var i=0;i<botInpArr.length;i++){
// botInpArr[i].checked = false;
// }
// }
//优化版（被点击的input按钮的checked属性值，应该直接作为下面的所有的input按钮的checked属性值）
for(var i=0;i<botInpArr.length;i++){
botInpArr[i].checked = this.checked;
}
} //需求2：点击下面的的input，如果下面的全部选定了，上面的全选，否则相反。
//思路：为下面的每一个input绑定事件，每点击一次都判断所有的按钮
// checked属性值是否全部都是true，如果有一个是false，
// 那么上面的input的checked属性也是false;都是true，topInp的checked就是true； //老三步
for(var i=0;i<botInpArr.length;i++){
botInpArr[i].onclick = function () {
//开闭原则
var bool = true;
//检测每一个input的checked属性值。
for(var j=0;j<botInpArr.length;j++){
if(botInpArr[j].checked === false){
bool = false;
}
}
topInp.checked = bool;
}
}
} </script> </head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="theadInp" />
</th>
<th>菜名</th>
<th>饭店</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>
<input type="checkbox" />
</td>
<td>地三鲜</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>西红柿鸡蛋</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>醋溜土豆丝</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>萝卜干炒黄豆儿</td>
<td>田老师</td>
</tr>
</tbody>
</table>
</div> </body>
</html>
点击全选和反选
属性的方法操作
<script>
//两种方式不能交换使用，赋值和获取值必须使用用一种方法。
var div = document.getElementById("box");
//元素节点.属性（元素节点[属性]）:绑定的属性值不会出现在标签上。
div.aaaa = "1111";
console.log(div.aaaa);
//get/set/removeAttribut: 绑定的属性值会出现在标签上。
div.setAttribute("bbbb","2222");
console.log(div.getAttribute("aaaa"));
console.log(div.bbbb);
</script>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
button {
margin: 10px;
width: 100px;
height: 40px;
cursor: pointer;
}
.current {
background-color: yellow;
}
</style>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button> <script>
//需求：鼠标放到哪个button上，改button变成黄色背景（添加类）
//步骤：
//1.获取事件源
//2.绑定事件
//3.书写事件驱动程序 //1.获取事件源
var btnArr = document.getElementsByTagName("button");
//2.绑定事件
for(var i=0;i<btnArr.length;i++){
btnArr[i].onmouseover = function () {
//排他思想（干掉所有人，剩下我一个）
//排他思想是和for循环连用
for(var j=0;j<btnArr.length;j++){
btnArr[j].className = "";
}
this.className = "current";
}
}
//3.书写事件驱动程序 </script> </body>
</html>
发现鼠标变色
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 500px;
height: 400px;
border: 1px solid #ccc;
margin: 100px auto;
overflow: hidden;
}
ul {
width: 600px;
height: 40px;
margin-left: -1px;
list-style: none;
}
li {
float: left;
width: 101px;
height: 40px;
text-align: center;
font: 600 18px/40px "simsun";
background-color: pink;
cursor: pointer;
}
span {
display: none;
width: 500px;
height: 360px;
background-color: yellow;
text-align: center;
font: 700 150px/360px "simsun";
}
.show {
display: block;
}
.current {
background-color: yellow;
}
</style> <script>
window.onload = function () {
//需求：鼠标放到上面的li上，li本身变色(添加类)，对应的span也显示出来(添加类);
//思路：1.点亮盒子。 2.利用索引值显示盒子。
//步骤：
//1.获取事件源和相关元素
//2.绑定事件
//3.书写事件驱动程序（排他思想） //1.获取事件源和相关元素
var boxArr = document.getElementsByClassName("box");
//函数调用
for(var i=0;i<boxArr.length;i++){
fn(boxArr[i]);
} //函数封装
function fn(ele){
var liArr = ele.getElementsByTagName("li");
var spanArr = ele.getElementsByTagName("span");
//2.绑定事件（循环绑定）
for(var i=0;i<liArr.length;i++){
//绑定索引值(自定义属性)
liArr[i].setAttribute("index",i);
liArr[i].onmouseover = function () {
//3.书写事件驱动程序（排他思想）
//1.点亮盒子。 2.利用索引值显示盒子。(排他思想)
for(var j=0;j<liArr.length;j++){
liArr[j].removeAttribute("class");
spanArr[j].removeAttribute("class");
}
this.setAttribute("class","current");
spanArr[this.getAttribute("index")].setAttribute("class","show");
}
}
}
}
</script>
</head>
<body> <div class="box">
<ul>
<li class="current">鞋子</li>
<li>袜子</li>
<li>帽子</li>
<li>裤子</li>
<li>裙子</li>
</ul>
<span class="show">鞋子</span>
<span>袜子</span>
<span>帽子</span>
<span>裤子</span>
<span>裙子</span>
</div> <div class="box">
<ul>
<li class="current">鞋子</li>
<li>袜子</li>
<li>帽子</li>
<li>裤子</li>
<li>裙子</li>
</ul>
<span class="show">鞋子</span>
<span>袜子</span>
<span>帽子</span>
<span>裤子</span>
<span>裙子</span>
</div> <div class="box">
<ul>
<li class="current">鞋子</li>
<li>袜子</li>
<li>帽子</li>
<li>裤子</li>
<li>裙子</li>
</ul>
<span class="show">鞋子</span>
<span>袜子</span>
<span>帽子</span>
<span>裤子</span>
<span>裙子</span>
</div> </body>
</html>
tab栏切换版本1
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 500px;
height: 400px;
border: 1px solid #ccc;
margin: 100px auto;
overflow: hidden;
}
ul {
width: 600px;
height: 40px;
margin-left: -1px;
list-style: none;
}
li {
float: left;
width: 101px;
height: 40px;
text-align: center;
font: 600 18px/40px "simsun";
background-color: pink;
cursor: pointer;
}
span {
display: none;
width: 500px;
height: 360px;
background-color: yellow;
text-align: center;
font: 700 150px/360px "simsun";
}
.show {
display: block;
}
.current {
background-color: yellow;
}
</style> <script>
window.onload = function () {
//需求：鼠标放到上面的li上，li本身变色(添加类)，对应的span也显示出来(添加类);
//思路：1.点亮盒子。 2.利用索引值显示盒子。
//步骤：
//1.获取事件源和相关元素
//2.绑定事件
//3.书写事件驱动程序（排他思想） //1.获取事件源和相关元素
var liArr = document.getElementsByTagName("li");
var spanArr = document.getElementsByTagName("span");
//2.绑定事件（循环绑定）
for(var i=0;i<liArr.length;i++){
//绑定索引值
liArr[i].index = i;
liArr[i].onmouseover = function () {
//3.书写事件驱动程序（排他思想）
//1.点亮盒子。 2.利用索引值显示盒子。(排他思想)
for(var j=0;j<liArr.length;j++){
liArr[j].className = "";
spanArr[j].className = "";
}
this.className = "current";
spanArr[this.index].className = "show";
}
}
}
</script>
</head>
<body> <div class="box">
<ul>
<li class="current">鞋子</li>
<li>袜子</li>
<li>帽子</li>
<li>裤子</li>
<li>裙子</li>
</ul>
<span class="show">鞋子</span>
<span>袜子</span>
<span>帽子</span>
<span>裤子</span>
<span>裙子</span>
</div> </body>
</html>
tab栏切换js版
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 500px;
height: 400px;
border: 1px solid #ccc;
margin: 100px auto;
overflow: hidden;
}
ul {
width: 600px;
height: 40px;
margin-left: -1px;
list-style: none;
}
li {
float: left;
width: 101px;
height: 40px;
text-align: center;
font: 600 18px/40px "simsun";
background-color: pink;
cursor: pointer;
}
span {
display: none;
width: 500px;
height: 360px;
background-color: yellow;
text-align: center;
font: 700 150px/360px "simsun";
}
.show {
display: block;
}
.current {
background-color: yellow;
}
</style> <script>
window.onload = function () {
var boxArr = document.getElementsByClassName("box");
for(var i=0;i<boxArr.length;i++){
fn(boxArr[i]);
}
function fn(ele){
var liArr = ele.getElementsByTagName("li");
var spanArr = ele.getElementsByTagName("span");
for(var i=0;i<liArr.length;i++){
liArr[i].index = i;
liArr[i].onmouseover = function () {
for(var j=0;j<liArr.length;j++){
liArr[j].className = "";
spanArr[j].className = "";
}
this.className = "current";
spanArr[this.index].className = "show";
}
}
}
}
</script>
</head>
<body> <div class="box">
<ul>
<li class="current">鞋子</li>
<li>袜子</li>
<li>帽子</li>
<li>裤子</li>
<li>裙子</li>
</ul>
<span class="show">鞋子</span>
<span>袜子</span>
<span>帽子</span>
<span>裤子</span>
<span>裙子</span>
</div> <div class="box">
<ul>
<li class="current">鞋子</li>
<li>袜子</li>
<li>帽子</li>
<li>裤子</li>
<li>裙子</li>
</ul>
<span class="show">鞋子</span>
<span>袜子</span>
<span>帽子</span>
<span>裤子</span>
<span>裙子</span>
</div> <div class="box">
<ul>
<li class="current">鞋子</li>
<li>袜子</li>
<li>帽子</li>
<li>裤子</li>
<li>裙子</li>
</ul>
<span class="show">鞋子</span>
<span>袜子</span>
<span>帽子</span>
<span>裤子</span>
<span>裙子</span>
</div> </body>
</html>
tab栏切换 精简版
节点的层次结构
父节点：parentNode 下面的IE678 不支持
兄弟节点： previousSibling || previousElementSibling 前一个兄弟节点
nextSibling || nextElementSibling 后一个兄弟节点
子节点 ： firstChild 第一个子节点 || firstElementChild
lastChild 最后一个子节点 || lastElementChild
所有子节点：var arr = box.parentNode.children
随意获取兄弟节点: 自己.parentNode.children[ index ];
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
li {
list-style: none;
width: 100px;
height: 100px;
background-color: pink;
margin: 5px;
}
</style>
</head>
<body> <ul>
<li class="box1"></li>
<li class="box2"></li>
<li id="box3"></li>
<li class="box4"></li>
<li class="box5"></li>
</ul> <script> //parentNode父盒子
var box3 = document.getElementById("box3");
box3.parentNode.style.backgroundColor = "blue"; //兄弟节点（前一个和后一个：previousSibling和nextSibling）
//previousElementSibling和nextElementSibling在IE678中不支持。IE678不能获取文本节点。
// box3.previousElementSibling.style.backgroundColor = "red";
// box3.nextElementSibling.style.backgroundColor = "yellow";
// box3.previousSibling.style.backgroundColor = "red";
// box3.nextSibling.style.backgroundColor = "yellow";
var pre = box3.previousElementSibling || box3.previousSibling;
var net = box3.nextElementSibling || box3.nextSibling;
pre.style.backgroundColor = "red";
net.style.backgroundColor = "yellow"; //单个子元素（firstChild和lastChild）
// box3.parentNode.firstElementChild.style.backgroundColor = "orange";
// box3.parentNode.lastElementChild.style.backgroundColor = "green";
var first = box3.parentNode.firstElementChild || box3.parentNode.firstChild;
var last = box3.parentNode.lastElementChild || box3.parentNode.lastChild;
first.style.backgroundColor = "orange";
last.style.backgroundColor = "green"; //所有子元素
var arr = box3.parentNode.children;
for(var i=0;i<arr.length;i++){
arr[i].style.backgroundColor = "black";
} console.log(box3.parentNode.childNodes);
var arr2 = box3.parentNode.childNodes;
for(var i=0;i<arr2.length;i++){
if(arr2[i].nodeType === 1){
console.log(arr2[i]);
}
} //随意获取指定兄弟节点
var index = 0;
var node = box3.parentNode.children[index]; //获取所有的兄弟节点
function siblings(elm) {
var a = [];
var p = elm.parentNode.children;
for(var i =0;i<p.length;i++) {
if(p[i] !== elm) {
a.push(p[i]);
}
}
return a;
} </script>
</body>
</html>
访问关系
nodeType / nodeName /nodeValue
nodeType:节点的类型： 元素节点：1 || 属性节点：2 || 文本节点：3
nodeName：节点的名字
nodeValue：节点的值： 元素节点（element）的value为 null ；属性的value 是属性值
<script>
var ele = document.getElementById("box");//元素节点
var att = ele.getAttributeNode("id");//属性节点
var txt = ele.firstChild;
// console.log(ele);
// console.log(att);
// console.log(txt);
//nodeType
console.log(ele.nodeType);//
console.log(att.nodeType);//
console.log(txt.nodeType);//
//nodeName
console.log(ele.nodeName);//DIV
console.log(att.nodeName);//id
console.log(txt.nodeName);//#text
//nodeValue
console.log(ele.nodeValue);//null
console.log(att.nodeValue);//box
console.log(txt.nodeValue);//你好
</script>
NodeType、nodeName、nodeValue