day05循环结构和this和自定义属性
2.流程控制语句
2.1选择结构(分支语句)
2.2循环结构
2.3 break与continue
-
continue 结束本次循环
-
break 结束整个循环
<script>
// continue 结束本次循环
for(var i = 1;i<=10;i++){
if(i==5){
console.log("第五个水饺掉了");
continue;
}
console.log(i);//
}
//break 结束整个循环
for(var i = 1;i<=10;i++){
if(i==5){
console.log("吃到第五个汤圆的时候 碗里面进了一个苍蝇");
break;
}
console.log(i);
}
</script>
2.4 双重for循环
如果循环体又是一个循环 只有把内侧循环走完，才会继续执行外侧循环
<script>
for (var i = 1; i < 5; i++) {// i = 1 2 3 4
console.log(123)
for (var j = 1; j < 5; j++) {
console.log("i=" + i, "j=" + j)
}
}
/*
外侧循环 i = 1
for(var j = 1;j<5;j++){
console.log("i="+i,"j="+j)
}
j = 1 输出 i=1 j=1
j = 2 输出 i=1 j =2
j = 3 输出 i=1 j=3
j = 4 输出 i=1 j=4
j = 5
i = 2
for(var j = 1;j<5;j++){
console.log("i="+i,"j="+j)
}
j = 1 输出 i=2 j=1
j = 2 输出 i=2 j =2
j = 3 输出 i=2 j=3
j = 4 输出 i=2 j=4
j = 5
i=3
i=4
*/
</script>
-
二维数组
<script> var arr = [1,"123",true,false,undefined,null];//一维数组 var arr1 = [ //二维数组 ["你好吗","我不好","我特别好"], ["嘿嘿","哈哈","嘻嘻","呵呵"], ["妲己","王昭君","安琪拉"] ] // 获取数组 console.log(arr1[0]);//['你好吗', '我不好', '我特别好'] console.log(arr1[1]);// ["嘿嘿","哈哈","嘻嘻","呵呵"] console.log(arr1[2]);// ["妲己","王昭君","安琪拉"] // 获取二维数组的值 console.log(arr1[0][0]);//"你好吗" console.log(arr1[1][3]);//"呵呵" </script>
-
双重for循环生成标签
<script>
var arr1 = [
["你好吗", "我不好", "我特别好"],
["嘿嘿", "哈哈", "嘻嘻", "呵呵"],
["妲己", "王昭君", "安琪拉"]
]
//数组名.length
// 1.利用双重for循环数组
for (var i = 0; i < 3; i++) {// i = 0 1 2 arr1[0] arr1[1] arr1[2]
for (var j = 0; j < arr1[i].length; j++) {
console.log(arr1[i][j]);
}
}
/*
i = 0
for(var j = 0;j<3;j++){
console.log(arr1[i][j]);/
}
// j = 0 arr1[0][0] 你好吗
// j = 1 arr1[0][1] 我不好
// j = 2 arr1[0][2] 我特别好
// j = 3
i = 1
for(var j = 0;j<4;j++){
console.log(arr1[i][j]);
}
// j = 0 arr1[1][0] 嘿嘿
// j = 1 arr1[1][1] 哈哈
// j = 2 arr1[1][2] 嘻嘻
// j = 3 arr1[1][3] 呵呵
// j = 4
i = 2
*/
//2利用双重for循环数组
var list = document.getElementsByClassName("list")[0];
for (var i = 0; i < arr1.length; i++) {
for (var j = 0; j < arr1[i].length; j++) {
list.innerHTML += "<li>" + arr1[i][j] + "</li>"
}
}
</script>
2.5 JSON数据/object数据类型
-
object数据类型就是JSON数据，也叫对象
-
对象/object/JSON数据:一组无序的 没有长度的数据 也是可以存储多个 可以存储任意数据类型
{
属性名/key/键:属性值/value/值
}
注意:属性名 可加可不加引号
注意:数据和数据之间用逗号隔开
{
"name":"小候老师",
"age":20,
"sex":"男",
"isOn":true
}
-
基础用法
var obj = {
"name": "小候老师",
age: 20,
"sex": "男",
isOn: true,
a: null,
b: undefined,
c: [1, 2, 3, 4],
d: {
"skill": "第一阶段"
},
f: function () { } //函数 函数在对象里面 我们一般叫方法
}
console.log(obj);
console.log(obj.length);//undefined 对象没有长度
// 2.获取object中的属性值 obj.属性名
console.log(obj.name);//小候老师
console.log(obj.c);// [1,2,3,4]
// 3.如果属性名是一个变量 obj[变量名]
var s = "sex";
console.log(obj[s]);
// 4.如果样式名是一个变量 标签.style[变量名]
var odiv = document.getElementsByTagName("div")[0];
// 获取样式 标签.style.样式名
console.log(odiv.style.width)
var w = "width";
console.log(odiv.style[w])
// 6.设置属性 obj.属性名 = 值
obj.name = "候世杰";
console.log(obj)
//7.如果给一个不存在的属性添加值 是直接追加到对象中
obj.hobby = "敲代码";
console.log(obj)
2.6 for-in
<script>
// for-in 遍历对象
var obj = {
"name": "小候老师",
age: 20,
"sex": "男",
isOn: true,
a: null,
b: undefined,
c: [1, 2, 3, 4],
d: {
"skill": "第一阶段"
},
f: function () { } //函数 函数在对象里面 我们一般叫方法
}
// for(var 变量名 in 对象){ 循环体}
// 注意 对象有几个数据就遍历几次 遍历完自动结束循环
for (var i in obj) { // i 里面存储的是属性名 i = "name" i="age" i="sex"
// 如果属性名是一个变量 obj[变量名]
console.log(obj[i])
}
</script>
3. this
3.1 为什么用this
<body>
<div>盒子1</div>
<div>盒子2</div>
<div>盒子3</div>
<div>盒子4</div>
<div>盒子5</div>
<script>
var oDiv = document.getElementsByTagName("div");
oDiv[0].onclick = function(){
console.log(oDiv[0].innerHTML)
}
oDiv[1].onclick = function(){
console.log(oDiv[1].innerHTML)
}
console.log(oDiv.length);//5
// 通过for循环添加点击事件
for(var i = 0;i<oDiv.length;i++){
// 循环添加事件 事件不会立马执行 但是for循环执行完毕
// 点击盒子的时候 才会执行事件里面的代码 此时i的值是5
oDiv[i].onclick = function(){
console.log(i);//5
console.log(oDiv[i]);//undefined
}
}
// i = 5
</script>
</body>
3.2 this指向
-
this 这个的意思
-
在不同的地方 this指向的内容不同 取决于当前函数被调用时所处的环境
-
事件处理函数 ： 标签.事件类型 = function() { 要做的事}
-
==在事件处理函数中 ------ this指向触发事件的对象----点谁指向谁==
-
-
基础使用
<button>按钮1</button>
<script>
var btn = document.getElementsByTagName("button")[0];
// 事件处理函数this的指向----指当前触发事件的对象----点谁指向谁
btn.onclick = function(){
console.log(this)//指向button标签
}
</script>
-
this的指向---练习
<body>
<div>盒子1</div>
<div>盒子2</div>
<div>盒子3</div>
<div>盒子4</div>
<div>盒子5</div>
<script>
var oDiv = document.getElementsByTagName("div");
oDiv[0].onclick = function(){
console.log(oDiv[0].innerHTML)
}
oDiv[1].onclick = function(){
console.log(oDiv[1].innerHTML)
}
console.log(oDiv.length);//5
// 通过for循环添加点击事件
for(var i = 0;i<oDiv.length;i++){
// 循环添加事件 事件不会立马执行 但是for循环执行完毕
// 点击盒子的时候 才会执行事件里面的代码 此时i的值是5
oDiv[i].onclick = function(){
// console.log(i);//5
// console.log(oDiv[i]);//undefined
// 利用this解决这个问题
// 标签.innerHTML
// this---当前触发事件的对象
console.log(this)
console.log(this.innerHTML)
}
}
// i = 5
</script>
3.3 开关效果
3.1.1 单组开发效果
-
现象:一个事件里面有两种状态
-
解决
-
定义一个变量 用于标识当前的状态
-
通过判断不同变量的状态 选择执行不同的逻辑
-
当状态发生改变的时候 变量的值需要做改变
-
<div></div>
<script>
var oDiv = document.getElementsByTagName("div")[0];
var tag = true;//true---200px false-50px
oDiv.onclick = function(){
// oDiv.style.height = "200px";
if(tag){ //开 200px
oDiv.style.height = "200px";
tag = false;
}else{//关 50px
oDiv.style.height = "50px";
tag = true;
}
}
</script>
3.1.2 多组开发效果(问题版)
<body>
<div>盒子1</div>
<div>盒子2</div>
<div>盒子3</div>
<div>盒子4</div>
<div>盒子5</div>
<script>
var oDiv = document.getElementsByTagName("div");
var tag = true;//true----200px false--50px
// 利用for循环添加点击事件
for(var i = 0;i<oDiv.length;i++){
oDiv[i].onclick = function(){
// 通过for循环添加点击事件 在点击事件中无法拿到i的值 拿的永远是i最后一次值
if(tag){
this.style.height = "200px";
tag = false;
}else{
this.style.height = "50px";
tag = true
}
}
}
/*
问题:公用了一个tag 交叉点击的时候 就出现了混乱
解决:每个盒子都定义一个属于自己的tag值
*/
</script>
</body>
3.4自定义属性
3.4.1什么是属性
-
什么是属性:存在开始标签上 属性名=属性值 例如class="box" id="wrap"
-
固有属性：系统给定的属性 例如 class id style href src
-
自定义属性:程序员自己定义的属性
-
3.4.2设置和获取自定义属性
-
如何设置和获取自定义属性
<body>
<!-- class和id叫固有属性 a和b叫自定义属性 -->
<div class="box" id="wrap" a="123" b="这是一个div标签"></div>
<script>
var oDiv = document.getElementsByTagName("div")[0];
/*--------------如何获取自定义属性 标签.属性名----------------------*/
//1.如果直接在标签上定义 可以在结构上看到 但是无法获取
console.log(oDiv.a);//undefined
console.log(oDiv.b);//undefined
// 2.通过js添加属性：结构上看不到 但是可以在js中获取
// 通过js设置自定义属性 标签.属性名 = 值
oDiv.c = "456";
console.log(oDiv.c);//456
</script>
</body>
3.4.3自定义属性解决多组展开收起
-
多组展开收起(解决)
<body>
<div >盒子1</div>
<div>盒子2</div>
<div>盒子3</div>
<div>盒子4</div>
<div>盒子5</div>
<script>
var oDiv = document.getElementsByTagName("div");
// var tag = true;//true----200px false--50px
// 利用for循环添加点击事件
for (var i = 0; i < oDiv.length; i++) {
oDiv[i].tag = true;//给每个盒子设置自定义属性tag=true
oDiv[i].onclick = function () {
console.log(this.tag)//点击谁 就获取谁的tag属性
// 通过for循环添加点击事件 在点击事件中无法拿到i的值 拿的永远是i最后一次值
if (this.tag) {
this.style.height = "200px";
this.tag = false;
} else {
this.style.height = "50px";
this.tag = true;
}
}
}
/*
问题:公用了一个tag 交叉点击的时候 就出现了混乱
解决:每个盒子都定义一个属于自己的tag值
*/
</script>
</body>
扫一扫
3118
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
