【JavaScript 】JavaScript 初识，树欲千尺，唯有根深。

本文链接：https://blog.youkuaiyun.com/weixin_43270713/article/details/122161518

JavaScript

01-JS 的使用方式
04-代码/02-JS 中常见的数据类型.html
03-JS 中的函数.html
04-局部变量和全局变量.html
05-JS 装的判断语句.html
06-JS 数组.html
07-JS 循环.html
08-JS 获取页面标签.html
09-JS 操作页面标签的属性.html
10-定时器.html
11-jQuery 的使用.html
12-jQuery 选择器.html
13-选择集转移.html

01-JS 的使用方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 2. 内嵌式, 在 head 标签中,定义 script 标签, 在标签中书写 JS 代码 -->
    <script>
        // ctrl / js 的注释, JS html  都是解释型语言,代码从上到下执行
        alert('我是内嵌式 JS, 我执行了');
    </script>
    <!-- 3. 外链式, 在外部定义单独的 js 文件,书写 JS 代码,使用 script 标签的 src 属性引入 -->
    <script src="./js/main.js"></script>
</head>
<body>
    <!-- 1. 行内式, 给标签添加属性, 主要用于事件  事件="函数调用(参数)"
        alert 是系统中自带的函数,作用是 弹窗
    -->
    <input type="button" value="点我呀,点我呀" onclick="alert('点我干嘛')">
</body>
</html>

04-代码/02-JS 中常见的数据类型.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 变量的定义, var 变量名 = 数据值; 
        // 变量名, 由 字母 数字 下划线和 $ 组成,不能以数字开头, 匈牙利命名风格
        // 1. 数字类型 number 
        // 1.1 整数 
        var iAge = 10;
        // alert(iAge);  // 打印数据值
        // alert(typeof(iAge));   // 查看变量的数据类型
        console.log(iAge, typeof(iAge));
        // 1.2 小数
        var fHeight = 170.3;
        console.log(fHeight, typeof(fHeight));

        // 2. 字符串类型  string
        var sName = 'isaac';
        console.log(sName, typeof(sName));
        
        // 3. boolean  值(true, false)
        var bIsTrue = true;
        console.log(bIsTrue, typeof(bIsTrue));

        // 4. undefined  未定义的,
        var oA;  // 声明变量,没有给数据值
        console.log(oA, typeof(oA));

        // 5. null  空对象
        var oObject = null;
        console.log(oObject, typeof(oObject));
        
    </script>
</head>
<body>
    
</body>
</html>

03-JS 中的函数.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 定义一个函数,实现打印 hello world
        function fnHello(){
            console.log('hello world!')
        }

        // 函数调用
        fnHello()

        // 定义一个函数, 可以接收两个数字,对数字进行求和,并将求和的结果进行返回
        function fnSum(iNum1, iNum2){
            var iNum = iNum1 + iNum2;
            return iNum;
        }

        // 函数调用,由于函数有参数和返回值,所以需要调用的时候传参和接收返回值
        var result = fnSum(10, 20);
        console.log(result);

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

04-局部变量和全局变量.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 局部变量: 在函数内部定义的变量,称为局部变量,
        // 全局变量: 在函数外部定义的变量,称为全局变量
        // 1. 在函数内部能否直接读取全局变量的值, ====> 可以直接读取
        // 1.1 定义全局变量 
        var iNum = 100;
        // 1.2 定义函数
        function fnFunc(){
            // 1.3 直接打印全局变量的值
            console.log('函数内部访问全局变量的值:', iNum);
            // 2. 在函数内部能否直接修改全局变量的值  ====> 可以直接修改全局变量的值
            // 2.1 直接在函数内部修改全局变量值
            iNum = 200;

            // 3.1 定义局部变量 
            var iAge = 10;
            // 注意点, 在函数内部,定义变量,如果不加 var 关键字, 定义的变量是全局变量
            sName = 'isaac';
        }
        fnFunc()
        // 2.2 在函数调用之后,查看全局变量的值,有没有被修改
        console.log('函数外部访问修改后的全局变量的值:', iNum);
        // 3. 函数外部能否使用局部变量   ====> 不能访问局部变量的值
        console.log('sName的值:', sName);
        // 3.2 函数外部访问局部变量的值
        console.log('函数外部访问局部变量的值', iAge);
    </script>
