Javascript

花荣04

已于 2023-12-28 00:45:14 修改

阅读量479

点赞数 10

文章标签： javascript 前端开发语言

于 2023-12-01 17:06:52 首次发布

本文链接：https://blog.youkuaiyun.com/2301_79689379/article/details/134739225

版权

12.1

第二章

12.26

javascript中的数组

JavaScript中的string对象

json对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
   /*  var 数组长度是可变的
   类型也可变 */

    /* var arr = [1,2.3,4]; */
    var arr = new Array(1,2,3,4);
   /*  console.log(arr[1]);
    arr[10]=100;
    console.log(arr[10])
    arr[11]="abcd";
    console.log(arr);
 */
   /*  for循环会显示全部的函数
    array.forEach只会显示有值的函数 */
    /* for(var i = 0; i<=arr.length; i++){
        console.log(arr[i]);
    }
    arr.forEach(function(e){
        console.log(e)

    }) */
   
    /* 箭头函数:(...)=>(...)--简化函数定义 */
   /*  arr.forEach((e) => {
        console.log(e);
    }); */



 /*  添加元素 */

   arr.push(2,3,4)
   console.log(arr);
   arr.splice(0,2);
   console.log(arr);

</script>
</html>

12.27

Javascript DOM事例

DOM作业1

DOM作业2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img id="h1" src="../素材/img/off.gif">
    <br><br>
    <div class="cls">武汉科技大学</div>
    <div class="cls">信息管理</div>
    <input type="checkbox" name="hobby">movie
    <input type="checkbox" name="hobby">travel
    <input type="checkbox" name="hobby">game
    
</body>
<script>
    //1.点亮灯
     var img = document.getElementById('h1');
     img.src = "../素材/img/on.gif" 

    //2.将所有的div标签内容后面加上very good（红色字体）
    var divs = document.getElementsByClassName('cls');
    for(var i = 0; i<divs.length; i++){
        const div = divs[i];
        div.innerHTML= div.innerHTML+"<font color='red'>very good</font>";
    }


    //3.将所有的复选框呈现选中状态
    var ins = document.getElementsByName('hobby');
    for(var i = 0; i< ins.length;i++){
       const element =ins[i];
       element.checked = true;
    }


</script>
</html>