04-WebApl

人俗� 话不多

已于 2022-12-03 17:45:09 修改

阅读量583

点赞数

文章标签： javascript 前端

于 2022-03-08 13:00:00 首次发布

本文链接：https://blog.csdn.net/slf13754951386/article/details/123315588

版权

<img src="https://longfei-01.oss-cn-qingdao.aliyuncs.com/ImageWebApls/img/202203061831525.png" alt="image-20211124092401634" style="zoom:50%;" />

Web Apis 和 JS 基础关联性

JS 的组成

API 和 Web api

MDN 详细 API : https://developer.mozilla.org/zh-CN/docs/Web/API

API 是为我们程序提供的一个接口 , 帮助我们实现某种功能
Web API 主要针对于浏览器提供的接口 , 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM ) . 主要针对于浏览器做交互效果
Web API 一般都有输入和输出 ( 函数的传参和返回值 ) , Web API 很多都是方法 ( 函数 )
学习 Web API 可以结合前面学习内置对象方法的学习思路

DOM★

DOM 文档对象模型 , 处理 HTML 和 XML 文件的标准编程接口 , 通过这些接口可以改变网页内容 . 结构和样式

DOM 树

文档 : 一个页面就是一个文档 , DOM 中使用 document 表示
元素 : 页面中的所有标签都是元素 , DOM 中使用 element 表示
节点 : 网页中的所有内容都是节点 ( 标签 , 属性 , 文本 , 注释等 ) , DOM 中使用 node 表示

DOM 把以上内容都看做是对象

我们获取过来的 DOM 元素是一个对象（object），所以称为 文档对象模型

获取元素

getElementByid() 和 document.querySelector(“选择器”) 返回的是元素

根据 id 获取 getElementByid()

get 获得 element 元素 by 通过驼峰命名法
文档下面找元素 : document.getElementById("time")
参数 id 是大小写敏感的字符串 , 必须加引号 ("time")
返回的是一个元素对象 object

var timer = document.getElementById("time");
console.log(timer);
console.log(typeof timer); // object
// console .dir 打印我们返回的元素对象,更好的查看里面的属性和方法
console.dir(timer);

根据标签名获取 getElementsByTagName()

获取某一类元素或者某一类标签

返回的是获取过来元素对象的集合 , 以伪数组的形式存放
要依次打印里面的元素对象 , 可以用遍历
如果页面中只有一个 li 元素 , 返回的还是伪数组的形式
如果页面中没有这个元素 , 返回的是空伪数组的形式

// 1. 返回的对象
var lis = document.getElementsByTagName("li");
console.log(lis);
console.log(lis[0]); // 获取索引为0的元素
// 2.要依次打印里面的元素对象 , 可以用遍历
for (var i = 0; i < lis.length; i++) {
   
  console.log(lis[i]);
}

还可以获取某个元素 ( 父元素 ) 内部所有指定标签名的子元素

element.getElementsByTagName (“标签名”)

注意 : 父元素必须是单个对象 ( 必须指明是哪一个元素的对象 ) , 获取的时候不包括父元素自己

<ol id="ol">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ol>;

// 方法一 父元素必须是单个对象 必须得加索引
// var ol = document.getElementsByTagName("ol"); //[ol]; // 伪数组
// console.log(ol[0].getElementsByTagName("li"));
// 方法二 元素必须是单个对象 给父元素取个 id 名
var ol = document.getElementById("ol"); //ol;
// element.getElementsByTagName ("标签名")
console.log(ol.getElementsByTagName("li"));

通过 HTML5 新增的方法获取

缺点 : 不兼容低版本浏览器 IE 6 7 8 , 移动端不限制

document.getElementsByClassName("类名") 根据类名返回元素对象集合
document.querySelector("选择器") 根据指定选择器返回第一个元素对象 , 里面选择器需要加符号#nav .box
document.querySelectorAll ( "选择器" ) 返回指定选择器的所有元素对象集合

