排它思想
如果有同一组数据，我们想要为某一个元素单独设置样式，需要使用for循环的排它思想
思路如下
- 清除所有元素的样式
- 单独为当前元素设置样式
- 顺序不能颠倒
- this是指当前事件的调用者。
排它思想之习题一
点击当前按钮，背景色变为紫色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>排他思想之习题一</title>
<style>
button {
color: red;
font-family: '楷体';
margin-right: 50px;
}
</style>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
</body>
<script>
var bths = document.getElementsByTagName('button');
// for循环:为每个button设置onclick事件
for (var i = 0; i < bths.length; i++) {
bths[i].onclick = function() {
// for循环 清除所有button的背景色；
for (var i = 0; i < bths.length; i++) {
bths[i].style.backgroundColor = ''
};
this.style.backgroundColor = 'purple'
}
}
</script>
</html>
排它思想之百度换肤
核心思路：利用for循环 遍历所有图片，把当前图片的路径赋值给body作为背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>排他思想之百度换肤</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: transparent url(./images/girl.jpg) no-repeat center top;
}
ul {
list-style: none;
width: 1000px;
margin: 20px auto;
}
ul li img {
float: left;
width: 200px;
border: 5px solid #fff;
}
</style>
</head>
<body>
<ul>
<li><img src="./images/girl.jpg" alt=""></li>
<li><img src="./images/girl2.jpg" alt=""></li>
<li><img src="./images/girl3.jpg" alt=""></li>
<li><img src="./images/girl4.jpg" alt=""></li>
</ul>
</body>
<script>
// 获取事件源
var imgs = document.querySelector('ul').getElementsByTagName('img');
// 循环：为所有的img绑定点击事件
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function() {
// 把当前图像的路径赋值给bady
document.body.style.backgroundImage = 'url(' + this.src + ')'
}
}
</script>
</html>
排它思想之表格隔行变色
新的事件： mouseover鼠标经过 onmouseout：鼠标离开
核心思路
- 遍历tody里面的tr并绑定事件
- 鼠标经过当前行的时候，当前行变色，鼠标离开当前行的时候，当前行的背景色清除
- 获取tbody里面的行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>排他思想之表格隔行变色</title>
<style>
table {
width: 1000px;
height: 200px;
margin: 20px auto;
}
table,
tr,
th,
td {
text-align: center;
border: 1px solid red;
border-collapse: collapse;
}
thead {
background-color: steelblue;
}
.bg {
background-color: pink;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>代码</th>
<th>名称</th>
<th>最新公布净值</th>
<th>累计净值</th>
<th>前单位净值</th>
<th>净值增长率</th>
</tr>
</thead>
<tbody>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
</tbody>
</table>
</body>
<script>
// 获取事件源
var trs = document.querySelector('tbody').querySelectorAll('tr');
// 循环并绑定事件
for (var i = 0; i < trs.length; i++) {
// 鼠标经过时 tody里面的行改变背景色
trs[i].onmouseover = function() {
this.className = 'bg'
}
// 鼠标离开时 tody里面的行清除背景色
trs[i].onmouseout = function() {
this.className = ''
}
}
</script>
</html>
排它思想之全选反选按钮
1.全选思路：复选框的按钮checked属性（选中状态）跟随全选按钮变化
2.反选思路：给所有的复选框绑定点击事件，每次点击 都要循环查看下面所有的复选框是否选中 倘若有一个没选中 上面全选按钮就不选中
3.可以设置一个变量 来控制全选按钮是否选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>排他思想之全选复选按钮</title>
<style>
* {
margin: 0;
padding: 0;
}
table {
width: 800px;
margin: 20px auto;
}
thead tr {
background: skyblue;
}
table,
th,
tr,
td {
text-align: center;
border: 1px solid red;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th> <input type="checkbox"> </th>
<th>商品</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr>
<td> <input type="checkbox"> </td>
<td>苹果</td>
<td>5元/斤</td>
</tr>
<tr>
<td> <input type="checkbox"> </td>
<td>香蕉</td>
<td>6元/斤</td>
</tr>
<tr>
<td> <input type="checkbox"> </td>
<td>梨子</td>
<td>10元/斤</td>
</tr>
</tbody>
</table>
</body>
<script>
// 获取事件源
var input_All = document.querySelector('thead').querySelector('input');
var inputs = document.querySelector('tbody').querySelectorAll('input');
console.log(inputs);
// 全选：绑定事件并进行事件处理程序
input_All.onclick = function() {
for (var i = 0; i < inputs.length; i++) {
inputs[i].checked = this.checked;
}
}
// 反选：循环 给所有的复选框设置绑定事件 每次点击 都要循环查看下面所有的复选框是否选中 倘若有一个没选中 上面全选按钮就不选中；
for (var i = 0; i < inputs.length; i++) {
inputs[i].onclick = function() {
// 用一个变量来控制全选按钮是否选中
var flag = true;
for (var i = 0; i < inputs.length; i++) {
if (!inputs[i].checked) {
flag = false
}
};
input_All.checked = flag
}
}
</script>
</html>
自定义属性
获取自定义属性值
- element.属性：获取内置属性
- element.getAttribute(‘属性’)：获取自定义属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取自定义属性值</title>
</head>
<body>
<div class="box" index='2'></div>
</body>
<script>
var box = document.querySelector('.box');
console.log(box);
console.log(box.className);
console.log(box.getAttribute('index'));
</script>
</html>
设置属性值
- element.属性 = “值” 主要对内置属性的值进行设置
- element.setAttribute(‘自定义属性’，‘值’) 主要对自定义属性的值进行设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设置自定义属性</title>
</head>
<body>
<div class="box" index='2'></div>
</body>
<script>
// 设置属性
let box = document.querySelector('.box');
box.className = 'boxs';
box.setAttribute('index', '4');
console.log(box);
</script>
</html>
移除属性值
removeAttribute(‘属性值’) :移除属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>移除自定义属性</title>
</head>
<body>
<div class="box" index='4'></div>
</body>
<script>
let box = document.querySelector('.box');
box.removeAttribute('index');
console.log(box);
</script>
</html>
自定义属性之tab栏切换
案例分析
- tab栏分为tab_list与tab_item部分
- 把tab_list中的li循环并注册事件 为每个tab_list下面的li设置类名 并且类名的索引是有顺序的
- 使用排他思想 点击li时 相对应的items显示 其他的li与item设置隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义属性之tab栏切换</title>
<style>
* {
margin: 0;
padding: 0;
}
.tab {
width: 850px;
margin: 20px auto;
}
.tab_list ul {
overflow: hidden;
list-style: none;
}
.tab_list ul li {
float: left;
cursor: pointer;
width: 200px;
height: 40px;
border: 1px solid #ccc;
text-align: center;
line-height: 40px;
}
.bg {
background-color: pink;
}
.tab_item .items {
display: none;
width: 808px;
height: 40px;
text-align: center;
line-height: 40px;
margin-bottom: 1px;
background-color: red;
}
.tab_item .items:nth-of-type(1) {
display: block;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li>选项一</li>
<li>选项二</li>
<li>选项三</li>
<li>选项四</li>
</ul>
</div>
<div class="tab_item">
<div class="items">内容1</div>
<div class="items">内容2</div>
<div class="items">内容3</div>
<div class="items">内容4</div>
</div>
</div>
</body>
<script>
// 获取事件源
var lis = document.querySelector('.tab_list').querySelectorAll('li');
var items = document.querySelector('.tab_item').querySelectorAll('.items');
// 绑定事件并进行事件处理程序；
for (var i = 0; i < lis.length; i++) {
lis[i].setAttribute('index', i)
lis[i].onclick = function() {
for (var i = 0; i < lis.length; i++) {
lis[i].className = ''
}
this.className = 'bg';
var index = this.getAttribute('index');
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none'
}
items[index].style.display = 'block'
}
}
</script>
</html>
H5新增自定义属性的方法
自定义属性的目的：保存并使用数据 将数据保存到页面而不是数据库
H5规定自定义属性data-开头作为属性并且赋值
获取H5自定义属性
- 兼容性写法 element.getAttribute(‘data-index’);
- H5新增 element.dataset.index IE11才开始兼容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取H5自定义属性</title>
</head>
<body>
<div data-index="5" data-list-name='尧子陌'></div>
</body>
<script>
var box = document.querySelector('div');
// 兼容性获取H5自定义属性
console.log(box.getAttribute('data-index'));
console.log(box.getAttribute('data-list-name'));
// H5新增获取H5自定义属性
console.log(box.dataset.index);
console.log(box.dataset['index']);
console.log(box.dataset.listName);
console.log(box.dataset['listName']);
</script>
</html>
节点操作
节点获取元素
- 通过DOM自带的方法获取元素
- 通过节点的方法获取元素
节点至少拥有nodeType(节点类型) nodeName(节点名称) nodeValue(节点值)三个基本属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>节点获取元素</title>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
<script>
var son = document.querySelector('.son');
console.log(son.parentElement);
</script>
</html>
父节点
node.parentNode
注意事项
- 查找的是离自己最近的父节点
- 如若找不到自己的父节点，则返回null;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>父节点操作</title>
</head>
<body>
<div class="grandfather">
<div class="father">
<div class="son"></div>
</div>
</div>
</body>
<script>
var son = document.querySelector('.son');
console.log(son.parentNode);
</script>
</html>
子节点
- parentNode.childNodes 包括文本节点及子元素节点
- parentNode.children 只返回自己的子元素节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子节点操作</title>
</head>
<body>
<ul>
<li>Hello Word</li>
<li>Hello Word</li>
<li>Hello Word</li>
<li>Hello Word</li>
</ul>
</body>
<script>
var ul = document.querySelector('ul');
console.log(ul.childNodes);
// 利用for循环 查找所有子元素节点
for (var i = 0; i < ul.childNodes.length; i++) {
if (ul.childNodes[i].nodeType === 1) {
console.log(ul.childNodes[i]);
}
}
// 利用ul.children打印所有的子元素节点
console.log(ul.children);
</script>
</html>
子节点的使用
- parentNode.firstChild：返回第一个子节点，包含所有节点
- parentNode.lastChild:返回最后一个子节点，包含所有节点
- parentNode.firstElementChild 返回第一个子元素节点
- parentNode.lastElementChild 返回最后一个子元素节点
以上方法都是有兼容性，找不到子节点则返回null
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子节点操作</title>
</head>
<body>
<ol>
<li>第1个孩子</li>
<li>第2个孩子</li>
<li>第3个孩子</li>
<li>第4个孩子</li>
</ol>
</body>
<script>
var ol = document.querySelector('ol');
// 返回第一个子节点与最后一个子节点(包括文本节点)
console.log(ol.firstChild);
console.log(ol.lastChild);
// 返回第一个子元素节点与最后一个子元素节点
console.log(ol.firstElementChild);
console.log(ol.lastElementChild);
// 实际开发的做法
console.log(ol.children[0]);
console.log(ol.children[ol.children.length - 1]);
</script>
</html>
新浪导航栏案例（重点）
思路如下
- 循环注册事件
- 当鼠标经过li时，ul显示，当鼠标离开li时，ul隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新浪下拉菜单</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
ul.box {
list-style: none;
width: 600px;
margin: 20px auto;
}
ul.box>li {
position: relative;
float: left;
margin-right: 20px;
}
ul.box ul {
position: absolute;
top: 40px;
left: 0;
display: none;
}
ul.box>li>a:nth-of-type(1),
ul.box ul li {
display: block;
width: 150px;
height: 40px;
text-align: center;
line-height: 40px;
text-decoration: none;
border: 1px solid red;
}
ul.box ul li {
border: 1px solid black;
}
ul.box ul li:hover {
background-color: pink;
}
</style>
</head>
<body>
<ul class="box">
<li>
<a href="#">微博</a>
<ul>
<li>
<a href=" # ">评论</a>
</li>
<li>
<a href="# ">私信</a>
</li>
<li>
<a href="# ">@我</a>
</li>
</ul>
</li>
<li>
<a href="# ">博客</a>
<ul>
<li>
<a href="# ">微博提醒</a>
</li>
<li>
<a href="# ">未读提醒</a>
</li>
</ul>
</li>
<li>
<a href="# ">注册</a>
<ul>
<li>
<a href="# ">注册</a>
</li>
<li>
<a href="# ">登录</a>
</li>
</ul>
</li>
</ul>
</body>
<script>
// 获取事件源
var ul = document.querySelector('.box');
var lis = ul.children
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function() {
this.children[1].style.display = 'block';
this.style.backgroundColor = 'red'
}
lis[i].onmouseout = function() {
this.children[1].style.display = 'none';
this.style.backgroundColor = ''
}
}
</script>
</html>
兄弟节点
-
node.nextSibling 获取下一个节点（包括文本节点）
-
node.previousSibling 获取上一个节点（包括文本节点）
-
node.nextElementSibling 获取下一个兄弟子元素节点
-
node.previousElementSibling 获取上一个兄弟元素节点
注意：以上方法都有兼容性 找不到则返回null
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>兄弟节点</title>
</head>
<body>
<p></p>
<div></div>
<h5></h5>
</body>
<script>
var box = document.querySelector('div');
console.log(box.previousSibling); //上一个兄弟节点
console.log(box.nextSibling); //下一个兄弟节点
console.log(box.previousElementSibling); //上一个兄弟元素节点
console.log(box.nextElementSibling); //下一个兄弟元素节点
</script>
</html>
添加元素
创建节点
页面中添加新的元素，需要两步：创建元素 添加元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>创建元素</title>
</head>
<body>
<ul></ul>
</body>
<script>
// 创建元素
var ul = document.querySelector('ul');
var li = document.createElement('li');
li.innerHTML = "<strong>Hello Word</strong>";
ul.appendChild(li)
var input = document.createElement('input');
input.type = 'password'
ul.insertBefore(input, ul.children[0])
</script>
</html>
留言板功能
思路
1.点击按钮时 动态创建li追加到ul
2.追加元素的同时 文本域的值赋值给li
3.如果将新创建的元素追加至父元素中子元素的前面 使用appendChild 反之insertBefore
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单留言板功能</title>
<style>
textarea {
resize: none;
outline: none;
vertical-align: bottom;
}
</style>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>添加</button>
<ul></ul>
</body>
<script>
// 获取元素
var text = document.querySelector('textarea');
var bth = document.querySelector('button');
var ul = document.querySelector('ul');
bth.onclick = function() {
var flag = true;
if (text.value === '') {
alert('请输入内容');
flag = false;
return flag
} else {
var li = document.createElement('li');
li.innerHTML = text.value;
ul.insertBefore(li, ul.children[0]);
text.value = ''
}
}
</script>
</html>
218
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
