自定义属性和索引值

最新推荐文章于 2021-04-20 21:27:55 发布

王十一是个喵

最新推荐文章于 2021-04-20 21:27:55 发布

阅读量425

点赞数 1

分类专栏：学习案例 HTML CSS web前端 JavaScript

本文链接：https://blog.csdn.net/qq_43398720/article/details/98984315

版权

学习案例同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

web前端

18 篇文章 0 订阅

订阅专栏

JavaScript

16 篇文章 0 订阅

订阅专栏

循环结构

for-in 循环

用来循环对象，因为对象没有长度没有顺序，所以不可以用for循环
语句：创建一个对象

for(定义一个变量变量名 in 对象名){}

现总结一下获取对象属性值的方法

<script>
var json {
	"name":"lizheng",
	"sex":"男",
	"age":8888
}
console.log(json.name); //第一种获取方法
console.log(json['age']); //第二种获取方法
</script>

循环对象

<script>
	var json {
	"name":"lizheng",
	"sex":"男",
	"age":8888
	}
    for(var x in json){
    	console.log(x);
        console.log(json[x]);//因为x是变量，所以不再需要加中括号
        console.log(json.x);//这个是取不出来值得，循环里面不可以用
    }
</script>

while

先循环后判断，和for循环差不多，就是初始化变量位置放置有时候不一样
for循环步骤

方法一：
for(1.初始化循环变量;2.循环是否继续的条件;4.更新循环变量){
	3.执行的代码
}
方法二：
1.初始化循环变量；
for(;2循环是否继续的条件;){
	3.执行的代码
	4.更新循环变量
}

while循环的语法只是第二种，不可以移进

1.初始化循环变量；
while(2循环是否继续的条件){
	3.执行的代码
	4.更新循环变量
}
eg:
var x=0;
while(x<=10){
             console.log(x);
             x++;
             }

do-while

特点：现执行再判断，不管条件是否成立，至少执行一次
语法：

1.变量初始值
do {
	2.执行的代码；
	3.更新变量
}while（4.判断条件）
eg:
var x=0;
do{
	console.log(x);
	x++;
}while(x<=5);

他和while、for的区别就是，当第一次条件不成立时，do-while会执行一席，for和while不会执行

终止循环的两种方法

break

跳出循环，是结束整个循环

continue

跳出本次循环，是结束次次循环后面的代码，执行下一次循环

var x=0;
for(;x<=10;x++){
	if(x%2==0){
    	console.log(x);   //0第一个数值就满足这个条件，后面是break，所以整个循环直接结束，结果是0
        break;
	}
 }
                
eg：
 var x=0;
for(;x<=10;x++){
	if(x%2==0){
    	console.log(x);  //0、2、4、6、8、10
					    //后面是continue，还可以继续执行下面的代码
        continue;
	}
 }

this

console.log(this);   //这里控制台输出的是this

为什么要用this呢？

<ul>
 <li>1</li>
 <li>12</li>
 <li>123</li>
</ul>
<scritp>
    var lii=document.getElementsByTagName('li');
        for(var i=0;i<lii.length;i++){
            console.log(i);   //3
            lii[i].οnclick=function(){
                console.log(lii[i].innerHTML);
            }
        }
</scritp>

上面会报错
原因：for循环中，最后i是为3的，因为当i=2时，再执行一次循环，然后i++，而下标是索引值，是从0开始的，只有0，1，2，所以是到不了3的，所以会报错
this指的是触发当前事件的对象，事件中，那个对象触发了事件则this就是谁，上面的错误可以改

<scritp>
    var lii=document.getElementsByTagName('li');
        for(var i=0;i<lii.length;i++){
            console.log(i);   //3
            lii[i].οnclick=function(){
                //console.log(lii[i].innerHTML);
                console.log(this.innerHTML);
            }
        }
</scritp>

事件中，触发谁this指向谁

自定义属性

自定义属性就是给标签添加已有属性之外的属性

<div class="box" id="box" tag="123"></div>   //在标签里添加了一个自定义属性tag
<script>
    var idd=document.getElementById('box');
	console.log(idd.tag);
    //在这里，自定义的属性在控制台是取不到的
    //需要在js中自定义属性
    idd.tlag=true;
    console.log(idd.tlag);   //true
</script>
/*
自定义属性就相当于给对象添加了一个值
var div{
	"id":"box",
	"class":"box"
}
再给他加一个值，不就是：div.tlag=true;
*/

自定义属性就相当于给对象添加了一个值

自定义索引值

索引一般用于下标一一对应

//自定义索引值
变量1[i].index=i;
//赋值给需要和他有链接的变量
变量2[this.index]...后面要做的事情

表单中一个比较特殊的元素

CheckBox，一般用于购物车，全选全不选

直接放代码吧，有不会的再说

<body>
    <h2>爱好</h2>
    <label>睡觉<input type="checkbox" checked></label>
    <label>吃饭<input type="checkbox" checked></label>
    <label>打李峥<input type="checkbox"></label>
    <label>睡觉<input type="checkbox"></label>
    <label>睡觉<input type="checkbox"></label>
    <label>睡觉<input type="checkbox"></label>
    <label>睡觉<input type="checkbox"></label>
    <br>
    <br>
    <button>全选</button>
    <button>反选</button>
    <button>重置</button>
    <script>
        var inp=document.querySelectorAll('input');
        console.log(inp[0].checked);//true
        var btn=document.querySelectorAll('button');
        btn[0].onclick=function(){
            for(var i=0;i<inp.length;i++){
                inp[i].checked='checked';
            }
        }
        btn[2].onclick=function(){
            for(var i=0;i<inp.length;i++){
                inp[i].checked='';
            }
        }
        btn[1].onclick=function(){
            for(var i=0;i<inp.length;i++){
                if(inp[i].checked == true){
                    inp[i].checked='';
                }else if(inp[i].checked == false){
                    inp[i].checked='checked';
                }
            }
        }
    </script>
</body>