标签的获取
- 通过ID获取
<div id="time">2020-09-05</div>
<script>
var timer = document.getElementById('time');
console.log(timer);
- 通过标签名获取（以伪数组形式存储）
<ul>
<li>我就是我1</li>
<li>我就是我2</li>
<li>我就是我3</li>
<li>我就是我4</li>
<li>我就是我5</li>
</ul>
<script>
var tag = document.getElementsByTagName('li');
console.log(tag);
//获取标签里的第一个元素
console.log(tag[0]);
// 一次打印元素对象可以采用遍历
for (var i = 0; i < tag.length; i++) {
console.log(tag[i]);
}
获取父元素内部所有指定标签名的子元素。
<ol id="baobao">
<li>海绵宝宝1</li>
<li>海绵宝宝2</li>
<li>海绵宝宝3</li>
<li>海绵宝宝4</li>
<li>海绵宝宝5</li>
</ol>
<script>
var ol = document.getElementById('baobao');
var lis = ol.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
- H5新增方法—通过类名来获取
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<script>
var boxes = document.getElementsByClassName('box');
console.log(boxes);
console.log(boxes[0]);
</script>
- H5新增方法—根据指定选择器返回第一个对象
注意：里面的选择器要加符号，如通过类名获取要加’.’ ，通过Id获取要加’#'
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<script>
var box = document.querySelector('.box');
console.log(box);
</script>
<ul id="nav">
<li>结构</li>
<li>产品</li>
</ul>
<script>
var nav = document.querySelector('#nav');
console.log(nav);
</script>
<ul>
<li>产品</li>
<li>结构</li>
</ul>
</body>
<script>
// 获取第一个li
var li = document.querySelector('li');
console.log(li);
</script>
- H5新增方法—根据指定选择器返回全部对象
<ul>
<li>熊大</li>
<li>熊二</li>
</ul>
</body>
<script>
// 获取全部li
var lis = document.querySelectorAll('li');
console.log(lis);
console.log(lis[0]);
console.log(lis[1]);
</script>
- 获取特殊元素
- 获取body元素
<body>
啦啦啦~~
</body>
<script>
var bodyEle = document.body;
console.log(bodyEle);
</script>
- 获取html元素
<script>
var htmlEle = document.documentElement;
console.log(htmlEle);
</script>
事件基础
操作元素
- 改变元素内容
- 通过事件来改变
<button>显示当前系统时间</button>
<div>某个时间</div>
<script>
var div = document.querySelector('div');
var btn = document.querySelector('button');
btn.onclick = function () {
//设置一个固定的时间
// div.innerHTML = '2020-09-06';
//利用函数设置一个变化的时间
div.innerHTML = getDate();
}
function getDate() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var day = date.getDay();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
return '今天是' + year + '年' + month + '月' + dates + '日' + arr[day];
}
</script>
- 直接修改
<p>直接修改内容</p>
<script>
var p = document.querySelector('p');
//打开浏览器 p里面的内容直接被修改了
p.innerHTML = getDate();
*innerText和innerHtml的区别：
- innerText不识别html标签* 去除空格和换行
- innerhtml识别html标签* 保留空格和换行
<p>
我是文字
<span>123</span>
</p>
<script>
var p = document.querySelector('p');
console.log(p.innerText);
</script>
- 修改元素属性
通过每一次点击不同的姓名按钮，改变图片的路径
<button id="zxy">张学友</button>
<button id="ldh">刘德华</button>
<img src="xueyou.jpg" alt="">
<script>
//获取元素
var zxy = document.querySelector('#zxy');
var ldh = document.querySelector('#ldh');
var img = document.querySelector('img');
//注册事件
zxy.onclick = function () {
img.src = 'xueyou.jpg';
}
ldh.onclick = function () {
img.src = 'dehua.jpg';
}
</script>
案例:分时显示不同图片，显示不同问候语
<div>早上好</div>
<img src="morning.jpg" alt="">
<script>
var div = document.querySelector('div');
var img = document.querySelector('img');
var date = new Date();
var H = date.getHours();
if (H < 12) {
div.innerHTML = '早上好';
img.src = 'morning.jpg';
} else if (12 < H < 18) {
div.innerHTML = '下午好';
img.src = 'afternoon.gif';
} else {
div.innerHTML = '晚上好';
img.src = 'evening.jpg';
}
</script>
- 表单元素的属性操作
<button>按钮</button>
<input type="text" value="输入内容">
<script>
//获取元素
var btn = document.querySelector('button');
var input = document.querySelector('input');
//注册事件
btn.onclick = function () {
//此处不能用innerHtml,value是表单元素特有的属性
input.value = '您好呀';
//按钮点击一次后失效
// btn.disabled = true;
//this指向事件函数的调用者button
this.disabled = true;
}
</script>
案例：仿京东显示隐藏密码
<div class="box">
<input type="password" id="pwd">
<label for="">
<img src="icon_/close.png" alt="" id="eye">
</label>
</div>
<script>
//获取元素
var eye = document.getElementById('eye');
var pwd = document.getElementById('pwd');
var flag = 0;
eye.onclick = function () {
if (flag == 0) {
eye.src = 'icon_/open.png';
pwd.type = 'text';
flag = 1;
} else {
eye.src = 'icon_/close.png';
pwd.type = 'password';
flag = 0;
}
}
- 样式属性操作
JS修改style样式操作，产生的是行内样式，css权重比较高
JS里面的属性采用驼峰命名法。
- 行内修改样式
div {
width: 300px;
height: 200px;
background-color: pink;
margin: 100px auto;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector('div');
div.onclick = function () {
this.style.backgroundColor = 'skyblue';
this.style.height = '250px';
}
- 通过起类名，再引入的方式来修改
div {
width: 300px;
height: 200px;
background-color: pink;
margin: 100px auto;
}
.change {
background-color: cyan;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector('div');
div.onclick = function () {
this.className = 'change';
}
想要保留原先的类名，可以使用多类名选择器
如：this.className=‘first change’;
案例：仿淘宝关闭二维码
<div class="box">
<img src="icon_/二维码.png" alt="">
<i class="close-code">×</i>
</div>
<script>
//获取盒子和小×
var box = document.querySelector('.box');
var i = document.querySelector('.close-code');
//注册事件：点击小×时，整个盒子隐藏
i.onclick = function () {
box.style.display = 'none';
}
案例：循环精灵图
.box {
width: 298px;
margin: 100px auto;
}
li {
list-style: none;
}
ul li {
float: left;
width: 24px;
height: 24px;
background-color: pink;
margin: 15px;
background: url(icon_/sprite.png)no-repeat;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
//让索引号乘以44就是每个li的背景y坐标
var index = i * 44;
lis[i].style.backgroundPosition = '0 -' + index + 'px';
}
</script>
案例:显示隐藏文本框内容
- 获得焦点事件：onfocus
- 失去焦点事件：onblur
文本框默认文字颜色为#999，当鼠标获得焦点时，如果里面的内容为‘手机’，就清空文本框，同时将文字颜色改为蓝色。
当鼠标失去焦点时，里面的文本恢复为‘手机’，同时文字变为红色。
input {
border: 2px solid skyblue;
width: 280px;
height: 35px;
outline: none;
color: #999;
}
</style>
</head>
<body>
<input type="text" value="手机">
<script>
var text = document.querySelector('input');
text.onfocus = function () {
if (this.value === '手机') {
this.value = '';
this.style.color = 'skyblue';
}
}
text.onblur = function () {
if (this.value === '') {
this.value = '手机';
this.style.color = 'red';
}
}
</script>
案例：密码框验证信息
div {
width: 600px;
margin: 100px auto;
}
.message {
display: inline-block;
padding-left: 20px;
background: url(icon_/mess.png) no-repeat;
color: #999;
font-size: 12px;
}
.wrong {
background: url(icon_/wrong.png) no-repeat;
color: red;
}
.right {
background: url(icon_/right.png)no-repeat;
}
</style>
</head>
<body>
<div class="register">
<input type="password" class="ipt">
<p class="message">请输入6~16位密码</p>
</div>
<script>
var ipt = document.querySelector('.ipt');
var message = document.querySelector('.message');
//注册事件
ipt.onblur = function () {
if (this.value.length < 6 || this.value.length > 16) {
message.className = 'message wrong';
message.innerHTML = '你输入的位数不对,要求6~16位';
} else {
message.className = 'message right';
message.innerHTML = '您输入的正确';
}
}
</script>
案例:排他思想
在点击按钮前将所有的元素遍历一遍，点击按钮之后再次遍历，将所有的元素颜色去掉，当前按钮改为粉色。
//获取元素
var btns = document.querySelectorAll('button');
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
//先把所有的按钮背景颜色去掉
for (var i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
//让当前元素的背景颜色为pink
this.style.backgroundColor = 'pink';
}
}
案例：百度换肤效果
/* 浏览器默认背景图 */
body {
background: url(1.jpg);
}
.baidu {
margin: 100px 137px 0;
}
.baidu li {
list-style: none;
float: left;
width: 160px;
height: 100px;
margin-left: 20px;
}
.baidu li img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<ul class="baidu">
<li><img src="1.jpg"></li>
<li><img src="2.jpg"> </li>
<li><img src="3.jpg"> </li>
<li><img src="4.jpg"> </li>
</ul>
<script>
var imgs = document.querySelector('.baidu').querySelectorAll('img');
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function () {
document.body.style.backgroundImage = 'url(' + this.src + ') ';
}
}
案例：表格隔行换色
鼠标经过当前行 该行变为蓝色 离开时颜色消失
table,
tr {
border: 1px solid skyblue;
border-collapse: collapse;
text-align: center;
}
/* 表头背景颜色设置为粉色*/
th {
background-color: pink;
}
/* 设置表头和表体表格的内边距 */
table th,
td {
padding: 8px 15px;
}
.bg {
background-color: skyblue;
}
</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 = 'bg';
}
//鼠标离开时 去掉当前行的背景颜色
trs[i].onmouseout = function () {
this.className = '';
}
}
案例：表单全选取消
1.下面的复选框需要全部选中，上面全选才能选中做法:给下面所有的复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的。如果有一个没选中，上面的全选就不选中。
2.可以设置一个变量，来控制全选是否选中。
3.break跳出循环，可以提高执行效率
thead {
text-align: center;
color: #fff;
background-color: skyblue;
}
tbody {
background-color: #f5f5f5;
}
table,
th,
td {
border: 1px solid #999;
border-collapse: collapse;
}
th,
td {
padding: 5px 50px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th><input type="checkbox" id="j_cbAll"></th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="j_body">
<tr>
<td><input type="checkbox"></td>
<td>iphon8</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>
</table>
</tbody>
<script>
var j_cbAll = document.getElementById('j_cbAll'); //获取全选按钮
var j_tbs = document.getElementById('j_body').getElementsByTagName('input');//获取下面所有的复选框
//全选按钮选中之后，下面的所有按钮都被选中
j_cbAll.onclick = function () {
for (i = 0; i < j_tbs.length; i++) {
j_tbs[i].checked = this.checked;
}
}
//下面的每一个按钮被选中之后，全选按钮被选中。否则全选按钮不被选中
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].onclick = function () {
var flag = true;
//点击之后进行检查，看是否全部被选上了
for (var i = 0; i < j_tbs.length; i++) {
if (!j_tbs[i].checked) {
flag = false;
break;
}
}
j_cbAll.checked = flag;
}
}
自定义属性的操作
- 获取属性值
<div id="demo">1</div>
<script>
var div = document.querySelector('div');
// 获取属性值
console.log(div.id);
console.log(div.getAttribute('id'));
- 设置属性值
//设置属性值
div.className = 'pre';
div.setAttribute('data', '2');
- 移除属性
//移除属性
div.removeAttribute('class');
案例：tab栏切换
考察排他思想以及自定义属性的操作（获取属性值）
<style>
.tab_list {
width: 1000px;
height: 50px;
margin: 0 auto;
background-color: #ddd;
}
.tab_list ul {
padding-left: 0;
}
.tab_list li {
list-style: none;
float: left;
padding: 15px 20px;
}
.current {
background-color: red;
}
.tab_con {
margin-top: 8px;
margin-left: 131px;
}
</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>
//获取小li
var tab_list = document.querySelector('.tab_list')
var lis = tab_list.querySelectorAll('li');
//获取tab_icon里的小盒子
var items = document.querySelectorAll('.item');
for (var i = 0; i < lis.length; i++) {
//为每一个li设置属性及属性值（在点击之前）
lis[i].setAttribute('index', i);
lis[i].onclick = function () {
for (var i = 0; i < lis.length; i++) {
//干掉其他人
lis[i].className = '';
}
//留下我自己
this.className = 'current';
//下面的部分 也是在点击事件里面
//获取当前按钮的索引号，让对应索引号的模块显示
其余的隐藏
var index = this.getAttribute('index');
//console.log(index);
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
items[index].style.display = 'block';
}
}
</script>
节点操作
一般来说，节点至少拥有nodeType(节点类型）、nodeName（节点名称）、nodeValue(节点值）这三个基本属性。
- 节点层级
常见的是父子兄层级关系。
1. 父级节点
node.parentNode
<div class="demo">
<div class="box">
<span class="erweima">×</span>
</div>
</div>
<script>
//父级节点
var erweima = document.querySelector('.erweima');
console.log(erweima.parentNode);
2. 子节点
parentNode.children(标准）
IE9以上才支持—>
parentNode.firstElementChild
parentNode.lastElementChild
3. 兄弟节点
IE9以上才支持—>
node.nextElementSibling //得到下一个元素节点
node.previousElementSibling //得到上一个元素节点
- 创建节点
<ul>
<li>123</li>
</ul>
<script>
//获取
var ul = document.querySelector('ul');
//创建节点
var li = document.createElement('li');
- 添加节点
在ul里添加li 相当于数组中的push 在后面追加元素
//添加节点
ul.appendChild(li);
指定元素，在前面加
//创建节点
var lili = document.createElement('li')
//添加节点
ul.insertBefore(lili, ul.children[0])
- 删除节点
在下面的案例中可以看到删除节点的操作。
案例：简单版发布留言
<style>
.box {
margin: auto;
width: 500px;
height: 300px;
}
textarea {
resize: none;
}
ul {
margin-top: 50px;
}
li {
list-style: none;
width: 300px;
height: 25px;
margin: 15px 0;
background-color: pink;
}
li a {
float: right;
text-decoration: none;
}
button {
margin-bottom: 3px;
}
</style>
</head>
<body>
<div class="box">
<textarea name="" id="" cols="43 " rows="10" autofocus="autofocus">
</textarea>
<button>发布</button>
<ul>
</ul>
</div>
<script>
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
btn.onclick = function () {
console.log(text.value);
if (text.value == '') {
alert('您没有输入内容哦');
//阻止默认行为和冒泡
return false;
} else {
//创建节点
var li = document.createElement('li');
li.innerHTML = text.value + '<a href="javascript:;">删除</a>';
//将每次的留言追加到第一条
ul.insertBefore(li, ul.children[0]);
//获取所有的链接a
var as = document.querySelectorAll('a');
// 当点击某一个a时 就将该链接所在的父元素li删除
for (var i = 0; i < as.length; i++) {
as[i].onclick = function () {
ul.removeChild(this.parentNode);
}
}
}
}
</script>
- 复制节点
node.cloneNode(),如果括号参数为空或false,则是浅拷贝，只复制节点本身，不复制节点里的子节点
<ul>
<li>1</li>
</ul>
<script>
//获取元素
var ul = document.querySelector('ul');
//将ul的第一个孩子克隆，名字叫lili
var lili = ul.children[0].cloneNode(true);
//将lili追加到ul的最后面
ul.appendChild(lili);
</script>
效果：
案例：动态生成表格
<style>
table,
td,
th {
width: 500px;
margin: 100px auto;
border-collapse: collapse;
/* 让表格里的文本居中 */
text-align: center;
border: 1px solid #333;
}
thead tr {
height: 40px;
background-color: #ccc;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<!-- < tbody里的值需要我们用程序去追加，这里先不写 -->
<tbody>
</tbody>
</table>
<script>
//数据用对象来存储，多个对象可以用数组来存储 中间用逗号隔开
var dates = [{
name: '熊大',
subject: 'JavaScript',
score: 100
}, {
name: '熊二',
subject: 'JavaScript',
score: 99
}, {
name: '光头强',
subject: 'JavaScript',
score: 98
}, {
name: '吉吉国王',
subject: 'JavaScript',
score: 97
}, {
name: '大猪蹄子',
subject: 'JavaScript',
score: 0
}];
//创建tr行
var tbody = document.querySelector('tbody');
for (var i = 0; i < dates.length; i++) { //外层的for管tr-->人数
var tr = document.createElement('tr');
tbody.appendChild(tr);
//单元格的数量取决于每个对象里面的属性个数 for循环遍历对象
for (var k in dates[i]) {//里层的for管td
//创建单元格
var td = document.createElement('td')
td.innerHTML = dates[i][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 () {
//点击a删除当前链接所在的行a<td<tr(他爸爸的爸爸)
tbody.removeChild(this.parentNode.parentNode);
}
}
421
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
