js的三部曲、数组、循环、自定义引索知识点分享

js的三部曲、数组、循环、自定义引索

一、js的三部曲

           1、 获取元素(需要谁获取谁)

            2、 绑定事件(点击(onclick), 双击，鼠标移出，移出， 键盘按下...)

            3、 干什么事儿

 var obox = document.getElementById("box").innerHTML = "点击我有惊喜";

            obox.onclick = function(){

                // function 里写具体执行的操作

                alert("弹窗来了")

            }

二、数组

  •   JavaScript 数组用于在单一变量中存储多个值。

1、什么是数组？

  • 数组是一种特殊的变量，它能够一次存放一个以上的值。
  • 如果您有一个项目清单（例如，汽车品牌列表），在单个变量中存储汽车品牌应该是这样的：
 var cars = ["Audi", "BMW", "porsche"];
document.getElementById("demo").innerHTML = cars;
  • 不过，假如您希望遍历所有汽车并找到一个特定的值？假如不是三个汽车品牌而是三百个呢？
  • 解决方法就是数组！
  • 数组可以用一个单一的名称存放很多值，并且还可以通过引用索引号来访问这些值。

三、 for循环

  1、 var i=0  初始化循环变量

  2、i<5 判断条件   

  3、循环体

  4、i++ 更新循环变量  

  •     例如：for(var i=0;i<btn.length;i++){// btn.length 获取数组的长度
  • for 循环用于迭代序列（即列表，元组，字典，集合或字符串）。
  • 这与其他编程语言中的 for 关键字不太相似，而是更像其他面向对象编程语言中的迭代器方法。
  • 通过使用 for 循环，我们可以为列表、元组、集合中的每个项目等执行一组语句。
 for(var i=0;i<btn.length;i++){// btn.length 获取数组的长度
        console.log(i);
        // 自定义索引
        btn[i].index = i;
        btn[i].onclick=function(){
            //先清楚掉所以的span标签的class名称
            for(var j=0;j<btn.length;j++){
                btn[j].className = " ";
            }
            //点谁，就给谁加上class名称
            this.className = "active";

            // 改变图片的路径
            oImg.src = arr[this.index];
            //改变文字
            oTxt.innerHTML = this.index+1;
            console.log(this.index);
            n = this.index;
        }
    }

 

 四、自定义引索

1、自定义属性：

  • js可以为任何HTML元素添加任意个自定义属性
  • 假设有按钮
var btn=document.getElementsByTagName(‘input’)[0];

btn.abc=123;

btn.xyz=true;

相当于<input abc=123 xyz=true type=”button” value=“按钮”/>

2、添加索引值

（就是新加一个自定义属性，可以控制元素单独计数或者改变样式等）
for(var i=0;i<btn.length;i++){

btn[i].index=i; //自定义属性，索引值

btn[i].οnclick=function(){

this.index; //可以记录索引值，直接写i的话，i会在加载后显示btn.length，无法单独记录

}

}


案例：

<!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>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none;
        }
        .wrap{
            width: 1000px;
            height: 800px;
            background: url(img/bg.jpg) no-repeat;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -500px;
            margin-top: -400px;
        }
        #prev,#next{
            position: absolute;
            width: 25px;
            height: 45px;
            background: url(img/ar.png) no-repeat;
            
            top: 155px;
        }
        #prev{
            left: 13px;
        }
        #next{
            transform: rotate(180deg);
            right: 13px;
        }
        .pic{
            width: 536px;
            height: 356px;
            position: absolute;
            top: 170px;
            left: 297px;
        }
        img{
            vertical-align: top;
            width: 536px;
            height: 356px;
        }
        #txt{
            width: 536px;
            height: 71px;
            position: absolute;
            left: 297px;
            bottom: 185px;
            text-align: center;
            font: 20px/71px "微软雅黑";
            color: #666;
        }
        #btn {
            width: 100%;
            text-align: center;
            position: absolute;
            bottom: 5px;
        }
        #btn span{
            display: inline-block;
           
            margin: 0 5px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: white;
        }
        #btn .active{
            background-color: orange;
        }
    </style>
</head>
<body>
   <div class="wrap">
       <div class="pic">
            <a id="prev" href="javascript:;"></a>
            <img id="img" src="img/img1.jpg" alt="">
            <a id="next" href="javascript:;"></a>
            <p id="btn"><span class="active"></span><span></span><span></span><span></span><span></span></p>
       </div>
       <p id="txt">这是第 <span id="txt1">1</span> 张图片</p>
   </div>
  <script>
    // 1、找到谁  获取元素
    // 变量的命名规范
    //  1、只能由数字、字母、下划线组成  2、不能以数字开头  3、见面之意 
    var oNext =  document.getElementById("next");
    var oImg = document.getElementById("img");
    var oPrev = document.getElementById("prev");
    var oTxt = document.getElementById("txt1");
    var btn = document.querySelectorAll("#btn span");
    console.log(btn.length);
    var n=0;
    //数组
    var arr = ["img/img1.jpg","img/img2.jpg","img/img3.jpg","img/img4.jpg","img/img5.jpg"];


    //给span都加上点击事件
    // btn[0].onclick = function(){
    //     console.log(1);
    // }
    // btn[1].onclick = function(){
    //     console.log(2);
    // }
    // btn[2].onclick = function(){
    //     console.log(3);
    // }
    // btn[3].onclick = function(){
    //     console.log(4);
    // }
    // btn[4].onclick = function(){
    //     console.log(5);
    // }

    // for循环   1、 var i=0  初始化循环变量   2、i<5 判断条件   4、i++ 更新循环变量   3、循环体
    for(var i=0;i<btn.length;i++){// btn.length 获取数组的长度
        console.log(i);
        // 自定义索引
        btn[i].index = i;
        btn[i].onclick=function(){
            //先清楚掉所以的span标签的class名称
            for(var j=0;j<btn.length;j++){
                btn[j].className = " ";
            }
            //点谁，就给谁加上class名称
            this.className = "active";

            // 改变图片的路径
            oImg.src = arr[this.index];
            //改变文字
            oTxt.innerHTML = this.index+1;
            console.log(this.index);
            n = this.index;
        }
    }





    
    //2、加事件
    oNext.onclick = function(){
        n++;
        if(n>=5){
            n=0;
        }
        oImg.src = arr[n];
        oTxt.innerHTML = n+1;

        //先清楚掉所以的span标签的class名称
        for(var j=0;j<btn.length;j++){
                btn[j].className = " ";
            } 
        btn[n].className = "active";
       
    }

    // 点击左按钮图片向左切换
    oPrev.onclick = function(){
       n--;
       if(n<0){
            n=4;
       }
       oImg.src = arr[n];
       oTxt.innerHTML = n+1;
        //先清楚掉所以的span标签的class名称
        for(var j=0;j<btn.length;j++){
                btn[j].className = " ";
            } 
        btn[n].className = "active";
    }
  </script>
</body>
</html>

效果：

 

 

 

版权声明：本文为lak_an_ke原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。