//1. getElementsByClassName("类名")根据类名获得某些元素集合
var boxs = document.getElementsByClassName("box");
console.log(boxs);
//2. document.querySelector("选择器")根据选择器返回的第一个元素对象
var firstBox = document.querySelector(".box"); // 盒子1
console.log(firstBox);
var nav = document.querySelector("#nav"); // 首页,产品
console.log(nav);
var li = document.querySelector("li"); // 首页
console.log(li);
//3. querySelectorAll(选择器) 返回指定选择器的所有元素对象集合
var allBox = document.querySelectorAll(".box");
console.log(allBox);
var lis = document.querySelectorAll("li");
console.log(lis);

获取特殊元素 body html

获取 body 元素

document.body; // 返回 body 对象

// 1. 获取body 元素
var bodyEle = document.body;
console.log(bodyEle);
console.dir(bodyEle);

获取 html 元素

document.documentElement; 返回 html 对象

// 2. 获取html 元素
var htmlEle = document.documentElement;
console.log(htmlEle);
console.dir(htmlEle);

事件基础

概述

事件是可以被 JAveScript 侦测到的行为

简单理解 : 触发 — 响应机制

网页中的每个元素都可以产生某些可以触发 JAveScript 的事件 , 例如可以在用户点击某按钮时产生一个事件 , 然后去执行某些操作

事件三要素

事件有三部分组成 : 事件源事件类型事件处理程序

事件源 : 事件被触发的对象按钮
事件类型 : 触发条件点击(onclick),标经过,键盘按下
事件处理程序 : 通过一个函数赋值的方式

// 事件源
var btn = document.getElementById("btn");
// 事件源.事件类型=事件处理程序
btn.onclick = function () {
   
  alert("点秋香");
};

事件区别

on 方式会被覆盖 , 只有事件冒泡 , addEventListener 支持事件冒泡和委托方式可以绑定多次 , 拥有更多特性推荐使用

事件执行步骤

获取事件源
注册事件 ( 绑定事件 )
添加事件处理程序 ( 采取函数赋值形式 )

// 点击div 控制台输出 我被选中了
// 1. 获取事件源
var div = document.querySelector("div");
// 2. 绑定事件 onclick
// 3. 添加事件处理程序
div.onclick = function () {
   
  console.log("我被点击了");
};

常见的鼠标事件

操作元素 ★

JavaScript 的 DOM 操作可以改变网页内容 , 结构样式 , 我们可以利用 DOM 操作元素来改变元素里面的内容 , 属性等 . 注意以下都是属性

改变元素内容（获取或设置）

element . innerText

div.innerText = "内容";

从起始位置到终止位置的内容 , 但它去除 html 标签 , 同时空格和换行也会去掉 (不保留格式) , 非标准

案例 - 点击按钮 div 里面的内容发生变化

// 当我们点击了按钮 div 里面的文字会发生变化
// 1.获取元素
var btn = document.querySelector("button");
var div = document.querySelector("div");
// 2.绑定事件 3.添加事件处理程序
btn.onclick = function () {
   
  // div.innerText = "2022-02-02";
  // 修改 div 里面的内容 , 调用时间函数赋值到div
  div.innerText = getDate();
};
// 封装一个时间函数
function getDate() {
   
  var date = new Date();
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var dates = date.getDate();
  var arr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
  var day = date.getDay();
  var h = date.getHours();
  h = h < 10 ? "0" + h : h; // 不足10 补0
  var m = date.getMinutes();
  m = m < 10 ? "0" + m : m;
  var s = date.getSeconds();
  s = s < 10 ? "0" + s : s;
  return "今年是:" + year + "年" + month + "月" + dates + "日 " + arr[day] + "\t" + h + ":" + m + ":" + s;
}

元素可以不用添加事件

// 1. 获取元素
var p = document.querySelector("p");
// 修改 p 里面的内容 , 调用时间函数赋值到 p
// 打开页面后直接显示时间,不用添加点击事件
p.innerText = getDate();

