JavaScript 学习 第四天 自定义属性

day04自定义属性

1、循环

双重for循环

for(var i = 0;i<2;i++){ //外循环循环父元素
   var oLi = oUl[i].getElementsByTagName("li"); //通过父元素获取到子元素
   for(var j = 0;j<oLi.length;j++){ //循环子元素
       oLi[j].style.border =  "1px solid red";
   }
}

while与do-while

1.while:先判断后执行
初始化循环变量
while(判断条件){
循环体
更新循环变量
}

2.do-while :先执行后判断
初始化循环变量
do{
循环体；
更新循环变量
}while(判断条件)

区别：
当第一次循环就不满足条件的时候，do-while会执行一次，while不会执行

var i = 0;
while (i < 0){
    console.log(i);
    i++;
}
var j = 0;
do{
    console.log(j);
    j++;
}while (j<0);

continue与break

break:结束循环

continue:结束本次循环

for-in

对象没有长度，不能使用for进行循环

 var obj = {//键值对  key:value  
             "name":"张立刚",
             "age":18,
             "height":180,
             "weight":200
         }    
         console.log(obj.name);
         console.log(obj["name"]);
         console.log(obj.length); //undefined  对象没有长度

使用for-in专门用来循环对象

语法:for(var 变量 in 循环的对象) 变量中存储每一次循环的key值

 for(var key in obj){//变量中存储每一次循环的key值
             console.log(key); //name age height weight  
             console.log(obj[key]); //.后面接的是字符串，用【】代替点
         }

2、this

this：this是一个特殊的对象，一般在函数中使用，在不同的地方代表的含义不一样，取决于被调用时所处的环境

//普通函数中----window
function sum() {
console.log(this);
}
sum(); 

/事件处理函数中this---指向触发事件的对象
//1.获取元素
var oBtn = document.getElementsByTagName("button");
//2.循环添加点击事件
for (var i = 0; i < oBtn.length; i++) {
    oBtn[i].onclick = function () {
         console.log(this.innerHTML)
     }
}

3、自定义属性

除系统定义的属性，其他都属于自定义属性

直接写在标签中的自定义属性，暂时获取不到。例：

<div flag="true"></div>
    <div flag="true"></div>
    <div flag="true"></div>
    <script>
        var oDiv = document.getElementsByTagName("div");
        //console.log(oDiv[0].flag); //undefined 

js中自定义属性

 //在js中，给标签自定义属性  操作属性：标签.属性名=属性值
        oDiv[0].flag = true;
        oDiv[1].flag = true;
        oDiv[2].flag = true;
        console.log(oDiv[0].flag);

自定义属性实例：

//2.点击改变高度
        for(var i = 0;i<oDiv.length;i++){
            oDiv[i].flag = true;
            oDiv[i].onclick = function(){
                //状态
                if(this.flag==true){
                    this.style.height = "200px";
                    this.flag = false;
                }else{
                    this.style.height = "40px";
                    this.flag = true;
                }
            }
        }

自定义索引实例：

var arr = ["imgs/pic1.jpg","imgs/pic2.jpg","imgs/pic3.jpg","imgs/pic4.jpg"];
    var oSpan = document.getElementsByTagName("span");
    var oImg = document.getElementsByTagName("img")[0];

    //1.添加点击事件
    for(var i = 0;i<oSpan.length;i++){
        oSpan[i].index = i;
        oSpan[i].onclick = function () {
            //this.index
            oImg.src = arr[this.index];
        }
    }