WebAPi-增查删改
目录
1.获取元素的方式
1.根据id名获取元素
document.getElementById('id名')
2.根据标签名获取元素
document.getElemenstByTagName('标签名')
3.根据类名获取元素
document.getElemenstByClassName('类名')
4.H5新增的获取元素的方法
document.querySelector('.类名/ #id名/ 标签名'/后代子代选择器)
document.querySelectorAll('.类名/ #id名/ 标签名'/后代子代选择器)
5.获取特殊元素的方法
document.body 获取body元素
document.documentElement 获取Html元素
6.修改元素文本内容
innerText
innerHTML
他两个的区别是：innerHTML是标准的 W3c发布的，而且他会识别html标签和空格。
7.修改图片路径src
1.刘德华张学友切换图片案例
<style> img { display: block; width: 200px; margin-top: 10px; } </style> </head> <body> <button id="ldh">刘德华</button> <button id="zxy">张学友</button> <img src="./images/ldh.jpg" alt=""> <script> var ldh = document.getElementById('ldh') var zxy = document.getElementById('zxy') var img = document.querySelector('img') zxy.onclick = function() { img.src = 'images/zxy.jpg' img.title = '张学友' } ldh.onclick = function() { img.src = 'images/ldh.jpg' img.title = '刘德华' } </script>
2.根据时间改变不同的图片及问候语
<body>
<img src="./images/s.gif" alt="">
<div>上午好</div>
</body>
<script>
//获取事件源
var img = document.querySelector('img');
var div = document.querySelector('div');
//获取现在的小时
var date = new Date();
var h = date.getHours();
//进行判断
if (h < 12) {
img.src = 'images/s.gif';
div.innerHTML = '亲上午好呀'
} else if (h < 18) {
img.src = 'images/x.gif';
div.innerHTML = '亲下午好呀'
} else if (h > 18) {
img.src = 'images/w.gif';
div.innerHTML = '亲晚上好呀'
}
</script>8.修改表单元素属性
input --type / value / pleacehould / chencked / disabled(按钮禁用)
9.修改样式属性
element.style
element.className
10.事件三要素
1.事件源 --获取元素 被触发的元素
2.事件类型---onclick / onblur / onfocus
3.事件处理程序--匿名函数function() ----element.事件类型=function(){要执行的代码块}
doy02
1.自定义属性
-
添加自定义属性：document.setAttribute('属性名'，'属性值')
-
获得自定义属性：element.getAttribute('属性名')
-
移除自定义属性：element.removeAttribute(''属性名)；
-
H5新增获取的方法：.dataset(这个获取的是以data开头的)
2.排他思想
1.先干掉所有人---通过循环把数组中的每一个元素都改掉。
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>
<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>
</body>
<script>
//获取元素
//先获取全选的复选框
var j_cbAll = document.querySelector('#j_cbAll');
// var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框
var j_tbs = document.querySelectorAll('#j_tb input');
//对全选框做绑定事件 点击
j_cbAll.onclick = function() {
//1.想达到的效果是 当我点击全选是 下面的框都被选中。 此时用到的属性是checked
// console.log(this.checked); //true 返回的值是布尔值
//可以用遍历 每一个复选框的checked=这个全选框的checked
for (var i = 0; i < j_tbs.length; i++) {
//用if语句也可以实现 但是比较麻烦 这里我们可以只用 一句话就可以解决
// if (this.checked == true) {
// j_tbs[i].checked = this.checked;
// } else {
// j_tbs[i].checked = false;
// }
j_tbs[i].checked = this.checked; //就是让每一个复选框的checked=这个全选框的checked
}
}
//2.还想实现：当下面的小框都被选中时，全选框也选中。只要有一个小框没被选中，则全选框不被选中
//思路：遍历每个小框，并给每个小框绑定点击事件 。
//然后让被点击的小框 去遍历查看其他的小框是否被选中。
for (var j = 0; j < j_tbs.length; j++) {
j_tbs[j].onclick = function() {
//用一个变量来储存所有小框checked的值。
var flag = true;
for (var i = 0; i < j_tbs.length; i++) {
//这里的判断条件是：如果小框的checked不等于true时，则说明没有小框没有全选。那么全选框也就不用被选中。
if (!j_tbs[i].checked) {
flag = false;
break;
}
}
j_cbAll.checked = flag;
}
}
</script>
</html>Tab选项卡
<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>
//首先 明确 需求是什么？
//需求就是 当我点击tab卡的时候她的背景颜色变为红色，并且下面出现对相应的内容。
//第一步：先做鼠标点击更换背景颜色(排他思想)
//第二步：把tab卡对应的内容显示出来。
//1.获取事件源
var tab_list = document.querySelectorAll('.tab_list li');
var item = document.querySelectorAll('.item');
//绑定事件
for (var i = 0; i < tab_list.length; i++) {
//给tab_list创建一个自定义属性。方便把她跟item联系起来
tab_list[i].setAttribute('index', i);
tab_list[i].onclick = function() {
for (var j = 0; j < tab_list.length; j++) {
tab_list[j].style.backgroundColor = '';
}
this.style.backgroundColor = '#c81623';
//第二步
var index = this.getAttribute('index'); //注意调用！！！而且要告诉被调用的时当前的这个！！！！this!!!!
for (var g = 0; g < item.length; g++) {
item[g].style.display = 'none';
}
item[index].style.display = 'block'; //让item里面的第[index]个显示
}
}
</script>3.节点查找
1.查找父元素节点element.parentNode
2.查找子元素element.children
3.查找父元素的第一个子元素element.children[0]
4.查找父元素的最后一个子元素element.children[element.length-1];
5.查找上一个兄弟元素节点 node.nextElementsibiling
6.查找下一个兄弟元素节点 node.previousElementsibiling
4.创建节点添加节点删除节点克隆节点
1.创建节点
document.createElemen('标签名')
2.在父元素的最后面的子元素的后面添加
父元素标签.appendchild('标签名')
3.在父元素的子元素的第一个元素的前面添加
父元素标签.insertBefor('标签名')；
4.移除节点
node.removechild('标签名')；
5.移除子元素的父节点
父元素.removechilde(子元素.parentNode)
6.克隆节点
node.cloneNode()
-
如果（）内为空或者false只复制他的标签，不复制内容
-
如果（）内为true则内容也会复制
5.三种动态创建元素的区别
1.document.write
直接将内容写入页面。但是文档执行完毕，则会导致页面重绘。
2.innerHtml
如果使用拼接字符串进行创建，则效率极低。建议采用数组拼接的方式创建。缺点是结构不清晰。
<script>
var arr = [];
for (var i = 0; i < 10; i++) {
arr.push("<p>我是</p>")
}
console.log(arr);
</script>3.createElement()创建多个元素时，效率稍微比innerHTML数组创建的方式低一点，但是结构清晰