element . innerHTML

div.innerHTML = "内容";

起始位置到终止位置的全部内容 , 包括 html 标签 , 同时保留空格和换行 (保留格式) W3C 标准

innerText 和 innerHTML 区别

这两个属性是可读写的 , 可以获取元素里面的内容

console.log(p.innerText); // 我是文字 123 不保留格式不识别html 标签
console.log(p.innerHTML); // 我是文字 123

获取内容时的区别：

innerText 会去除空格和换行 (非标准的 )，而 innerHTML 会保留空格和换行 ( W3C 标准的)

设置内容时的区别：

innerText 不会识别 html，而 innerHTML 会识别

常用元素的属性操作

innerText innerHTML 改变元素内容
src href
id alt title

获取属性的值

元素对象.属性名

设置属性的值

元素对象.属性名 = 值

  <body>
    <button id="ldh">刘德华</button>
    <button id="zxy">张学友</button>
    <img src="./images/ldh.jpg" alt="" title="刘德华" />
    <script>
      // 1. 获取元素
      var zxy = document.getElementById("zxy");
      var ldh = document.getElementById("ldh");
      var img = document.querySelector("img");
      // 2. 绑定事件 3. 处理程序
      zxy.onclick = function () {
   
        // 修改图片地址属性
        img.src = "./images/zxy.jpg";
        // 修改图片提示文本属性
        img.title = "张学友";
      };
      ldh.onclick = function () {
   
        img.src = "./images/ldh.jpg";
        img.title = "刘德华";
      };
    </script>
  </body>

案例 - 分时问候并显示不同图片案例

案例分析

根据系统不同的时间来判断 , 所以需要用到内置对象
利用多分支语句来设置不同图片
需要一个图片 , 并且根据时间修改图片 , 就需要用到操作 src 属性
需要一个 div 元素 , 显示不同问候语 , 修改元素内容即可

  <body>
    <img src="./images/s.gif" alt="" />
    <div>上午好</div>
    <script>
      // 1. 获取元素
      var img = document.querySelector("img");
      var div = document.querySelector("div");
      // 2.日期内置对象 得到当前小时数
      var date = new Date();
      var h = date.getHours();
      // 3.判断小时数改变图片和文字信息
      if (h < 12) {
   
        img.src = "./images/s.gif";
        div.innerHTML = "上午好";
      } else if (h < 18) {
   
        img.src = "./images/x.gif";
        div.innerHTML = "下午好";
      } else {
   
        img.src = "./images/w.gif";
        div.innerHTML = "晚上好";
      }
    </script>
  </body>

表单元素的属性操作

利用 DOM 可以操作如下表单元素的属性 :

type , value , checked , selected , disabled

获取属性的值

元素对象.属性名

设置属性的值

// this 值向的是事件函数的调用者 btn

元素对象.属性名 = 值

表单元素中有一些属性如：disabled、checked、selected，元素对象的这些属性的值是布尔型。

  <body>
    <button>按钮</button>
    <input type="text" value="输入内容" />
    <script>
      // 1.获取元素
      var btn = document.querySelector("button");
      var input = document.querySelector("input");
      // 2. 绑定事件 3.事件处理程序
      btn.onclick = function () {
   
        // 表单里面的值是通过 value 开修改的
        input.value = "我被点击了";
        // 按钮点过一次后就禁用 谁禁用就给谁加
        // btn.disabled = true;
        this.disabled = true;
        // this 值向的是事件函数的调用者 btn
      };
    </script>
  </body>

案例 - 显示密码案例

