JavaScript基础笔记-CSDN博客

本文链接：https://blog.csdn.net/red_red_red/article/details/116637973

1.严格检查模式

前提：IDEA需要设置支持ES6 语法 'use strict'; 代表严格检查模式，避免因为JavaScript的随意性而产生的一些问题
必须写在<script></script>第一行
局部变量一般采用let来进行定义

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>严格检查模式</title>
        <script>
            'use strict';
            //let指定局部变量
            let i;
            //啥都不加，只有 i = 10; 这个i就是全局变量
            i = 10;

        </script>
    </head>
    <body>

    </body>
</html>

2.函数

在JavaScript中函数也有属性和方法，所以函数也是对象。

arguments代表传递进来的所有参数，是一个数组

rest 可以获取除了已经定义的参数以外的参数

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>函数</title>
        <script>
            'use strict';

            <!--养成规范：所有的变量定义都放在最开头，便于代码的维护-->
            function abs(x, ...rest) {//rest参数只能写在最后边，用...标识
                // 可以手动抛出异常
                if (typeof x !== "number") {
                    throw "not a number";
                }
                //arguments代表传递进来的所有参数，是一个数组
                for (var tmp of arguments) {
                    console.log(tmp);
                }
                //rest 可以获取除了已经定义的参数以外的参数
                console.log(rest);
                if (x > 0) {
                    return x;
                } else {
                    return -x;
                }
            }
            //JavaScript中可以传递任意个参数，也可以不传递参数
        </script>
    </head>
    <body>

    </body>
</html>

3.class

constructor方法是一个特殊的方法，这种方法用于创建和初始化一个由class创建的对象。一个类只能拥有一个名为 “constructor”的特殊方法。如果类包含多个constructor的方法，则将抛出一个SyntaxError 。

一个构造函数可以使用 super 关键字来调用一个父类的构造函数。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Class</title>
        <script>
            class person {//原型对象
                constructor(name) {
                    this.name = name;
                }

                say() {
                    alert("我是person");
                }
            }

            class student extends person {
                constructor(name, grade) {
                    super(name);
                    this.grade = grade;
                }

                say_stu() {
                    alert("我是student");
                }
            }
        </script>
    </head>
    <body>

    </body>
</html>

4.JSON

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JSON</title>
        <!--在JavaScript中一切皆为对象，任何js的类型都可以用json-->
        <!--
        格式：
        对象都用 {}
        数组都用 []
        所有的键值对都用 key:values
        -->
        <script>
            'use strict';
            var person = {
                name: 'xiaoming',
                age: 13
            }
            console.log(person);
            //对象转化为json字符串
            var jsonperson = JSON.stringify(person);
            console.log(jsonperson);
            //json字符串转化为对象
            var student = JSON.parse('{"name":"xiaozhang","age":23}')
            console.log(student);
        </script>
    </head>
    <body>

    </body>
</html>

5.DOM

浏览器网页就是一个DOM树形结构
更新：更新DOM节点
遍历DOM节点：得到每个DOM节点
删除：删除一个DOM节点
添加：加上一个新的节点

要操作一个DOM节点，就必须要先得到这个DOM节点

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>DOM</title>
    </head>
    <body>
        <div id="father">
            <h1>H1标签</h1>
            <p id="p1">p1标签</p>
            <p id="p3">p3标签</p>
            <p id="p4">p4标签</p>
            <p id="p5">p5标签</p>
            <h2 id = "h2">h2标签</h2>


            <p class="p2">p2标签</p>
        </div>
    </body>
    <script>
        'use strict';
        //对应 CSS 中的选择器
        var f = document.getElementById("father");
        var h1 = document.getElementsByTagName("h1");
        var p1 = document.getElementById("p1");
        var p2 = document.getElementsByClassName("p2");

        var childs = f.children;
        console.log(f.firstElementChild);
        console.log(f.lastChild);
        //操作文本
        p1.innerText = "这是text文本";
        console.log(p1);
        p1.innerHTML = "<h2>这是html超文本</h2>";
        //!!!只有document.getElementById("")的对象才有innerText()和innerHTML()方法
        //操作js
        p1.style.color = 'red';

        //删除节点
        //先获取父节点，然后再通过父节点来删除节点
        var father = p1.parentElement;
        father.removeChild(p1);
        //！！！ 注意这个删除是动态的过程,所以父节点的孩子节点是变化的
        father.removeChild(father.children[0]);
        father.removeChild(father.children[1]);

        //追加
        //已经存在的节点
        var temp = document.getElementById("h2");
        father.appendChild(temp);
        //通过js，创建新的节点
        var newid = document.createElement('p');
        newid.id = "newid";
        newid.innerText = "这是新创建的节点";
        father.appendChild(newid);


    </script>
