javaScript（1）-CSDN博客

本文链接：https://blog.csdn.net/ZXCNIUBI/article/details/100038982

文章目录

js

1. js的基本使用

首先，对于js来说写在html文件就可以的。
在这里插入图片描述

使用script的方法有两种，一种就是直接放在html文件中，至于放在head或者body中都是可以的，一般最好都是放在body中，而且最好放在body最后面，后面会解释为什么，第二种方法就是导入外部文件，就像css一样，最好把js文件放在同一个文件夹下面，效果就是这个样子
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js</title>
    <script>
        var box = document.querySelector(".box")
        box.innerText = "你真丑"
    </script>
</head>
<body>
    <div class="box">你真的帅</div>
</body>
</html>

在这里插入图片描述
如果这么写，你发现你没有改掉，所以你会说why,因为在这里是先要有这个div之后才能有改变，而代码的阅读顺序是从上到下进行，所以呢，他还没有看到这个代码就已经过去了，而假如放在下面就不一样了

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

</head>
<body>
    <div class="box">你真的帅</div>
    <script>
        var box = document.querySelector(".box")
        box.innerText = "你真丑"
    </script>
</body>
</html>

在这里插入图片描述
就成功实现了改名。
那如果有小伙伴说我一定要，放在前面的呢，也有办法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js</title>
    <script>
        window.onload = function (ev) {
            var box = document.querySelector(".box")
            box.innerText = "你真丑"
}
    </script>
</head>
<body>
    <div class="box">你真的帅</div>

</body>
</html>

其中的window.onload的意思是当整个屏幕都运行过一遍之后再来执行这个操作，也就不怕后执行了。

2.js中获取对象的方法

其实有很多方法，但我不是专业的前端人员，所以我们只需要掌握两个就可以了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js</title>
</head>
<body>
    <div class="box">你真的帅</div>
    <div class="box1">你真的帅</div>
    <div class="box2">你真的帅</div>
    <script>
        var box = document.querySelector(".box")
        console.log(box)
        var box1 = document.querySelectorAll("div")
        console.log(box1)
    </script>
</body>
</html>

在这里插入图片描述
其中第一个找到第一个符合条件的就不找了，而第二个是找到所有符合条件的。而这个功能最大的好处就是能够通过css选择器来调用，所以说css选择器的了解就很重要。

3.简单事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js简单事件</title>
    <style>
        .box1{
            height: 100px;
            width: 100px;
            background-color: blue;
        }
    </style>

</head>
<body>
    <div class="box1">我是一个盒子</div>
    <select name = "attr" id="">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <script>
        var box = document.querySelector("div");
        box.onclick = function () {
            console.log("单击")
        }//单机
        box.ondblclick = function () {
            console.log("双击")
        } //双击
        box.onmouseenter = function () {
            box.style.backgroundColor = "black"
        } //当你的鼠标移入到屏幕中时
        box.onmouseleave = function () {
            box.style.backgroundColor = "blue"
        }//当你的鼠标离开点击的屏幕时
        var sel = document .querySelector("select")
        sel.onchange = function () {
            console.log("选项改变了")
        }//当选择的选项变换的时候
        window.onresize = function () {
            console.log("窗口变了")
        } //当你页面窗口变小或者变大的时候
    </script>
</body>
</html>

这个就是经常用到的操作。

4.样式修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js简单事件</title>
    <style>
        .box1{
            height: 100px;
            width: 100px;
            background-color: blue;
        }
    </style>

</head>
<body>
    <div class="box1">我是一个盒子</div>
    <script>
        var box = document.querySelector("div");
        box.style.backgroundColor = "red"
        var a = "background"
        var b = "green"
        box.style[a] = b
        box.style.cssText = "width:200px; height:200px;"; //多个改写
    </script>
</body>
</html>

前面两个是单独改写，后面是多个，但是是重写就是说之前的就都重写了，但是重写的仅仅只是js样式，对于css样式，如果有的就改写，没有的不重写。

5.数据类型

js有6大数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js简单事件</title>

</head>
<body>
    <script>
        var name = "lalal";
        var e = NaN;
        var age = 18;
        var flag = true;
        var a;
        var b = null;
        var c = [1,2,3]
        var d = {name:"la",age:18}
        console.log(typeof name);
        console.log(typeof age);
        console.log(typeof flag);
        console.log(typeof a);
        console.log(typeof b);
        console.log(typeof c);
        console.log(typeof d);
        console.log(typeof e);

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

在这里插入图片描述
这里说两个点，第一其实null可以自己为一个数据类型，就是null数据类型，但是也是对象数据类型，第二个点就是NAN是not a number，但是他也是一个属于num类型的。