案例分析

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

 <style>
      .box {
   
        position: relative;
        width: 400px;
        border-bottom: 1px solid #ccc;
        margin: 100px auto;
      }
      .box input {
   
        width: 370px;
        height: 30px;
        outline: none;
        border: 0;
      }
      .box img {
   
        position: absolute;
        top: 3px;
        right: 3px;
        width: 24px;
      }
    </style>
  </head>
  <body>
    <!-- 布局 先放一个 div 里面放input和label
      div 给一个下边框 , input 去掉边框和轮廓线
      label 里面放 眼睛图片 ,用定位移动位置 -->
    <div class="box">
      <label for="">
        <img src="./images/close.png" alt="" id="eye" />
      </label>
      <input type="password" name="" id="pwd" />
    </div>

    <script>
      // 1.获取元素
      var eye = document.getElementById("eye");
      var pwd = document.getElementById("pwd");
      // 2. 绑定事件 3.处理程序
      var flag = 0;
      eye.onclick = function () {
   
        if (flag == 0) {
   
          // 判断条件
          pwd.type = "text";
          eye.src = "./images/open.png";
          flag = 1; // 赋值
        } else {
   
          pwd.type = "password";
          eye.src = "./images/close.png";
          flag = 0; // 赋值
        }
      // flag = !flag; // true false
      };
    </script>
  </body>

样式属性操作

我们可以通过 JS 修改元素的大小、颜色、位置等样式。

常用方式

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

方式 1：通过操作 style 属性

元素对象.style.样式属性 = 值; 适用于修改样式少的

注意 :

JS 里面的样式采取驼峰命名法 , 如 fontSize backgroundColor
JS 修改 style 样式操作 , 产生的是行内样式 . css 权重比较高

  <body>
    <div></div>
    <script>
      // 1.获取元素
      var div = document.querySelector("div");
      // 2.注册事件 3 处理程序
      div.onclick = function () {
   
        //   div.style 属性名 采用驼峰命名法
        this.style.backgroundColor = "green";
        this.style.width = "300px"; // this 指向函数的调用者
      };
    </script>
  </body>

案例 - 淘宝二维码

案例分析

核心思路 : 利用样式的显示和影藏完成 , display : none 隐藏元素 diplay : black 显示元素
点击按钮 , 就让这个二维码盒子影藏起来即可

  <body>
    <div class="box">
      淘宝二维码
      <img src="./images/tao.png" alt="" />
      <i class="close-btn">×</i>
      <script>
        // 1.获取元素
        var btn = document.querySelector(".close-btn");
        var box = document.querySelector(".box");
        // 2.绑定事件 3.程序处理
        btn.onclick = function () {
   
          // 修改样式隐藏
          box.style.display = "none";
        };
      </script>
    </div>
  </body>

案例 - 循环精灵图

案例分析

首先精灵图的排列有规律
核心思路 : 利用 for 循环 , 修改精灵图的背景位置 backgroun-position
计算每个精灵图 y 轴的坐标
让循环里面的 i 索引号 * - 44 就是每个图的 y 坐标 , 精灵图坐标是负数

    <script>
      // 1. 获取元素 所有的小li
      var lis = document.querySelectorAll("li");
      console.log(lis);

      for (var i = 0; i < lis.length; i++) {
   
        // 让索引号 乘以 -44 就是每个li 的背景y坐标  index就是我们的y坐标
        var index = i * -44; // 修改每个 li 的坐标 注意字符串拼接
        lis[i].style.backgroundPosition = "0 " + index + "px";
      }
    </script>

获得焦点 onfocus

失去焦点 onblur

var text = document.querySelector("input");
text.onfocus = function () {
   
  console.log("得到焦点");
};
text.onblur = function () {
   
  console.log("失去焦点");
};

案例 - 显示隐藏文本框内容

案例分析

