JavaScript学习（一）

最新推荐文章于 2022-02-28 11:09:28 发布

宋建国

最新推荐文章于 2022-02-28 11:09:28 发布

阅读量133

点赞数

分类专栏：前端技术

本文链接：https://blog.csdn.net/hot7732788/article/details/104667242

版权

前端技术专栏收录该内容

3 篇文章 0 订阅

订阅专栏

介绍

在这里插入图片描述

嵌入方式

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--第二种插入js的方式 内嵌js-->
    <script type="text/javascript">
        alert("hello word")

    </script>

    <!--第三种插入js的方法 外链式-->
    <script src="hello.js"></script>

</head>
<body>
    <!--第一种嵌入js的方式 行间事件-->
    <input type="button" name="" value="点击" onclick="alert('hellow word')">
</body>
</html>

第一种
第二种

第三种

在这里插入图片描述

变量

在这里插入图片描述

变量类型
命名规范

JS获取元素

js的特点就是他可以操作html，这也是他作为前端工具的特征之一
获取元素方法
操作元素属性

在这里插入图片描述

操作html标签之间包裹的信息

在这里插入图片描述

还可以通过标签获取元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            //通过标签名称获取li元素，生成一个选择集，赋值给aLi
            var aLi = document.getElementsByTagName("li");
            //读取选择集内元素的个数

            alert(aLi.length);//13

            //不能给选择集设计样式属性
            // aLi.style.backgroundColor = "gold"//这样给颜色不行

            //通过一个循环就可以设置背景了
            for(var i = 0;i<aLi.length;i++){
                aLi[i].style.backgroundColor = "gold";
            }

            var oU1 = document.getElementById("list1");
            var aLi2 = oU1.getElementsByTagName("li");
            alert(aLi2.length);
            for(i = 0;i<aLi2.length;i++){
                aLi2[i].style.backgroundColor = "green";
            }


        }
    </script>

</head>
<body>
    <ul id="list1">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>

    <ul id="list2">//ul.list2>li*5
        <li>11</li>
        <li>22</li>
        <li>33</li>
        <li>44</li>
        <li>55</li>
    </ul>
</body>
</html>