1.操作元素
排他思想
<!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>Document</title>
<style>
button {
color: green;
background-color: #ccc;
}
</style>
</head>
<body>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<script>
var btns = document.getElementsByTagName('button');
var p = document.getElementsByTagName('div');
for(var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
// 先把其他的都设回去
for(var j = 0; j < btns.length; j++){
btns[j].style.backgroundColor = '#ccc'
}
// 设置自己的样式
this.style.backgroundColor = 'pink';
}
}
</script>
</body>
</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>Document</title>
<style>
div {
width: 600px;
margin: 100px auto;
}
.message {
display: inline-block;
font-size: 12px;
color: #999;
background: url('C:/java-script_learning/image/mess.png') no-repeat left center;
padding-left: 20px;
}
.error {
color: red;
background: url('C:/java-script_learning/image/wrong.png') no-repeat left center;
}
.right {
color: green;
background: url('C:/java-script_learning/image/right.png') no-repeat left center;
}
</style>
</head>
<body>
<div>
<input type="password" class="ipt">
<p class="message">请输入6~14位密码</p>
</div>
<script>
var ipt = document.querySelector('.ipt');
var p = document.querySelector('.message');
ipt.onblur = function() {
if(ipt.value.length < 6 || ipt.value.length > 14){
p.className = 'message error';
p.innerHTML = '输入错误';
}else {
p.className = 'message right';
p.innerHTML = '通过';
}
}
</script>
</body>
</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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: url('C:/java-script_learning/image/1.jpg') no-repeat center top;
}
li {
list-style: none;
}
.baidu {
overflow: hidden;
margin: 100px auto;
background-color: #fff;
width: 410px;
padding-top: 3px;
}
.baidu li {
float: left;
margin: 0 1px;
cursor: pointer;
}
.baidu img {
width: 100px;
}
</style>
</head>
<body>
<ul class="baidu">
<li><img src="C:/java-script_learning/image/1.jpg"></li>
<li><img src="C:/java-script_learning/image/2.jpg"></li>
<li><img src="C:/java-script_learning/image/3.jpg"></li>
<li><img src="C:/java-script_learning/image/4.jpg"></li>
</ul>
<script>
var body1 = document.body;
var img = document.querySelectorAll('img');
for(var i = 0; i < img.length; i++) {
img[i].onclick = function() {
body1.style.background = 'url(' + this.src + ')';
}
}
</script>
</body>
</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>Document</title>
<style>
table {
font-size: 14px;
width: 800px;
margin: 100px auto;
text-align: center;
border-collapse: collapse;
}
thead th {
height: 30px;
background-color: skyblue;
}
tbody tr {
height: 30px;
}
tbody td {
font-size: 12px;
border-bottom:1px solid #d7d7d7;
color: blue;
}
.add {
background-color: aqua;
}
</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>
<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>
<script>
var trs = document.querySelector('tbody').querySelectorAll('tr');
for(var i = 0; i < trs.length; i++) {
trs[i].onmouseover = function() {
this.className = 'add';
}
trs[i].onmouseout = function() {
this.className = '';
}
}
</script>
</body>
</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>Document</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>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPhone8</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
</div>
<script>
var all = document.getElementById('j_cbAll');
var inputs = document.querySelector('#j_tb').getElementsByTagName('input');
all.onclick = function() {
// 获取选框的状态，选中为ture，
//console.log(all.checked);
for(var i = 0; i < inputs.length; i++) {
inputs[i].checked = this.checked;
}
}
for(var j = 0; j < inputs.length; j++) {
inputs[j].onclick = function() {
flag = true;
// 检查选框有没有都选
for(var t = 0; t < inputs.length; t++) {
console.log(inputs[t].checked);
if (inputs[t].checked == false) {
flag = false;
break;
}
}
all.checked = flag;
}
}
</script>
</body>
</html>
2.获取属性值方法
<!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>Document</title>
</head>
<body>
<div id="box" hello="2"></div>
<script>
// 获得属性值
// 1.通过元素.属性
var box = document.querySelector('div');
console.log(box.id);
// 2.通过getAttribute(),可以获得自定义属性
console.log(box.getAttribute('hello'));
// 设置属性值
// 1.通过元素
box.id = 'box1';
// 2.通过setAttribute(),设置自定义属性值
box.setAttribute('hello', '1');
// 移除属性值
box.removeAttribute('hello');
</script>
</body>
</html>
table切换案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.tab {
width: 978px;
margin: 100px auto;
}
.tab_list {
height: 39px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current {
background-color: #c81623;
color: #fff;
}
.item_info {
padding: 20px 0 0 20px;
}
.item {
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价（50000）</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">
商品介绍模块内容
</div>
<div class="item">
规格与包装模块内容
</div>
<div class="item">
售后保障模块内容
</div>
<div class="item">
商品评价（50000）模块内容
</div>
<div class="item">
手机社区模块内容
</div>
</div>
</div>
<script>
var lis = document.querySelector('.tab_list').querySelectorAll('li');
var items = document.querySelectorAll('.item');
for (var i = 0; i < lis.length; i++) {
lis[i].setAttribute('index', i);
lis[i].onclick = function() {
for (var j = 0; j < lis.length; j++) {
lis[j].className = '';
}
this.className = 'current';
for (var t = 0; t < items.length; t++) {
items[t].style.display = 'none';
}
var index = this.getAttribute('index');
items[index].style.display = 'block';
}
}
</script>
</body>
</html>
3.自定义属性
规范命名：以data-xxxx开始
<!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>Document</title>
</head>
<body>
<div time="2" index="2" data-index="333" data-list-name="mingda"></div>
<script>
var div = document.querySelector('div');
console.log(div.getAttribute('time'));
div.setAttribute('info','2');
// 自定义是属性规范data-xxx
// 获取方法除了以上的之外
console.log(div.dataset.index);
// 多个名
console.log(div.dataset.listName);
</script>
</body>
</html>
4.节点操作
其实节点的操作也是为了获得元素
<!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>Document</title>
</head>
<body>
<div>我是div</div>
<span>我是span</span>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<div class="box">
<span class="er">X</span>
</div>
<ol>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
<li>我是li5</li>
</ol>
<script>
var box = document.querySelector('.box ');
// 节点包括nodeType,nodeName,nodeValue,页面中所有内容都可以看做为节点
// 通过节点的父子兄关系操作，更简单
var er = document.querySelector('.er');
// 拿到父亲元素
console.log(er.parentNode);
// 拿到子节点
var ul = document.querySelector('ul');
// 此结果包括了换行，文本等节点，不仅是标签节点，可以通过nodeType的值来区分
console.log(ul.childNodes);
console.log(ul.childNodes.nodeType);
// 此结果只获得标签节点
console.log(ul.children);
var ol = document.querySelector('ol');
// 1. firstChild 第一个子节点 不管是文本节点还是元素节点
console.log(ol.firstChild);
console.log(ol.lastChild);
// 2. firstElementChild 返回第一个子元素节点 ie9才支持
console.log(ol.firstElementChild);
console.log(ol.lastElementChild);
// 3. 实际开发的写法 既没有兼容性问题又返回第一个子元素
console.log(ol.children[0]);
console.log(ol.children[ol.children.length - 1]);
// 兄弟节点
var div = document.querySelector('div');
// 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
console.log(div.nextSibling);
console.log(div.previousSibling);
// 2. nextElementSibling 得到下一个兄弟元素节点
console.log(div.nextElementSibling);
console.log(div.previousElementSibling);
// 创建节点和添加节点
var li = document.createElement('li');
var fu_ul = document.querySelector('.add');
fu_ul.appendChild(li);
</script>
</body>
</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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 14px;
}
.nav {
margin: 100px;
}
.nav>li {
position: relative;
width: 80px;
height: 41px;
float: left;
text-align: center;
}
.nav li a {
display: block;
width: 100%;
height: 100%;
line-height: 41px;
color: #333;
}
.nav>li>a:hover {
background-color: #eee;
}
.nav ul {
display: none;
position: absolute;
top: 41px;
left: 0px;
width: 100%;
border-left: 1px solid #FECC5B;
border-right: 1px solid #FECC5B;
}
.nav ul li {
border-bottom: 1px solid #FECC5B;
}
.nav ul li a:hover {
background-color: #FFF5DA;
}
</style>
</head>
<body>
<ul class="nav">
<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>
<li>
<a href="#">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">邮箱</a>
<ul>
<li>
<a href="#">私信</a>
</li>
<li>
<a href="#">评论</a>
</li>
<li>
<a href="#">@我</a>
</li>
</ul>
</li>
</ul>
<script>
var nav = document.querySelector('.nav');
var lis = nav.children;
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function() {
this.children[1].style.display = 'block';
}
lis[i].onmouseout = function() {
this.children[1].style.display = 'none';
}
}
</script>
</body>
</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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 100px;
}
textarea {
width: 200px;
height: 100px;
border: 1px solid pink;
outline: none;
resize: none;
}
ul {
margin-top: 50px;
}
li {
width: 300px;
padding: 5px;
background-color: rgb(245, 209, 243);
color: red;
font-size: 14px;
margin: 15px 0;
}
</style>
</head>
<body>
<textarea></textarea>
<button>发布</button>
<ul>
</ul>
<script>
var ul = document.querySelector('ul');
var btn = document.querySelector('button');
var area = document.querySelector('textarea');
btn.onclick = function () {
if (area.value == '') {
alert('请输入内容');
return false;
}else {
var li = document.createElement('li');
li.innerHTML = area.value;
ul.insertBefore(li, ul.children[0]);
}
area.value = '';
}
</script>
</body>
</html>
5.节点操作
复制节点
element.cloneNode(),内容为空，默认事false，拷贝时为浅拷贝，只复制标签。为true时，执行深拷贝，内容标签都复制。
<!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>Document</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ul = document.querySelector('ul');
var clone = ul.children[0].cloneNode();
// 因为cloneNode的内容为空，默认为false，所以进行浅拷贝，只拷贝空标签
ul.appendChild(clone);
var clone1 = ul.children[1].cloneNode(true);
ul.appendChild(clone1);
</script>
</body>
</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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
table {
margin: 100px auto;
border-collapse: collapse;
width: 500px;
font-size: 14px;
text-align: center;
}
thead tr {
background-color: #ccc;
height: 40px;
}
td, th {
border: 1px solid #333;
}
</style>
</head>
<body>
<table border="1px">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var datas = [{
name: '明达',
subject: 'JavaScript',
score: 100
}, {
name: '小邸',
subject: 'JavaScript',
score: 98
}, {
name: '小明',
subject: 'JavaScript',
score: 99
}, {
name: '明达大',
subject: 'JavaScript',
score: 88
}, {
name: '大猪蹄子',
subject: 'JavaScript',
score: 0
}];
var tbody = document.querySelector('tbody');
// 循环人数
for(var i = 0; i < datas.length; i++){
// 创建行，插入tbody
var tr = document.createElement('tr');
tbody.appendChild(tr);
student = datas[i];
// 循环属性，插入行
for(var k in student){
var td = document.createElement('td');
td.innerHTML = student[k];
tr.appendChild(td);
}
// 在后面加上删除
var td = document.createElement('td');
td.innerHTML = '<a href="javascript:;">删除 </a>';
tr.appendChild(td);
}
// 绑定删除
var as = document.querySelectorAll('a');
for(var i = 0; i < as.length; i++) {
as[i].onclick = function() {
tbody.removeChild(this.parentNode.parentNode)
}
}
</script>
</body>
</html>
6.创建元素的三种方式
1.document.write()存在问题，页面文档流加载完毕执行时导致页面重绘。
2. 通过innerHtml创建
速度慢在某种情况下
3.通过document.creatElement();
<!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>Document</title>
</head>
<body>
<p>abc</p>
<script>
// 1.document.write()
document.write('<div>123</div>');
// 2.innerHtml
var p = document.getElementsByTagName('p');
console.log(p[0]);
p[0].innerHTML = '<a href="#">百度</a>';
// 3.document.creatElement();
document.createElement('p');
</script>
</body>
</html>
总结
1.创建元素document.write()、innerHtml、document.creatElement()
2.增加元素element.appendChild()、element.insertBefor()
3. 删除元素removeChild()
4. 修改元素的属性，样式等。
471
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
