JS 简介

JS 组成 JS 特点
ECMAScript：代码编写规范 跨平台的web脚本语言
DOM：描述处理网页内容的方法和接口 向 HTML 页面添加交互行为
BOM：描述与浏览器进行交互的方法和接口 可与服务器进行通信

JS 位置

同 CSS

<body>
        <input type="button" id="btn" value="按钮" />
        <script>
            document.getElementById('btn').onclick=function(){
                alert(1);
            }
        </script>
    </body>
  • document.getElementById('btn') ：获取 id 为 btn 的元素。
  • onclick ：出发动作。
  • function(){} ：调用函数。

JS 简单实例

需求1：改变按钮的颜色

步骤：

  1. 拿到按钮
    document.getElementById('btn')

  2. 给按钮添加点击事件
    按钮.onclick=function(){
    // 把点击后要做的事件放到这个里面
    // 让按钮的背景色变为黄色
    // 修改按钮的属性
    }

  3. 修改属性

    元素.style.样式＝值

实现代码

<body>
<input type="button" name="btn" id="btn" value="按钮" />
<div id="box"></div>
<script>
    document.getElementById('btn').onclick=function(){
            document.getElementById('btn').style.background='red';
    };
</script>
</body>

需求2：点击按钮，让div的宽度与高度进行变化

步骤：

  1. 拿到按钮
    document.getElementById('btn')

  2. 给按钮添加点击事件

    按钮.onclick=function(){
    1、拿到要改的元素
    document.getElementById('box')
    2、修改它的宽度与高度属性
    div.style.width=值
    div.style.height=值
    }

  3. 修改属性

    元素.style.样式＝值

实现代码

<body>
<input type="button" name="btn" id="btn" value="按钮" />
<div id="box"></div>
<script>
        document.getElementById('btn').onclick=function(){
                document.getElementById('box').style.width='200px';
                document.getElementById('box').style.height='200px';
};
</script>
</body>

window.onload

页面中的代码在一般情况下会按从上到下的顺序，从左往右的顺序执行。当代码走到20行的时候，它会去页面中找一个 id 为 btn 的元素，但是代码走到20行的时候，以下的代码是没有加载的，所以它找不到，这样的话就会报错。

解决

window.onload=function(){
    document.getElementById('btn').onclick=function(){
        document.getElementById('box').style.width='200px';
        document.getElementById('box').style.height='200px';
    };
};

window.onload什么时候用？

  • 当js代码需要获取页面中的元素的时候，如果这script放在元素的前面，那就需要加 window.onload。
  • 如果script是放在了元素后面，那就不需要加 window.onload。

变量

声明变量方式

  • var 变量名＝值
<script>
    var kaivon=12;
    //console.log() 在控制台中输入内容
    console.log(kaivon);
    console.log(kaivon);

    var a=20;
    console.log(a);

    var 3c=30;      //这个变量名是不能用的，如果用了就会报错
    console.log(3c);
</script>

变量命名规则

  1. 允许是字母，数字，下划线(_)，美元符($)任意组合而成
  2. 不允许数字开头
  3. 不允许使用关键字和保留字

变量的命名风格

  1. 语义化
    写的变量名尽量贴近实际的意思：nav
  2. 驼峰命名
    • 大驼峰
      首字母就大写（系统当中的对象或是一个构造函数）
      Math、Date
    • 小驼峰
      从第二个单词开始首字母大写：getElementById
      get：获取
      Element：元素
      By：通过
      Id：id
      getelementbyid
var a3=12;  //字母+数字
console.log(a3);        //12

var _b5=20; //_+字母+数字
console.log(_b5);   //20

var $k=40;  //美元符+字母
console.log($k);        //40

例子

<script>
    var box=document.getElementById('box');
    document.getElementById('btn').onclick=function(){
        box.style.width='200px';
        box.style.height='200px';
        box.style.margin='10px';
        box.style.padding='20px';
    };
</script>

函数

复用代码，它复用是多行代码。函数的名字在声明的时候尽量遵守变量的全名规则。

函数的定义和调用

function 函数名(){
  //这里面的代码，是要复用的代码，这里面可以放多行代码
}
//例子
<script>
    function fn(){
        alert(1);
    }
    //调用函数
    fn();
</script>

匿名函数

没有名字的函数，匿名函数不能直接声明，会报错。当匿名函数是以被赋值的形式所出现，并且它是被事件调用。

事件 window.onload
赋值 ＝

匿名函数的使用

<script>
    window.onload = function (){
        alert(1);   
    };
</script>

实例操作

<style>
  #box{
    width: 100px;
    height: 100px;
    background: #f00;
  }
</style>
<script>
    //匿名函数
    window.onload=function(){
    var btn1=document.getElementById('btn1');
    var btn2=document.getElementById('btn2');
    var box=document.getElementById('box');


    //给每个按钮添加点击事件
    btn1.onclick=function(){
      //点击后，要修改box的属性
      setStyle();
    };

    //给按钮2添加同样的事情
    btn2.onclick=function(){
      setStyle();
    };

        //函数
    function setStyle(){
      box.style.width='200px';
      box.style.height='200px';
      box.style.margin='10px';
      box.style.padding='20px';
      box.style.background='green';
    }
  };
</script>
</head>
<body>
        <input type="button" id="btn1" value="按钮1" />
    <input type="button" id="btn2" value="按钮2" />
    <div id="box"></div>
</body>

属性操作