</html>

6.表单验证

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单验证</title>
    </head>
    <body>
        <form action="post" onsubmit="checked()">
            <p>
                <span>姓名:</span><input type="text" id="username" required>
            </p>
            <p>
                <span>密码:</span><input type="password" id="password" required>
            </p>
            <p>
                <span>性别:</span>
                <input type="radio" name="sex" value="man" id="boy">男
                <input type="radio" name="sex" value="woman" id="girl">女
            </p>
            <!--绑定事件 onclick 被点击 -->
            <p>
                <button type="button" onclick="checked()">提交</button>
            </p>
        </form>
        <script>
            var username = document.getElementById("username");
            var boy = document.getElementById("boy");
            var girl = document.getElementById("girl");
            //得到输入框中的值
            console.log(username.value);
            //修改输入框中的值
            username.value = "12138";

            //对于单选框、多选框等固定的值，boy.value得到的值只能是当前的值
            console.log(boy.checked);//如果为true就是选中了，如果是false就是没有被选中

            function checked() {
                var username = document.getElementById("username");
                var password = document.getElementById("password");
                //MD5算法
                console.log(username.value);
                console.log(password.value);
            }
        </script>
    </body>
</html>

7.jQuery

jQuery就是javascript的一个库，把我们常用的一些功能进行了封装，方便我们来调用，提高我们的开发效率。极大地简化了 JavaScript 编程。

jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到。

jQuery的功能：

1、jQuery的查询功能
2、jQuery 对DOM结构的改变
3、改变元素的属性和样式
4、读取和改变元素的内容
5、jQuery动画

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery</title>
        <!--记住要引入jQuery-->
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    </head>
    <body>
        <!-- 公式: $(selector).action -->
        <a href="" id="lable">点击链接</a>
        <script>
            //记住公式
            $('#lable').click(
                function () {
                    alert("hello jQuery");
                }
            )

            //选择器:就是CSS中的选择器，CSS中的所有选择器，全部都能用
            //标签选择器
            $('h1').click();
            //id选择器
            $('#id').click();
            //类选择器
            $('.class').click();
        </script>
    </body>
</html>

jQuery事件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery事件</title>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <style>
            #divMouse {
                width: 500px;
                height: 500px;
                border: 2px solid darkred;
            }
        </style>
    </head>
    <body>
        mouse:<span id="moveMouse"></span>
        <div id="divMouse">
            鼠标在这里移动
        </div>
        <script>
            //当前网页加载完毕后，响应事件
            $(function () {
                $('#divMouse').mousemove(function (e) {
                    $('#moveMouse').text('x:' + e.pageX + '     y:' + e.pageY)
                })
            });
        </script>
    </body>

</html>

jQuery操作DOM

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery操作DOM</title>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    </head>
    <body>
        <ul id="father">
            <li id="lable1">标签一</li>
            <li id="lable2">标签二</li>
        </ul>
        <script>
            var str1 = $('#father li[id = lable1]').text();//里边没有值就是查看
            var str2 = $('#father li[id = lable1]').text("修改标签1");//里边有值就是修改
            console.log(str2);
            $('#father').html();
            $('#father li[id = lable2]').html("<h2>你好</h2>");

            //修改style
            $('#father li[id = lable2]').css({"fontSize":"30px" ,"backgroundColor":"#ccc"});
        </script>
    </body>
</html>