首先表单需要 2 个新事件 , 获得焦点 onfocus 和失去焦点 onblur
如果获得焦点 , 判断表单里面内容是否为默认文字 , 如果是默认文字 , 就清空表单内容 , 文字颜色变深
如果失去焦点 , 判断表单内容是否为空 , 如果为空 , 则表单内容改为默认文字 , 文字颜色变浅

  <body>
    <input type="text" value="手机" />
    <script>
      var text = document.querySelector("input");
      text.onfocus = function () {
   
        // 判断里面的内容是不是默认文字
        if (text.value === "手机") {
   
          text.value = ""; // 是默认文字就清空表单
        }
        // 获得焦点需要把文本框里面的文字颜色变黑
        text.style.color = "#333";
      };
      text.onblur = function () {
   
        // 判断表单内容是否为空
        if (text.value === "") {
   
          text.value = "手机"; // 为空内容就改为默认文字
        }
        // 失去焦点要把文本框里面的颜色变浅色
        text.style.color = "#999";
      };
    </script>
  </body>

方式 2：通过操作 className 属性

元素对象.className = 值; 适用于修改样式较多的

因为 class 是关键字，所以使用 className。

className 会直接更改元素的类名 , 会覆盖原先的类名

this.className = "change"; 需要在 css 中写一个 class 类名样式

this.className = "first change"; 如果想要保留原来的类名 , 可以采用在第一个类名后面追加你要的类名 <div class="first change">文本</div>

    <style>
      div {
   
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        background-color: pink;
      }
      .change {
   
        background-color: green;
        color: #fff;
        font-size: 25px;
        margin-top: 100px;
      }
    </style>
  </head>
  <body>
    <div>文本</div>
    <script>
      // 1.获取元素
      var div = document.querySelector("div");
      // 2.绑定事件 3.事件处理程序
      div.onclick = function () {
   
        // 在 css中写一个class 样式
        // 修改元素的 className 更改元素样式 适用于条件较多的情况下
        this.className = "change";
        // 如果想要保留原来的类名 , 可以采用在第一个类名后面追加你要的类名
        this.className = "first change";
      };
    </script>
  </body>

案例 - 密码长度验证信息

案例分析

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

div {
   
        width: 600px;
        margin: 100px auto;
      }
      .message {
   
        display: inline-block;
        font-size: 12px;
        color: #999;
        background: url(./images/mess.png) no-repeat left center;
        padding-left: 20px;
      }
      /* 错误提示的信息 */
      .wrong {
   
        color: red;
        background-image: url(./images/wrong.png);
      }
      /* 正确提示的信息 */
      .right {
   
        color: green;
        background-image: url(./images/right.png);
      }
    </style>
  </head>
  <body>
    <div class="register">
      <input type="password" class="ipt" />
      <p class="message">请输入6~16位密码</p>
    </div>
    <script>
      // 1.获取元素
      var ipt = document.querySelector(".ipt");
      var message = document.querySelector(".message");
      // 2.绑定事件 onblur 3.处理程序
      ipt.onblur = function () {
   
        // 根据表单里面值的长度 ipt.value.
        // if (this.value.length <= 16 && this.value.length >= 6)
        if (this.value.length < 6 || this.value.length > 16) {
   
          console.log("错误");
          // 用className 更改样式
          // 不满足条件时
          message.className = "message wrong";
          message.innerHTML = "您输入的位数不对要求6~16位";
        } else {
   
          // 满足条件时
          message.className = "message right";
          message.innerHTML = "您输入的正确";
        }
      };
    </script>
  </body>

案例 - 开关灯

知识点

通过操作 style 属性设置 body 的背景颜色
通过 innerHML 设置 div 内的文字
小技巧 : flag = 0 开灯 , flag = 1 光灯.

<body>
    <button>关灯</button>
    <script>
      // 1.获取元素
      var btn = document.querySelector("button");
      //   var bodyEle = document.body;
      // 2.绑定事件 3.事件处理程序
      var flag = 0; // flag 要写在函数体外面
      btn.onclick = function () {
   
        if (flag == 0) {
   
          // bodyEle.style.backgroundColor = "black";
          document.body.style.backgroundColor = "black";
          this.innerHTML = "开灯";
          flag = 1;
        } else {
   
          // bodyEle.style.backgroundColor = "#fff";
          document.body.style.backgroundColor = "#fff";
          this.innerHTML = "关灯";
          flag = 0;
        }
      };
    </script>
  </body>

