DOM
2017-06-23 本文已影响0人
Yuann
window.onload
什么条件下触动这个事件呢？页面加载（文本和图片）完毕的时候。
//用途
//js的加载时和html同步加载的。（如果使用元素在定义元素之间，容易报错。）
//整个页面上所有元素加载完毕在执行js内容
//window.onload可以预防使用标签在定义标签之前。
关闭京东广告栏
//需求：点击案例，隐藏盒子。
//思路：点击a链接，让top-banner这个盒子隐藏起来（加隐藏类名）。
//步骤：
//1.获取事件源和相关元素
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源和相关元素
var closeBanner = document.getElementById("closeBanner");
var topBanner = document.getElementById("topBanner");
//2.绑定事件
closeBanner.onclick = function () {
//3.书写事件驱动程序
// console.log(1);
//类控制
// topBanner.className += " hide"; //保留原类名，添加新类名
topBanner.className = "hide";//替换旧类名
// topBanner.style.display = "none";
}
京东狗
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
//window.onload页面加载完毕以后再执行此代码
window.onload = function () {
//需求：鼠标放到img上，修改路径（src的值）。
//步骤：
//1.获取事件源
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源
var img = document.getElementById("box");
//2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)
img.onmouseover = function () {
//3.书写事件驱动程序(修改src)
img.src = "image/jd2.png";
// this.src = "image/jd2.png";
}
//1.获取事件源
var img = document.getElementById("box");
//2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)
img.onmouseout = function () {
//3.书写事件驱动程序(修改src)
this.src = "image/jd1.png";
}
//获取事件源（元素可以不获取直接使用id的值）
// var img = document.getElementById("box");
// //调用函数
// img.onmouseover = fn1;
// img.onmouseout = fn2;
// //定义函数
// function fn1() {
// img.src = "image/jd2.png";
// }
// function fn2() {
// img.src = "image/jd1.png";
// }
}
</script>
</head>
<body>
</body>
</html>
dom概述
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="box1">
<div class="box2" id="box2"></div>
<div class="box3"></div>
</div>
<script>
//节点的访问关系是以属性形式存在
//1.box1是box的父节点
// var box2 = document.getElementsByClassName("box2")[0];
// var box2 = document.getElementById("box2")
// console.log(box2.parentNode);
//
// //2.nextElementSibling下一个兄弟节点
// console.log(box2.nextElementSibling);
//
// //firstElementChild第一个子节点
// console.log(box2.parentNode.firstElementChild);
//
// //所有子节点
// console.log(box2.parentNode.childNodes);
// console.log(box2.parentNode.children);
//节点的操作
//1.创建
var aaa = document.createElement("li");
var bbb = document.createElement("afadsfadsf");
console.log(aaa);
console.log(bbb);
//添加
var box1 = document.getElementsByClassName("box1")[0];
box1.appendChild(aaa);
box1.insertBefore(bbb,aaa);
//删除
box1.removeChild(bbb);
aaa.parentNode.removeChild(aaa);//自杀，自己删除自己
//克隆
var ccc = box1.cloneNode();
var ddd = box1.cloneNode(true);
console.log(ccc);
console.log(ddd);
</script>
</body>
</html>
节点的属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
var eleNode = document.getElementsByTagName("img")[0];
//属性、赋值获取两种方式
//1.元素节点.属性或者元素节点[属性]
eleNode.src = "image/jd2.png";
eleNode.aaa = "bbb";
console.log(eleNode.aaa);
console.log(eleNode.src);
console.log(eleNode.tagName);
console.log(eleNode["title"]);
console.log(eleNode["className"]);
console.log(eleNode["alt"]);
//2.元素节点.方法();
console.log(eleNode.getAttribute("id"));
eleNode.setAttribute("id","你好");
eleNode.setAttribute("ccc","ddd");
eleNode.removeAttribute("id");
}
</script>
</head>
<body>
</body>
</html>
```
####图片切换
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--<a href="javacript:;">切换</a>-->
<!--<a href="#">切换</a>-->
<a href="http://www.baidu.com" style="margin:10px;display: block" onclick="fn();return false;">切换</a>
<script>
//需求：点击a链接，img图片切换（行内式）
//步骤：
//1.获取事件源和图片
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源和图片
// var a = document.getElementsByTagName("a")[0];
// var img = document.getElementById("img");
// //2.绑定事件
// a.onclick = function () {
// //3.书写事件驱动程序
// img.src = "image/2.jpg";
// //return false的目的是禁止a连接跳转；
// return false;
// }
var img = document.getElementById("img");
function fn(){
img.src = "image/2.jpg";
}
</script>
</body>
</html>
```
####显示和隐藏盒子
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
button {
margin: 10px;
}
div {
width: 200px;
height: 200px;
background-color: pink;
}
.show {
display: block;
}
.hide {
display: none;
}
</style>
</head>
<body>
<button id="btn">隐藏</button>
<div>
临千仞之溪，非才长也，位高也！
</div>
<script>
//需求：点击button,隐藏盒子。改变文字，在点击按钮，显示出来。
//步骤：
//1.获取事件源和相关元素
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源和相关元素
var btn = document.getElementById("btn");
var div = document.getElementsByTagName("div")[0];
//2.绑定事件
btn.onclick = function () {
//3.书写事件驱动程序
//判断btn的innerHTML属性值，如果为隐藏就隐藏盒子，并修改按钮内容为显示。
//反之，则显示，并修改按钮内容为隐藏
if(this.innerHTML === "隐藏"){
div.className = "hide";
//修改文字（innerHTML）
btn.innerHTML = "显示";
}else{
div.className = "show";
//修改文字（innerHTML）
btn.innerHTML = "隐藏";
}
}
</script>
</body>
</html>
```
####美女相册
````html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
font-family: "Helvetica", "Arial", serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1 {
color: #333;
background-color: transparent;
}
a {
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em;
list-style: none;
}
#imagegallery {
list-style: none;
}
#imagegallery li {
margin: 0px 20px 20px 0px;
padding: 0px;
display: inline;
}
#imagegallery li a img {
border: 0;
}
</style>
</head>
<body>
<h2>
美女画廊
</h2>
<a href="#">注册</a>
<ul id="imagegallery">
<li>
<a href="image/1.jpg" title="美女A">
</a>
</li>
<li>
<a href="image/2.jpg" title="美女B">
</a>
</li>
<li>
<a href="image/3.jpg" title="美女C">
</a>
</li>
<li>
<a href="image/4.jpg" title="美女D">
</a>
</li>
</ul>
<div style="clear:both"></div>
<p id="des">选择一个图片</p>
<script>
//需求：点击小图片，改变下面的大图片的src属性值。赋值为a链接的href属性值。
//让p标签的innnerHTML属性值，变成a标签的title属性值。
//步骤：
//1.获取事件源和相关元素
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源和相关元素
//利用元素获取其下面的标签。
var ul = document.getElementById("imagegallery");
var aArr = ul.getElementsByTagName("a");
// console.log(aArr[0]);
var img = document.getElementById("image");
var des = document.getElementById("des");
//2.绑定事件
//以前是一个一个绑定，但是现在是一个数组。for循环绑定
for(var i=0;i<aArr.length;i++){
aArr[i].onclick = function () {
//3.书写事件驱动程序
//修改属性
//this指的是函数调用者，和i并无关系，所以不会出错。
img.src = this.href;
// img.src = aArr[i].href;
des.innerHTML = this.title;
return false;
}
}
</script>
</body>
</html>
```
####value和innerHTML 和innerText
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--<input type="button" value="我是input中的button"/>-->
<!--<button>我是button</button>-->
<input id="inp1" type="text" value="我是inpput的value属性值"/>
<div id="box1">
我是box1的内容
<div id="box2">我是box2的内容</div>
</div>
<div id="box3">
我是box1的内容
<div id="box4">我是box2的内容</div>
</div>
<script>
//value：标签的value属性。
console.log(document.getElementById("inp1").value);
//innerHTML：获取双闭合标签里面的内容。（识别标签）
console.log(document.getElementById("box1").innerHTML);
document.getElementById("box1").innerHTML = "<h1>我是innerHTML</h1>";
//innerText：获取双闭合标签里面的内容。（不识别标签）（老版本的火狐用textContent）
console.log(document.getElementById("box3").innerText);
document.getElementById("box3").innerText = "<h1>我是innerText</h1>";
</script>
</body>
</html>
```
####显示和隐藏文本框
```html
<!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">
</div>
</div>
</body>
</html>
```
####禁用文本框
```html
<!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 = "no";
}
btn2.onclick = function () {
//3.书写事件驱动程序
inp.disabled = false;
// inp.removeAttribute("disabled");
}
</script>
</body>
</html>
```
####文本框获取焦点
```html
<!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>
```
####用户注册高亮显示
```html
<!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>
```
####设置水果
```html
<!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>
```
####for循环为文本框赋值和取值
```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[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>
```
####全选反选
```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 () {
//牛劲版
// 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>
```
####属性的方法操作
```html
<!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>
```
####tab栏切换
```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>
```
####点亮盒子
```html
<!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>
```
####弹出盒子的索引值
```html
<!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>
```
####tab栏切换(精简版)
```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 () {
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>
```
####访问关系
```html
<!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
```html
<!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>
```
####隔行变色
```html
<!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>
```
#### 访问关系
````html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
li {
width: 100px;
height: 100px;
background-color: pink;
margin: 5px;
list-style: none;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li id="box"></li>
<li></li>
<li></li>
</ul>
<script src="tools.js"></script>
<script>
//获取box改为red
var box = getEle("box");
box.style.backgroundColor = "red"
//获取第一个和最后一个子节点
var parent = box.parentNode;
getFirstNode(parent).style.backgroundColor = "yellow";
getLastNode(parent).style.backgroundColor = "yellow";
//获取上一个和下一个兄弟节点
getNextNode(box).style.backgroundColor = "blue";
getPrevNode(box).style.backgroundColor = "blue";
//指定兄弟节点
getEleOfIndex(box,0).style.backgroundColor = "green";
getEleOfIndex(box,1).style.backgroundColor = "green";
//获取所有的兄弟节点（返回值是数组，所以用for循环操作）
var arr = getAllSiblings(box);
for(var i=0;i<arr.length;i++){
arr[i].style.backgroundColor = "black";
}
// //父节点
// div.parentNode;
//
// //访问兄弟节点
// div.previousSibling;
// div.previousElementSibling;
// div.nextSibling;
// div.nextElementSibling;
//
// //访问单个子节点
// div.firstChild;
// div.firstElementChild;
// div.lastChild;
// div.lastElementChild;
//
//
// //获取所有子节点
// div.childNodes;
// div.children;
//
//
// //获取指定的兄弟节点
// div.parentNode.children[index];
//
// //获取所有的兄弟节点（返回值是一个数组）
// function fn(ele){
// //定义一个新数组，装所有的兄弟元素，将来返回
// var newArr = [];
// var arr = ele.parentNode.children;
// for(var i=0;i<arr.length;i++){
// //判断，如果不是传递过来的元素本身，那么添加到新数组中。
// if(arr[i]!==ele){
// newArr.push(arr[i]);
//// newArr[newArr.length] = arr[i];
// }
// }
// return newArr;
// }
</script>
</body>
</html>
tools.js
/**
* Created by Lenovo on 2016/9/2.
*/
function getEle(id){
return document.getElementById(id);
}
/**
* 功能：给定元素查找他的第一个元素子节点，并返回
* @param ele
* @returns {Element|*|Node}
*/
function getFirstNode(ele){
var node = ele.firstElementChild || ele.firstChild;
return node;
}
/**
* 功能：给定元素查找他的最后一个元素子节点，并返回
* @param ele
* @returns {Element|*|Node}
*/
function getLastNode(ele){
return ele.lastElementChild || ele.lastChild;
}
/**
* 功能：给定元素查找他的下一个元素兄弟节点，并返回
* @param ele
* @returns {Element|*|Node}
*/
function getNextNode(ele){
return ele.nextElementSibling || ele.nextSibling;
}
/**
* 功能：给定元素查找他的上一个兄弟元素节点，并返回
* @param ele
* @returns {Element|*|Node}
*/
function getPrevNode(ele){
return ele.previousElementSibling || ele.previousSibling;
}
/**
* 功能：给定元素和索引值查找指定索引值的兄弟元素节点，并返回
* @param ele 元素节点
* @param index 索引值
* @returns {*|HTMLElement}
*/
function getEleOfIndex(ele,index){
return ele.parentNode.children[index];
}
/**
* 功能：给定元素查找他的所有兄弟元素，并返回数组
* @param ele
* @returns {Array}
*/
function getAllSiblings(ele){
//定义一个新数组，装所有的兄弟元素，将来返回
var newArr = [];
var arr = ele.parentNode.children;
for(var i=0;i<arr.length;i++){
//判断，如果不是传递过来的元素本身，那么添加到新数组中。
if(arr[i]!==ele){
newArr.push(arr[i]);
}
}
return newArr;
}
菜单练习
菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#list li {
list-style-type: none;
width: 80px;
height: 30px;
line-height: 30px;
background-color:beige;
text-align: center;
float: left;
margin-left: 5px;
}
#list li.current {
background-color: burlywood;
}
#list li a {
text-decoration: none;
}
</style>
<script src="tools.js"></script>
<script>
window.onload = function () {
//需求：点击a链接，让a链接对应的li标签添加类。
//思路：点击a链接，让他的父亲添加类，其他的li标签类名清空。
//步骤：
//1.获取事件源
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源
var ul = getEle("list");
var aArr = ul.getElementsByTagName("a");
for(var i=0;i<aArr.length;i++){
aArr[i].onclick = function () {
//点击哪个a链接，让他的父亲添加类
this.parentNode.className = "current";
//设置他的父元素的其他所有兄弟节点类名为空
var otherArr = getAllSiblings(this.parentNode);
for(var j=0;j<otherArr.length;j++){
otherArr[j].className = "";
}
}
}
// //1.获取事件源
// var ul = getEle("list");
// var liArr = ul.children;
// //2.绑定事件
// for(var i=0;i<liArr.length;i++){
// var a = getFirstNode(liArr[i]);
// a.onclick = function () {
// //3.书写事件驱动程序
// //排他思想
// for(var j=0;j<liArr.length;j++){
// liArr[j].className = "";
// }
// this.parentNode.className = "current";
// }
// }
}
</script>
</head>
<body>
<div id="menu">
<ul id="list">
<li class="current"><a href="#">首页</a></li>
<li><a href="javascript:void(0)">播客</a></li>
<li><a href="javascript:void(0)">博客</a></li>
<li><a href="javascript:void(0)">相册</a></li>
<li><a href="javascript:void(0)">关于</a></li>
<li><a href="javascript:void(0)">帮助</a></li>
</ul>
</div>
</body>
</html>
style属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box {
border: 10px solid #000;
}
</style>
</head>
<body>
<div class="box" style="width: 100px;height: 100px;background-color: pink;">我爱你中国</div>
<script>
var box = document.getElementsByTagName("div")[0];
// 1.样式少的时候使用
console.log(box.style.backgroundColor);
// 2.style是对象
console.log(box.style);
console.log(typeof box.style);
//3.值是字符串，没有设置值是“”；
console.log(box.style.lineHeight);
console.log(box.style.border);
// 4.命名规则，驼峰命名。和css不一样
console.log(box.style.backgroundColor);
// 5.设置了类样式不能获取。（只和行内式交互，和内嵌和外链无关）
console.log(typeof box.className);
// 6.box.style.cssText = “字符串形式的样式”；
console.log(box.style.cssText);
box.style.cssText = "width: 200px; height: 200px; background-color: red;line-height:200px;text-align:center;"
</script>
</body>
</html>
文本框获取焦点高亮显示
文本框获取焦点高亮显示
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
input {
display: block;
}
</style>
</head>
<body>
<ul>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<button>设置</button>
</ul>
<script>
//需求：点击设置按钮，让所有的input标签获取焦点后高亮显示
//步骤：
//1.获取事件源
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源
var inpArr = document.getElementsByTagName("input");
var button = inpArr[inpArr.length-1].nextElementSibling || inpArr[inpArr.length-1].nextSibling ;
//2.绑定事件
button.onclick = function () {
//3.书写事件驱动程序
for(var i=0;i<inpArr.length;i++){
//当button按钮被点击以后，所有的input标签被绑定事件，onfocus事件
inpArr[i].onfocus = function () {
this.style.border = "2px solid red";
this.style.backgroundColor = "#ccc";
}
//绑定onblur事件，取消样式
inpArr[i].onblur = function () {
this.style.border = "";
this.style.backgroundColor = "";
}
}
}
</script>
</body>
</html>
高级隔行变色
高级隔行变色
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
text-align: center;
}
.wrap {
width: 500px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
}
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;
cursor: pointer;
}
.current {
background-color: red!important;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>课程</th>
<th>成绩</th>
</tr>
</thead>
<tbody id="target">
<tr>
<td>
1
</td>
<td>吕不韦</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>
2
</td>
<td>吕布</td>
<td>日语</td>
<td>100</td>
</tr>
<tr>
<td>
3
</td>
<td>吕蒙</td>
<td>营销学</td>
<td>100</td>
</tr>
<tr>
<td>
4
</td>
<td>吕尚</td>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td>
5
</td>
<td>吕雉</td>
<td>英语</td>
<td>100</td>
</tr>
<tr>
<td>
6
</td>
<td>吕超</td>
<td>体育</td>
<td>100</td>
</tr>
</tbody>
</table>
</div>
<script>
//需求：让tr各行变色，鼠标放入tr中，高亮显示。
//1.隔行变色。
var tbody = document.getElementById("target");
var trArr = tbody.children;
//循环判断并各行赋值属性（背景色）
for(var i=0;i<trArr.length;i++){
if(i%2!==0){
trArr[i].style.backgroundColor = "#a3a3a3";
}else{
trArr[i].style.backgroundColor = "#ccc";
}
//鼠标进入高亮显示
//难点：鼠标移开的时候要回复原始颜色。
//计数器（进入tr之后，立刻记录颜色，然后移开的时候使用记录好的颜色）
var color = "";
trArr[i].onmouseover = function () {
//赋值颜色之前，先记录颜色
color = this.style.backgroundColor;
this.style.backgroundColor = "#fff";
}
trArr[i].onmouseout = function () {
this.style.backgroundColor = color;
}
}
</script>
</body>
</html>
百度皮肤
百度皮肤
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
body {
background: url(image/1.jpg) no-repeat;
}
.box {
height: 165px;
padding-top: 35px;
text-align: center;
background: rgba(255,255,255,0.3);
}
img {
cursor: pointer;
margin: 0 10px;
}
</style>
</head>
<body>
<div class="box">
<img src="image/1.jpg" alt="" width="200px"/>
<img src="image/2.jpg" alt="" width="200px"/>
<img src="image/3.jpg" alt="" width="200px"/>
<img src="image/4.jpg" alt="" width="200px"/>
<img src="image/5.jpg" alt="" width="200px"/>
</div>
<script>
//需求：点击图片，body的背景图修改。
//步骤：
//1.获取事件源
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源
var box = document.getElementsByTagName("div")[0];
//body的获取js内部帮我们优化完毕
var body = document.body;
var imgArr = box.children;
//2.绑定事件
for(var i=0;i<imgArr.length;i++){
imgArr[i].index = i;
imgArr[i].onclick = function () {
//3.书写事件驱动程序
//改body的背景
// body.style.backgroundImage = "url(image/"+(this.index+1)+".jpg)";
body.style.backgroundImage = "url("+this.src+")";
}
}
</script>
</body>
</html>
隐藏盒子
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="box"></div>
<script>
//获取盒子，设置样式
var box = document.getElementsByClassName("box")[0];
// box.style.width = "100px";
// box.style.height = "100px";
// box.style.backgroundColor = "pink";
box.style.cssText = "width:100px;height:100px;background-color:red";
//隐藏盒子
box.onclick = function () {
this.style.display = "none";
// this.style.visibility = "hidden";
this.style.opacity = "0";
// this.style.position = "absolute";
// this.style.top = "-50px";
}
</script>
</body>
</html>
定位和层级
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
margin-top: 20px;
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 100px;
left: 10px;
z-index: 1;
}
img {
position: absolute;
top: 100px;
left: 10px;
}
</style>
</head>
<body>
<button>动！！！</button>
<div></div>
<img src="image/mm.png" alt="" width="200px"/>
<script>
//需求：点击按钮，让盒子和图片同事移开，并且，图片压住盒子.
var btn = document.getElementsByTagName("button")[0];
var div = document.getElementsByTagName("div")[0];
var img = document.getElementsByTagName("img")[0];
//绑定事件
btn.onclick = function () {
div.style.top = "300px";
div.style.left = "300px";
img.style.top = "300px";
img.style.left = "300px";
img.style.zIndex = "2";
}
</script>
</body>
</html>
dom元素的创建
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button>创建</button>
<ul>
aaaaa
</ul>
<script>
//第一种创建方式：document.write();
document.write("<li>我是document.write创建的</li>");
var btn = document.getElementsByTagName("button")[0];
var ul = document.getElementsByTagName("ul")[0];
// btn.onclick = function () {
// document.write("<li>我是document.write创建的</li>");
// }
//第二种：直接利用元素的innerHTNL方法。（innerText方法不识别标签）
ul.innerHTML += "<li id='li1'>我是innerHTML创建的</li>"
//第三种：利用dom的api创建元素
var newLi = document.createElement("li");
newLi.innerHTML = "我是createElement创建的";
// console.log(newLi);
//在父元素的最后面添加元素。
// ul.appendChild(newLi);
//指定位置添加
var li1 = document.getElementById("li1");
ul.insertBefore(newLi,li1);
</script>
</body>
</html>
