前端学习从入门到高级全程记录之23（webapi）

2023-09-05 阅读 66 评论 0

摘要：学习目标掌握API和Web API的概念掌握常见的浏览器提供的API的调用方式能通过API开发常见的页面交互功能能够利用搜索引擎解决问题 1. Web API Web API介绍 API的概念 API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的

学习目标

掌握API和Web API的概念
掌握常见的浏览器提供的API的调用方式
能通过API开发常见的页面交互功能
能够利用搜索引擎解决问题

1. Web API

Web API介绍

API的概念

API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

任何开发语言都有自己的API
API的特征输入和输出(I/O)
API的使用方法(console.log())

可以理解成webapi是一个个方法或者一个工具

Web API的概念

浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)

此处的Web API特指浏览器提供的API(一组方法)，Web API在后面的课程中有其它含义。

掌握常见的浏览器提供的API的调用方式

MDN网站关于API的讲解

JavaScript的组成

在这里插入图片描述

ECMAScript - JavaScript的核心

定义了javascript的语法规范

JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关

BOM - 浏览器对象模型

一套操作浏览器功能的API

通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

DOM - 文档对象模型

一套操作页面元素的API

DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

DOM

DOM的概念

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

DOM又称为文档树模型
在这里插入图片描述

文档：一个网页可以称为文档
节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
元素：网页中的标签
属性：标签的属性

模拟文档树结构

在这里插入图片描述

function Element(option) {this.id = option.id || '';this.nodeName = option.nodeName || '';this.nodeValue = option.nodeValue || '';this.nodeType = 1;this.children = option.children || [];
}var doc = new Element({nodeName: 'html'
});
var head = new Element({nodeName: 'head'
});
var body = new Element({nodeName: 'body'
})
doc.children.push(head);
doc.children.push(body);var div = new Element({nodeName: 'div',nodeValue: 'haha',
});var p = new Element({nodeName: 'p',nodeValue: '段落'
})
body.children.push(div);
body.children.push(p);function getChildren(ele) {for(var i = 0; i < ele.children.length; i++) {var child = ele.children[i];console.log(child.nodeName);getChildren(child);}
}
getChildren(doc);

DOM经常进行的操作

获取元素
动态创建元素
对元素进行操作(设置其属性或调用其方法)
事件(什么时机做相应的操作)