属性操作方式

  1. . 的
    元素.属性名
    • 如果属性是单一属性，用点操作符是取不到的，而且还会报错。
    • 如果想用点操作符去获取带横杠的属性，那首先要把横杠去掉，然后把横杠后面的第一个字母大写。
  2. [ ] 的
    如果属性中带横杠，用[ ]的方式去操作属性。
<script>
    var btn=document.getElementById('btn');
    btn.onclick=function(){
        //alert(btn.type);      //button
        console.log(btn.id);        //btn
        console.log(btn.value); //按钮

        btn.value='小按钮';        //修改属性

        //console.log(btn.style.font-size);

        console.log(btn.style['font-size']);        //20px
        console.log(btn.style.fontSize);        //20px
        console.log(btn['id']); //btn
        /*
         * font-size        这个属性不能用点直接去获取，因为js不认识横杠。
         */
    };
</script>

常用属性

value 属性

value：表单的值

<script>
    window.onload=function(){
        var btn=document.getElementById('btn');
        var text=document.getElementById('text');

        console.log(btn.value);     //按钮
        console.log(text.value);    //这里是一段文字

        text.value='kaivon';
    };
</script>
<input type="button" id="btn" value="按钮" />
<input type="text" name="text" id="text" value="这里是一段文字" />

className 属性

className
注意：class是js中的一个保留字。它是不允许我们用的。在获取class的时候，不能用class，用className

<script>
    var kaivon=document.getElementById('kaivon');

    console.log(kaivon.class);      //undefined（×）
    console.log(kaivon.className);  //kaivon （√）
</script>

innerHTML 属性

innerHTML

  1. 获取到是一个标签对里的所有内容。
  2. 如果标签对当中有其它的标签，那一样会拿的到 。
  3. 在给innerHTML设置值的时候，如果这个值里面有html标签，那放到网页当中，会把它解析成一个真正的html标签。
<script>
    window.onload=function(){
        var btn=document.getElementById('btn');
        var box=document.getElementById('box');

        btn.onclick=function(){
            console.log(box.innerHTML); 

            //设置
            box.innerHTML='<span>kaivon</span>';
        };
    };
</script>
<input type="button" id="btn" value="按钮" />
<div id="box"><p>标题</p>这里是一段文字</div>
window.onload=function(){
    var text=document.getElementById('text');
    var btn=document.getElementById('btn');
    var box=document.getElementById("box");

    btn.onclick=function(){
        var val=text.value;     //用户输入的内容
        var newText='<p>'+val+'</p>';
        box.innerHTML=newText+box.innerHTML;    
    };
};

20220130173401572

href 和 src

href 连接的地址
src 图片的地址

  1. href与src取到的是绝对地址，不是属性里的值。
  2. 切记不要拿href与src取到的值去做判断。

属性操作的例子

20220129170055007

  • 需求

    点击按钮获取输入框里的属性名称与属性值，对div进行设置。

  • 分析

    1. 获取输入框、按钮、box
    2. 给按钮添加点击事件
    3. 获取到输入框里的内容
    4. 改变box的样式
<script>
    window.onload=function(){
    // 1、获取输入框、按钮、box
        var text1=document.getElementById('text1');
        var text2=document.getElementById('text2');
        var btn=document.getElementById('btn');
        var box=document.getElementById('box');

        // 2、给按钮添加点击事件
        btn.onclick=function(){
      // 3、获取到输入框里的内容
            var name=text1.value;
            var val=text2.value;
            console.log(name,val);

      // 4、改变box的样式
            box.style[name]=val;
      /*
       * 点操作属性的时候，后面只能跟真正的属性名称，不能跟变量名
       * []操作属性的时候，里面可以放属性名称与变量名，
             * 如果放的时属性名，那要加引号，如果放的是变量名，那不需要加引号
       */
        };
    };
</script>
<body>
  <input type="text" id="text1" value="" />
  <input type="text" id="text2" value="" />
  <input type="button" id="btn" value="按钮" />
  <div id="box"></div>
</body>

流程控制

if 语句

if(1<2){
    //当1<2这个条件成立，这里的代码才会执行
    alert('成立');
}

if(1<0){
    //1<0是不成立的，所以这里面的代码不会执行
    alert('不成立');
}

alert(1<2); //true
alert(1<0); //false

if else 语句

if(1>2){
    //条件满足了，这里的代码执行了（只有当条件成立的时候，才走这里的代码
    alert('成立');
}else{
    //当条件不成立的时候，执行这里的代码
    alert('不成立');
}

elseif 语句

var n=12;

if(n<10){
    //这个条件成立，说明n是小于10的
    alert('n小于10');
}else if(n==10){
    //这个条件成立，说明n是等于10
    alert('n等于10');
}else{
    //以上条件都不成立，才会走这里的代码，代表n大于10
    alert('n大于10');
}

流程控制实例

window.onload=function(){
    var next=document.getElementById("next");
    var prev=document.getElementById("prev");
    var pic=document.getElementById("pic");
    var n=1;
    //下一张按钮点击事件
    next.onclick=function(){
        n++;
        if(n>4){
            n=4;
        }
        pic.src='img3/'+n+'.jpg';
    };

    //上一张按钮点击事件
    prev.onclick=function(){
        n--;
        if(n<1){
            n=1;
        }
        pic.src='img3/'+n+'.jpg';
    };
};

20220130174552253

版权属于：KevinBean

本文链接：https://www.kevinbean.top/index.php/default/1368.html

转载时须注明出处及本声明

最后修改：2022 年 04 月 12 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