前端三刺客---JS(WebAPI)

最新推荐文章于 2024-11-16 14:11:26 发布

心有猛虎嗅蔷薇

最新推荐文章于 2024-11-16 14:11:26 发布

阅读量3.1k

点赞数

分类专栏：前端 javaEE 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_62476684/article/details/127173745

版权

javaEE 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

文章目录

什么WebAPI?

什么WebAPI?

上篇文章中有提到, JS分为三个部分:

ECMAScript: 基础语法部分
DOM API: 操作页面结构
BOM API: 操作浏览器
WebAPI中就包含了DOM和BOM
而API本质上就是一些现成的函数和方法, 便于人们直接使用.

获取元素

querySelector

使用querySelector可以更精确快捷的获取到元素的对象.

<body>
    <div id="first">hello</div>
    <script>
      let div = document.querySelector("#first");
      console.log(div);
    </script>
</body>

在这里插入图片描述

querySelectorAll

使用querySelectorAll可以选中符合条件的所有元素

<body>
    <div id="first">hello</div>
    <div class="h">nihao</div>
    <script>
      let div = document.querySelectorAll("div");
      console.log(div);
    </script>
</body>

在这里插入图片描述

事件

用户对于页面的一些操作(选择, 修改, 查询等)操作都会再浏览器中产生一个个事件, 这些事件会被JS获取到, 从而可以进行交互操作

事件三要素

事件源: 哪个元素触发的
事件类型: 是点击,选择,还是修改
事件处理程序: 如何处理对应的事件, 往往是一个回调函数
eg:

<body>
    <button class="btn">点击我</button>
    <script>
      let button = document.querySelector(".btn")
      button.onclick = function() {
        alert("hello");
      }
    </script>
</body>

1.button就是事件源头
2.点击就是事件的类型
3.function这个匿名函数就是事件的处理程序
4. button.onclick = function() 这个操作称为注册事件/绑定事件
在这里插入图片描述
另一种写法:

<body>
    <button class="btn" onclick="f()">点击我</button>
    <script>

       function f() {
        alert("hello");
      }
    </script>
</body>

在这里插入图片描述

操作元素

操作就是获取并修改元素
我们可以修改元素的内容, 元素属性, 和样式属性.

获取修改元素的内容

1.innerText
通过元素的innerHtml属性来实现
innerHtml属性表示一个节点及其后代的“渲染”文本内容

获取:

<body>
    <div id="screen">hello world</div>
    <button id="btn">这是一个按钮</button>
    <script>
      let btn = document.querySelector("#btn");
      btn.onclick = function () {
        let screen = document.querySelector("#screen");
        console.log(screen.innerText);
      };
    </script>
</body>

在这里插入图片描述
修改:

<body>
    <div id="screen">hello world</div>
    <button id="btn">这是一个按钮</button>
    <script>
      let btn = document.querySelector("#btn");
      btn.onclick = function () {
        let screen = document.querySelector("#screen");
        screen.innerText = "nihao"
        console.log(screen.innerText);
      };
    </script>
</body>

在这里插入图片描述
修改后代的文本内容

<body>
    <div>
        <span>hello world</span>
        <span>hello world</span>
    </div>
      <script>
        var div = document.querySelector('div');
        // 读取 div 内部内容
        console.log(div.innerText);
        // 修改 div 内部内容, 界面上就会同步修改
        div.innerText = 'hello js <span>hello js</span>';
      </script>
</body>

我们可以看到, div内部的文本内容发生了变化
在这里插入图片描述
2.innerHtml
innerHTML 属性设置或获取HTML语法表示的元素的后代

<body>
    <div>
        <span>hello world</span>
        <span>hello world</span>
    </div>
      <script>
        var div = document.querySelector('div');
        // 读取页面内容
        console.log(div.innerHTML);
        // 修改页面内容
        div.innerHTML = '<span>hello js</span>'
      </script>
</body>

在这里插入图片描述
可以看到 innerHTML 不光能获取到页面的 html 结构, 同时也能修改结构. 并且获取到的内容保留的空格和换行.

操作元素的属性

通过querySelector操作元素的属性
我们来实现点击图片切换图片的功能:

<body>
    <img src="..\image\a5107469714be407dcd267fda2f0e77c.jpeg" alt="" id="img">
    <script>
      let img = document.querySelector("#img");
      img.onclick = function() {
        console.log(img.src);
        if(img.src.indexOf("a5107469714be407dcd267fda2f0e77c") >= 0){
          img.src = '..\\image\\afd421e401275a37fc15f9f77805f530.jpeg';
        }else if(img.src.indexOf("afd421e401275a37fc15f9f77805f530") >= 0){
          img.src = "..\\image\\a5107469714be407dcd267fda2f0e77c.jpeg";
        }
      }
    </script>
  </body>

未点击照片之前:
在这里插入图片描述
点击切换后的照片:

实现全选功能

点击全选实现checkbox全选的功能

<body>
    <input type="checkbox" id="all">小孩子才做选择, 我全都要<br>
    <input type="checkbox" class="checks"> 草莓味<br>
    <input type="checkbox" class="checks"> 芒果味<br>
    <input type="checkbox" class="checks"> 苹果味<br>
    <input type="checkbox" class="checks"> 荔枝味<br>

    <script>
      let all = document.querySelector("#all");
      let checks = document.querySelectorAll(".checks");

      all.onclick = function () {
            for (let i = 0; i < checks.length; i++) {
                checks[i].checked = all.checked;
            }
        }

        for (let i = 0; i < checks.length; i++) {
          checks[i].onclick = function () {
                all.checked = checkCh(checks);
            }
        }

        function checkCh(checks) {
            //判断是不是所有的 ch 都被选中
            for (let i = 0; i < checks.length; i++) {
                if (!checks[i].checked) {
                    //只要有一个没被选中，就让 all 是未选中状态
                    return '';
                }
            }
            //遍历一圈，发现都被选中了，就让 all 也是选中状态
            return 'checked';
          }
   </script>
</body>

点击第一项就能实现全选
在这里插入图片描述

操作元素样式

<body>
    <div style="color: red;">文本内容</div>
    
    <script>
      let div = document.querySelector("div");
      div.onclick = function() {
        div.style.color = "green"; 
      }
    </script>    
  </body>

这是我们点击文本, 就可以实现颜色的改变
在这里插入图片描述

实现开关灯

<body>
    <style>
      .light {
        background-color: white;
        color: black;
      }

      .dark {
        background-color: black;
        color: white;
      }
    </style>

    <div class="light">文本显示</div>
    <button>闭灯</button>

    <script>
      let div = document.querySelector("div");
      let button = document.querySelector("button");
      button.onclick = function() {
        if(div.className == "light"){
          div.className = "dark";
          button.innerText = "开灯";
        }else if(div.className == "dark"){
          div.className = "light";
          button.innerText = "闭灯";
        }
      }
    </script>

在这里插入图片描述

操作节点

此处讲新增/删除节点,HTML 页面是显示的 DOM 树的内容. 在创建完节点之后, 要挂在 DOM 树上才可以显示. 通过 appendChild 来挂到树上:

新增节点

使用appendChild新增节点

创建元素节点
讲元素节点添加到DOM树中

<body>
    <div class="container"></div>
    <script>
      //1.创建新的节点
      let newDiv = document.createElement('div');
      newDiv.className = "one";
      newDiv.innerText = "hello";
      console.log(newDiv);
      //2. 把节点挂在dom树上
      let container = document.querySelector(".container");
      container.appendChild(newDiv);
    </script>
  </body>