1、复习
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box">123</div>
<script>
// 获取元素:
// 直接返回元素
// document.getElementById('id名')
// document.querySelector('选择器')
// 返回伪数组:
// document.getElementsByTagName('标签名')
// document.querySelectorAll('选择器')
//
// 除了byId不能用元素调用,其他三个都可以
// document/element.getElementsByClassName('类名');
// document.getElementsByName('name属性的值')
// 获取body : document.body
// 获取html : document.documentElement
// 事件:
// 事件源 : 给谁注册事件,谁就是事件源
// 事件名 : 注册的是什么事件
// 事件处理函数 : 触发事件调用的函数
// box.onclick = function (){
//
// };
var box = document.getElementById('box');
box.onclick = fn; //不要加小括号,因为加了小括号就是函数调用,会把函数执行完的结果赋值给onclick. 而我们需要的是把函数赋值给onclick
function fn(){
//如果没有加return ,浏览器会自动帮我们加一个return undefined
}
// 操作元素的属性
// 作用: 用来操作双标签里面的文本和内容
// 都会覆盖元素原来的内容
// innerText : 操作文本
// innerHTML : 操作内容 会识别html标签
</script>
</body>
</html>
2、操作表单元素的属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" value="123" >
<input type="button" value="按钮" >
<script>
// value
var input = document.querySelector('input');
var btn = document.querySelectorAll('input')[1];
//console.log(input.value);
// input.value = '456';
//type
//console.log(input.type);
//console.log(btn.type);
//
// input.type = 'button';
// btn.type = 'text';
//disabled 禁用
// 在html中只需要写属性名的属性,在js中通过true/false来控制
// 如果赋值为true,就是相当于写了这个属性
// 如果赋值为false,就是相当于没写这个属性
// btn.onclick = function(){
// input.disabled = false;
// }
//
//console.log(input.disabled);
</script>
</body>
</html>
3、点击案例禁用文本框
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text"><br>
<input type="text"><br>
<input type="button" value="我是按钮"><br>
<input type="text"><br>
<button>点击按钮禁用文本框</button>
<script>
//需求: 点击button按钮,禁用 文本框 input type ="text"
//1. 获取元素
var btn = document.getElementsByTagName('button')[0];
var inputs = document.getElementsByTagName('input');
// 2. 给button注册点击事件
btn.onclick = function(){
// 3. 在事件处理函数中,找到对应的文本框,在给文本框禁用
// 3.1 找到文本框
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].type === 'text'){ //工作中,一般判断字符串是否相等要使用全等运算符
//证明此时的inputs[i]一定是文本框
// 3.2 禁用文本框
inputs[i].disabled = true;
}
}
}
</script>
</body>
</html>
4、设置下拉框的选中项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<select id="sel">
<option>请随机选择</option>
<option>食堂</option>
<option id="op">吃翔</option>
<option >泡面</option>
<option >外卖</option>
<option>哼,不吃了</option>
</select>
<input type="button" value="随机" id="btn">
</body>
<script>
//需求: 点击按钮,从select里面随机(1~length-1)找到一个option,给这个option 的selected属性设置为true
// 1. 获取元素
var btn = document.getElementById('btn');
var sel = document.getElementById('sel');
var options = sel.getElementsByTagName('option');
// 2. 给按钮注册点击事件
btn.onclick = function(){
// 3. 在事件处理函数中,随机找到一个option,把他的selected属性设置为true
// 3.1 获取一个随机数 1~options.length - 1;
// Math.random() --> 0~1 包含0 ,不包含1
var random = getRandom(1, options.length-1);
// console.log(random);
// 3.2 通过随机数找到对应option
// console.log(options[random]);
// 3.3 让找到的option选中
options[random].selected = true;
}
//mdn已经帮助我们封装好的一个获取指定随机数的方法
//返回的 min ~ max的随机整数 包含min和max的
function getRandom(min, max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>
</html>
5、全选反选
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
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>iPhone8</td>
<td>8000</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>
<input type="button" value=" 反 选 " id="btn">
</div>
<script>
// 需求:
// 1. 全选选中,下面的复选框都选中,否则,下面的都不选中
// 1.1 获取元素
var j_cbAll = document.getElementById('j_cbAll');
var j_tb = document.getElementById('j_tb');
var cbs = j_tb.getElementsByTagName('input');
// 1.2 点击全选的时候,全选的状态变成了什么样
j_cbAll.onclick = function(){
// console.log(this.checked);
// 1.3 根据全选的状态啊,给下面四个赋值
// if(this.checked){
// //如果是true
// for(var i = 0; i < cbs.length; i++) {
// cbs[i].checked = true;
// }
// }else{
// //证明全选没选中
// for(var i = 0; i < cbs.length; i++) {
// cbs[i].checked = false;
// }
// }
// if(this.checked){
// //如果是true
// for(var i = 0; i < cbs.length; i++) {
// cbs[i].checked = this.checked;
// }
// }else{
// //证明全选没选中
// for(var i = 0; i < cbs.length; i++) {
// cbs[i].checked = this.checked;
// }
// }
for(var i = 0; i < cbs.length; i++) {
cbs[i].checked = this.checked;
}
}
//
// 2. 下面每一个选中,或者不选中的时候,都应该判断一下,是否下面都选中, 如果都选中了,全选也选中,如果有一个没选中,全选不选中
// 2.1 获取元素
// 2.2 给下面的每一个复选框注册点击事件
for(var i = 0; i < cbs.length; i++) {
cbs[i].onclick = cbClick;//这样写可以节省内存
}
//下面的复选框点击时触发的事件
// 判断当前四个复选框是否都选中,如果都选中,就让全选也选中,否则,全选不选中
function cbClick(){
//2.3 判断下面四个是否都选中,如果选中,全选选中,如果有没选中的,全选不选中
var flag = true;//先假设四个都是选中的
for(var i = 0; i < cbs.length; i++) {
//判断有没有未选中的
if(cbs[i].checked == false){
//证明有没选中的
// 如果有没选中的就将flag修改为false
flag = false;
}
}
//当for循环执行完了之后,就可以通过flag判断是否都选中了
// 如果flag是true,证明都选中了,否则,有未选中的
// 2.4 根据flag的状态,给全选赋值
// if(flag){
// j_cbAll.checked = true;
// }else{
// j_cbAll.checked = false;
// }
// if(flag){
// j_cbAll.checked = flag;
// }else{
// j_cbAll.checked = flag;
// }
j_cbAll.checked = flag;
}
// 3. 点击反选按钮下面这个四个复选框,取反他们的状态. 取反之后,判断四个复选框的状态,如果都选中,全选也选中,否则,全选不选中
// 3.1 获取元素
var btn = document.getElementById('btn');
// 3.2 给反选按钮注册点击事件
btn.onclick = function(){
// 3.3 在事件 处理函数中,给下面四个取反, 取反之后,判断4个复选框的状态,修改全选的状态
// 3.3.1 取反四个复选框
for(var i = 0; i < cbs.length; i++) {
// if(cbs[i].checked){
// //能够进来,证明是选中,应该取消
// cbs[i].checked = false;
// }else{
// //证明原本是取消的状态
// cbs[i].checked = true;
// }
// if(cbs[i].checked){
// //能够进来,证明是选中,应该取消
// cbs[i].checked = !cbs[i].checked;
// }else{
// //证明原本是取消的状态
// cbs[i].checked = !cbs[i].checked;
// }
cbs[i].checked = !cbs[i].checked;
}
// 3.3.2 取反之后,根据他们的状态,修改全选的状态
cbClick();
}
</script>
</body>
</html>
6、操作元素属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*#box{*/
/*border:10px solid blue;*/
/*}*/
.one{
width: 300px;
height: 200px;
background-color: pink;
}
.two{
border: 50px solid hotpink;
}
</style>
</head>
<body>
<!--<div style="width:100px; height:100px; background-color:red;"></div>-->
<!--<div id="box" style="border:20px solid blue"></div>-->
<div id="box" ></div>
<script>
// style 行内
var box = document.getElementById('box');
// box.style.width = '100px';
// box.style.height = '200px'; //在css中要求写单位的属性的值,在js中也一定要记得写单位
// box.style.backgroundColor = 'green'; //如果是css中有-的属性,在js中要改成驼峰命名法
//
// console.log(box.style.width);
// console.log(box.style.backgroundColor);
// console.log(box.style.border);
// 注意: 如果要通过style获取样式,只能获取行内
//className 类名
box.className = 'one';
// box.className = 'two'; //如果直接给元素的className赋值,会把原来的覆盖掉
//console.log(box.className);
box.className += ' two'; //一定要记得加空格
</script>
</body>
</html>
7、二维码案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.nodeSmall {
width: 50px;
height: 50px;
background: url(images/bgs.png) no-repeat -159px -51px;
position: fixed;
right: 10px;
top: 40%;
}
.erweima {
position: absolute;
top: 0;
left: -150px;
}
.nodeSmall a {
display: block;
width: 50px;
height: 50px;
}
.hide {
display: none;
}
.show {
display: block;
}
</style>
</head>
<body>
<div class="nodeSmall" id="node_small">
<div class="erweima hide" id="er">
<img src="images/456.png" alt="" />
</div>
</div>
</body>
<script>
//需求: 鼠标移入node_small 则er展示出来, 鼠标移出node_small ,则er隐藏
//1. 获取元素
var small = document.getElementById('node_small');
var er = document.getElementById('er');
//2. 给small注册鼠标移入事件(mouseover)和鼠标移出事件(mouseout)
//鼠标移入事件
small.onmouseover = function(){
//3. 在移入事件中,让er展示
// console.log(er.className);
// console.log(er.className.replace('hide', 'show'));;
er.className = er.className.replace('hide', 'show');
}
small.onmouseout = function(){
//4. 在移出事件中,让er消失
er.className = er.className.replace('show', 'hide');
}
</script>
</html>
8、点击元素，背景高亮
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<!--ul>li{第$个li}*8-->
<script>
// 需求: 点击li,点击谁,谁高亮
// 1. 获取元素
var lis = document.getElementsByTagName('li');
// 2. 给每一个li注册点击事件
for(var i = 0; i < lis.length; i++) {
lis[i].onclick = fn;
}
//li被点击时,调用的函数
function fn(){
// 3. 在事件处理函数中,让当前点击的那个li高亮(设置背景颜色)
// console.log(this);
//排他
for(var i = 0; i < lis.length; i++) {
lis[i].style.backgroundColor = '';
}
this.style.backgroundColor = 'yellow';
}
</script>
</body>
</html>
9、操作标签上的自定义属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box" hehe="123"></div>
<script>
var box = document.getElementById('box');
// console.log(box.id);
// console.log(box.index);
// console.log(box.a);
// 注意: w3c中标准的属性,可以通过 .属性名的方式直接操作,但是自定义的属性,不能这样操作
// 元素.getAttribute('属性名') 返回对应的属性的值 可以获取标签上所有的属性的值
// console.log(box.getAttribute('index'));
// console.log(box.getAttribute('a'));
// console.log(box.getAttribute('id'));
// 元素.setAttribute('属性名', '属性值'); //给元素添加属性
// box.setAttribute('B', '呵呵');
// box.setAttribute('title', '哈哈');
// 元素.removeAttribute('属性名'); 移除元素的属性
// box.removeAttribute('id');
// box.removeAttribute('hehe');
</script>
</body>
</html>
10、隔行变色，点击高亮
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="mv">
<li >西施</li>
<li>貂蝉</li>
<li>王昭君</li>
<li>杨玉环</li>
<li>芙蓉姐姐</li>
</ul>
</body>
</html>
<script>
// 需求: 隔行变色, 点击高亮
// 1. 隔行变色
// 1.1 获取元素
var lis = document.getElementsByTagName('li');
// 1.2 遍历每一个li
for(var i = 0; i < lis.length; i++) {
// 1.3 遍历的过程中,判断下标是奇数还是偶数,然后设置不同的颜色
if(i % 2 == 0){
lis[i].style.backgroundColor = 'pink';
lis[i].setAttribute('bgc', 'pink');
}else{
lis[i].style.backgroundColor = 'deeppink';
lis[i].setAttribute('bgc', 'deeppink');
}
// 2.2 给每一个li注册点击事件
lis[i].onclick = fn;
}
// 2. 点击高亮
// 2.1 获取元素
// 2.3 在事件处理函数中,给当前的li高亮
function fn(){
// 在事件处理函数中,给当前的li高亮
for(var i = 0; i < lis.length; i++) {
var bgc = lis[i].getAttribute('bgc');
lis[i].style.backgroundColor = bgc;//应该把原来的颜色设置上去
}
this.style.backgroundColor = 'skyblue';
}
</script>
11、tab栏切换
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
.box {
width: 400px;
height: 300px;
border: 1px solid #ccc;
margin: 100px auto;
overflow: hidden;
}
.hd {
height: 45px;
}
.hd span {
display: inline-block;
width: 90px;
background-color: pink;
line-height: 45px;
text-align: center;
cursor: pointer;
}
.hd span.current {
background-color: yellow;
}
.bd div {
height: 255px;
background-color: yellow;
display: none;
}
.bd div.selected {
display: block;
}
</style>
</head>
<body>
<div class="box">
<div class="hd" id="hd">
<span class="current">体育</span>
<span>娱乐</span>
<span>新闻</span>
<span>综合</span>
</div>
<div class="bd" id="bd">
<div class="selected">我是体育模块</div>
<div>我是娱乐模块</div>
<div>我是新闻模块</div>
<div>我是综合模块</div>
</div>
</div>
</body>
</html>
<script>
//需求: 鼠标移入到对应的标签页(span),标签页高亮,同时,对应的下面的div展示出来
// 1. 鼠标移入到span,span高亮
// 1.1 获取元素
var spans = document.getElementsByTagName('span');
var bd = document.querySelector('#bd');
var divs = bd.querySelectorAll('div');
// 1.2 注册鼠标移入事件 mouseover
for(var i = 0; i < spans.length; i++) {
spans[i].onmouseover = fn;
//因为要知道自己的当前span 的下标是多少,所以需要存储起来
spans[i].setAttribute('index', i);
}
function fn(){
// 1.3 在事件处理函数中让对应的span高亮
//排他
for(var i = 0; i < spans.length; i++) {
spans[i].className = '';
divs[i].className = '';
}
this.className = 'current';
// 2. 让对应的div展示出来
// 2.1 如何找到对应的div -->span的下标和div的下标是一致的
// 如何知道当前的span的下标是多少?
var index = this.getAttribute('index');
// 2.2 通过下标找到对应的div
console.log(divs[index]);
// 2.3 让对应的div展示出来
divs[index].className = 'selected';
}
</script>
