Web APIs(1)

JS的组成

Web APIs与javascript基础的区别

Web APIs是js基础的应用，大量使用js基础做页面交互效果

API 与 Web AIP的区别

• API是提供给程序员的一种工具，以便更好的完成想要实现的功能。(充电接口)
• Web API是浏览器提供的一套操作浏览器功能与页面元素的API(DOM与BOM)

API 与 Web API的总结

• API是为程序员提供的一个接口，帮助我们实现某种功能，会用即可。
• Web AIP 主要是针对于浏览器提供的接口，主要针对浏览器做交互效果
• Web API一般都有输入和输出（函数的传参与返回值） Web ApI很多都是方法

DOM

DOM:文档对象模型，提供访问与操作网页内容的接口与方法。通过DOM，可以改变网页的结构与外观与样式

DOM树

• 一个页面就是一个文档，DOM中用document表示
• 页面中所有的元素被称为标签，DOM中用element表示
• 网页中所有的内容都是节点（标签 属性 文本 注释），DOM中使用node 表示

以上内容都可以看作对象

获取元素

通过id名获取

通过getElementById(id)获取

注意事项

• 返回元素对象
• 参数是一个大小写敏感的字符串
• 页面加载是从上往下加载的，所以script元素写在内容之下
• console.dir（）可以打印返回的元素对象，更好的查看元素对象的属性与方法

    
    
    



    
hello 
    

根据标签名获取元素

根据getElementsByTagName('标签名')获取
注意事项

• 参数为一个大小写敏感的字符串
• 返回值是一个元素对象集合，以伪数组的方式进行存储
• 可以通过遍历获取每一个元素对象
• 获取到的元素对象是动态的

    
    
    



    

        
WEB前段自学者
        
WEB前段自学者
        
WEB前段自学者
        
WEB前段自学者
        
WEB前段自学者
        
WEB前段自学者
    

    

如何获取某个元素里面的标签呢

思路

• 可以先获取元素的id
• 再通过id名获取标签

    
    
    



    
    

        
WEB前端
        
WEB前端
        
WEB前端
        
WEB前端
        
WEB前端
        
WEB前端
    


    

        
hello
        
hello
        
hello
        
hello
        
hello
        
hello
        
hello
        
hello
    

    

根据类名获取元素(html5新增方法）

getElementsByClassName('类名')

注意事项

• 参数为一个大小写敏感的字符串
• 返回值为元素对象集合
• 具有兼容性，是html5新增的方法

    
    
    



    
盒子
    
盒子
    

通过querySelector('选择器')来获取元素

注意事项

• 获取的是指定选择器的第一个元素对象
• 参数里面选择器必须要加符号

    
    
    



    
盒子1
    
盒子2

    

通过通过querySelectorAll('选择器')来获取元素

注意事项

• 返回值为指定选择器的所有元素对象集合
• 参数里面的选择器必须要加符号。

    
    
    



    

        
hello
        
hello
        
hello
        
hello
    
    

获取特殊元素（html body）

事件基础

javascript使我们有能力创建动态页面，而事件是可以被javascript侦测到的行为。

触发 --->响应机制

事件三要素

• 事件源：事件被触发的对象
• 事件类型：触发了什么类型 如点击事件 键盘按下事件
• 事件处理程序：采用函数赋值的方式完成

    
    
    



    锄禾日当午
    

事件执行的步骤

1.获取事件源

2.绑定事件

3.事件处理程序

    
    
    



    
hello
    

常见的鼠标事件

操作元素

通过DOM可以改变网页的外观 结构 内容。通过DOM来操作元素来改变元素内容 结构 样式

注意：以下都是属性来实现的

改变元素的内容

element.innerHTML

element.innerText

区别如下

• innerHTML是W3C推荐的标准，识别HTML标签，识别空格与换行
• innerText非W3C推荐的标准，不识别HTML标签，不识别空格与换行
• innerHTML与innerText都是实现可读写的

案例1

    
    
    



    点击显示时间

    


    

案例2

    
    
    



    

    

        hello
        123
    
    

常用元素的属性

案例

    
    
    
    



    春天

    夏天

    


    
    

根据不同的时间来显示不同的照片

思路如下

• 根据系统时间来判断，所以需要内置日期对象
• 利用多分支语句来判断并设置不同的照片
• 需要一个图片，根据不同的时间段来修改图片的src路径
• 需要一个div，根据不同的时间来修改内容

表单常用属性

注意事项

• 表单的值不能通过innerHTML及innerText改变
• 表单的值通过value改变
• this是指当前事件函数的调用者

    
    
    



    按钮
    

    

仿京东密码框

核心思路：点击眼睛按钮 将input的类型从密码框的类型转换为文本框类型

思路如下

• 一个按钮有两个状态 点击一次切换为文本框类型 再点击一次切换为文本框类型
• 可以利用flag变量，当flag为0的时候，点击切换为文本框，flag设置为1，当flag为1时，点击切换为密码框，flag设置为0

样式属性操作

element.style 行内样式操作
element.className 类名样式操作

注意
1.修改样式采用驼峰式命名法 如fontSize backgroundColor等等
2.js修改的样式 属于行内样式 占的权重比较高

淘宝二维码案例

核心思路

• 利用样式的显示与隐藏完成 display:none隐藏 dispaly:block显示
• 点击按钮：就让二维码隐藏

淘宝精灵图

注意事项

• 首先精灵图的图片的排列顺序要有规律可寻
• 利用for循环 修改精灵图片的背景位置 background-position
• for循环里面的索引i*44就是y坐标的位置

显示与隐藏文本内容

思路如下
-首先需要两个事件 获得焦点事件onfocus与失去焦点事件onblur

• 获得焦点事件时 判断表单里面是否有默认文字 如果有默认文字 则清空表单内容
• 失去焦点事件时，判断表单内容是否为空，如果为空，则将表单内容修改为默认文字

使用className来实现样式属性操作

注意事项

• 如果样式比较多，直接采用类名修改样式属性操作
• class是个保留字，因此使用className来修改样式属性操作
• className会直接更改元素的类名，会覆盖原先的类名。

密码框格式提示错误信息

• 首先判断的事件是表单失去焦点 onblur
• 如果输入正确 则提示正确的信息并且提示图标为绿色
• 如果输入的不是6到16位，则提示错误的信息并且字体图标显示为红色
• 采用className来实现样式属性操作

    
    
    
    



    

        
        
请输入6~16位密码