例子：其中的图片可以使用任何的图片，命名随意。

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body>
<!--html代码-->
<input type="button" value="显示效果" id="btn"/>
<script>//先有按钮，才能获取，获取之后才能注册事件//最终极的点击按钮弹出对话框的代码//根据id属性的值从文档中获取这个元素var btnObj=document.getElementById("btn");//为当前的这个按钮元素（对象），注册点击事件，添加事件处理函数btnObj.onclick=function () {alert("王者荣耀");};
</script>
</body>
</html>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><input type="button" value="显示效果" id="btn" /><img src="img/cangjingkong.jpg" alt="哈哈" title="苦苦"/><script>document.getElementById("btn").onclick=function(){//返回的是一个伪数组var imObjs=document.getElementsByTagName("img");imObjs[0].alt="修改";imObjs[0].title="成功";};</script></body>
</html>

例子2：
先创建一个js文件：

/*
根据id属性值,返回对应的标签元素
@param ID id属性的值,string类型的
@returns｛Element｝元素对象
*/
function my$(id){return document.getElementById(id);
}

在html文件中引用它：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="button" value="点菜" id="btn"><select name="" id="ss"><option value="1">芹菜</option><option value="2">青菜</option><option value="3">白菜</option><option value="4" id="op1">紫菜</option><option value="5">萝卜</option></select><script src="js/common.js"></script><script>my$("btn").onclick=function(){//点击按钮选择菜my$("op1").selected=true;};</script><textarea name="" id="tt" rows="30" cols="10">某人问智者：大师，你觉得怎么做才最快乐？回答说：不要和愚者辩论。</textarea></body>
</html>

例子3：js文件用同一个
点击按钮设置div的样式：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="button" value="设置样式" id="btn"/><div id="dv"></div><script src="js/common.js"></script><script>//点击按钮，修改div的宽，高，背景颜色my$("btn").onclick=function(){my$("dv").style.width="300px";my$("dv").style.height="200px";//凡是css中这个属性是多个单词的写法，在js代码中DOM操作的时候，把-去掉，后面// 的单词的首字母大写即可my$("dv").style.backgroundColor="deeppink";}</script></body>
</html>

例子4：div的显示和隐藏通过类样式实现

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.cls{width: 300px;height: 200px;background-color: yellow;border: 2px solid red;}</style></head><body><input type="button" value="设置样式" id="btn"/><div id="dv"></div><script src="js/common.js"></script><script>//设置div样式my$("btn").onclick=function(){//在js代码中DOM操作的时候，设置元素的类样式，不用class关键字，而用classNamemy$("dv").className="cls";};</script></body>
</html>

例子5：网页开关灯

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.cls{background-color: black;}</style></head><body id="bd"><input type="button" value="开/关灯" id="btn" /><script src="js/common.js"></script><script>my$("btn").onclick=function(){//获取body标签document.body.className=document.body.className!="cls"?"cls":"";};</script></body>
</html>

2.获取页面元素

为什么要获取页面元素

经过上面的例子，我们知道了想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，才进行后续操作

根据id获取元素

var div = document.getElementById('main');
console.log(div);// 获取到的数据类型 HTMLDivElement，对象都是有类型的
// HTMLDivElement <-- HTMLElement <-- Element  <-- Node  <-- EventTarget

注意：由于id名具有唯一性，部分浏览器支持直接使用id名访问元素，但不是标准方式，不推荐使用。

根据标签名获取元素

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {var div = divs[i];console.log(div);
}

注意返回值是一个伪数组

根据name获取元素*

var mains = document.getElementsByClassName('main');
for (var i = 0; i < mains.length; i++) {var main = mains[i];console.log(main);
}

根据选择器获取元素

var text = document.querySelector('#text');
console.log(text);var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {var box = boxes[i];console.log(box);
}

总结

掌握getElementById()getElementsByTagName()
了解getElementsByName()getElementsByClassName()querySelector()querySelectorAll()

3.事件

事件：触发-响应机制

Event接口表示在DOM中发生的任何事件，一些是用户生成的（例如鼠标或键盘事件），而其他由API生成。

事件三要素

事件源:触发(被)事件的元素
事件类型:事件的触发方式(例如鼠标点击或键盘点击)
事件处理程序:事件触发后要执行的代码(函数形式)

事件的基本使用

var box = document.getElementById('box');
box.onclick = function() {console.log('代码会在box被点击后执行');  
};

案例

点击按钮弹出提示框
点击按钮修改元素的样式

重点例子1：禁用文本框和改变列表背景颜色

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="button" value="禁用文本框" id="btn"/><input type="text" value="文本框" id="txt"/><br><script>//先根据id获取按钮，为按钮注册点击事件，添加事件处理函数document.getElementById("btn").onclick=function(){//根据id获取文本框，设置disabled属性document.getElementById("txt").disabled=true};</script><input type="button" value="变色" id="btn2"/><ul id="uu"><li>王者荣耀</li><li>王者荣耀</li><li>王者荣耀</li><li>王者荣耀</li><li>王者荣耀</li></ul><script>document.getElementById("btn2").onclick=function(){document.getElementById("uu").style.backgroundColor="yellow";};</script></body>
</html>

在这里插入图片描述
重点例子2：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script>//点击超链接弹出对话框//阻止超链接跳转：return falsefunction f1(){alert("被点了");return false;}</script><a href="http://www.baidu.com" onclick="return f1()">百度</a><!-- 第二种写法 --><a href="http://www.baidu.com" id="ak">百度</a><script type="text/javascript">document.getElementById("ak").onclick=function(){alert("又被点了")；return false;};</script></body>
</html>

重点例子3：
所需图片：
在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><a href="img/1.jpg" id="ak"><img src="img/1-small.jpg" ></a><img src="" id="big"><script src="js/common.js"></script><script >//点击小图，下面显示大图//点击超链接my$("ak").onclick=function () {my$("big").src=this.href;return false;//阻止跳转};</script></body>
</html>

重点例子4：
所需图片：
在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style type="text/css">body {font-family: "Helvetica", "Arial", serif;color: #333;background-color: #ccc;margin: 1em 10%;}h1 {color: #333;background-color: transparent;}a {color: #c60;background-color: transparent;font-weight: bold;text-decoration: none;}ul {padding: 0;}li {float: left;padding: 1em;list-style: none;}#imagegallery {list-style: none;}#imagegallery li {margin: 0px 20px 20px 0px;padding: 0px;display: inline;}#imagegallery li a img {border: 0;}</style>
</head>
<body><h2>美女画廊
</h2><ul id="imagegallery"><li><a href="img/1.jpg" title="美女A"><img src="img/1-small.jpg" width="100" alt="美女1"/></a></li><li><a href="img/2.jpg" title="美女B"><img src="img/2-small.jpg" width="100" alt="美女2"/></a></li><li><a href="img/3.jpg" title="美女C"><img src="img/3-small.jpg" width="100" alt="美女3"/></a></li><li><a href="img/4.jpg" title="美女D"><img src="img/4-small.jpg" width="100" alt="美女4"/></a></li>
</ul><div style="clear:both"></div>
<!--显示大图的-->
<img id="image" src="img/placeholder.png" alt="" width="450"/>
<p id="des">选择一个图片</p>
<script src="js/common.js"></script>
<script>//点击a标签，把a标签中的href的属性值给id为image的src属性//把a的title属性的值给id为des的p标签赋值//从ul中获取所有的a标签var aObjs=my$("imagegallery").getElementsByTagName("a");//循环遍历所有的a标签for (var i=0;i<aObjs.length;i++) {//为每个a标签注册点击事件aObjs[i].onclick=function  () {//为id为image的标签的src赋值my$("image").src=this.href;//为p标签赋值my$("des").innerText=this.title;//阻止超链接跳转return false;}}
</script>
</body>
</html>

效果图：
在这里插入图片描述
重点例子5：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="button" value="隔行变色" id="btn"><ul id="uu"><li>韩信</li><li>李白</li><li>露娜</li><li>玄策</li><li>赵云</li><li>赔钱虎</li><li>达摩</li><li>云中君</li></ul><script src="js/common.js"></script><script>//点击按钮，奇数红色偶数黄色my$("btn").onclick=function  () {//获取所有的li标签var list=my$("uu").getElementsByTagName("li");//遍历for (var i=0;i<list.length;i++) {//如果是偶数if(i%2==0){list[i].style.backgroundColor="red";//为什么是红色？不是奇红偶黄吗？别忘了，数组是从0开始的。}else{//如果是奇数list[i].style.backgroundColor="yellow";}}};</script></body>
</html>

在这里插入图片描述
但是，for循环代码太多了，不简洁，我们优化：

for (var i=0;i<list.length;i++) {// //如果是偶数// if(i%2==0){// 	list[i].style.backgroundColor="red";//为什么是红色？不是奇红偶黄吗？别忘了，数组是从0开始的。// }else{//如果是奇数// 	list[i].style.backgroundColor="yellow";// }// 优化：list[i].style.backgroundColor=i%2==0?"red":"yellow";//先问是否为偶数，是的话为红色，否则为黄色}

重点例子6：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>ul{cursor: pointer;}</style></head><body><ul id="uu"><li>韩信</li><li>李白</li><li>露娜</li><li>玄策</li><li>赵云</li><li>赔钱虎</li><li>达摩</li><li>云中君</li></ul><script src="js/common.js"></script><script>//鼠标进入和鼠标离开两个事件//获取所有的li标签var list=my$("uu").getElementsByTagName("li");for(var i=0;i<list.length;i++){//为鼠标注册进入事件list[i].onmouseover=function  () {this.style.backgroundColor="pink";};//为鼠标注册离开事件list[i].onmouseout=function  () {//恢复默认颜色this.style.backgroundColor="";};}</script></body>
</html>

在这里插入图片描述
重点例子7：显示隐藏二维码

所需图片：
在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>.nodeSmall {width: 50px;height: 50px;background: url(img/bgs.png) no-repeat -159px -51px;position: fixed;right: 10px;top: 40%;}.erweima {position: absolute;top: 0;left: -150px;}.nodeSmall a {display: block;width: 50px;height: 50px;}.hide {display: none;}.show {display: block;}</style></head>
<body>
<div class="nodeSmall" id="node_small"><a href="#"></a><!--锚定--><div class="erweima hide" id="er"><img src="img/456.png" alt=""/></div>
</div>
<script src="js/common.js"></script>
<script>//获取鼠标要进入的a标签//先获取最外面的div的第一个a标签var aObj=my$("node_small").getElementsByTagName("a")[0];//为a注册鼠标进入aObj.onmouseover=function  () {my$("er").className="erweima show";};//为a注册鼠标离开aObj.onmouseout=function  () {my$("er").className="erweima hide";};
</script></body>
</html>

在这里插入图片描述
重点例子8：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="button" name="" id="btn" value="显示效果" /><br/><input type="text" value="您好" name="name1"><br/><input type="text" value="您好" name="name2"><br/><input type="text" value="您好" name="name1"><br/><input type="text" value="您好" name="name3"><br/><input type="text" value="您好" name="name1"><br/><input type="text" value="您好" name="name1"><br/><script src="js/common.js"></script><script><!-- 点击按钮，改变所有name属性值为name1的文本框中的value属性值 -->my$("btn").onclick=function(){//通过name属性值获取元素,主要是表单的标签有namevar inputs=document.getElementsByName("name1");for(var i=0;i<inputs.length;i++){inputs[i].value="我很好";}};</script></body>
</html>

重点例子9：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{width: 200px;height: 50px;background-color: green;margin-top: 10px;}.cls{background-color: yellow;}</style></head><body><p>王者</p><p class="cls">荣耀</p><span class="cls">李白</span><span>韩信</span><div class="cls">QQ</div><div>微信</div><input type="button" name="" id="btn" value="显示效果" /><script src="js/common.js"></script><script>//点击按钮设置应用cls类样式的标签的背景颜色为红色my$("btn").onclick=function  () {//根据类样式的名字获取元素var objs=document.getElementsByClassName("cls");for(var i=0;i<objs.length;i++){objs[i].style.backgroundColor="red";}};</script></body>
</html>

获取元素总结

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title></head>
<body><script src="common.js"></script>
<script>/*** 根据id属性的值获取元素,返回来的是一个元素对象* document.getElementById("id属性的值");** 根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象* document.getElementsByTagName("标签名字");** 下面的几个,有的浏览器不支持** 根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象* document.getElementsByName("name属性的值")* 根据类样式的名字来获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象* document.getElementsByClassName("类样式的名字")* 根据选择器获取元素,返回来的是一个元素对象* document.querySelector("选择器的名字");** 根据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象* document.querySelectorAll("选择器的名字")*** */document.querySelector()</script>
</body>
</html>

4.属性操作

表单元素的属性

href、title、id、src、className

var link = document.getElementById('link');
console.log(link.href);
console.log(link.title);var pic = document.getElementById('pic');
console.log(pic.src);

案例：

点击按钮，切换img标签里的图片点击按钮显示隐藏div

innerHTML和innerText

    var box = document.getElementById('box');box.innerHTML = '我是文本<p>我会生成为标签</p>';console.log(box.innerHTML);box.innerText = '我是文本<p>我不会生成为标签</p>';console.log(box.innerText);

HTML转义符

    "		&quot;‘		&apos;&		&amp;<		&lt;    //less than  小于>		&gt;   // greater than  大于空格	   &nbsp;©		&copy;

innerHTML和innerText的区别
innerText的兼容性处理

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{width: 200px;height: 150px;border: 2px solid red;}</style></head><body><input type="button" name="" id="btn" value="设置值" /><div id="dv">王者荣耀</div><script src="js/common.js"></script><script>//设置标签中的文本内容，应使用tetxContext属性,谷歌，火狐支持，IE8不支持。//设置标签中的文本内容，应使用innerText属性，谷歌，火狐支持，IE8都支持。//如果这个属性在浏览器中不支持，那么这个属性的类型是undefined//判断这个属性的类型是不是undefined,就知道浏览器是否支持//所以要写兼容代码//设置任意的标签中间的任意文本内容function setInnerText(element,text){//判断浏览器是否支持这个属性if (typeof element.textContent=="undefined") {//不支持element.innerText=text;}else{//支持这个属性element.textContent=text;}}//获取任意标签中间的文本内容function getInnerText (element) {if (typeof element.textContent=="undefined") {return element.innerText;}else{return element.textContent;}}//测试my$("btn").onclick=function  () {console.log(getInnerText(my$("dv")));setInnerText(my$("dv"),"荣耀王者")};//点击按钮设置div中的文本内容// my$("btn").onclick=function  () {// 	//设置标签中间的文本内容，应使用tetxContext属性// 	my$("dv").textContent="这是div标签";// 	my$("dv").innerText="啊div";// 	//获取标签中间的文本内容// };</script></body>
</html>

innerText和innerHTML的区别：js文件引用还是用之前的，非常方便。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{width: 300px;height: 200px;border: 2px dotted red;}</style></head><body><input type="button" id="btn" value="显示效果" /><input type="button" id="btn2" value="显示效果获取" /><div id="dv"><p>这是一个p</p>这是div</div><script src="js/common.js"></script><script>//设置my$("btn").onclick=function  () {// 	my$("dv").innerText="哈哈";//设置文本// 	my$("dv").innerText="<p>这是一个p标签</p>";//设置html标签的代码//若果使用innerText主要是设置文本的，设置标签内容，是没有标签的效果的//innerHTML是可以设置文本内容，其主要作用是在标签中设置新的html标签内容，是有标签效果的。my$("dv").innerHTML="<p>这是一个p标签</p>";//总结：想要设置标签内容，使用innerHTML,想要设置文本内容，innerText或者textContent，或者innerHTML，推荐使用};//获取my$("btn2").onclick=function  () {//可以获取标签的文本内容// console.log(my$("dv").innerText);获取不到标签console.log(my$("dv").innerHTML);//innerHTML才是真正的获取标签中间的所有内容，文本可以获取。};//获取的时候：innerText可以获取标签中间的文本内容，但是标签中如果还有标签，那么最里面的标签的// 文本内容也能获取//结论：//如果想要（获取）标签及内容，使用innerHTML//如果想要设置标签，使用innerHTML//想要设置文本，用innerText，或者innerHTML，或者textContent</script></body>
</html>

表单元素属性

value 用于大部分表单元素的内容获取(option除外)
type 可以获取input标签的类型(输入框或复选框等)
disabled 禁用属性
checked 复选框选中属性
selected 下拉菜单选中属性
案例
给文本框赋值，获取文本框的值
点击按钮禁用文本框
搜索文本框
检测用户名是否是3-6位，密码是否是6-8位，如果不满足要求高亮显示文本框
设置下拉框中的选中项
全选反选

自定义属性操作

getAttribute() 获取标签行内属性
setAttribute() 设置标签行内属性
removeAttribute() 移除标签行内属性
与element.属性的区别: 上述三个方法用于获取任意的行内属性。

例子：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style >ul{cursor: pointer;}</style></head><body><!-- 点到谁，显示出他的排名 --><ul id="uu"><li score="1">李白</li><li score="2">韩信</li><li score="3">露娜</li><li score="4">孙尚香</li><li score="5">天使</li></ul><script src="js/common.js"></script><script>//html标签没有自带的属性可以存储排名。//所以，我们自定义这个属性//获取所有的li标签var list=document.getElementsByTagName("li");for (var i=0;i<list.length;i++) {list[i].onclick=function  () {// alert(this.score);//这样是不行的alert(this.getAttribute("score"));//在html标签中添加自定义属性，如果想要获取这个属性的值，需要使用getAttribute（自定义属性的名字）才能获取这个属性的值};}</script></body>
</html>

自定义属性操作：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style >ul{cursor: pointer;}</style></head><body><!-- 点到谁，显示出他的排名 --><ul id="uu"><li>李白</li><li>韩信</li><li>露娜</li><li>孙尚香</li><li>天使</li></ul><script src="js/common.js"></script><script>//获取所有的li标签，然后为每个标签中动态的添加自定义属性和值//点击的时候获取该标签的自定义属性的值//根据id获取ul标签，并且或者该标签中说有的livar list=my$("uu").getElementsByTagName("li");//循环遍历for (var i=0;i<list.length;i++) {//先为每个li添加自定义属性//list[i].score=i+1;//此方式，自定义属性在DOM对象上，不在标签中list[i].setAttribute("score",i+1);//点击每个li标签，显示对应的自定义属性值list[i].onclick=function  () {alert(this.getAttribute("score"));};}//总结：设置自定义属性：setAttribute("属性的名字"，“属性的值”)//获取自定义属性的值：getAttribute("属性的名字")</script></body>
</html>

移除自定义属性：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{width: 200px;height: 100px;background-color: yellow;}.cls{background-color: green;}</style></head><body><input type="button" name="" id="btn" value="移除自定义属性" /><div id="dv" score="10" class="cls"></div><script src="js/common.js"></script><script>//移除自定义属性：removeAttribute（“属性的名字”）//点击按钮，移除元素的自定义属性my$("btn").onclick=function  () {//移除元素的类样式// my$("dv").removeAttribute("score");// my$("dv").className="";//这种“移除”，值没有了，但属性还在，不干净。my$("dv").removeAttribute("class");//移除自带属性}</script></body>
</html>

样式操作

使用style方式设置的样式显示在标签行内

var box = document.getElementById('box');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';

注意
通过样式属性设置宽高、位置的属性类型是字符串，需要加上px

类名操作

修改标签的className属性相当于直接修改标签的类名

var box = document.getElementById('box');
box.className = 'clearfix';

案例

开关灯
点击按钮变色
图片切换二维码案例
当前输入的文本框高亮显示
点击按钮改变div的大小和位置
列表隔行变色、高亮显示
京东商品展示
tab选项卡切换

综合案例

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;}ul {list-style-type: none;}.box {width: 400px;height: 300px;border: 1px solid #ccc;margin: 100px auto;overflow: hidden;}.hd {height: 45px;}.hd span {display: inline-block;width: 90px;background-color: pink;line-height: 45px;text-align: center;cursor: pointer;}.hd span.current {background-color: purple;}.bd li {height: 255px;background-color: purple;display: none;}.bd li.current {display: block;}</style></head>
<body>
<div class="box" id="box"><div class="hd"><span class="current">体育</span><span>娱乐</span><span>新闻</span><span>综合</span></div><div class="bd"><ul><li class="current">我是体育模块</li><li>我是娱乐模块</li><li>我是新闻模块</li><li>我是综合模块</li></ul></div>
</div>
<script src="common.js"></script>
<script>//获取最外面的divvar box=my$("box");//获取的是里面的第一个divvar hd=box.getElementsByTagName("div")[0];//获取的是里面的第二个divvar bd=box.getElementsByTagName("div")[1];//获取所有的li标签var list=bd.getElementsByTagName("li");//=================================//获取所有的span标签var spans=hd.getElementsByTagName("span");//循环遍历的方式,添加点击事件for(var i=0;i<spans.length;i++){//在点击之前就把索引保存在span标签中spans[i].setAttribute("index",i);//================================spans[i].onclick=function () {//第一件事,所有的span的类样式全部移除for(var j=0;j<spans.length;j++){spans[j].removeAttribute("class");}//第二件事,当前被点击的span应用类样式this.className="current";//span被点击的时候获取存储的索引值//alert(this.getAttribute("index"));var num=this.getAttribute("index");//==============================//获取所有的li标签,每个li标签先全部隐藏for(var k=0;k<list.length;k++){list[k].removeAttribute("class");}//当前被点击的span对应的li标签显示list[num].className="current";};}</script></body>
</html>

总结

本期学习到此结束。

原文链接：https://808629.com/896.html

上一篇：前端工程化系列[01]-Bower包管理工具的使用

下一篇：前端全栈学习第十四天-js-WebAPI-第二天

发表评论: