简单类型与复杂类型
简单类型又叫做基本数据类型或者值类型,复杂类型又叫做引用类型
值类型:简单数据类型/基本数据类型,在存储时变量中存储的是值本身,因此叫做值类型
string、number、Boolean、undefined、null
引用类型:复杂数据类型,在存储变量中存储的仅仅是地址(引用),因此叫做引用数据类型
通过new关键字创建的对象(系统对象、自定义对象),如Object、Array、Date等
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 简单数据类型 null 返回的是一个空的对象 object
var timer = null;
console.log(typeof timer); // object
// 如果有个变量我们以后打算存储为对象,暂时没想好放啥,这个时候就给null
// 1.简单数据类型 是存放在栈里面 里面直接开辟一个空间存放的是值
// 2.复杂数据类型 首先在栈里面存放地址 十六进制表示 然后这个地址指向堆里面的数据
</script>
</head>
<body>
</body>
</html>
栈和堆
栈堆空间分配区别:
-
栈(操作系统):由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈;
简单数据类型存放到栈里面
-
堆(操作系统):存储复杂类型(对象),一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收
复杂数据类型存放到堆里面
注意:JavaScript中没有堆栈的概念,通过堆栈的方式,可以让大家更容易理解代码的一些执行方式,便于将来学习其他语言
简单类型传参
函数的形参也可以看做是一个变量,当我们把一个值类型变量作为参数传给函数的形参时,其实是把变量在栈空间里的值复制了一份给形参,那么在方法内部对形参做任何修改,都不会影响到外部变量
function fn(a) {
a++;
console.log(a);
}
var x = 10;
fn(x);
console.log(x);
复杂类型传参
函数的形参也可以看做时一个变量,当我们把引用类型变量传给形参时,其实是把变量在栈空间里保存的堆地址复制给形参,形参和实参其实保存的是同一个地址,所以操作的是同一个对象
function Person(name) {
this.name = name;
}
function f1(x) { // x = p
console.log(x.name);
x.name = '张学友';
console.log(x.name);
}
var p = new Person('刘德华');
console.log(p.name);
f1(p);
console.log(p.name);
API 和 Web API
API(Application Programming Interface,应用程序编程接口),是给程序员提供的一种工具,以便能更轻松的实现想要完成的功能。
web API是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
MDN详细API:https://developer.mozilla.org/zh-CN/docs/Web/API
DOM
简介
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口
DOM树
文档:一个页面就是一个文档,DOM中使用document表示
元素:页面中的所有标签都是元素,DOM中使用element表示
节点:网页中的所有内容都是节点(标签、属性、文本、注释等),DOM中使用node表示
DOM把以上内容都看做是对象
获取元素
获取页面中的元素可以使用以下几种方式
- 根据ID获取
- 根据标签名获取
- 通过HTML5新增的方法获取
- 特殊元素获取
根据ID获取
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="time">2019-9-9</div>
<script type="text/javascript">
// 1.因为我们文档页面从上往下加载,所以先得有标签 所以我们script写到标签的下面
// 2.get 获得 element 元素 by 通过
// 3.参数id是大小写敏感的字符串
// 4.返回的是一个元素对象
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer); // object
// 5.console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
console.dir(timer);
</script>
</body>
</html>
根据标签名获取
根据getElementsByTagName()方法可以返回带有指定签名的对象的集合
document.getElementsByTagName('标签名');
注意:
- 因为得到的是一个对象的集合,所以我们想要操作里面的元素就需要遍历
- 得到元素对象是动态的
还可以获取某个元素(父元素)内部所有指定标签名的子元素
element.getElementsByTagName('标签名');
注意:父元素必须是单个对象(必须指明是哪一个元素对象),获取的时候不包括父元素自己
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>最带琴女36E</li>
<li>最带琴女37E</li>
<li>最带琴女38E</li>
<li>最带琴女39E</li>
<li>最带琴女40E</li>
</ul>
<ol>
<li>大大大</li>
<li>大大大</li>
<li>大大大</li>
<li>大大大</li>
<li>大大大</li>
</ol>
<script type="text/javascript">
// 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
// 2.我们想要依次打印里面的元素对象,可以采取遍历的方式
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
// 3.如果页面中只有一个li 返回的还是伪数组的形式
// 4.如果页面中没有这个元素 返回的是空的伪数组的形式
// 5.element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素
var ol = document.getElementsByTagName('ol'); // [ol]
console.log(ol[0].getElementsByTagName('li'));
</script>
</body>
</html>
通过HTML5新增的方法获取
document.getElementsByClassName('类名'); // 根据类名返回元素对象集合
document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象
document.querySelectorAll('选择器'); // 根据指定选择器返回
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="box">
<ul>
<li id="nav">首页</li>
<li>产品</li>
</ul>
</div>
<script type="text/javascript">
// 1.getElementsByClassName 根据类名获得某些元素集合
var boxs = document.getElementsByClassName('box');
console.log(boxs);
// 2.querySelector 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 .box #nav
var firstBox = document.querySelector('.box');
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);
</script>
</body>
</html>
获取特殊元素
获取body元素
document.body // 返回body元素对象
获取HTML元素
document.documentElement // 返回html元素对象
事件基础
事件三要素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="btn">阿波</button>
<script type="text/javascript">
// 点击一个按钮,弹出对话框
// 1.事件是由三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素
// 事件源 事件被触发的对象 谁 在这个案例里是按钮
var btn = document.getElementById('btn');
// 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
// 事件处理程序 通过一个函数赋值的方式 完成
btn.onclick = function() {
alert('帅!');
}
</script>
</body>
</html>
执行事件的步骤
- 获取事件源
- 注册事件(绑定事件)
- 添加事件处理程序(采取函数赋值形式)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<div>123</div>
<script type="text/javascript">
// 执行事件步骤
// 点击div 控制台输出 我被选中了
// 1.获取事件源
var div = document.querySelector('div');
// 2.绑定事件 注册事件1
// div.onclick
// 3.添加事件处理程序
div.onclick = function() {
console.log('我被选中了');
}
</script>
</head>
<body>
</body>
</html>
常见的鼠标事件
鼠标事件 | 触发条件 |
---|---|
onclick | 鼠标点击左键触发 |
onmouseover | 鼠标经过触发 |
onmouseout | 鼠标离开触发 |
onfocus | 获得鼠标焦点触发 |
onblur | 失去鼠标焦点触发 |
onmousemove | 鼠标移动触发 |
onmouseup | 鼠标弹起触发 |
onmousedown | 鼠标按下触发 |
操作元素
JavaScript的DOM操作可以改变网页的内容、结构、样式,我们可以利用DOM操作元素来改变元素里面的内容、属性等。
改变元素内容
element.innerText
从起始位置到终止位置的内容,但它去除html标签,同时空格和换行也会去掉
element.innerHTML
起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div,
p {
width: 300px;
height: 30px;
line-height: 30px;
color: #fff;
background-color: pink;
}
</style>
</head>
<body>
<button>显示当前系统时间</button>
<div>某个时间</div>
<p>1123</p>
<script type="text/javascript">
// 当我们点击了按钮,div里面的文字会发生变化
// 1.获取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
// 2.注册事件
btn.onclick = function() {
// div.innerText = '2077-7-7';
div.innerText = getDate();
}
function getDate() {
var date = new Date();
// 我们写一个2021年 7月 3日 星期六
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var day = date.getDay();
return '今天是' + year + '年' + month + '月' + dates + '日' + arr[day];
}
// 我们元素可以不用添加事件
var p = document.querySelector('p');
p.innerText = getDate(); // 2021年 7月 3日 星期六
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div></div>
<p>
我是文字
<span>123</span>
</p>
<script type="text/javascript">
// innerText 和 innerHTML的区别
// 1.innerText 不识别html标签 非标准
var div = document.querySelector('div');
// div.innerText = '<strong>今天是:</strong> 2019';
// 2.innerHTML 识别html标签 W3C标准
div.innerHTML = '<strong>今天是:</strong> 2019';
// 这两个属性是可续写的 可以获取元素里面的内容
var p = document.querySelector('p');
console.log(p.innerText);
console.log(p.innerHTML);
</script>
</body>
</html>
常用元素的属性操作
1.innerText\innerHTML 改变元素内容
2.src、href
3.id、alt、title
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img {
width: 300px;
}
</style>
</head>
<body>
<button id="sona">娑娜</button>
<button id="gewen">格温</button>
<br>
<img src="../img/娑娜.jpg" >
<script type="text/javascript">
// 修改元素属性 src
// 1.获取元素
var sona = document.getElementById('sona');
var gewen = document.getElementById('gewen');
var img = document.querySelector('img');
// 2.注册事件 处理程序
gewen.onclick = function() {
img.src = '../img/格温.jpg';
img.title = '灵罗娃娃'
}
sona.onclick = function() {
img.src = '../img/娑娜.jpg';
img.title = '琴瑟仙女'
}
</script>
</body>
</html>
案例
分时显示不同图片,显示不同的问候语
根据不同时间,页面显示不同图片,同时显示不同的问候语
分析:
- 根据系统不同时间来判断,所以需要用到日期内置对象
- 利用多分支语句来设置不同的图片
- 需要一个图片,并且根据时间修改图片,就需要用到操作元素src属性
- 需要一个div元素,显示不同问候语,修改元素内容即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img {
width: 512px;
}
</style>
</head>
<body>
<img src="../img/1.jpg" >
<div>上午好</div>
<script type="text/javascript">
// 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 = '../img/1.jpg';
div.innerHTML = '亲,上午好';
} else if (h < 18) {
img.src = '../img/3.jpg';
div.innerHTML = '亲,下午好';
} else {
img.src = '../img/2.jpg';
div.innerHTML = '亲,晚上好';
}
</script>
</body>
</html>
表单元素的属性操作
利用DOM可以操作如下表单元素的属性
type、value、checked、selected、disabled
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>按钮</button>
<input type="text" value="输入内容">
<script>
// 1.获取元素
var btn = document.querySelector('button');
var input = document.querySelector('input');
// 2.注册事件 处理程序
btn.onclick = function() {
// input.innerHTML = '点击了'; 这个是 普通盒子 比如 div 标签里面的内容
// 表单里面的值 文字内容 是通过value来修改的
input.value = '被点击了';
// 如果想要某个表单被禁用 不能再点击 disabled 我们想要这个按钮 button禁用
// btn.disabled = true
this.disabled = true;
// this指向的是事件函数的调用者 btn
}
</script>
</body>
</html>
案例
仿京东显示密码,点击按钮将密码框切换为文本框,并且可以查看密码明文
分析:
- 核心思路:点击眼睛按钮,把密码框类型改为文本框就可以看见里面的密码
- 一个按钮两个状态,点击一次,切换为文本框,继续点击一次切换为密码框
- 算法:利用一个flag变量,来判断flag的值,如果是1就切换为文本框,flag设置为0,如果是0就切换为密码框,flag设置为1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box {
position: relative;
width: 400px;
border: 1px solid #ccc;
margin: 100px auto;
}
.box input {
width: 370px;
height: 30px;
border: 0;
outline: none;
}
.box img {
position: absolute;
top: 2px;
right: 2px;
width: 24px;
}
</style>
</head>
<body>
<div class="box">
<label for="">
<img src="../img/眼1.jpeg" id="eye" >
</label>
<input type="password" id="pwd">
</div>
<script type="text/javascript">
// 1.获取元素
var eye = document.getElementById('eye');
var pwd = document.getElementById('pwd');
// 2.注册事件 处理程序
var flag = 0;
eye.onclick = function() {
// 点击一次之后 flag一定要变化
if(flag == 0) {
pwd.type = 'text';
eye.src = '../img/眼1.jpeg';
flag = 1; // 赋值操作
} else {
pwd.type = 'password';
eye.src = '../img/眼2.jpg';
flag = 0;
}
}
</script>
</body>
</html>
样式属性操作
可以通过JS修改元素的大小、颜色、位置等样式
1.element.style 行内样式操作
2.element.className 类名样式操作
注意:
- JS里面的样式采取驼峰命名法 比如 forntSize、backgroundColor
- JS修改style样式操作,产生的是行内样式,css权重比较高
- 如果样式修改较多,可以采取操作类名方式更改元素样式
- class因为是个保留字,因此使用className来操作元素类名属性
- className会直接更改元素的类名,会覆盖原先的类名
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
// 1.获取元素
var div = document.querySelector('div');
// 2.注册事件 处理程序
div.onclick = function() {
// div.style里面的属性 采取驼峰命名法
this.style.backgroundColor = 'purple';
this.style.width = '250px';
}
</script>
</body>
</html>
案例
仿淘宝关闭二维码案例
- 核心思路:利用样式的显示和隐藏完成,display:none隐藏元素display:block显示元素
- 点击按钮,就让这个二维码盒子隐藏起来即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box {
position: relative;
width: 74px;
height: 88px;
border: 1px solid #ccc;
margin: 100px auto;
font-size: 12px;
text-align: center;
color: #f40;
}
.box img {
width: 60px;
margin-top: 5px;
}
.close-btn {
position: absolute;
top: -1px;
left: -16px;
width: 14px;
height: 14px;
border: 1px solid #ccc;
line-height: 14px;
font-family: Arial, Helvetica, sans-serif;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
淘宝二维码
<img src="../img/2维码.jpg" >
<i class="close-btn">x</i>
</div>
<script type="text/javascript">
// 1.获取元素
var btn = document.querySelector('.close-btn');
var box = document.querySelector('.box');
// 2.注册事件 程序处理
btn.onclick = function() {
box.style.display = 'none';
}
</script>
</body>
</html>
案例2
显示隐藏文本框内容
当鼠标点击文本框时,里面的默认文字隐藏,当鼠标离开文本框时,里面的文字显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
input {
color: #999;
}
</style>
</head>
<body>
<input type="text" value="手机">
<script type="text/javascript">
// 1.获取资源
var text = document.querySelector('input');
// 2.注册事件 获得焦点事件 onfocus
text.onfocus = function() {
// console.log('得到焦点');
if(this.value === '手机') {
this.value = '';
}
// 获得焦点需要把文本框里面的文字颜色变黑
this.style.color = '#333';
}
// 3.注册事件 失去焦点事件 onblur
text.onblur = function() {
// console.log('失去焦点');
if(this.value === '') {
this.value = '手机';
}
// 失去焦点需要把文本框里面的文字颜色变浅色
this.style.color = '#999';
}
</script>
</body>
</html>
使用className修改样式属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.change {
background-color: purple;
color: #fff;
font-size: 25px;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="first">文本</div>
<script type="text/javascript">
// 1.使用element.style获得修改元素样式 如果样式比较少 或者 功能简单 的情况下使用
var test = document.querySelector('div');
test.onclick = function() {
// this.style.backgroundColor = 'pueple';
// this.style.color = '#fff';
// this.style.fontSize = '25px';
// this.style.marginTop = '100px';
// 让我们当前元素的类名改为了change
// 2.我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
// 3.如果想要保留原先的类名,我们可以这么做 多类名选择器
// this.className = 'change';
this.className = 'first change';
}
</script>
</body>
</html>
案例
密码框格式提示错误信息:用户如果离开密码框,里面输入个数不是6~16,则提示错误信息,否则提示输入正确信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div {
width: 600px;
margin: 100px auto;
}
.message {
display: inline-block;
font-size: 12px;
color: #999;
background:url(../img/眼1.jpeg) no-repeat left center;
padding-left: 20px;
}
.wrong {
color: red;
background-image: url(../img/眼2.jpg);
}
.right {
color: green;
background-image: url(../img/眼1.jpeg);
}
</style>
</head>
<body>
<div class="register">
<input type="password" class="ipt">
<p class="message">请输入6~16位密码</p>
</div>
<script type="text/javascript">
// 1.获取元素
var ipt = document.querySelector('.ipt');
var message = document.querySelector('.message');
// 2.注册事件
ipt.onblur = function() {
// 根据表单里面值的长度 ipt.value.length
if (this.value.length < 6 || this.value.length > 16) {
// console.log('错误');
message.className = 'message wrong';
message.innerHTML = '输入错误';
} else {
message.className = 'message right';
message.innerHTML = '输入正确';
}
}
</script>
</body>
</html>
排他算法
如果有同一组元素,我们想要某一个元素实现某种样式,需要用到循环的排他算法
- 所有元素全部清除样式(干掉其他人)
- 给当前元素设置样式(留下我自己)
- 注意顺序不能颠倒,首先干掉其他人,再设置自己
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script type="text/javascript">
// 1.获取所有按钮元素
var btns = document.getElementsByTagName('button');
// btns得到的是伪数组 里面的每一个元素 btns[i]
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
// 先把所有的按钮背景颜色去掉
for (var i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
// 然后才让当前的元素背景颜色位pink
this.style.backgroundColor = 'pink';
}
}
</script>
</body>
</html>
百度换肤效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background: url(../img/01.jpg) no-repeat center top;
}
li {
list-style: none;
}
.baidu {
overflow: hidden;
margin: 100px auto;
background-color: #fff;
width: 410px;
padding-top: 3px;
}
.baidu li {
float: left;
margin: 0 1px;
cursor: pointer;
}
.baidu img {
width: 100px;
}
</style>
</head>
<body>
<ul class="baidu">
<li><img src="../img/01.jpg" ></li>
<li><img src="../img/002.jpg" ></li>
<li><img src="../img/003.png" ></li>
<li><img src="../img/004.jpg" ></li>
</ul>
<script type="text/javascript">
// 1.获取元素
var imgs = document.querySelector('.baidu').querySelectorAll('img');
// console.log(imgs);
// 2.循环注册事件
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function() {
// this.src 就是点击图片的路径 images/01.jpg
// console.log(this.src);
// 把这个路径this.src给body就可以了
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}
</script>
</body>
</html>
全选反选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.wrap {
margin: 200px 600px;
}
thead th {
color: #fff;
background-color: deepskyblue;
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPhone13</td>
<td>10000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
// 1.全选和取消全选做法:让下面所有复选框的checked属性(选中状态)跟随全选按钮即可
// 获取元素
var j_cbAll = document.getElementById('j_cbAll');// 全选按钮
var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
// 注册事件
j_cbAll.onclick = function() {
// this.checked 得到当前复选框的选中状态如果是true 就是选中,如果是false就是未选中
console.log(this.checked);
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;
break;// 退出循环 这样可以提高执行效率 因为只要有一个没有选中,剩下的就无需循环判断
}
}
j_cbAll.checked = flag;
}
}
</script>
</body>
</html>
自定义属性的操作
获取属性值
element.属性 获取属性值
element.getAttribute(‘属性’);
区别
element.属性 获取内置属性值(元素本身自带的属性)
element.getAttribute(‘属性’); 主要获得自定义的属性(标准)我们程序员自定义的属性
设置属性值
element.属性 = ‘值’ 设置内置属性值
element.setAttribute(‘属性’,‘值’);
区别
element.属性 设置内置属性值
element.setAttribute(‘属性’); 主要设置自定义的属性(标准)
移除属性
element.removeAttribute(‘属性’);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="demo" index="1" class="nav"></div>
<script type="text/javascript">
var div = document.querySelector('div');
// 1.获取元素的属性值
// (1) element.属性
console.log(div.id);
// (2) element.getAttribute('属性') get得到获取 attribute属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
console.log(div.getAttribute('id'));
console.log(div.getAttribute('index'));
// 2.设置元素属性值
// (1) element.属性 = '值'
div.id = 'test';
div.className = 'navs';
// (2) element.setAttribute('属性','值'); 主要针对于自定义属性
div.setAttribute('index',2);
div.setAttribute('class','footer'); // class 特殊 这里面写的就是class不是className
// 3.移除属性 removeAttribute(属性)
div.removeAttribute('index');
</script>
</body>
</html>
tab选项卡案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入CSS -->
<link rel="stylesheet" type="text/css" href="imgs/index.css"/>
<!-- 让所有的a标签的默认跳转方式都为blank(跳转新窗口打开) -->
</head>
<body>
<!-- 最外边的盒子 -->
<div class="tab_contents">
<ul class="tab_nav">
<li class="tabNav_active">
<img src="imgs/sona1.jpg" >
<h2>琴瑟仙女</h2>
</li>
<li>
<img src="imgs/gw1.jpg" >
<h2>灵罗娃娃</h2>
</li>
<li>
<img src="imgs/ven1.jpg" >
<h2>暗夜猎手</h2>
</li>
<li>
<img src="imgs/kat1.jpg" >
<h2>不祥之刃</h2>
</li>
<li>
<img src="imgs/niko1.jpg" >
<h2>万花通灵</h2>
</li>
</ul>
<ul class="tab_box">
<li class="tabBox_active">
<img src="imgs/sona2.jpg" >
<div>
<h2>娑娜</h2>
<p>
娑娜是一位弦乐演奏家,“叆华”的优美和弦与多变曲调就是她唯一的语言。
这种文雅的举止让她深得德玛西亚贵族的宠爱,不过有人猜测她迷人的旋律其实是在施放魔法——这在王国境内是如履薄冰。
在外人看来她一言不发,但娑娜最亲密的同伴却能读懂她。娑娜弹拨的和声不仅能够安抚受伤的盟友,而且还能打击掉以轻心的敌人。
</p>
<button>
<a href="https://yz.lol.qq.com/zh_CN/champion/sona/">
Look at all >
</a>
</button>
</div>
</li>
<li>
<img src="imgs/gw2.png" >
<div>
<h2>格温</h2>
<p>
格温是一个被魔法赋予了生命的玩偶,而她所挥使的正是当初创造了她自己的工具。
格温无比珍惜这份机缘,踏出的每一步都承载着曾经主人的爱意。格温拥有控制“圣霭”的能力。
这是一种来自远古的庇护性法术,她的剪刀、衣针和缝线都因圣霭而得到了庇佑。
即便有这么多新奇的事物等待着格温,她既感到兴奋,但又带着强烈的使命感,决心拯救在这个破碎世界里艰难挣扎的人们。
</p>
<button>
<a href="https://yz.lol.qq.com/zh_CN/champion/gwen/">
Look at all >
</a>
</button>
</div>
</li>
<li>
<img src="imgs/ven2.jpeg" >
<div>
<h2>薇恩</h2>
<p>
肖娜·薇恩是一位无情的德玛西亚怪物猎手。终其一生,她都在寻找杀害她全家的恶魔。
她的手臂上装着十字弩,心中燃烧着熊熊的复仇怒火,从暗影中射出圣银弩箭的风暴,
薇恩只有在杀死那些为黑暗魔法所控制的人和生物时,才能真正感到愉悦。
</p>
<button>
<a href="https://yz.lol.qq.com/zh_CN/champion/vayne/">
Look at all >
</a>
</button>
</div>
</li>
<li>
<img src="imgs/kat2.jpg" >
<div>
<h2>卡特琳娜</h2>
<p>
果断坚决、心狠手辣,卡特琳娜是诺克萨斯的顶尖刺客。
作为传奇将军杜·克卡奥的长女,她凭借出其不意的迅猛刺杀很快声名鹊起。
强烈的野心曾经驱使她挑战重兵把守的暗杀目标,甚至不惜冒险让友军暴露在危险中。
不过无论是怎样的任务,卡特琳娜都会毫不迟疑地在锯刃匕首的风暴中履行自己的使命。
</p>
<button>
<a href="https://yz.lol.qq.com/zh_CN/champion/katarina/">
Look at all >
</a>
</button>
</div>
</li>
<li>
<img src="imgs/niko2.png" >
<div>
<h2>妮蔻</h2>
<p>
妮蔻来自一个早已迷失的瓦斯塔亚部落。她可以借用别人的外表来伪装自己,融入人群,
甚至通过影响别人的情绪状态,一瞬间就能化敌为友。没人知道妮蔻到底在哪儿——或者到底是谁,
但是想要为难她的人会立刻见识到她的本色,感受原始的精神魔法倾泻在自己身上的痛苦。
</p>
<button>
<a href="https://yz.lol.qq.com/zh_CN/champion/neeko/">
Look at all >
</a>
</button>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
/*
*
* 思路:
* 循环遍历导航条
* 点击导航条切换类名 进行 显示和隐藏
*
**/
var tabNavItem = document.querySelectorAll('.tab_nav>li');
var tabBoxItem = document.querySelectorAll('.tab_box>li');
var tabNavActive = document.querySelector('.tabNav_active');
var tabBoxActive = document.querySelector('.tabBox_active');
tabNavItem.forEach(function(item,index) {
item.onmouseenter = function() {
tabNavActive.className = '';
this.className = 'tabNav_active';
tabNavActive = this;
tabBoxActive.className = '';
tabBoxItem[index].className = 'tabBox_active';
tabBoxActive = tabBoxItem[index];
}
})
</script>
</body>
</html>
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
/*
vh就是当前屏幕可见高度的1%,也就是说
height:100vh == height:100%;
但是当元素没有内容时候,设置height:100%,该元素不会被撑开,此时高度为0,
但是设置height:100vh,该元素会被撑开屏幕高度一致。
*/
height: 100vh;
background: #282c34;
/* 让盒子进行flex(弹性布局)布局,并且居中显示 */
display: flex;
/* 1.justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。 */
justify-content: center;
/* 2.align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。 */
align-items: center;
}
/* 去除小圆点 */
.tab_contents ul {
list-style: none;
}
.tab_contents {
width: 700px;
height: 200px;
/* background: white; */
}
.tab_contents .tab_nav {
display: flex;
}
.tab_contents .tab_nav li {
padding: 10px 20px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: #e5e9ea;
margin-right: 2px;
color: #607291;
cursor: pointer;
display: flex;
position: relative;
overflow: hidden;
}
.tab_contents .tab_nav li img {
width: 20px;
margin-right: 5px;
/* 设置不透明级别 */
opacity: 0.3;
transition: opacity 0.3s;
}
.tab_contents .tab_nav li h2 {
font-size: 14px;
}
.tab_contents .tab_nav li:hover img {
opacity: 1 !important;
}
.tab_contents .tabNav_active {
background: #f9f9f9 !important;
}
/* 面板 */
.tab_contents .tab_box {
position: relative;
/* 最小高度 */
min-height: 150px;
background: #f9f9f9;
padding: 2em;
color: #607291;
}
.tab_contents .tab_box li {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
padding: 15px;
box-sizing: border-box;
/*
display 不支持动画切换
*/
/* display: none; */
opacity: 0;
visibility: hidden;
transition: all 1s ease;
}
.tab_contents .tab_box .tabBox_active {
/* display: flex; */
opacity: 1;
visibility: visible;
}
.tab_contents .tab_box li img {
width: 128px;
}
.tab_contents .tab_box li div {
width: 100%;
/* height: 128px; */
position: relative;
margin-left: 20px;
}
.tab_contents .tab_box li p {
text-indent: 2em;
margin: 20px 0;
line-height: 1.5em;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.tab_contents .tab_box li button {
margin-top: 20px;
width: 110px;
height: 25px;
border: #607291 solid 1px;
background: transparent;
float: right;
}
.tab_contents .tab_box li button a {
text-decoration: none;
color: #607291;
}
H5自定义属性
自定义属性目的:为了保存并使用数据,有些数据可以保存到页面中而不用保存到数据库中
自定义属性获取是通过getAttribute(‘属性’)获取
但是有些自定义属性很容易引起歧义,不容易判断是元素的内置属性还是自定义属性
h5给我们新增了自定义属性:
设置H5自定义属性
H5规定自定义属性data-开头作为属性名并且赋值
比如:<div data-index= '1'></div>
或者使用JS设置
element.setAttribute('data-index',2)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div getTime="20" data-index="2" data-list-name="andy"></div>
<script type="text/javascript">
var div = document.querySelector('div');
//console.log(div.getTime);
console.log(div.getAttribute('getTime'));
div.setAttribute('data-time',20);
console.log(div.getAttribute('data-index'));
console.log(div.getAttribute('data-list-name'));
// h5新增的获取自定义属性的方法
// dataset 是一个集合里面存放了所有data开头的自定义属性
console.log(div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['index']);
// 如果自定义属性里面有多个-链接的单词,我们获取的时候采用 驼峰命名法
console.log(div.dataset.listName);
console.log(div.dataset['listName']);
</script>
</body>
</html>
获取H5自定义属性
- 兼容性获取:element.getAttribute(‘data-index’);
- H5新增 element.dataset.index 或者 element.dataset[‘index’] ie11才开始支持