html学习笔记3

最新推荐文章于 2025-01-28 09:25:14 发布

原创最新推荐文章于 2025-01-28 09:25:14 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #学习 #笔记

1.javascript的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 内嵌式 -->
    <script>
        alert("我是内嵌式的js代码");
    </script>
    <!-- 外链式 -->
    <script src="js/main.js"></script>
</head>
<body>
    <!-- 行内式 -->
    <input type="button" value="按钮" onclick="alert('你点我了!')">
</body>
</html>

2.变量的使用和数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        //定义数字类型的变量
        var iNum1 = 1;
        var fNum1 = 2.5;
        //定义字符串
        var sName = "李四";
        //定义boolean类型
        var bIsOk = true;
        //定义undefind类型
        var unData;
        // 定义空对象
        var oData = null;
        //定义JavaScript对象类型
        var oPerson = {
            name:"王五",
            age:20
        }
        // alert(iNum1);
        // alert(fNum1);
        // alert(sName);
        //查看数据类型使用typeof
        // alert(typeof(iNum1));
        // alert(typeof(fNum1));
        // alert(typeof(sName));
        // alert(typeof(bIsOk));
        // alert(typeof(unData));
        // alert(typeof(oData));
        // alter(typeof(oPerson));
        alert(oPerson.name);
        console.log(oPerson.name);

        var iNum2 = 3, sStr = '李四';
        console.log(iNum2);
        console.log(sStr);

    </script>
</head>
<body>
    
</body>
</html>

3.函数的定义和调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //定义函数的关键字function
        function fnShow(){
            alert('我是一个无参数无返回值的函数');
        };
        //调用函数执行函数里面的代码
        fnShow()

        //定义一个有参数有返回值的函数
        function fnShow(iNum1,iNum2){
            var iResult = iNum1 + iNum2;
            return iResult
            alert('测试代码');
        }

        var iNum = fnSum(1, 2);
        alert(iNum);
    </script>
</head>
<body>
    
</body>
</html>

4.局部变量和全局变量的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //局部变量:在函数内定义的变量叫局部变量，只能在函数内部使用
        function fnShow(){
            var iNum = 1;
            alert(iNum)
        }
        //调用函数
        fnShow()
        //局部变量不能在函数外使用
        //alert(iNum);
        //全局变量:在函数外定义的变量叫全局变量，可以在不同函数内使用，并且不同函数共享全局变量
        var iNum1 = 1;

        function fnModify(){
            alert(iNum1);
            iNum1 = 3;
            //++ 等价于 += 1
            iNum1++
            alert(iNum1);
        }

        fnModify()
        alert("函数外访问的全局变量" + iNum1);
    </script>
</head>
<body>
    
</body>
</html>

5.条件判断结合比较运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var iNum = 5;
        var iStr = "5";
        //在js里面如果数字和字符串进行比较，会自动把字符串转成数字类型再进行比较
        if(iNum == iStr){
            alert("条件成立");
        }

        if(iNum < iStr){
            alert("条件成立");
        }else{
            alert("条件不成立");
        }
    </script>
</head>
<body>
    
</body>
</html>

6.获取元素标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //js的内置对象,html的文档对象
        // 如果获取的对象是null, 表示标签没有获取成功
        function fnLoad(){
        var oP = document.getElementById("p1");
        alert(oP);
        }
        //页面标签和数据都加载完成以后会触发onload事件
        window.onload = fnLoad;
    </script>
</head>
<body>
    <p id="p1">呵呵，我是一个段落标签</p>
</body>
</html>

7.标签属性的获取和设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .btnstyle{
            background: yellow;
            font-size: 30px;
        }
    </style>

    <script>
        window.onload = function(){
            //根据id获取标签对象
            var oBtn = document.getElementById("btn1");
            // 获取标签的属性
            alert(oBtn.type);
            alert(oBtn.value);
            // 设置标签的属性
            oBtn.name = "username";
            //设置样式的属性
            //oBtn.style.background="red";
            //相当于设置class, 以后通过类选择器给标签添加样式
            //注意点：class变成classname
            oBtn.className = "btnstyle"
            oBtn.style.fontSize = "30px";
        };
    </script>

</head>
<body>

    <input type="button" value="按钮" id="btn1">
    
</body>
</html>

8.获取标签内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        window.onload = function(){
            // 根据标签id获取标签对象
            var oDiv = document.getElementById("div1")
            // 获取标签内容
            alert(oDiv.innerHTML);
            oDiv.innerHTML = "<a href='http://www.baidu.com'>百度</a>"
        }
    </script>


</head>
<body>
    <div id="div1">
        哈哈，不要睡觉!
    </div>
    
</body>
</html>

9.数组的定义和数组操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //定义数组
        var aArray1 = new Array(1, 2, 3);
        console.log(aArray1);
        //自变量方式创建，相当于直接赋值一个数组，数组的表现形式是一对中括号
        var aArray2 = [3, 6, 9];
        console.log(aArray2);
        alert(aArray2);
        //多维数组
        var aArray3 = [[1, 2, 3], [3, 6, 9]];
        console.log(aArray3);
        alert(aArray3[0][1]);
        var aArray4 = [3, 6, 9];
        alert(aArray4.length);
        //js里面不支持负数下标
        aArray4[1] = 26
        console.log(aArray4);
        //追加数据
        aArray4.push('hello');
        console.log(aArray4);
        //删除最后一个元素,这里pop不支持根据下标删除
        var oValue = aArray4.pop()
        console.log(oValue);
        console.log(aArray4);
        //插入数据
        //1.开始删除的索引
        //2.删除的个数
        //3.插入的数据
        aArray4.splice(1, 0, '苹果', '香蕉');
        console.log(aArray4);


    </script>
</head>
<body>
    
</body>
</html>

10.循环语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var aArray = [1, 3, 9];

        //for 循环遍历数组
        for(var index = 0; index < aArray.length; index++){
            //根据下标获取数据
            var oValue = aArray[index];
            alert(oValue);
        }
        //开始取值的下标
        var index = 0
        while (index < aArray.length){
            var oValue = aArray[index];
            alert(oValue);
            index++;
        }

        

    </script>
</head>
<body>
    
</body>
</html>

11.字符串拼接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var sName = '李四';
        var iAge = 20;
        var sSex = '男';
        var sResult = sName + sSex;
        alert(sResult);
        //字符串和数字进行拼接，底层自动把数字类型转成字符串，这种操作叫隐式类型转换
        sResult = sName + iAge
        alert(sResult);
    </script>
</head>
<body>
    
</body>
</html>

12.定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 定时器:根据指定的时间间隔延时调用指定的函数 -->
    <script>
        function fnShow(name, age){
            alert("ok" + name + age);
            alert(tid)
            //销毁定时器
            clearTimeout(tid);
        }

        //根据时间间隔调用一次函数的计时器
        //1.定时器要执行的函数
        //2.时间间隔
        //3.参数，多个参数使用逗号分隔
        //var tid = setTimeout(fnShow, 2000, '李四', 20)

        function fnShowInfo(name, age){
            alert("ok" + name + age)
        }

        function fnStop(){
            //alert(tid);
            //销毁定时器
            clearInterval(tid);
        }

        // //根据时间间隔重复函数的计时器
        var tid = setInterval(fnShowInfo, 3000, '李四', 22);



    </script>
</head>
<body>
    <input type="button" value="停止" onclick="fnStop();">
    
</body>
</html>