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

文章目录

  • 什么WebAPI?
    • 获取元素
      • querySelector
      • querySelectorAll
    • 事件
      • 事件三要素
    • 操作元素
      • 获取修改元素的内容
      • 操作元素的属性
      • 实现全选功能
      • 操作元素样式
      • 实现开关灯
      • 操作节点
        • 新增节点

什么WebAPI?

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

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

获取元素

querySelector

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

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

前端三刺客---JS(WebAPI)_第1张图片

querySelectorAll

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

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

前端三刺客---JS(WebAPI)_第2张图片

事件

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

事件三要素

  1. 事件源: 哪个元素触发的
  2. 事件类型: 是点击,选择,还是修改
  3. 事件处理程序: 如何处理对应的事件, 往往是一个回调函数
    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() 这个操作称为 注册事件/绑定事件
前端三刺客---JS(WebAPI)_第3张图片
另一种写法:

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

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

前端三刺客---JS(WebAPI)_第4张图片

操作元素

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

获取修改元素的内容

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

获取:

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

前端三刺客---JS(WebAPI)_第5张图片
修改:

<body>
    <div id="screen">hello worlddiv>
    <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>

前端三刺客---JS(WebAPI)_第6张图片
修改后代的文本内容

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

我们可以看到, div内部的文本内容发生了变化
前端三刺客---JS(WebAPI)_第7张图片
2.innerHtml
innerHTML 属性设置或获取HTML语法表示的元素的后代

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

前端三刺客---JS(WebAPI)_第8张图片
可以看到 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>

未点击照片之前:
前端三刺客---JS(WebAPI)_第9张图片
点击切换后的照片:

实现全选功能

点击全选实现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>

点击第一项就能实现全选
前端三刺客---JS(WebAPI)_第10张图片

操作元素样式

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

这是我们点击文本, 就可以实现颜色的改变
前端三刺客---JS(WebAPI)_第11张图片
前端三刺客---JS(WebAPI)_第12张图片

实现开关灯

<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>

前端三刺客---JS(WebAPI)_第13张图片
前端三刺客---JS(WebAPI)_第14张图片

操作节点

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

新增节点

使用appendChild新增节点

  1. 创建元素节点
  2. 讲元素节点添加到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>

前端三刺客---JS(WebAPI)_第15张图片

你可能感兴趣的:(前端,javaEE,javascript,前端,html)