JavaScript(WebAPI)

最新推荐文章于 2024-08-14 10:08:54 发布

Roylelele

最新推荐文章于 2024-08-14 10:08:54 发布

阅读量200

点赞数

分类专栏： web 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_67793092/article/details/133148943

版权

web 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一.WebAPI

WebAPI都是浏览器给JS代码提供的功能（如果浏览器不同，api的行为也可能存在差异）

WebAPI包含了DOM和BOM

https://developer.mozilla.org/zh-CN/docs/Web/API（参考文档）

二.DOM

DOM：Document Object Model（文档对象模型）

HTML上的每一个标签，都可以映射到JS中的一个对应的对象。通过DOM让JS代码操作页面。

DOM树：

1.选中页面元素

querySelector（CSS选择器）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">abc</div>
    <div id="id">def</div>
    <h3>
        <span>
            <input type="text">
        </span>
    </h3>
    <script>
        let elem1=document.querySelector('.box');
        // console.log(elem1);
        console.dir(elem1);

        let elem2=document.querySelector('#id');
        console.log(elem2);

        let elem3=document.querySelector('h3>sapn>input');
        console.log(elem3);
    </script>
</body>
</html>

2.事件

事件就是针对用户的操作进行一些响应。要能够和用户交互，就要知道用户干了什么。用户做的一些动作就会在浏览器中产生一些事件（鼠标点击、鼠标双击、鼠标移动、键盘按下），代码就需要针对事件做出一反映。

事件的三个要素：

1.事件源：哪个元素产生的事件。

2.事件类型：点击、双击、移动、键盘按下.....

3.事件处理程序：事件发生之后，要执行哪个代码。（要执行的代码都是提前设定好的）

三.操作元素

获取修改元素内容

先获取到该元素，使用innerHTML属性，就能拿到元素中的内容。修改该属性就会影响到界面的属性。

获取/修改表单元素属性

表单元素（input、textarea、select...)有一些特别的属性，普通标签没有的。

value

input的值

value获取到元素里用户填写的值。

给input里面放个数字，每次点击按钮，让数字加1并显示出来。

注意：value默认情况下是一个string类型。直接加1会变成字符串拼接。

type

input的类型（文本、密码、文件、按钮等）

写一个点击可以查看密码的程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

   <input type="text">
   <button>隐藏密码</button>

    <script>

    let input=document.querySelector('input');
    let button=document.querySelector('button');
    button.onclick=function(){
      if(input.type=='text'){
        input.type='password';
        button.innerHTML='显示密码';
      }else{
        input.type='text';
        button.innerHTML='隐藏密码';
      }
    }
    </script>
</body>
</html>

获取/修改样式属性

1.修改内联样式

修改style的值，style里的属性名字和CSS中的一致（脊柱命名换成驼峰命名即可）

例：创建一个div，每次点击，都让里面的字体放大

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="font-size: 20px;">这是第一个div，点击之后字体放大</div>

    <script>
        let div=document.querySelector('div');
        div.onclick=function(){
            //先获取到当前的字体大小
           let fontSize=parseInt(div.style.fontSize);
            fontSize+=10;
            //设置字体大小的时候不要忘记了px这个单位
            div.style.fontSize=fontSize+'px';
        }
    </script>
</body>
</html>

2.修改元素应用的CSS类名

例：切换夜间模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="one" class="light" style="font-size: 20px; height: 500px;">这是第一个div，
        点击之后切换模式</div>
        <style>
            .light{
                /* 日间模式 */
                color: black;
                background-color: white;
            }
            
            .dark{
                /* 夜间模式 */
                color: white;
                background-color: black;
            }
        </style>

        <script>
            let div=document.querySelector('#one')
            div.onclick=function(){
                // 点击div，切换到夜间模式
                if(div.className=='dark'){
                    div.className='light';
                }else{
                    div.className='dark';
                }
            }
            
        </script>
</body>
</html>

上述操作都是针对当前页面已有的元素进行展开的，下面是对当前页面原本没有的内容的操作。

四.操作节点

1.新增元素

a)创建一个元素

createElement

b)把这个元素放到dom树中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="one">这是第一个div</div>
    <script>
        //创建元素
        let input=document.createElement('input');
        input.value='hello';

        let div=document.querySelector('.one');
        //把子元素添加到这个div的末尾，dom树中
        div.appendChild(input);
    </script>
</body>
</html>

例：往无序列表中添加元素，加入到末尾。（appendChild)

补充：insertBefore把元素加到指定子元素的前面（中间位置插入）

2.删除元素

ParentElem.removeChild(childElement)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>11</li>
        <li>22</li>
    </ul>

    <script>
        let ul=document.querySelector('ul');
        for(let n=3;n<10;n++){
        let li=document.createElement('li');
        li.innerHTML=n+''+n;
        ul.appendChild(li);
        }

        //删除33这个元素
        let toDelete=document.querySelectorAll('li')[2];
        console.log(toDelete);
        ul.removeChild(toDelete);
    </script>
</body>
</html>

五.小结

1.选中元素 querySelector/querySelectorAll

2.事件 onclick

3.修改元素内容innerHTML

4.修改元素属性元素.属性

