01-隐藏显示二维码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.nodeSmall {
width: 50px;
height: 50px;
background: url(images/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类名）
// 鼠标移开a链接，隐藏二维码（添加hide类名，去掉show类名）
//步骤：
//1.获取事件源和相关元素
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源和相关元素
var a = document.getElementsByTagName("a")[0];
var div = document.getElementsByClassName("erweima")[0];
//2.绑定事件
a.onmouseover = fn1;
a.onmouseout = fn2;
//定义方法
function fn1() {
//3.书写事件驱动程序
div.className = "erweima show";
// div.className = div.className.replace("hide","show");
}
function fn2() {
div.className = "erweima hide";
//了解,字符串操作，把字符串中的hide替换成show。
// div.className = div.className.replace("show","hide");
}
}
</script>
</head>
<body>
<div class="nodeSmall" id="node_small">
<a href="#"></a>
<div class="erweima hide" id="er">
<img src="images/456.png" alt=""/>
</div>
</div>
</body>
</html>
02-禁用文本框
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
账号: <input type="text" value="传智你好..."/><button>禁用</button><button>解禁</button><br><br>
密码: <input type="password" value="aaabbbccc"/>
<script>
//需求：禁用文本框
//步骤：
//1.获取事件源和相关元素
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源和相关元素
var inp = document.getElementsByTagName("input")[0];
var btn1 = document.getElementsByTagName("button")[0];
var btn2 = document.getElementsByTagName("button")[1];
//2.绑定事件
btn1.onclick = function () {
//3.书写事件驱动程序
inp.disabled = true;
}
btn2.onclick = function () {
//3.书写事件驱动程序
inp.disabled = false;
// inp.removeAttribute("disabled");
}
</script>
</body>
</html>
03-文本框获取焦点
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
input {
width: 300px;
height: 36px;
padding-left: 5px;
color: #ccc;
}
label {
position: absolute;
top: 82px;
left: 56px;
font-size: 12px;
color: #ccc;
cursor: text;
}
.hide {
display: none;
}
.show {
display: block;
}
</style>
</head>
<body>
京东:<input id="inp1" type="text" value="我是京东"/><br><br>
淘宝:<label for="inp2">我是淘宝</label><input id="inp2" type="text"/><br><br>
placeholder:<input type="text" placeholder="我是placeholder"/>
<script>
//需求：京东的获取焦点。
//思路：京东的input按钮获取了插入条光标立刻删除内容。失去插入条光标显示文字。
//步骤：
//1.获取事件源和相关元素
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源和相关元素
var inp1 = document.getElementById("inp1");
//2.绑定事件(获取焦点事件)
inp1.onfocus = function () {
//判断，如果input里面的内容是“我是京东”，那么把值赋值为“”；
if(this.value === "我是京东"){
// inp1.style.color = "#000";
inp1.value = "";
}
}
//(失去焦点事件)焦点：插入条光标
inp1.onblur = function () {
//失去焦点后判断，如果input内容为空，那么把内容赋值为我是京东。
if(this.value === ""){
//3.书写事件驱动程序
// inp1.style.color = "#ccc";
inp1.value = "我是京东";
}
}
//需求：淘宝的获取焦点。
//思路：在input中输入文字，label标签隐藏，里面的文字变成空字符串，label显示。
//步骤：
//1.获取事件源和相关元素
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源和相关元素
var inp2 = document.getElementById("inp2");
var lab = document.getElementsByTagName("label")[0];
//2.绑定事件(输入事件，文字的输入和删除都会触动这个事件)
//获取插入条光标
// inp2.focus();
inp2.oninput = function () {
//3.书写事件驱动程序
//判断input中的值是否为空，如果为空，那么label显示，否则隐藏。
if(this.value === ""){
lab.className = "show";
}else{
lab.className = "hide";
}
}
</script>
</body>
</html>
04-用户注册高亮显示
<!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 < 6 || aaa.value.length>12){
aaa.className = "wrong";
}else{
aaa.className = "right";
}
}
</script>
</body>
</html>
05-设置水果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button>识别鲤鱼</button><br><br>
<button>去掉</button><br><br>
<select id="sel" multiple>
<option value="0">香蕉</option>
<option value="1">苹果</option>
<option value="2" selected="">鲤鱼</option>
<option value="3">鸭梨</option>
</select>
<script>
//需求：点击识别水产，立刻把option对应的鲤鱼选择的属性设置为selected;
//步骤：
//1.获取事件源和相关元素
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源和相关元素
var btn1 = document.getElementsByTagName("button")[0];
var btn2 = document.getElementsByTagName("button")[1];
var sel = document.getElementById("sel");
var optArr = sel.getElementsByTagName("option");
//2.绑定事件
btn1.onclick = function () {
//3.书写事件驱动程序
optArr[2].selected = true;
}
//
btn2.onclick = function () {
//3.书写事件驱动程序
optArr[2].selected = false;
optArr[3].selected = true;
}
</script>
</body>
</html>
06-for循环为文本框赋值和取值
<!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[0].onclick = function () {
//循环为每一个input赋值
for(var i=0;i<inpArr.length;i++){
inpArr[i].value = i;
}
}
//获取值
btnArr[1].onclick = function () {
//循环获取nput的值赋值为一个数组
var newArr = [];
for(var i=0;i<inpArr.length;i++){
newArr.push(inpArr[i].value);
}
console.log(newArr.join(" "));
}
</script>
</body>
</html>
07-全选反选
<!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[0].onclick = function () {
//循环为每一个input赋值
for(var i=0;i<inpArr.length;i++){
inpArr[i].value = i;
}
}
//获取值
btnArr[1].onclick = function () {
//循环获取nput的值赋值为一个数组
var newArr = [];
for(var i=0;i<inpArr.length;i++){
newArr.push(inpArr[i].value);
}
console.log(newArr.join(" "));
}
</script>
</body>
</html>
08-属性的方法操作（getsetremoveAttribute)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box" title="主体" class="asdfasdfadsfd">我爱你中国</div>
<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>
</body>
</html>
09-tab栏切换
<!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栏切换（复杂版）
<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>
10-点亮盒子
<!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>
11-弹出盒子的索引值
<!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].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);
}
}
//3.书写事件驱动程序
</script>
</body>
</html>
14-访问关系
<!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>
15-nodeType和nodeName和nodeValue
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box" value="111">你好</div>
<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);//1
console.log(att.nodeType);//2
console.log(txt.nodeType);//3
//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>
</body>
</html>
16-隔行变色
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul {
width: 1210px;
margin: 100px auto;
}
li {
height: 34px;
cursor: pointer;
font: 500 16px/34px "simsun";
}
</style>
</head>
<body>
<ul>
<li>北京股指 3063.31-22.18 (-0.72%)</li>
<li>上海股指 3063.31-22.18 (-0.72%)</li>
<li>广州股指 3063.31-22.18 (-0.72%)</li>
<li>深圳股指 3063.31-22.18 (-0.72%)</li>
<li>北京股指 3063.31-22.18 (-0.72%)</li>
<li>上海股指 3063.31-22.18 (-0.72%)</li>
<li>广州股指 3063.31-22.18 (-0.72%)</li>
<li>深圳股指 3063.31-22.18 (-0.72%)</li>
</ul>
<script>
//需求：利用childNodes实现各行变色
//简单版
// var arr = document.getElementsByTagName("li");
// for(var i=0;i<arr.length;i++){
// if(i%2===0){
// arr[i].style.backgroundColor = "#ccc";
// }
// }
//复杂版
//获取ul
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>
