admin管理员组文章数量:1587994
<img src="https://longfei-01.oss-cn-qingdao.aliyuncs/ImageWebApls/img/202203061831525.png" alt="image-20211124092401634" style="zoom:50%;" />
Web Apis 和 JS 基础关联性
JS 的组成
API 和 Web api
MDN 详细 API : https://developer.mozilla/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 .boxdocument.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 >文本</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 循环把每个 lilis[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 (var i <
本文标签: WebApl
版权声明:本文标题:04-WebApl 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1728025381a1142618.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论