javascript-web APIs

web APIs和JS的基础关联性

Web APIs

• 主要学习DOM和BOM
• js独有部分
• 页面交互效果
• js的应用

API：应用程序编程接口，给程序员提供的一种工具，以便轻松的实现想要完成的功能。 web API：是浏览器提供的一套操作浏览器功能和页面元素的AP I（BOM和DOM）   总结：

1. API是为我们程序员提供一个接口，帮助实现某种功能
2. web API主要是针对于浏览器提供的接口，主要针对浏览器做交互效果
3. web API一般都有输入和输出（函数的传参和返回值），web API很多都是方法（函数）

DOM 文档对象模型，处理可扩展标记语言（html/xml）的标准编程接口。 通过这些DOM接口可以改变网页的内容和结构等  

如何获取页面的元素

根据ID获取

    

        2019-9-9
    
    

根据标签名获取

        
知否知否，应是绿肥红瘦1
        
知否知否，应是绿肥红瘦2
        
知否知否，应是绿肥红瘦3
        
知否知否，应是绿肥红瘦4
        
知否知否，应是绿肥红瘦5
    
    

        
哈哈哈哈哈哈哈
        
哈哈哈哈哈哈哈
        
哈哈哈哈哈哈哈
        
哈哈哈哈哈哈哈
        
哈哈哈哈哈哈哈
    
    

根据类名来获得

盒子1
    
盒子2
    

        

            
首页
            
产品
        
    
    

事件实行的步骤

1. 获取事件源
2. 注册事件（绑定事件）
3. 添加事件处理程序

123
    

操作元素

改变元素的内容

 显示当前系统时间
    
TIME
    
123456
    


    

        我还是那要
        123
    
    

常用元素的属性操作

刘德华
    张学友
    
    
//分时段输出不同文字和图片
    
    
早上好
    

表单元素的属性操作

按一下
    
    

仿京东登陆界面

1. 核心思路：点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码
2. 一个按钮两个状态，点击一次切换为文本框，继续点击一次跟换为密码框
3. 算法：利用一个flag变量，来判断flag的值，如果是1就切换为文本框，flag设置为0，如果是0就切换为密码框，flag设置为1

 


  

        for="">
            
        
        
    
    

样式属性修改操作

div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

    

    

关闭淘宝二维码案例

1.  核心思路：利用样式的显示和隐藏完成，display：none隐藏元素display：block显示元素。
2. 点击按钮，就让这个二维码盒子隐藏起来即可

 

 .box {
            position: relative;
            width: 74px;
            height: 88px;
            border: 1px solid #ccc;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: #f40;
            display: block;
        }

        .box img {
            width: 60px;
            margin-top: 5px;
        }

        .close-btn {
            position: absolute;
            top: -1px;
            left: -16px;
            width: 14px;
            border: 1px solid #ccc;
            line-height: 14px;
            font-family: Arial, Helvetica, sans-serif;
            cursor: pointer;


        }


        淘宝二维码
        
        X

    
    

className的使用

 div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .change {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }
   

        文本
    
    
    

注：

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

案例分析

1. 首先判断的事件是表单丢失焦点onblur
2. 如果输入正确则提示正确的信息颜色为绿色小图标变化
3. 如果输入不是6到16位，则提示错误信息颜色为红色小图标变化
4. 因为里面变化样式较多，我们采className修改样式

div {
            width: 600px;
            margin: 100px auto;

        }

        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url() no-repeat left center;
            padding-left: 20px;
        }

        .wrong {
            color: red;
        }

        .right {
            color: green;
        }    
    

        
        
请输入6～16位密码
    
    

总结