案例-显示隐藏二维码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.show {
display: block;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div>
<a href="#">aa</a>
<div id="er" class="hide">
<img src="image/2.png" alt=""/>
</div>
</div>
<script>
a = document.getElementsByTagName("a")[0];
er = document.getElementById("er");
a.onmouseover = fn1;
a.onmouseout =f2;
function fn1() {
// er.className="show";
//replace可以替换类名
er.className=er.className.replace("hide","show");
}
function f2() {
er.className="hide";
}
</script>
</body>
</html>
案例-禁用文本框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单元素属性</title>
</head>
<body>
<!--disable禁止修改-->
user:<input type="text" value="nihao"/><button>禁用</button><button>解除</button><br/><br/>
password:<input type="password" value="nihao"/>
<script>
//禁用文本框
var inp = document.getElementsByTagName("input")[0];
var btn1 = document.getElementsByTagName("button")[0];
var btn2 = document.getElementsByTagName("button")[1];
console.log(inp);
btn1.onclick = function () {
inp.disabled = "no";
};
btn2.onclick = function () {
//解除禁用
// inp.disabled = 0;//也可以用
inp.removeAttribute("disabled")
}
</script>
</body>
</html>
案例-文本框获取焦点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本框获取焦点</title>
<style>
input{
300px;
height: 36px;
padding-left: 5px;
color: #ccc;
}
label{
position: absolute;
top:82px;
left:56px;
font-size: 12px ;
color: #ccc;
cursor: text;//模拟文本鼠标格式
}
.show {
display: block;
}
.hide {
display: none;
}
</style>
</head>
<body>
京东:<input id="inp1" type="text" value="我是京东"><br><br>
<!--<lable></lable>标签，点击我是淘宝会自动选中输入框-->
淘宝:<label for="inp2">我是淘宝</label><input id="inp2" type="text" ><br><br>
placeholder:<input type="text" placeholder="placeholder">
<script>
//京东获取焦点
var inp1=document.getElementById("inp1");
//获取焦点事件
inp1.onfocus = function () {
//如果value是我是京东，把值重制为空
if(this.value==="我是京东"){
inp1.style.color = "#000";
inp1.value = "";
}
};
//失去焦点事件
inp1.onblur = function () {
//如果value是空，把值重制为我是京东
if(this.value === ""){
inp1.style.color = "#ccc";
inp1.value = "我是京东";
}
};
//淘宝获取焦点
//在input输入文字，lable标签隐藏；input标签value变成字符串，lable显示
var inp2=document.getElementById("inp2");
var lab=document.getElementsByTagName("label")[0];
//绑定事件（输入事件：文字的输入和删除都会触发这个事件）
// inp2.focus(); //自动获取插入条光标
inp2.oninput = function () {
//判断input值是不是为空，如果为空显示lable标签；否则隐藏lable标签
if(this.value === ""){
lab.className = "show";
}else{
lab.className = "hide";
}
}
</script>
</body>
</html>
案例-用户注册高亮显示
<!DOCTYPE html>
<html lang="en">
<head>
<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个字符通过,否则报错
function fn(aaa) {
// console.log(this);
//只有传递的this才指的是标签本身
// console.log(aaa.value);
// console.log(this.value);
if(aaa.value.length <6 || aaa.value.length>12){
aaa.className = "wrong";
}else{
aaa.className = "right";
}
}
</script>
</body>
</html>
案例-input for循环赋值，取值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>for循环为文本框赋值和取值</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[0].onclick = function () {
//循环为每一个input赋值
for(var i = 0;i<inpArr.length;i++){
inpArr[i].value = i;
}
};
//获取值
btnArr[1].onclick = function () {
//循环为获取input值
var newArr=[];
for(var i = 0;i<inpArr.length;i++){
newArr.push(inpArr[i].value);
}
console.log(newArr.join("-"));
}
</script>
</body>
</html>
案例-全选反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
window.onload = function () {
//需求1、点击上面的input，下面全选或反选
var topInp = document.getElementById("theadInp");
var tbody = document.getElementById("tbody");
var bottomInpArr = tbody.getElementsByTagName("input");
topInp.onclick = function () {
//判断在for循环里面
// for(var i = 0;i<bottomInpArr.length;i++){
// if(topInp.checked === true){
// bottomInpArr[i].checked = true;
// }else{
// bottomInpArr[i].checked = false;
// }
// }
//先判断
// if(topInp.checked){
// for(var i = 0;i<bottomInpArr.length;i++){
// bottomInpArr[i].checked = true;
// }
// }else{
// for(var i = 0;i<bottomInpArr.length;i++){
// bottomInpArr[i].checked = false;
// }
// }
//终极版
for(var i=0;i<bottomInpArr.length;i++){
bottomInpArr[i].checked = this.checked;
}
};
//需求2、如果下面的全部选定，上面选中，否则相反
for(var i=0;i<bottomInpArr.length;i++){
bottomInpArr[i].onclick = function () {
//开闭原则
var bool = true;
//检测每一个input的checked的属性值
for(var j=0;j<bottomInpArr.length;j++){
if(bottomInpArr[j].checked === false){
bool = false;
}
}
topInp.checked = bool;
}
}
}
</script>
<div>
<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>
属性的方法操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性设置</title>
</head>
<body>
<div id="box" title="主体" class="abcd">我爱你中国</div>
<script>
var div = document.getElementById("box");
//两种方式不能交换使用，赋值和获取值必须使用同一种方法
//元素节点.属性(元素节点[属性]) 绑定的属性值不会出现在标签上
div.aaaa = "111";
console.log(div.aaaa);
//get/set/removeAttribut 绑定的属性值会出现在标签上
div.setAttribute("bbbb","222");
console.log(div.getAttribute("bbbb"));
</script>
</body>
</html>
经典案例-tab栏切换
tab栏切换css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab栏切换</title>
</head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.box {
500px;
height: 400px;
border: 1px solid #ccc;
margin: 100px auto;
overflow: hidden;
}
ul{
600px;
height: 40px;
margin-left: -1px;
list-style:none;
}
li {
float: left;
101px;
height: 40px;
text-align: center;
font: 600 18px/40px "simsum";
background: pink;
cursor: pointer;
}
span{
display: none;
500px;
height: 360px;
background-color: yellow;
text-align: center;
font: 700 150px/360px "simsum";
}
.show{
display: block;
}
.current{
background-color: yellow;
}
</style>
<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>
点亮盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点亮盒子</title>
<style>
button{
margin: 10px;
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>
//鼠标放在那个按钮上，那个变色
var btnArr=document.getElementsByTagName("button");
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";
}
}
</script>
</body>
</html>
弹出盒子索引值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹出盒子的索引值</title>
<style>
button{
margin: 10px;
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>
//鼠标放在那个按钮上，那个变色
var btnArr=document.getElementsByTagName("button");
for(var i=0;i<btnArr.length;i++){
//每次循环绑定一个属性，属性值为该盒子索引值
// btnArr[i].setAttribute("index",i); //可以用
btnArr[i].index=i;
btnArr[i].onmouseover = function () {
// 重点：排他思想（干掉所有人，剩下我一个）
// 排他思想适合for循环
for(var j=0;j<btnArr.length;j++){
btnArr[j].className = "";
}
this.className = "current";
// alert(this.getAttribute("index"));
alert(this.index)
}
}
</script>
</body>
</html>
tab栏切换js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab栏切换</title>
</head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.box {
500px;
height: 400px;
border: 1px solid #ccc;
margin: 100px auto;
overflow: hidden;
}
ul{
600px;
height: 40px;
margin-left: -1px;
list-style:none;
}
li {
float: left;
101px;
height: 40px;
text-align: center;
font: 600 18px/40px "simsum";
background: pink;
cursor: pointer;
}
span{
display: none;
500px;
height: 360px;
background-color: yellow;
text-align: center;
font: 700 150px/360px "simsum";
}
.show{
display: block;
}
.current{
background-color: yellow;
}
</style>
<script>
window.onload = function () {
var liArr=document.getElementsByTagName("li");
var spanArr=document.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>
<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 lang="en">
<head>
<meta charset="UTF-8">
<title>tab栏切换</title>
</head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.box {
500px;
height: 400px;
border: 1px solid #ccc;
margin: 100px auto;
overflow: hidden;
}
ul{
600px;
height: 40px;
margin-left: -1px;
list-style:none;
}
li {
float: left;
101px;
height: 40px;
text-align: center;
font: 600 18px/40px "simsum";
background: pink;
cursor: pointer;
}
span{
display: none;
500px;
height: 360px;
background-color: yellow;
text-align: center;
font: 700 150px/360px "simsum";
}
.show{
display: block;
}
.current{
background-color: yellow;
}
</style>
<script>
window.onload = function () {
var liArr=document.getElementsByTagName("li");
var spanArr=document.getElementsByTagName("span");
for(var i = 0;i<liArr.length;i++){
//绑定索引值
// liArr[i].index=i;
liArr[i].setAttribute("index",i);
liArr[i].onmouseover = function () {
//排他思想，点亮盒子，利用索引值显示盒子
for(var j=0;j<liArr.length;j++){
// liArr[j].className = " ";
// spanArr[j].className="";
liArr[j].removeAttribute("class");
spanArr[j].removeAttribute("class");
}
this.setAttribute("class","current");
// spanArr[this.index].className = "show";
spanArr[this.getAttribute("index")].setAttribute("class","show");
}
}
}
</script>
<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 lang="en">
<head>
<meta charset="UTF-8">
<title>tab栏切换</title>
</head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.box {
500px;
height: 400px;
border: 1px solid #ccc;
margin: 100px auto;
overflow: hidden;
}
ul{
600px;
height: 40px;
margin-left: -1px;
list-style:none;
}
li {
float: left;
101px;
height: 40px;
text-align: center;
font: 600 18px/40px "simsum";
background: pink;
cursor: pointer;
}
span{
display: none;
500px;
height: 360px;
background-color: yellow;
text-align: center;
font: 700 150px/360px "simsum";
}
.show{
display: block;
}
.current{
background-color: yellow;
}
</style>
<script>
window.onload = function () {
//获取事件源和相关元素
var boxArr = document.getElementsByClassName("box");
//函数调用
// fn(boxArr[0]);
// fn(boxArr[1]);
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].setAttribute("index",i);
liArr[i].onmouseover = function () {
//排他思想，点亮盒子，利用索引值显示盒子
for(var j=0;j<liArr.length;j++){
// liArr[j].className = " ";
// spanArr[j].className="";
liArr[j].removeAttribute("class");
spanArr[j].removeAttribute("class");
}
this.setAttribute("class","current");
// spanArr[this.index].className = "show";
spanArr[this.getAttribute("index")].setAttribute("class","show");
}
}
}
}
</script>
<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>
</body>
</html>
访问关系（元素节点 文本节点）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>访问关系</title>
<style>
li{
list-style: none;
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";
//兄弟节点（前一个previous，后一个next）
//previousElementSibling,nextElementSibling IE6、7、8不支持文本节点
// box3.previousElementSibling.style.backgroundColor = "red";
// box3.nextElementSibling.style.backgroundColor = "yellow";
//兼容性
var pre = box3.previousElementSibling || box3.previousSibling;
var net = box3.nextElementSibling || box3.nextSibling;
pre.style.backgroundColor="red";
net.style.backgroundColor="yellow";
//单个子元素(第一个first，最后一个last)
// 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";
}
//判断是不是元素节点，arr2[a].nodeType === 1是元素节点
console.log(box3.parentNode.childNodes);
var arr2=box3.parentNode.childNodes;
for(var a = 0;a<arr2.length;a++){
if(arr2[a].nodeType === 1){
console.log(arr2[a]);
}
}
</script>
</body>
</html>
nodeType/nodeValue/nodeName
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nodeType和nodeValue</title>
</head>
<body>
<div id="box" value="111">你好</div>
<script>
var ele = document.getElementById("box");//元素节点1
var att = ele.getAttributeNode("id");//属性节点2
var txt = ele.firstChild;//文本节点3
//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 所有文本节点都叫#text
//nodeValue
console.log(ele.nodeValue); //null 元素节点应该是null
console.log(att.nodeValue); //box
console.log(txt.nodeValue); //你好
</script>
</body>
</html>
案例-隔行变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隔行变色</title>
<style>
ul{
1210px;
margin: 100px auto;
}
li{
height: 34px;
cursor: pointer;
list-style: none;
font: 500 16px/34px "simsun";
}
</style>
</head>
<body>
<ul>
<li>北京股指 3001.11-22.18 (-0.72%)</li>
<li>上海股指 3001.11-22.18 (-0.72%)</li>
<li>广州股指 3001.11-22.18 (-0.72%)</li>
<li>河南股指 3001.11-22.18 (-0.72%)</li>
<li>河北股指 3001.11-22.18 (-0.72%)</li>
<li>新疆股指 3001.11-22.18 (-0.72%)</li>
<li>辽宁股指 3001.11-22.18 (-0.72%)</li>
<li>固始股指 3001.11-22.18 (-0.72%)</li>
</ul>
<script>
//简单写法
// var arr = document.getElementsByTagName("li");
// for(var i=0;i<arr.length;i++){
// if(i%2===0){
// arr[i].style.backgroundColor = "#ccc";
// }
// }
//复杂版
var ul = document.getElementsByTagName("ul")[0];
var arr = ul.childNodes;
//把元素节点重新放入一个新数组
var newArr = [];
for(var i=0;i<arr.length;i++){
if(arr[i].nodeType===1){
newArr.push(arr[i]);
}
}
//隔行变色
for(var i=0;i<newArr.length;i++){
if(i%2!=0){
newArr[i].style.backgroundColor = "red";
}
}
</script>
</body>
</html>