JS进阶
现在的内容是可以实现web交互。
API
- 时微程序员提供的一个接口,帮助实现某种功能。
- web API主要针对浏览器提供的接口,主要针对做交互。
- web API一般有输入和输出,很多都是方法。
DOM
简介:
文档对象模型,是可拓展HTML的标准编程接口
DOM树
所有标签都是元素,所有内容都是结点。文档,元素,节点都是对象。
获取元素
-
根据ID获取
getElementById(‘id’);返回一个匹配id的元素。id必须是字符串。 -
根据标签名获取
getElementByTagName(‘类型名(div,li…)’);获取元素对象的集合,以伪数组形式存储,如果只有一个这样的元素或没有,还是返回伪数组形式。还可以获取某个元素内部所有指定标签名的子元素。
element.getElementByTagName(‘类型名(div,li…)’); element为父元素的标签名。 -
根据类名获取
getElementByClassName(’…’); -
选择指定选择器
querySelector(’.box’);返回选择中的第一个选择器,需要加符号,类加.,id加# -
选择指定选择器的全部元素
querySelectorAll(’.box’);‘
获取特殊元素
- 获取body元素
document.body;, - 获取html元素
document.documentElement;
事件三要素
实现交互的关键
<button id="boom">爆炸</button>
<script>
//事件源 事件被触发的对象
var btn = document.getElementById('boom');
//事件类型 如何触发 什么时间 比如鼠标点击(onlick)或经过
btn.onclick = function(){
alert('fake!!!哈哈哈');
}
//事件处理程序 通过函数赋值完成
鼠标常见事件
操作元素
修改元素内容
改变文本内容
<button id="time">我是谁</button>
<div></div>
<p></p>
<script>
var watch=document.getElementById('time');
var div = document.querySelector('div')
watch.onclick = function(){
div.innerText = ('我是你爹')
}
//元素也可以不添加事件,即直接触发
var p= document.querySelector('p');
p.innerText = ('谁也不是');
</script>
innerText和innerHTML区别
innerText会去除HTML标签,即遇到HTML标签,会自动转换为文本。
div.innerText = '好开心<br>';
//此时内容为好开心<br>/。
这两个属性都是可读写的,还可以获取里面的内容。
innerText会去除空格和换行,而innerHTML会把标签也读出来,与写相反。
修改元素属性
进行不同操作时,标签元素也更改,如两个按钮控制不同的图片。
<button id="meinv1">meinv1</button>
<button id="meinv2">meinv2</button><br>
<img src="微信图片_20200831202623.jpg" alt="">
<script>
//1.获取元素
var meinv1 = document.getElementById('meinv1');
var meinv2 = document.getElementById('meinv2');
var img = document.querySelector('img');
//2.注册事件
meinv2.onclick = function(){
img.src = '微信图片_20200831203202.jpg'
//也可以更改其他元素title等
}
meinv1.onclick = function(){
img.src = '微信图片_20200831202623.jpg'
}
</script>
分时问候案例:
<img src="微信图片_20200831202623.jpg" alt="">
<div>上午好</div>
<script>
//1.获取元素
var img = document.querySelector('img');
var div = document.querySelector('div');
//2.得到当前小时
var date = new Date();
var h = date.getHours();
if(h > 18){
img.src = '微信图片_20200831203202.jpg';
div.innerHTML = '晚上好';
}
else if (h > 12){
img.src = '微信图片_20200831203202.jpg';
div.innerHTML = '晚上好';
}
</script>
修改表单元素
<button>1</button>
<input type="text" value="123" name="" id="">
<script>
var btn = document.querySelector('button');
var input = document.querySelector('input');
btn.onclick = function(){
input.value = '23333'
//这里不能直接用innerHTML,因为这是属性,不是文本内容
btn.disabled = true;//按钮禁用
//this.disabled也可以使用,更方便,this指向当前函数的调用者
}
</script>
案例:密码可视化
登陆账号时,密码不可视,可在可视和不可视切换。结合html和css。
<style>
.box {
width: 500px;
border-bottom: 1px solid pink;
}
.box input{
width: 370px;
height: 30px;
border: 0;
outline: none;
}
img{
width: 24px;
height: 100%;
position: relative;
top: 8px;
left: 370px;
}
</style>
<div class="box">
<label for="">
<img src="微信图片_20200831202623.jpg" id="eye" alt="">
</label>
<input type="password" name="" id="">
</div>
<script>
var btn = document.querySelector('button');
var eye = document.getElementById('eye');
var input = document.querySelector('input');
var i = 1;
eye.onclick = function(){
if(i == 1)
{
input.type = 'text';
i = 0;
}
else {
input.type = 'password';
i = 1;
}
}
</script>
样式元素操作
JS修改style样式产生的是行内样式,权重比css高
<style>
div {
width: 500px;
height: 400px;
background-color: pink;
transition: all 1s;
}
</style>
<div></div>
<script>
var div = document.querySelector('div');
div.onclick = function(){
this.style.backgroundColor = 'red';
this.style.width = '1000px';
}
</script>
案例:通过js修改精灵图。
每个盒子的精灵图的位置不同,可通过循环修改每个盒子对应图的坐标达到目的,而不需要每个样式逐个修改。
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var list = document.querySelectorAll('li');
for(var i = 0; i<list.length;i++)
{
var index = i * x;//x为精灵图中每个不同图片的间距
list[i].style.backgroundPosition = '0 -'+index+'px';
</script>
清除文本框默认值
知识点:获得焦点和失去焦点
<input type="text" value="1223">
<script>
var text = document.querySelector('input');
text.onfocus = function(){
if(this.value === '1223') {
this.value = '';
this.style.color = 'red';
}
//加入判断是为了只有为默认值时才会清空
}
text.onblur = function(){
if(this.value == '')
this.value = '1223';
this.style.color = '#999';
}
//如果不给判断,无论输入任何值,失去焦点时都会清空
</script>
给元素添加类名
可以在css中写一个样式,需要用时在给元素添加。下拉菜单的思想。
<div class="old">123</div>
<script>
var test = document.querySelector('div');
test.onclick = function(){
this.className = 'change';
}
</script>
案例:简易切换按钮(几个圆圈点击则变化)
<div>
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<script>
var list = document.querySelectorAll('li');
for(var i = 0;i<list.length;i++)
{
list[i].onclick = function(){
//排他思想,先全部清除,再设定样式
for(var j = 0;j < list.length;j++)
list[j].style.backgroundColor = 'white';
this.style.backgroundColor = 'red';
}
}
</script>
注意:如果没有排他思想,每点击一次就会被记录,圆圈一直都是红色,排他就是只有该元素有变化。
案例:全选与多选。选择全选框时,复选框都要被选择,而只有当全部复选框被选择时,全选才被选择,此处用表单做案例,只贴js代码
<script>
var j_cbAll = document.getElementById('j_cb');//获取全选按钮
var j_tbs = document.getElementById('j_cb').getElementsByTagName('input');//获取其他全部复选框
j_cbAll.onclick = function(){
for(var 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(){
//flag记录全选框状态
var flag = true;
for(var i = 0;i<j_tbs.length;i++){
if(!j_tbs[i].checked){
flag = false;
break;
}
//有一个复选没选中,全选就不会被选择
}
j_cbAll.checked = flag;
}
}
</script>
自定义属性操作:
获取元素值:getAttribute(‘’);
设置自定义属性:setAttribute(‘属性’,‘值’)
移除属性:removeAttribute(‘’)
如果属性过多,源代码不方便操作时,可使用
节点操作
每个元素都是一个节点,空格也是节点,属于文本节点,获取节点时要注意这个问题。
父节点
element.parentNode得到离元素最近的父级节点。
子节点
element.childNode得到离元素最近的子节点,包含元素节点,文本节点等等。
children获取所有子元素节点。如:ul.children;
利用节点,可以更快实现下拉菜单
var nav = document.querySelector('.nav');
var list = nav.children;//得到全部小li
for (var i = 0;i<list.length;i++)
{
list[i].onmouseover = function(){
this.children[1].style.display = 'block';
}
list[i].onmouseout = function(){
this.children[1].style.display = 'none';
}
}
兄弟节点
nextSibling获取下一个兄弟节点,包括文本节点
nextElementSibling下一个兄弟元素节点。
创建节点
原本没有,动态创建。
appendChild(child):插入一个节点到末尾,类似于伪元素after
// 创建节点元素节点
var li = document.createElement('li');
// 添加节点
var ul = document.querySelector('ul');// 获取父节点
ul.appendChild(li);//添加子节点
insertBefore(child,指定元素):将节点添加到指定子节点前面。类似于before
var lili = document.createElement('li');
ul.insertBefore(lili,ul.children[0]);
案例: 简易留言.原理:每点击按钮,就生成ul中的li,且将文本域的内容赋给li
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发布</button>
<ul>
<li>你好</li>
<li>宝贝</li>
</ul>
<script>
var btn = document.querySelector('button');
var thing = document.querySelector('textarea');
var ul = document.querySelector('ul');
btn.onclick = function(){
// 判断文本框是否有输入内容
if(thing.value == ''){
alert('玩我呢');
return false;
}else{
var li1 = document.createElement('li');
ul.insertBefore(li1,ul.children[0]);
li1.innerHTML = thing.value;
//文本域内容赋值
thing.value = '';
// 清空文本框
}
}
</script>
删除节点
removeChild(child):从DOM中删除一个节点,返回删除的节点。
//接上文简易留言
var as = document.querySelectorAll('a');
for(var i = 0;i<as.length;i++){
as[i].onclick = function(){
ul.removeChild(this.parentNode);
}
}
js阻止链接跳转:href:“javascript:;”,如果想要空链接,可以这么做,不用#做地址,可以避免引发不明错误
复制节点
cloneNode();只是复制内容,还需要添加
注意:如果括号参数为空或为false,则是浅拷贝,即只克隆复制节点本身,不克隆里面的子节点
案例: 动态生成表格,可进行删除操作
<table cellspacing='0'>
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var data = [
{
name:'james',
subject: 'math',
score:100
},
{
name:'james',
subject: 'math',
score:1
},
{
name:'james',
subject: 'math',
score:10
} ];
var tbody = document.querySelector('tbody');
for(var i = 0;i<data.length;i++)
{
//1.创建行
var tr = document.createElement('tr');
tbody.appendChild(tr);
//2.行里面创建单元格 td 单元格数量取决于对象里的属性个数
for(var k in data[i]){//遍历循环
//创建单元格
var td = document.createElement('td')
//3. 把对象里的属性值赋给td,即单元格填充
td.innerHTML = data[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<data.length;i++){
as[i].onclick = function(){
//删除的是行,但鼠标点击的是链接,行是链接的父亲的父亲
tbody.removeChild(this.parentNode.parentNode)
}
}
</script>