其他分享
首页 > 其他分享> > 2022-08-24 第八组 卢睿 学习心得

2022-08-24 第八组 卢睿 学习心得

作者:互联网

目录

JavaScript

脚本语言,解释型
主要用来给HTML网页增加动态功能

通常的js是运行在浏览器环境下的

JS的两种模型

DOM:文档对象模型 document
BOM:浏览器对象模型 window

node js

运行在计算机环境下,服务器技术,不能操作BOM和DOM,但是它可以操作文件,能操作数据库,实际上是一门后端技术

JS解释器

不同的浏览器,JS解释器不一样
Chrome--- v8
node--- v8
safari--- JavaScriptCore

ECMAScript和JavaScript

ECMAScript

ES
一套规范

JavaScript

JS
具体的实现

JS基本上是web前端的核心
JS使用
JS底层
JS解析过程
JS优化

向body打印输出

document.write(123)

JS的位置

最好在最后一个body的最上方
页面的加载顺序是从上到下
JS是用来控制页面的显示方式
需要等待页面加载完成,再执行JS

JS的数据类型

自动类型推断,弱类型

数组 number
字符型 string
布尔型 boolean

其他

null 空:定义了,值为空
undefined 未定义,没有声明过
NaN 非数字

数组
对象

变量的声明

    <script>
        var v1 = 10;
        var v2 = 1.5;
        var v3 = "你好";
        var v4 = '我好';
        var v5 = true;
        var v6 = null;
        //数组
        var v7 = [1,2,3,4,5];
        document.write(v7[2])
        //对象
        var v8 = {
            "username":"admin",
            "password":"123456",
            "id":1001
        }
        document.write(v8.username)
    </script>

ES6声明变量语法

新的声明变量的关键字

let num = 1;
num = 2;

声明常量的关键字

const num = 1;

数组

Array()是一个函数,返回值是一个空数组
JS里的方法不是java里的方法,JS里的函数相当于java里的方法

let arr = Array;
Array.

在JS中,函数可以当做《类》使用

let arr = new Array()

可以理解为JS中的数组就是java中的集合

let arr = [1,2,3,4,5]
arr[100] = 10;
document.writeln(arr + "<br>");
document.writeln(arr.length)

函数(Java的方法)

function plus(){
            let a = 1;
            let b = 2;
            return(a+b);
        }
        console.log(plus())

对象


<script>
            function plus(){}
            // 对象
            // Array()返回一个空数组
            // Object()返回一个空对象
            // let obj = new Object();
            function User(name) {
                this.name = name;
            }
            // 创建了一个user对象
            // 我们之前定义的this.name就是这个对象的属性
            // 我现在的user对象中有一个name属性,值是张三
            let user = new User("张三");
            console.log(user.name);

            let obj = Object();
            // JS对象的属性
            obj.name = "李四";
            obj.age = 30;
            // JS对象的方法
            obj.eat = function() {
                console.log("我正在吃东西...");
            }
            // 对象调方法
            obj.eat();

            // json串
            let teacher = {
                name:"王五",
                age: 35,
                drank: function() {
                    console.log("我正在喝酒...");
                }
            }
            // teacher.drank();
            console.log(teacher['drank']());
        </script>

判断和循环

在JS中,if条件
规定:0、null、undefined为false,剩下的都是true

let a = 0;
            if(undefined){
                console.log(a);
                console.log("哈哈哈");
            }else {
                console.log("false");
            }

遍历数组

    let arr = [1,2,3,4,5];
    for (let i = 0; index < arr.length; i++) {
        const element = arr[i];
    }
    for (i in arr) {
        console.log( arr[i]);
    }

遍历对象

let student = {
            name:"小明",
            age:10
        }
        
        for (i in student) {
            console.log(attr);
            console.log(student[attr]);
        }

常用工具对象

String

charAt,indexOf,lastIndexOf,
replace,concat,match,
substring,substr,toUpperCase
toLowerCase

Math

random,ceil,
floor,round

Date

getDate,getDay
getMonth,getYear
getHours,getMinutes

Array()

<script>
            /*
                常用工具对象
                Array()
            */
           let arr1 = [1,2,3];
           let arr2 = [9,8,7];
        //    console.log(arr1.concat(arr2));
           arr1.push(10);
           // 移除数组中的最后一个元素
           arr1.pop();
           // 移除数组中的第一个元素
           arr1.shift();
           console.log(arr1);
        </script>

对字符串进行编码

let name = "你好";
        //对字符串进行编码
document.write(escape(name))    

把一个字符串解析成JS代码执行

let js = "alert('哈哈哈')";
eval(js)

DOM编程 Document Object Mode1

文档本身就是一个文档对象document
所有的HTML元素都是元素结点
所有的HTML属性都是属性结点
元素的文本是文本结点
注释结点(一般不用)

获取元素结点

根据id属性获取对应的元素结点

通过id获取到的是唯一的一个结点

let div = document.getElementById("div1");