排他细想 ★

首先排除其他人 , 然后才设置自己的样式 , 这种排除其他人的思想我们称为排他思想

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：

所有元素全部清除样式（干掉其他人）
给当前元素设置样式（留下我自己）
注意顺序不能颠倒，首先干掉其他人，再设置自己

案例 - 按钮排他思想 ★

核心思想 : 先用 for 循环把所有按钮背景颜色去掉 , 在设置让当前元素背景颜色

内循环干掉他人 ,外循环留下自己

知识点

排他思想 , 双重 for 循环
通过操作 style 属性修改样式

注意 : 双重 for 循环里面两个 i , 它们在不同函数里面 , 在不同作用域中

外循环不能用 btns[i] 涉及闭包

<script>
      // 1.获取元素
      var btns = document.getElementsByTagName("button");
      // btns 得到的是伪数组 ,里面的每一个元素 btns[i]
      // 用 for 循环给每个数组绑定事件
      for (var i = 0; i < btns.length; i++) {
   
        btns[i].onclick = function () {
   
          // (1) 先把所有的按钮背景颜色去掉 ,干掉所有人
          for (var i = 0; i < btns.length; i++) {
   
            btns[i].style.backgroundColor = "";
          }
          // (2) 然后才让当前元素的元素背景颜色改为绿色 留下自己
          this.style.backgroundColor = "green";
            // 不能用btns[i] 涉及闭包
        };
      }
      //内循环干掉他人 ,外循环留下自己
    </script>

案例 - 百度换肤

① 这个案例练习的是给一组元素注册事件
② 给 4 个小图片利用循环注册点击事件
③ 当我们点击了这个图片，让我们页面背景改为当前的图片
④ 核心算法：把当前图片的 src 路径取过来，给 body 做为背景即可

知识点

点击后用 for 循环给 body 用 style 设置背景图片位置 url
把单前点击图片的位置赋值到 body 里面注意字符串拼接

      // 1. 获取元素 获取百度下面的img
      var imgs = document.querySelector(".baidu").querySelectorAll("img");
      // 2.循环绑定事件
      for (var i = 0; i < imgs.length; i++) {
   
        imgs[i].onclick = function () {
   
          // 点击图片 ,把当前图片的 src 地址给 body
          // 当前图片地址 this.src 用字符串拼接
          document.body.style.backgroundImage = "url(" + this.src + ")";
          document.body.style.backgroundImage=`url(${
     this.src})`
        };
      }
    </script>

案例 - 表格隔行变色 ★

案例分析

① 用到新的鼠标事件鼠标经过 onmouseover 鼠标离开 onmouseout
② 核心思路：鼠标经过 tr 行，当前的行变背景颜色，鼠标离开去掉当前的背景颜色
③ 注意：第一行（thead 里面的行）不需要变换颜色，因此我们获取的是 tbody 里面的行

知识点

用循环给行绑定鼠标经过和离开事件 ,
鼠标经过和离开给当前行通过 className 属性添加一个样式

    <script>
      // 1.获取元素 获取的是 tbody 里面所有的行
      var trs = document.querySelector("tbody").querySelectorAll("tr");
      console.log(trs);
      // 2.利用循环绑定注册事件
      for (var i = 0; i < trs.length; i++) {
   
        // 3.鼠标经过 onmouseover
        trs[i].onmouseover = function () {
   
          this.className = "bg";
        };
        // 4.鼠标离开 onmouseout
        trs[i].onmouseout = function () {
   
          this.className = "";
        };
      }
    </script>

案例 - 表单全选取消全选案例 ★

业务需求：

点击上面全选复选框，下面所有的复选框都选中（全选）
再次点击全选复选框，下面所有的复选框都不中选（取消全选）
如果下面复选框全部选中，上面全选按钮就自动选中
如果下面复选框有一个没有选中，上面全选按钮就不选中
所有复选框一开始默认都没选中状态