</head>
<body>
    
</body>
</html>

05-JS 装的判断语句.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var iAge = 17;
        if (iAge >= 18){
            console.log('可以进入网吧为所欲为,浏览各种网站');
        }

        if (iAge >= 18){
            console.log('可以进入网吧为所欲为,浏览各种网站');
        } else {
            console.log('不满 18 岁,回去学习吧');
        }

        var fScore = 80;
        if (fScore >= 90){
            console.log("A");
        } else if (fScore >= 80){
            console.log("B");
        } else if (fScore >= 60) {
            console.log('C');
        } else{
            console.log("D")
        }
    </script>
</head>
<body>
    
</body>
</html>

06-JS 数组.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //  1. 数组的定义
        // 1.1 使用 Array 类创建
        var aArray = new Array(1, 2, 'hello');
        console.log(aArray, typeof(aArray));
        // 1.2 使用字面量的方式创建
        var aList = [1, 2, 3.14, 'isaac', [3, 6, 9]];
        console.log(aList, typeof(aList));

        // 2. 求数组中元素的个数,数组的长度 数组.length 属性
        console.log('元素个数为:', aList.length);

        // 3. 数组支持下标操作,但是没有负数下标
        // 访问不存在的下标, 得到的值是 undefined
        console.log(aList[0], aList[3], aList[100]);
        // 可以通过下标修改数组中的数据
        aList[3] = 'isaac NL';
        console.log(aList);
        // 直接修改不存在的下标值,在指定的下标位置添加数据,其余位置为空
        aList[10] = 10;
        console.log(aList, aList.length);

        // 4. 根据数据值,找到元素在数组中的第一个下标  indexOf
        // 找到了,返回的下标, 没有找到返回的是 -1
        console.log(aList.indexOf(3.14), aList.indexOf(1000));

        // 5. 尾部添加和删除
        aList.push('last');
        console.log(aList);
        aList.pop()
        console.log(aList);

        // 6. 根据下标,删除添加数据
        // splice(下标, 删除的元素个数, 添加的元素,...)
        aList.splice(2, 2);  // 只删除,不添加
        console.log(aList);
        aList.splice(2, 0, 3, 4, 5);  // 只添加,不删除
        console.log(aList);
        aList.splice(2, 2, 'hello', 'world');
        console.log(aList);
    </script>
</head>
<body>
    
</body>
</html>

07-JS 循环.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1. while 循环
        var i = 0;
        while (i < 5){
            console.log('写代码中....', i);
            i++;
        }

        // 2. for 循环, 遍历数组
        aList = ['郭德纲', '于谦', '小岳岳', '孙越']
        for (var i=0; i < aList.length; i++) {
            console.log(aList[i]);
        }
        /* 1. 执行表达式 1
        2. 执行表达式 2, 进行判断
        3. 根据第二步的判断结果,如果为 false, 循环不执行
        4. 根据第二步的判断结果,如果是 true, 进入循环中,执行循环中的代码
        5. 循环中的代码执行结束之后,执行表达式 3,
        6. 执行表达式 2, 重复 2 3 4 5 的步骤,直到条件 为 false 
        */ 

        // 3. do  while 
        do{
            console.log('我至少执行一次');
        } while(1 > 3);
    </script>
</head>
<body>
    
</body>
</html>

08-JS 获取页面标签.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script>
        // getElementById 通过 id 找到对应的标签,找到了就是标签对象,没有找到,返回 null
        var oDiv = document.getElementById('box');
        alert(oDiv + " ----  "  + typeof(oDiv));
    </script> -->

    <script>
        // 解决方案二: 想一种方法, 让标签全部定义完成之后,在执行 JS 代码
        // 便签全部定义完成之后, 会触发一个事件, window.onload 事件,
        // 当页面标签全部加载完成,执行函数中的代码 ,  JS 的入口函数
        window.onload = function(){
            var oDiv = document.getElementById('box');
            alert(oDiv + " ----  "  + typeof(oDiv));
        }
    </script>
</head>
<body>
    <div id="box">
        这是一个 div 
    </div>

    <!-- 解决方案一, 不建议 -->
    <!-- <script>
        // getElementById 通过 id 找到对应的标签,找到了就是标签对象,没有找到,返回 null
        var oDiv = document.getElementById('box');
        alert(oDiv + " ----  "  + typeof(oDiv));
    </script> -->
