javascript

「已注销」

已于 2023-06-03 11:14:25 修改

阅读量83

点赞数

分类专栏： python 文章标签： javascript 开发语言 ecmascript

于 2023-05-30 22:26:03 首次发布

本文链接：https://blog.csdn.net/cs445579253/article/details/130957590

版权

python 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

js代码存在的位置：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menus{
            width: 200px;
            border: 1px solid red;
        }
        .header{
            background-color: gold;
            padding: 20px 10px;
        }
    </style>
</head>
<body>
    <div class="menus">
        <div class="header" onclick="myFunc()">中国</div>
        <div class="item">联通</div>
    </div>
    <!--javascript代码位置，推荐在这里，还可以在<head>标签中css代码后面-->
    <!-- javascript也可以写在专门的文件中然后再引入-->
    <script src="static/test.js"></script>
    <!--    <script type="text/javascript">
        function myFunc(){
            confirm("是否要继续")
        }
    </script>   -->
</body>
</html>

注释：

### 1.2 注释

- HTML的注释

  ```html
  <!-- 注释内容 -->
  ```

- CSS的注释，`style代码块`

  ```css
  /* 注释内容 */
  ```

- JavaScript的注释，`script代码块`

  ```javascript
  // 注释内容
  
  /* 注释内容 */

变量中字符串的相关操作：

  <script>
    var name = "  陈帅"; //定义字符串
    var age = String("18"); //定义字符串的另一种方式
    console.log(name, age);
    var v3 = name.trim(); //去除空白,生成一个新的字符串
    var v1 = age.length;
    var v5 = name[0]  //或者name.charAt(0),都是取某个位置上的元素
    var v2 = name.substring(0,2) //前取后不取
    console.log(v1,v2,v3,name)
  </script>

跑马灯案例：

<body>
  <span id="txt">欢迎中国联通领导陈帅莅临指导</span>
  <script type="text/javascript">


     //动态起来
     function show(){
         //去html中找到某个标签并获取他的内容（DOM）
         var tag = document.getElementById("txt") //获取一个标签对象
         var dataString = tag.innerText  //标签对象内部的文本
         //更新内容
         var firstChar = dataString[0];
         var other = dataString.substring(1,dataString.length);
         var newString = other+firstChar;
         //在html标签更新内容
         tag.innerText = newString;
     }
     //定时器，每隔一段时间执行一次函数
     setInterval(show, 1000)

  </script>
</body>

数组：

<body>
  <span id="txt">欢迎中国联通领导陈帅莅临指导</span>
  <script type="text/javascript">
    var v1 = [1,2,34,5];
    var v2 = Array([1,2]);//定义数组的两种方式
    v1[0] = "陈帅";
    v1.push("来年通风"); //尾部追加元素
    v1.unshift("lal"); //首部追加元素
    v1.splice(1,0,"zhuijia"); //在指定位置追加元素，第一个表示索引位置，第二个是固定0，第三个表示追加的内容
    v1.pop()  //尾部删除
    v1.shift()  //首部删除
    v1.splice(2,1)  //指定位置删除，第一个表示索引位置，第二个固定是1
    for(var item in v1){
        console.log(item)  //item的内容是当前的索引位置
        console.log(v1[item])  //通过这样可以打印值
    }
    for(var i=0;i<v1.length;i++){  //另一种循环方式
        console.log(v1[i])
    }
  </script>
</body>

案例：动态数组

<body>
  <ul id="city">

  </ul>
  <script type="text/javascript">

    
    var cityList = ['北京', '上海', '南京'];
    for(var idx in cityList) {
      var text = cityList[idx];

      //创建<li></li>标签
      var tag = document.createElement("li")
      //在li标签里写入内容
      tag.innerText = text;
      // 添加到id=city那个标签里面。dom
      var parentTag = document.getElementById("city");
      parentTag.appendChild(tag);
    }
  </script>
</body>

对象（类似于python中的字典）：

  <script>
    info1 = {
        name:"chen",//javascript定义对象的时候，键 既可以加双引号也可以不加双引号
        age:18
    }
    info2 = {
        "sex":"man",
        height:176
    }
    console.log(info1["name"])
    console.log(info2.sex)  //两种不同的获取内容的方式
    delete info2.sex
    delete info2["sex"]  //删除某一元素的两种方式
    console.log(info2.sex)
    //循环
    for(var key in info1){
        console.log(info1[key]) //for循环中的key获取的是键值  key=name/age
    }
  </script>

动态列表：

<body>
    <table border="1">
        <thead>
            <tr>
                <th>编号</th>
                <th>名字</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody id="body">

        </tbody>
    </table>
    <script type="text/javascript">
        datalis = [
            {id:1,name:"chen",age:18},
            {id:2,name:"chen",age:18},
            {id:3,name:"chen",age:18}
        ]

        for(var idx in datalis){
            var info = datalis[idx];
            var tr = document.createElement("tr")  //创建一个tr标签
            for(var key in info){
                var text = info[key];  //保存获取的值

                var td = document.createElement("td");  //创建一个td标签
                td.innerText = text;  //在td标签内部写入内容
                tr.appendChild(td);  //将td添加到tr标签
            }
            var body = document.getElementById('body')  //获取tbody标签对象
            body.appendChild(tr)  //将tr添加到body标签中
        }
        console.log(tr)
    </script>
</body>