方法一

案例分析

需要一个变量 count , 存储的是当前已勾选的下方小复选框转态的个数
判断: count == j_tbs.length 将全选框勾选上 ; 否则 , 将全选框设置为未勾选的转态

var j_cbAll = document.querySelector("#j_cbAll");
var j_tbs = document.querySelectorAll("#j_tb input");
var count = 0;
j_cbAll.onclick = function () {
   
  for (var i = 0; i < j_tbs.length; i++) {
   
    j_tbs[i].checked = this.checked;
  }
  // 全选框点击完, count 重新计数
  if (this.checked) {
   
    count = j_tbs.length;
  } else {
   
    count = 0;
  }
};

for (var i = 0; i < j_tbs.length; i++) {
   
  j_tbs[i].onclick = function () {
   
    if (this.checked) {
   
      count++;
    } else {
   
      count--;
    }
    if (count == j_tbs.length) {
   
      j_cbAll.checked = true;
    } else {
   
      j_cbAll.checked = false;
    }
  };
}

方法二

// 1. 全选和取消全选做法：  让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
// 获取元素
var j_cbAll = document.querySelector("#j_cbAll");
var j_tbs = document.querySelectorAll("#j_tb input");

j_cbAll.onclick = function () {
   
  for (var i = 0; i < j_tbs.length; i++) {
   
    j_tbs[i].checked = this.checked;
  }
};
// 点击下方小复选框 , 达到某一条件后 , 将全选框设置成勾选转态 , 否则设置未勾选
for (var i = 0; i < j_tbs.length; i++) {
   
  j_tbs[i].onclick = function () {
   
    // 遍历小复选框 但凡发现有一个小复选框未勾选 , 立马可以得出结论,全选框一定是未勾选转态
    // 标识这全选框的勾选转态, 默认是已勾选
    var flag = true;
    for (var i = 0; i < j_tbs.length; i++) {
   
      if (j_tbs[i].checked == false) {
   
        flag = false;
        break; // 优化 检测到false 就不继续检测
      }
    }
    // 当遍历已结束,还没有发现有一个小复选框是未勾选时,说明小复选框已全部被勾选
    j_cbAll.checked = flag;
  };
}

案例分析

① 全选和取消全选做法：让下面所有复选框的 checked 属性（选中状态）跟随全选按钮即可
② 下面复选框需要全部选中，上面全选才能选中做法：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的，上面全选就不选中。
③ 可以设置一个变量，来控制全选是否选中

知识点

给上面的复选框绑定点击事件 , 处理程序是用 for 循环遍历下面的复选框 , 把上面按钮的选中状态的值赋值给下面的复选框 , 起到同步效果 考核点 : for 循环和表单属性 checked
用双重 for 循环来控制上面复选框的选中状态 , 内循环判断下面所有复选框是否全部选中 , 外循环控制上面复选框的值为 true 还是 false . 考核点 : 双重 for 循环和表单属性 checked
小技巧 : flag = true 全选 ; flag = false 不选 ;

      全选和取消全选做法
      // 1. 全选和取消全选做法：  让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
      // 获取元素
      var j_cbAll = document.getElementById("j_cbAll"); // 全选按钮
      var j_tbs = document.getElementById("j_tb").getElementsByTagName("input"); // 下面所有的复选框
      // 绑定事件
      j_cbAll.onclick = function ()
        // console.log(j_cbAll.checked); // 打印上面复选框转态
        // this.checked 它可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中
        // 用for 循环进行遍历 下面的复选框
        for (var i = 0; i < j_tbs.length; i++) {
   
          // 点击后要把当前复选框的默认选中转态的值传给下面的复选框 (同步)
          j_tbs[i].checked = this.checked;
        }
      };


      下面复选框需要全部选中， 上面全选才能选中做法：
      // 2. 下面复选框需要全部选中， 上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的，上面全选就不选中。
      for (var i = 0; i < j_tbs.length; i++) {
   
        j_tbs[i].onclick = function () {
   
          // flag 控制全选按钮是否被选中
          var flag = true;
          // 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
          for (var i = 0; i < j_tbs.length; i++) {
   
            if (!j_tbs[i].checked) {
   
              // 判断条件 如果有四个中有一未选中
              flag = false; // j_cbAll 默认选中转态就为false
              break; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了
            }
          }
          j_cbAll.checked = flag;
        };
      }

