这里写目录标题
习题1(堆栈)
已知下面代码可以修改BOX元素的样式
1 box.style.color = 'red ';
那么下面的写法是否可以修改元素的样式,如果不可以是为什么?
let box = document.getElementById('box');
通过方法获取的元素box是 对象数据类型 的值
console.dir(box);//查看详细信息
//第一种方案
let AA = box.style;
AA.color = 'red' ; //可以修改
//第二种方案
let BB = box.sty1e.color ;
BB = 'red '; //无法修改
AA存的是引用数据类型,按地址来操作
BB存的是值类型,直接修改值
1.console.dir(box);//查看详细信息
对象的属性(box对象)
- id:操作元素的ID值
- className:操作元素的CLASS样式类的值
- innerHTML:操作的元素的内容(可以识别标签)
- innerText:和-innerHTML的区别是不能识别标签
- tagName:获取元素的标签名(一般大写)
- style:操作元素的行内样式属性值是一个新的对象(cssstyleDeclaration)
box.style.display(box是一个对象,它里面有style属性。style的属性值又是一个新的对象)多维对象
练习1(隔行变色)
1.css实现(真实项目中这样写)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
#newsBox {
margin: 10px auto;
box-sizing: border-box;
/*固定大小*/
width: 300px;
padding: 20px;
border: 2px solid pink;
}
#newsBox li {
line-height: 30px;
border-bottom: 1px dashed pink;
}
#newsBox li:nth-last-child(1) {
/*获取LI的最后一个元素*/
border-bottom: none;
}
#newsBox li:nth-child(even) {
background-color: aqua;
}
#newsBox li:nth-child(odd) {
background-color: blue;
}
#newsBox li:hover {
background-color: white;
}
</style>
</head>
<body>
<!-- ul#newsBox>li*5{我是第$个LI} -->
<ul id="newsBox">
<li>第1个</li>
<li>第2个</li>
<li>第3个</li>
<li>第4个</li>
<li>第5个</li>
</ul>
</body>
</html>
2.js实现(练习js)
鼠标移入(mouseover)移出(mouseout)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
#newsBox {
margin: 10px auto;
box-sizing: border-box;
/*固定大小*/
width: 300px;
padding: 20px;
border: 2px solid pink;
}
#newsBox li {
line-height: 30px;
border-bottom: 1px dashed pink;
}
#newsBox li:nth-last-child(1) {
/*获取LI的最后一个元素*/
border-bottom: none;
}
</style>
</head>
<body>
<!-- ul#newsBox>li*5{我是第$个LI} -->
<ul id="newsBox">
<li>第1个</li>
<li>第2个</li>
<li>第3个</li>
<li>第4个</li>
<li>第5个</li>
</ul>
</body>
<script>
var newsBox = document.getElementById('newsBox');
var lis = document.getElementsByTagName('li');/*通过标签名获取一组元素(元素集合)
HTMLCollection */
console.dir(lis);//类数组集合,不是数组
/*奇数行*/
for (var i = 0; i <= lis.length; i += 2) {
lis[i].style.backgroundColor = 'pink';
lis[i].onmouseover = function () {
/*this代表当前操作的li*/
this.style.backgroundColor = 'white';
}
lis[i].onmouseout = function () {
this.style.backgroundColor = 'pink';
}
}
/*偶数行*/
for (var i = 1; i <= lis.length; i += 2) {
lis[i].style.backgroundColor = 'blue';
lis[i].onmouseover = function () {
this.style.backgroundColor = 'white';
}
lis[i].onmouseout = function () {
this.style.backgroundColor = 'blue';
}
}
</script>
</html>
1.函数function()
函数是做某件事的方法或者一个功能体,函数是吧实现某个功能的代码放在一起进行封装。
实现高内聚,低耦合。
1.1创建函数(形参,返回值)
1.形参
//=>ES5老方式
function[函数名]([形参变量1],...){
//函数体:基于JS完成需要实现的功能return[处理后的结果];
}
[函数名]([实参1],...) ;
创建函数的时候我们设置了形参变量,但如果执行的时候并没有给传递对应的实参值,那么形参变量默认的值是: undefined
// 求两个数的和,算完和后乘以10,然后在除以2...
//=>sum是函数名,代表这个函数
// =>n/m是形参,是变量,用来存储执行函数时传递的实参
function sum(n, m) {
//形参默认值手动处理
if(typeof n == 'undefined' ){
n=0;
}
let res = n + m;
res = res * 10;
res = res / 2;
console.log(res);
}
console.log(sum);//输出函数本身
sum(1,2);
2.返回值
函数执行的时候,函数体内部创建的变量我们是无法获取和操作的,如果要想获取内部的信息,我们需要基于RETURN返回值机制,把信息返回才可以。
没有写RETURN,函数默认返回值是undefined
函数体中遇到RETURN,后面代码则不再执行了return
function sum(n, m) {
let res = n + m;
return res; //返回值
}
console.log(sum(1, 3));
1.2执行函数(实参)
1.3匿名函数
匿名函数之函数表达式:把一个匿名函数本身作为值赋值给其它东西,这种函数一般不是手动触发执行,而且靠其它程序驱动触发执行(例如:触发某个事件的时候把它执行等)
this.onclick = function () {}
setTimeout(function(){},1000) //设置定时器,1000MS后执行匿名函数
(function(n){//自执行函数,创建完一个匿名函数,紧接着就把当前函数加小括号执行
//n=100;
})(100);
以后讲
1.3arguements
1.4函数底层运行机制
练习2(选项卡)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
li {
list-style: none;
}
.box {
border: 1px solid black;
padding: 10px;
margin: 0 10px 10px 0;
cursor: pointer;
}
#navBox {
display: flex;
}
.detail {
height: 200px;
width: 500px;
border: 1px solid black;
display: none;
}
#tabBox>div.active {
display: block;
}
</style>
<body>
<div id="tabBox">
<ul id="navBox">
<li class="box active">读书</li>
<li class="box">电影</li>
<li class="box">音乐</li>
</ul>
<div class="detail active">1111111</div>
<div class="detail">22222222</div>
<div class="detail">333333333</div>
</div>
</body>
<script>
var tabBox = document.getElementById('tabBox');
var navBox = document.getElementById('navBox');
var lis = navBox.getElementsByTagName('li');
var tabList = tabBox.getElementsByTagName('div');
/**************************1.自定义属性*******************************/
//循环三个LI,给每一个LI都绑定点击事件
// for (var i = 0; i < lis.length; i++) {
// lis[i].zidingyi = i;
// lis[i].onclick = function () {
// //this.style.backgroundColor = 'pink';
// //我想用的是点击这个Li的索引,但是i不是
// //changeTab(i);
// //解决办法一:自定义属性
// changeTab(this.zidingyi);
// //changeTab(i);
// /*只有代码加载完成才能看到页面,只有看到页面用户才能点击,
// 加载到循环这个代码了i=0 i < 3 i++
// i=0 navList[0].onclick = function () {... }
// 绑定事件的时候方法没有执行,点击第一个LI的时候它才执行i++ => 1
// 循环结束,在点击时i已经变成了3*/
// }
// }
/**********************2.闭包解决方案***********************************/
// for (var i = 0; i < lis.length; i++) {
// lis[i].onclick = (function (i) {
// return function () {
// changeTab(i);
// }
// })(i);
// }
/**********************3.ES6中的LET解决方案0***********************************/
for (let i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
changeTab(i);
}
}
//封装一个函数实现选项卡的切换
//clickIndex:创建函数的时候还不知道点的是谁,所以定义一个入口clickIndex(点击这一项的索引) 批行方法的时候把点击这一项的索引传递进来即可
function changeTab(clickIndex) {
//1.先让所有的LI和DIV都没有选中的样式
for (var i = 0; i < lis.length; i++) {
lis[i].className = 'box ';//清空上面标签样式
tabList[i].className = 'detail';
}
//2.点击的是谁就给谁加
lis[clickIndex].className = 'box active';
tabList[clickIndex].className = 'detail active';
}
</script>
</html>