</body>
</html>

09-JS 操作页面标签的属性.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 获取页面标签, 在入口函数中定义
        window.onload = function (){
            // 1. 获取 input 标签
            var oInput = document.getElementById('name');
            // 获取 name 属性
            console.log('name属性:', oInput.name);
            console.log('class属性:', oInput.className);
            console.log('value 属性:', oInput.value);
            // 只能获取行内式的 css 属性
            console.log('style属性中的字体大小:', oInput.style.fontSize);
            // 设置 value 属性
            oInput.value = 100;

            // 获取 div标签
            var oDiv = document.getElementById('div1');
            console.log(oDiv.innerHTML);
            console.log(oDiv.innerText);
            oDiv.innerHTML = '好好学习';
        }

    </script>
</head>
<body>
    <input type="text" name="name" class="box" id="name" value="10" 
    style="font-size: 26px;">

    <div  id="div1">
        <p>
            这是一个 div 
        </p>
    </div>
</body>
</html>

10-定时器.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var oT = null;
        function fnClick(){
            oT = setInterval(alert, 2000, '好好学习')
        }

        function fnCalc(){
            clearInterval(oT);
        }
    </script>
</head>
<body>
    <div>
        <p>点击单次定时器按钮, 3s后弹出 hello</p>
        <!-- setTimeout(执行的函数名, 时间间隔, 第一个参数的参数) -->
        <input type="button" value="单次定时器" onclick="setTimeout(alert, 3000, 'hello')">

    </div>
    <div>
        <p>点击多次定时器按钮,间隔 2 秒, 弹出好好学习,点击 停止, 不再弹出</p>
        <input type="button" value="多次定时器" onclick="fnClick()">
        <input type="button" value="停止" onclick="fnCalc()">
    </div>
</body>
</html>

11-jQuery 的使用.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 注意点: 引入外部 JS 的 script 和自己书写的 js 代码的标签,不能是同一个,需要单独定义 -->
    <script src="js/jquery-1.12.4.min.js"></script>
    <!-- 不能使用上述 script 标签书写 JS 代码, 需要重新定义 -->
    <script>
        // 使用 JS 获取 div 标签
        window.onload = function() {
            var oDiv = document.getElementById('box');
            // alert(oDiv);
            console.log('原生的 js:', oDiv);
        }

        // 使用 jQuery 获取. 入口函数
        // $ 是 jQuery 中一个函数 
        // document 是 JS 对象, $(document)  jQuery 对象
        $(document).ready(function (){
            // jQuery 选择器  $() ID 选择器
            var $Div = $('#box');
            console.log('jquery:', $Div);
        });

        // jQuery 入口函数的简写
        $(function(){
            var $Div = $('#box');
            console.log('jquery 简写:', $Div);
        });
    </script>
</head>
<body>
    <div id="box">
        这是一个 div. 
    </div>
</body>
</html>

12-jQuery 选择器.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入 jQuery -->
    <script src="js/jquery-1.12.4.min.js"></script>
    <!-- 书写自己的 js 代码 -->
    <script>
        // jquery 的入口函数
        $(function(){
            // 标签选择器  $('标签')
            var result = $('div');
            console.log(result.length);  //2

            // id 选择器  $('#id')
            console.log($('#box').length);  // 1

            // 类选择器  $('.类名')
            console.log($('.box').length);   // 1

            // 层级选择器 $('选择器1 选择器2')
            console.log($('div p').length);  //2 

            // 属性选择器 $('选择器[属性=值]')
            console.log($('div[class="box"]').length);
        });
    </script>
</head>
<body>
    <div id="box"  class="box">
        这是第一个 div 
        <p>
            好好学习
        </p>
    </div>
    <div>
        这是第二个 div 
        <p>
            good good study
        </p>
    </div>
</body>
</html>

13-选择集转移.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $('div').css({'background': 'red'});

            // 选择集过滤 has('选择器')
            $('div').has('p').css({'font-size': '28px'});

            // eq(下标),  下标是从 0 开始
            $('div').eq(1).css({'color': 'blue'});
        });
    </script>
</head>
<body>
    <div>
        这是第一个 div  
        <p>
            好好学习
        </p>
    </div>
    <div>
        这是第二个 div  <br><br>
        good good study 
    </div>
</body>
</html>