自定义属性的操作

获取属性值

element.属性获取属性值。 console.log(div.id);
element.getAttribute(‘属性’); console.log(div.getAttribute("index"));

区别：
element.属性获取内置属性值（元素本身自带的属性）img.src
element.getAttribute(‘属性’); 主要获得自定义的属性 （标准）我们程序员自定义的属性

设置属性值

element.属性 = ‘值’ 设置内置属性值。

div.id = "test";
div.className = "navs"; // 写的className class 关键字

element.setAttribute(‘属性’, ‘值’);

div.setAttribute("index", 2);
div.setAttribute("class", "footer"); // class比较特殊 就是写的class

区别：
element.属性设置内置属性值
element.setAttribute(‘属性’); 主要设置自定义的属性 （标准）, 还可以修改内置属性

移除属性

element.removeAttribute(‘属性’);

div.removeAttribute("index");

案例 - tab 栏切换（重点案例）

案例分析

① Tab 栏切换有 2 个大的模块
② 上面的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想）修改类名的方式
③ 下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。
④ 规律：下面的模块显示内容和上面的选项卡一一对应，相匹配。
⑤ 核心思路：给上面的 tab_list 里面的所有小 li 添加自定义属性，属性值从 0 开始编号。
⑥ 当我们点击 tab_list 里面的某个小 li，让 tab_con 里面对应序号的内容显示，其余隐藏（排他思想）

知识点

用外 for 循环给每个 li 设置自定义属性索引 , lis[i].setAttribute("index", i); , 给每个 li 绑定点击事件 , 内 for 循环把每个 li lis[i].className = ""; 属性设置为空清除 , 外循环给单前点击的 li 添加 this.className = "current"; 属性 (排他思想)
用变量把当前点击的索引保存下来 var index = this.getAttribute("index");
用内循环把下面所有盒子的样式设置为隐藏 items[i].style.display = "none";
把当前 li 索引对应的盒子样式设置为显示 items[index].style.display = "block"; (排他思想)

    <script>
      // 获取元素
      var lis = document.querySelectorAll("li");
      var items = document.querySelectorAll(".item");
      // items 的返回值是一个数组 , 它的索引号正好和 li 的索引号数量相等
      // 1. 上面 tab 栏
      for (var i = 0; i < lis.length; i++) {
   
        // for 循环绑定点击事件
        lis[i].setAttribute("index", i); // 用for 循环动态添加自定义属性
        //  1.上面的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式;
        lis[i].onclick = function () {
   
          for (var i = 0; i < lis.length; i++) {
   
            lis[i].className = ""; // 干掉所有人 清除所有li class 这个类名
          }
          // var currentLi=document.querySelector(".current")
          // currentLi.className=""
          this.className = "current"; // 留下自己

          // 2.下面的显示内容模块
          var index = this.getAttribute("index"); // 获取到当前 li 的自定义索引
          // 所有的 items 设置隐藏
          for (

最低0.47元/天解锁文章

人俗� 话不多

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
04-WebApl

Web Apis 和 JS基础关联性JS 的组成API 和 Web api MDN 详细 API : https://developer.mozilla.org/zh-CN/docs/Web/APIAPI 是为我们程序提供的一个接口 , 帮助我们实现某种功能Web API 主要针对于浏览器提供的接口 , 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM ) . 主要针对于浏览器做交互效果Web API 一般都有输入和输出 ( 函数的传参和返回值...
复制链接

扫一扫