根据标签名获取对应的元素结点

通过标签名获取到的是一堆标签元素结点

let div = document.getElementsByTagName("div");

根据class样式获取对应的元素结点

通过class样式获取的是一堆标签元素结点

let div = document.getElementsByClassName("div1")
console.log(div[0]);

新方法

querySelector

querySelector找到和传入的选择器匹配的第一个元素
返回值是一个元素结点

let div = document.querySelector("div");
console.log(div);
querySelectorAll

querySelectorAll找到和传入的选择器匹配的所有元素
返回值是一堆元素结点

let divs = document.querySelectorAll("div")
console.log(divs[0]);

innerHTML和innerText

<script>
            let div = document.querySelector("div");
            // innerHTML可以获取到HTML标签
            console.log(div.innerHTML);
            // innerText只能获取到文本
            console.log(div.innerText);

            let div2 = document.querySelector(".div2");
            div2.innerHTML = "<h1>我是div2里面的h1</h1>";
            div2.innerText = "<h1>我是div2里面的h1</h1>";
        </script>

新建一个元素结点并追加到元素上

<style>
            .mydiv {
                width: 200px;
                height: 200px;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <button onclick="fun()">点我!!!</button>
        <div id="container"></div>
        <script>
            function fun(){
                // 新建一个元素节点
                let myDiv = document.createElement("div");

                // 给我们自己新建的div加样式
                myDiv.setAttribute("class","mydiv");

                // 如果有id,尽量使用id
                let container = document.querySelector("#container");
                // innerHTML或innerText赋值只能附字符串
                // container.innerHTML = myDiv;
                container.append(myDiv);
                /*
                    每次点击=号,在下方显示计算的历史记录!
                */
            }   
            
        </script>

删除按钮

 <body>
        <button onclick="delOne()">删除某一个子元素</button>
        <button onclick="del(this)">删除自己</button>
        <button onclick="delAll()">清空</button>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>

        <script>

            function delOne() {
                let ul = document.querySelector("ul");
                let lis = document.querySelectorAll("li");
                ul.removeChild(lis[2]);
            }

            function delAll() {
               // 清空ul
               let ul = document.querySelector("ul");
               ul.innerHTML = ""; 
            }

            function del(obj) {
                // console.log(obj);
                // 找到要删除的元素
                // let btn = document.querySelector("button");
                // console.log(btn)
                // 元素.remove方法直接删除
                // btn.remove();
                obj.remove();

                /*
                    删除当前的记录
                    清空所有记录
                */

            }
        </script>
    </body>

拿结点

<body>
        <ul>
            <li><a href="#">1</a></li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <script>
            // 获取当前节点的所有子节点
            let uls = document.querySelector("ul");
            // 只拿html节点
            // console.log(uls.children);

            // 全text和li节点
            // console.log(uls.childNodes);

            /*
                从某一个角度来说。
                字节点相对的状态
            */
            // console.log(uls.children[0].children);
        </script>
    </body>

案例(计算器)

<!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>
    </head>
    <body>
        <input type="text" class="num1">
        <select class="oper">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" class="num2">
        <button onclick="calc()">=</button>
        <input type="text" readonly class="result">
        <hr>
        <button onclick="cls()">清空历史记录</button>
        <ol id="history"></ol>

        <script>
            /* 定义一个不重复的变量,用它来当做
                button和li共同的id
            */
            let r = 1;
            function calc() {

                // 获取第一个数
                let num1 = document.querySelector(".num1").value;
                // 获取第二个数
                let num2 = document.querySelector(".num2").value;
                let result = document.querySelector(".result");
                /* 
                    下拉菜单我们要找的元素是select,选择的是哪一个
                    选项,这个select的value值就是哪一个选项的value值
                */
                let oper = document.querySelector(".oper");

                result.value = eval(num1 + oper.value + num2);

                let li = document.createElement("li");
                // 生成历史记录的时候,加上按钮
                /*
                    并且处理id的问题,加单击事件
                */
                li.innerHTML = num1 + oper.value + num2 + "=" + eval(num1 + oper.value + num2) + "<button id=b" + r +" onclick='remself(this)'>删除</button>";

                // 自我删除
                /*
                    li按照自定义的规则,li处理id的问题
                */
                li.setAttribute("id","l"+r);
                // 标记自增
                r++;

                let ol = document.querySelector("#history");
                ol.append(li);

                document.querySelector(".num1").value = "";
                document.querySelector(".num2").value = "";
                
            }  
            
            function cls() {
                // 拿到历史记录的ol
                let ol = document.querySelector("#history");
                ol.innerHTML = "";
            }

            function remself(obj) {
                // 把拿到的b1转换成li
                let li = document.getElementById(String(obj.id).replace("b","l"));
                // 删除自己
                li.remove();
            }

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

标签:24,结点,console,log,08,JS,let,2022,document
来源: https://www.cnblogs.com/lurui711/p/16622430.html