API现成的函数/对象通俗地说API应用程序编程接口就是不同软件或系统之间约定好的“信使”和“翻译官”。它定义了一套规则让A程序可以不用知道B程序内部是怎么运作的也能请求并使用B程序的功能或数据。为了让你秒懂我们用餐厅就餐来打个比方你客户端想吃东西的人。厨房服务器负责做菜的后台系统内部很复杂有炉灶、冰箱。服务员API负责传递你的需求并把厨房的成果端给你。你不需要冲进厨房亲自动手只要坐在餐桌前按**菜单API文档**上的规则点菜服务员就会把你的订单传给厨房再把做好的菜数据或服务送回来。WebAPI在Web开发中API具体指什么当你用JavaScript写前端代码时最常接触的是Web API它分为两种1. 第三方接口服务器API这是目前最主流的用法。比如你的网页需要显示当前天气你不需要自己去建气象卫星而是向“天气服务商”的API地址发送一个HTTP请求就像打电话。你发请求fetch(https://api.weather.com/today?citybeijing)服务商收到请求查询数据库然后把天气数据打包成JSON一种通用数据格式返回给你。你的JS拿到数据后解析并展示在网页上。2. 浏览器内置API宿主环境API这是JavaScript语言本身没法做到但浏览器主动暴露给你用的“超能力”。它们不是用JS写的但JS可以调用它们console.log()—— 调用浏览器的控制台API在开发者工具里打印文字。document.getElementById()—— 调用浏览器的DOM API让JS操作网页上的HTML元素。setTimeout()—— 调用浏览器的定时器API让JS延时执行代码。总结核心价值API的本质是封装复杂性。作为前端开发者你调用地图API、支付API或微信登录API时完全不需要关心后端服务器的负载均衡、数据库索引或加密算法你只需要按文档拼接好请求链接或者参数拿回结果就行了。类比一下API文档就像产品说明书只要参数传对了它就给你结果如果传错参数比如点了菜单上没有的菜它就会返回“404”或错误提示。DOM api获取元素querySelectorvarelementdocument.querySelector(selectors);bodydivclassbox1box1/divdivclassbox2box2/divh3spaninput typetext/span/h3/body在这里插入代码片scriptconsole.log(document.querySelector(.box1))console.log(document.querySelector(h3).querySelector(span).querySelector(input))console.log(document.querySelectorAll(div))/scriptquerySelectorAll用法和上面一样只不过范围是所有的。事件事件源哪个元素触发的事件类型是点击选中还是修改事件处理程序进一步如何处理往往是一个回调函数点击事件//事件源letbuttondocument.querySelector(input)//绑定事件类型(点击事件)//函数设定了事件处理程序button.onclickfunction(){alert(hello)}键盘事件onkeydown,onkeypress,onkeyupbodyinputtypetest/bodyscriptletinputdocument.querySelector(input)input.onkeydownfunction(){console.log(键盘正在按下)}/script显示按下的是什么键(大写)bodyinputtypetest/bodyscriptletinputdocument.querySelector(input)input.onkeydownfunction(event){console.log(键盘正在按下)letaevent.keyCode;letbString.fromCharCode(a)console.log(b)}/scriptonketpress区分大小写bodyinputtypetest/bodyscriptletinputdocument.querySelector(input)input.onkeypressfunction(event){console.log(键盘正在按下)letaevent.keyCode;letbString.fromCharCode(a)console.log(b)}/scriptonkeyupbodyinputtypetestonkeyupmyOnkeyUp()/bodyscriptletinputdocument.querySelector(input)input.onkeypressfunction(event){console.log(键盘正在按下)letaevent.keyCode;letbString.fromCharCode(a)console.log(b)}functionmyOnkeyUp(){console.log(按键被抬起)}/script获取/修改元素属性bodyinputtypetestonkeyupmyOnkeyUp()brspan这是一个span标签/spanbrimgsrcD:\桌面\web\img\huihui.jpgalt图片加载失败title这是提示的图片width100pxheight100px/bodyscriptletinputdocument.querySelector(input)input.onkeypressfunction(event){console.log(键盘正在按下)letaevent.keyCode;letbString.fromCharCode(a)console.log(b)}functionmyOnkeyUp(){console.log(按键被抬起)}letimgdocument.querySelector(img)console.dir(img)img.title这是已经修改的titleimg.onclickfunction(){alert(你已经点击了图片)}/script按钮播放/暂停点击切换bodyinputclassbtntypebuttonvalue播放onclickOnclick()/bodyscriptletbtndocument.querySelector(.btn)//当按钮的 value 等于播放此时将按钮 value变成暂停//否则变成播放functionOnclick(){if(btn.value播放){btn.value暂停}else{btn.value播放}}/script计数器bodyinputclassbtntypebuttonvalue播放onclickOnclick()brinputclassinputtypetextvalue0inputclassaddtypebuttonvalue1onclickAdd()inputclassmintypebuttonvalue-1onclickMin()/bodyscriptletbtndocument.querySelector(.btn)//当按钮的 value 等于播放此时将按钮 value变成暂停//否则变成播放functionOnclick(){if(btn.value播放){btn.value暂停}else{btn.value播放}}functionAdd(){letinput_elementdocument.querySelector(.input)input_element.valueparseInt(input_element.value)1}functionMin(){letinput_elementdocument.querySelector(.input)input_element.valueparseInt(input_element.value)-1}/script获取/修改表单元素属性bodyinputclassalltypecheckboxonclickSelectAll()选中全部brinputclassselecttypecheckbox选项1brinputclassselecttypecheckbox选项2brinputclassselecttypecheckbox选项3brinputclassselecttypecheckbox选项4br/bodyscriptletalldocument.querySelector(.all)letselectdocument.querySelectorAll(.select)functionSelectAll(){for(i0;iselect.length;i){select[i].checkedall.checked}}for(i0;iselect.length;i){select[i].onclickfunction(){all.checkedIsSelectAll(select)}}functionIsSelectAll(select){for(i0;iselect.length;i){if(select[i].checkedfalse){returnfalse}}returntrue}/script点击文字会变大只会影响内部样式表bodydivstylefont-size:10px;onclickchangeSize()哈哈哈/div/bodyscriptfunctionchangeSize(){letelementdocument.querySelector(div)letsizeparseInt(element.style.fontSize)10// element.style.fontSize size pxelement.style.cssTextfont-size:sizepx}/script类名样式操作style.light{background-color:aliceblue;color:black;width:100%;height:100%;}body,html{width:100%;height:100%;}.dark{background-color:black;color:white;width:100%;height:100%;}/style/headbodydivclasslightonclickchangeStyle()这是一段话br这是一段话br这是一段话br这是一段话br这是一段话br/div/bodyscriptfunctionchangeStyle(){letelementdocument.querySelector(div)//如果当前的样式是白天模式此时就将其样式切换成黑夜模式if(element.classNamelight){element.classNamedark}else{element.classNamelight}}/script