5.修改表单属性元素.value 元素.type

6.元素样式元素.style.样式名=值元素.className=css类名

7.创建元素 createElement

8.把元素放到dom树上 appendChild

9.删除元素 removeChild

六.案例

1.网页版本的猜数字

1.生成1-100之间的随机整数

2.让用户来输入一个数字

3.根据输入数字的大小关系，给出一个提示是高了/低了/猜对了

</head>
<body>
    <div>请输入要猜的数字</div>
    <input type="text">
    <button>提交</button>

    <!-- 使用这个div来显示结果 -->
    <div class="result">

    </div>

    <script>
        //1.生成一个随机的整数（1-100）
        let toGuess=parseInt(100*Math.random())+1;
        console.log(toGuess);
        //2.进行猜数字操作
        let button=document.querySelector('button');
        let resultDiv=document.querySelector('.result');
        let input=document.querySelector('input');
        button.onclick=function(){
            //3.取出输入框的内容
            if(input.value==''){
                //用户啥都没有输入，直接返回
                return;
            }
            let inputNum=parseInt(input.value);
            //4.比较大小关系
            if(inputNum<toGuess){
                //小了
                resultDiv.innerHTML='低了';
            }else if(inputNum>toGuess){
                //高了
                resultDiv.innerHTML='高了';
            }else{
                //猜对了
                resultDiv.innerHTML='猜对了'
            }
        }
    </script>
</body>
</html>

2.表白墙程序

预期效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>
</head>
<style>
    /*  *是通配符选择器，是选择页面所有元素 */
    *{
        /* 消除浏览器的默认样式 */
        margin:0;
        padding: 0;
        box-sizing: border-box;
    }
    .container{
        width: 600px;
        /* 最上方设置30像素边距 */
        margin: 30px auto;
    }

    h1{
        /* 表白墙文字水平居中 */
      text-align: center;  
    }

    p{
        text-align: center;
        /* p标签文字颜色浅一点 */
        color: #666;
        margin: 20px ;
    }

    .row{
        /* 开启弹性布局 */
        display: flex;
        height: 40px;
        /* 水平方向居中 */
        justify-content: center;
        /* 垂直方向居中 */
        align-items: center;
    }

    .row span{
        width: 80px;
    }

    .row input{
        width: 200px;
        height: 25px;
    }
    .row button{
        width: 280px;
        height: 25px;
        color: white;
        background-color: orange;
        /* 去掉边框 */
        border:none;
        /* 按钮设置成圆角矩形 */
        border-radius: 5px;
    }

    /* 点击的时候有个反馈 */
    .row button:active{
        background-color: grey;
    }

</style>
<body>
    <div class="container">
        <h1>表白墙</h1>
        <p>输入内容后点击提交，信息会显示到下方表格中</p>
        <div class="row">
            <span>谁：</span>
            <input type="text">
        </div>

        <div class="row">
            <span>对谁：</span>
            <input type="text">  
        </div>
  
        <div class="row">
            <span>说：</span>
            <input type="text">
        </div>

        <div class="row">
            <button id="submit">提交</button>
        </div>

        <div class="row">
            <button id="revert">撤销</button>
        </div>

    </div>


    <script>
        // 实现提交操作，点击按钮，就可以把用户输入的内容提交到页面上显示
        //点击的时候，获取到三个输入框的文本内容
        //创建一个新的div.row，把内容构造到div中
        let containerDiv=document.querySelector('.container');
        let inputs=document.querySelectorAll('input');
        let button=document.querySelector('#submit');
        button.onclick=function(){
            // 1.获取到三个输入框的内容
            let from=inputs[0].value;
            let to=inputs[1].value;
            let msg=inputs[2].value
            if(from==''||to==''||msg==''){
                return;
            }
            //2.构造新div
            let rowDiv=document.createElement('div');
            rowDiv.className='row message';
            rowDiv.innerHTML=from+'对'+to+'说：'+msg;

            containerDiv.appendChild(rowDiv);
            //3.清空之前的输入内容
            for(let input of inputs){
                input.value='';
            }
        }

        let revertButton=document.querySelector('#revert');
        revertButton.onclick=function(){
            //删除最后一条消息
            //选中所有row,找出最后一个row，然后进行删除
            // 使用message而不是row是因为row会把撤销框也删掉
            let rows=document.querySelectorAll('.message');
            if(rows==null||rows.length==0){
                return;
            }
            containerDiv.removeChild(rows[rows.length-1]);
        }
    </script>
   
</body>
</html>

Roylelele

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript(WebAPI)

用户做的一些动作就会在浏览器中产生一些事件（鼠标点击、鼠标双击、鼠标移动、键盘按下），代码就需要针对事件做出一反映。先获取到该元素，使用innerHTML属性，就能拿到元素中的内容。表单元素（input、textarea、select...)有一些特别的属性，普通标签没有的。HTML上的每一个标签，都可以映射到JS中的一个对应的对象。修改style的值，style里的属性名字和CSS中的一致（脊柱命名换成驼峰命名即可）上述操作都是针对当前页面已有的元素进行展开的，下面是对当前页面原本没有的内容的操作。
复制链接

扫一扫