潭州课堂25班：Ph201805201 WEB 之 JS 第四课 (课堂笔记)

JS 引入方式

在 HTML 中写入

写在的标签里

<script>
    
</script>
推荐 放在 </body> 结束之前

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <div class="box">你好同学</div>



    <script>
        var box=document.querySelector('.box');             //  获取对象 
        box.innerText='我好，';
    </script>
</body>
</html>

导入 js 文件

<script src="1.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <div class="box">你好同学</div>


    <script src="1.js"></script>
    <script>
        var box=document.querySelector('.box');             //  获取对象
        box.innerText='我好，';
    </script>
</body>
</html>

// 1.js

var box=document.querySelector('.box');             //  获取对象
box.style.color='red';



获取对象

获取对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 30px;
             200px;
            background: #525d68;
        }
    </style>
</head>
<body>
    <div>我就是我</div>
    <div id="box1">你就是你</div>
    <div class="box2">他就是他</div>

    <script>
        var box = document.getElementsByTagName('div') ;     //  通过标签获取对象
        console.log(box[0].innerText);

        var box1 = document.getElementById('box1');         //  通过 id 获取对象
        console.log(box1.innerText);

        var box2 = document.getElementsByClassName('box2');
        console.log(box2[0].innerText);

        // CSS 选择器
        var box3 = document.querySelector('div');
        console.log(box3.innerText);

        var box4 = document.querySelector('#box1');
        console.log(box4.innerText);

        var box5 = document.querySelector('.box2');
        console.log(box5.innerText);

        var box6 = document.querySelectorAll('div');        // querySelectorAll 拿到全部对象 用列表
        console.log(box6[0].innerText);

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

样式修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 30px;
             200px;
            background: yellow;
        }
        .test{
            font-size: 100px;
            color: gray;
        }
    </style>
</head>
<body>
    <div>你好同学</div>

    <script>
        //单个样式修改
        var box = document.getElementsByTagName('div')[0];
        // box.style.fontSize='50px';
        // box.style.color='red';

        //多个样式同时修改
        // box.style.cssText='height;300px; 200px; color:blue';
        // box.style.cssText=a+ ':' +b;  ==    box.style[0]=b;          // 用于函数中变量传参，

        // //赋值型
        box.className='test';
        

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

鼠标事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            height: 30px;
             100px;
            background: skyblue;
            line-height: 30px;
            text-align: center;
            cursor: pointer;            /*小手*/
        }
        .box1{
            height: 200px;
             500px;
            background: gray;
            margin-top: 20px;
        }
        .box2{
            height: 200px;
             500px;
            background: gray;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="box">点击事件</div>
    <div class="box1"></div>
    <div class="box2"></div>

    <script>
        // 鼠标单双 击 事件
        var box = document.getElementsByClassName('box')[0];
        box.onclick=function () {
            // console.log('单击')
            var im = document.getElementsByTagName('div')[1];
            im.style.background = "url('https://res.shiguangkey.com//file/201805/17/20180517113424433990524.jpg')"
        };
        box.ondblclick=function () {
            console.log('双击')
        };


        // 鼠标移入移出

        var box2 = document.getElementsByTagName('div')[2];
        box2.onmouseenter = function(){                     // 鼠标移入
            box2.style.background = 'red';
        };
        box2.onmouseleave = function(){                     // 鼠标移出
            box2.style.background = 'yellow';
        }

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

事件操作补充

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <select id="aa">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </select>


    <script>
        window.onresize = function (ev) {       // 窗口尺寸发生变化，触发
            console.log('123456879')
        };

        //下拉框事件
        var sel = document.getElementById('aa');
        sel.onchange = function () {            // 下拉框事件
            console.log('000000000000')
        };
    </script>
</body>
</html>

属性操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="box">属性操作</div>

    <script>
        // 获取元素
        var box = document.getElementById('box');

        //操作合法属性 （增 删 改 查）
        //增
        box.className = 'test';
        //改
        box.className = 'aa';
        // 查
        console.log(box.className);
        //删
        box.removeAttribute('class');

        //操作自定义属性 （增 删 改 查）
        //增
        box.setAttribute('aa','bb')   ;          // <div id="box" aa="bb">属性操作</div>
        // 改
        box.setAttribute('cc','dd')   ;          // <div id="box" cc="dd">属性操作</div>
        // 查
        console.log(box.hasAttribute('cc'))
        // 删
        box.removeAttribute('cc');
    </script>
</body>
</html>

数据类型

查找数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


    <script>
        var a=5;
        console.log(typeof  a);

        var b = 'aaa';
        console.log(typeof b);

        console.log(typeof false)

        var c;
        console.log(typeof c);          // 当 var 了一个变量，但没给其值，就是 undefined 数据类型

        //对象类型  数组
        var d = [1,3,2,4];
         console.log(typeof d);   //object

        //
        var  e={'k1':'v1', 'k2':'v2'};   //object
        console.log(typeof e);


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