JavaScript

CYX_cheng

已于 2024-07-20 09:45:47 修改

阅读量520

点赞数 21

文章标签： javascript 开发语言

于 2024-07-11 22:43:51 首次发布

本文链接：https://blog.csdn.net/qq_65186476/article/details/140362715

版权

JavaScript的使用

script代码可以嵌入在head或者body，执行顺序从上到下，建议放在head

标签引用

<script>
    alert("Hello,World!");
</script>

文件引用

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

JavaScript的输入

向 prompt() 输入任意内容会以弹窗形式出现在浏览器中，一般提示用户输入一些内容。

prompt('请输入您的年龄') 默认是字符串型，需要类型转换

let uname = prompt('请输入姓名')

JavaScript的输出

页面输出

<script>
document.wirte() 显示出内容
document.write('<h1>我是标题</h1>')
</script>

控制台输出

<script>
    console.log("输出一条日志");//最常用
    console.info("输出一条信息");
    console.warn("输出一条警告");
    console.error("输出一条错误");
</script>

弹出窗口输出

<script>
    alert("Hello,World!");
</script>

JavaScript的注释

单行注释：// 注释内容
多行注释：/* 注释内容 */

语法

变量声明

var 变量名/ let 变量名

数据类型

数值类型number

字符串类型String 可以双引号，也可以单引号

对象类型object

布尔类型boolean

函数类型function

变量类型可以变化 name = "123"; name = 100;

typeof运算符

使用typeof操作符可以用来检查一个变量的数据类型。

console.log(typeof 123);
console.log(typeof "Hello,World!");
console.log(typeof true);
console.log(typeof undefined);
console.log(typeof null);

特殊值

undefined 变量未赋初始值时，默认undefined,使用typeof对没有初始化和没有声明的变量，会返回“undefined”。

null 空值，比较undefined和null是否相等，会返回true。从语义上看null表示的是一个空的对象，所以使用typeof检查null会返回一个Object。

NaN 非数值Not a Number 100 * "hello"

比较运算符

===	左右两边是否`类型`和`值`都相等（重点）
==	左右两边`值`是否相等

console.log(2 === '2') true 隐式转换

console.log(NaN === NaN) // NaN 不等于任何人，包括他自己涉及到NaN都是false

小数运算先化成整数再变成小数

逻辑运算符

JS中，所有的变量都可以作为一个boolean类型的变量去使用

0、null、undefined、""(空串)、NaN都认为是false

&&

JS中的“与”属于短路的与，如果第一个值为false，则不会检查第二个值
非布尔值时：如果两个都为true，则返回第二个值，如果两个值中有false，则返回靠前的false的值
左边为false就短路

||

JS中的“或”属于短路的或，如果第一个值为true，则不会检查第二个值
非布尔值时：如果两个都为false ，则返回第二个值，如果两个值中有true，则返回靠前的true的值
左边为true就短路

数组

使用字面量创建

var arr = [1, "2", 3, "4", 5, "6", 7, "8", 9];

使用空数组创建

var arr = [];
arr[0] = 1;
arr[1] = "abc";

使用对象创建

var arr = new Array();
arr[0] = 1;
arr[1] = "abc";

var arr = new Array(1, "abc");

如果跳过下标赋值，中间未赋值的元素为undefined

遍历

for(let i = 0; i < arr.length; i ++)

方法

push()方法：该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度
pop()方法：该方法可以删除数组的最后一个元素，并将被删除的元素作为返回值返回
unshift()方法：该方法向数组开头添加一个或多个元素，并返回新的数组长度
shift()方法：该方法可以删除数组的第一个元素，并将被删除的元素作为返回值返回
splice()方法：该方法可以用于删除数组中的指定元素，该方法会影响到原数组，会将指定元素从原数组中删除，并将被删除的元素作为返回值返回

函数

快速入门

<script>
    funciton hi() {
        alert("hello");
    }
</script>

<body>
    <button onclick = "hi()">点击这里</button>
    //绑定了一个点击事件
</body>

基本语法

函数声明创建函数

function 函数名([形参1,形参2,...,形参N]) {//形参不需要指定类型，只写名字
    函数体
    return 表达式
}
//调用 函数名(实参列表)

<script>
    funciton f(n1, n2) {
        return n1 + n2;
    }
    alert(f(1,2));
</script>

函数表达式创建函数

var 函数名  = function([形参1,形参2,...,形参N]) {
    语句....
}

<script>
    let f1 = funciton(n1, n2) {
        alert(n1 + n2);
    }
    f1(1,2);
    //f1指向了函数，也可以赋值给其他变量，更加灵活
    let f3 = f1;
</script>

细节

函数重载会覆盖掉上一次的定义

如果实参的数量少于形参的数量，则没有对应实参的形参将是undefined

arguments隐含参数(作用域在function函数内)，是一个数组对象

<script>
    funciton f() {
        console.log(arguments);
    }
    f(1,2,3);

    funciton ff(n) {
        console.log(n);
        console.log(arguments);
    }
    ff(1,2,3,4);//按顺序匹配，仍会把所有实参给arguments
</script>

对象

创建对象

第一种方式(Object形式)

var person = new Object();
person.name = "孙悟空";
person.age = 18;
person.say = function() {console.log("person的信息 " + this.name);}
console.log(person);
person.say();

第二种方式({}形式)

var person = {
    属性名：值，//逗号
    属性名：值，
    函数名：function(){}
};

属性名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

访问属性

对象名['属性名'] obj['age']

对象名.属性名 obj.age

遍历

遍历取到的是字符串 需要用到对象名['属性名']

var person = {
    name: "zhangsan",
    age: 18
}

for (var k in person) {
    var personVal = person[k];
    console.log(k + ":" + personVal);
}

事件

onload加载完成事件

静态注册

<script>
    funciton f() {
        alert('静态注册');
    }
</script>
<head>
    <body onload="f()">
    <body>
</head>

动态注册

<script>
    //windows表示页面被加载完毕
    //function(){}表示加载完毕后，要执行的函数/代码
    windows.onload = funciton f() {
        alert('动态注册');
    }
</script>
<head>
    <body>
    <body>
</head>

onclick单击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script >
        function f1() {
            alert('OK');
        }

        // let btn = document.getElementById('btn');这时候页面还没加载完成

        //当页面加载完毕后再进行动态绑定
        window.onload = function () {
            //1、先拿到id=btn的button对应dom对象
            //2、通过dom对象动态的绑定onclick事件
            //3、通过document的getElementById获取对应的dom对象
            let btn = document.getElementById('btn');
            btn.onclick = function () {
                alert('Hi');
            }
        }
    </script>

</head>
<body>
        <button onclick="f1()">sayOK按钮</button>
        <button id="btn">sayHi按钮</button>
</body>
</html>

onblur失去焦点事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script >
        function f1() {
            var fname = document.getElementById("fname");
            fname.value = fname.value.toUpperCase();
        }

        // let btn = document.getElementById('btn');这时候页面还没加载完成

        //当页面加载完毕后再进行动态绑定
        window.onload = function () {
            var fname2 = document.getElementById("fname2");
            fname2.onblur = function () {
                fname2.value = fname2.value.toUpperCase();
            }
        }
    </script>

</head>
<body>
        输入字母<input type="text" id="fname" onblur="f1()"/>
        输入字母<input type="text" id="fname2"/>
</body>
</html>

onchange内容发生改变事件

可以用在select下拉表单

onsubmit表单提交事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script >
        function f1() {
            var username = document.getElementById("username");
            var pwd = document.getElementById("pwd");
            if(username.value == "" || pwd.value == "") {
                alert("用户名和密码不能为空，不能提交")
                return false;
            }
            return true;
        }

        window.onload = function () {
            var form2 = document.getElementById("form2");
            form2.onsubmit = function () {    //onsubmit绑定的函数，会直接将结果(f,t)返回给submit
                if(form2.username.value == "" || form2.pwd.value == "") {
                    alert("用户名和密码不能为空，不能提交")
                    return false;
                }
                return true;
            }
        }
    </script>

</head>
<body>
    注册用户一
    <form action="OK.html" onsubmit="return f1()">
        <input type="text" id="username" name="username"/><br/>
        <input type="password" id="pwd" name="pwd"/><br/>
        <input type="submit" value="注册用户">
    </form>
    <br/>
    注册用户二
    <form action="OK.html" id="form2">
        <input type="text" id="username" name="username"/><br/>
        <input type="password" id="pwd" name="pwd"/><br/>
        <input type="submit" value="注册用户">
    </form>
</body>
</html>

DOM

概述

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被结构化为 对象树，映射成树结构。

HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

查找 HTML 元素

方法	描述
document.getElementById(id)	通过元素 id 来查找元素。
document.getElementsByTagName(name)	通过标签名来查找元素。
document.getElementsByClassName(name)	通过类名来查找元素。
document.querySelector(CSS选择器)	通过CSS选择器选择一个元素。
document.querySelectorAll(CSS选择器)	通过CSS选择器选择多个元素。
document.getElementsByName(name)	通过name来查找元素。

获取 HTML 的值

方法	描述
元素节点.innerText	获取 HTML 元素的 inner Text。
元素节点.innerHTML	获取 HTML 元素的 inner HTML。
元素节点.属性	获取 HTML 元素的属性值。
元素节点.getAttribute(attribute)	获取 HTML 元素的属性值。
元素节点.style.样式	获取 HTML 元素的行内样式值。

改变 HTML 的值

方法	描述
元素节点.innerText = new text content	改变元素的 inner Text。
元素节点.innerHTML = new html content	改变元素的 inner HTML。
元素节点.属性 = new value	改变 HTML 元素的属性值。
元素节点.setAttribute(attribute, value)	改变 HTML 元素的属性值。
元素节点.style.样式 = new style	改变 HTML 元素的行内样式值。

修改 HTML 元素

方法	描述
document.createElement(element)	创建 HTML 元素节点。
document.createAttribute(attribute)	创建 HTML 属性节点。
document.createTextNode(text)	创建 HTML 文本节点。
元素节点.removeChild(element)	删除 HTML 元素。
元素节点.appendChild(element)	添加 HTML 元素。
元素节点.replaceChild(element)	替换 HTML 元素。
元素节点.insertBefore(element)	在指定的子节点前面插入新的子节点。

查找 HTML 父子

节点常用属性

空格是文本节点，只要换行就会出现，undefined

应用

弹出文本框内容

innerText&&innerHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script >
        window.onload = function () {
            var h = document.getElementById("h");
            h.onclick = function () {
                alert(h.innerText);//文本
                alert(h.innerHTML);//包含在里面的html内容
            }
        }
    </script>

</head>
<body>
    <h1 id="h"><div>你好</div></h1>
</body>
</html>

表单选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script >
        function selectAll() {
            var sports = document.getElementsByName("sport");//sport是nodelist集合
            for(var i = 0; i < sports.length; i ++)
                sports[i].checked = true;
        }
        function selectNone() {
            var sports = document.getElementsByName("sport");
            for(var i = 0; i < sports.length; i ++)
                sports[i].checked = false;
        }
        function selectReverse() {
            var sports = document.getElementsByName("sport");
            for(var i = 0; i < sports.length; i ++)
                sports[i].checked = !(sports[i].checked);
        }
    </script>

</head>
<body>
    <input type="checkbox" name="sport" value="zq" checked="checked">足球
    <input type="checkbox" name="sport" value="tq">台球
    <input type="checkbox" name="sport" value="ppq">乒乓球<br/>
    <button onclick="selectAll()">全选</button>
    <button onclick="selectNone()">全不选</button>
    <button onclick="selectReverse()">反选</button>
</body>
</html>

创建图片

        function addImg() {
            //创建图片
            var img = document.createElement("img")
            img.src = "/img/1.png";
            img.width = 100;
            //展示，添加到body
            document.body.appendChild(img);
        }

获取ul下的所有li节点

 var lis = document.getElementById("language").getElementsByTagName("li");

获取ul下的所有子节点

 var lis = document.getElementById("sel01").childNodes；
//如果使用 document.getElementById("sel01").childNodes 获取
//的是object text 和 object htmloptionelemen
//包括换行(空文本)undefined，如果不希望得到text对象，需要将所有内容放在一行


//还有一个以前方法
//sel01 是 HtmlSelectElement => 本身就有集合特点
var sel01 = document.getElementById("sel01");
for (var i = 0; i < sel01.length; i++)
    alert(sel01[i].innerText)

获取第一个子节点

var sel01 = document.getElementById("sel01");
alert(sel01.firstchild);//是按照 .childNodes 得到第一个子节点 object text
alert(sel01[0]);// 直接是得到第一个 option 节点 object htmloptionelemen

获取父节点

var sel01 = document.getElementById("sel01");
alert(sel01.parentNode);

设置文本域

var sel01 = document.getElementById("sel01");
sel01.innerText = "大家好";

ES6新特性

let

在代码块中，var作用域无限制，let限制在代码块中

var可以声明多次（重复），let只能声明一次

var存在变量提升(后面有这个变量，但前面已经用了)，let不存在变量提升

console.log(x); //只有这一句，提示没有声明
var x = "tom";//var声明之后，会输出undefined

        let name = "abc";
        //使用，可以输出对象的完整信息
        console.log("name", name);
        //使用+ 字符串拼接，如果name是一个对象，会输出object，不会输出完整信息
        console.log("name" + name);

const常量

常量在定义时，必须赋值，赋值后不能修改

解构赋值

解构赋值是对赋值运算符的扩展
是一种针对数组或者对象进行模式匹配，然后对其中的对象进行赋值
主要有两种形式：数组解构和对象解构

数组解构

        let arr = [1, 2, 3];
        //如果要看某个变量的类型
        console.log("arr=>", arr);
        //传统
        let x = arr[0], y = arr[1], z = arr[2];
        console.log(x, y , z);
        //ES6
        let [a, b, c] = arr;
        console.log(a, b, c);
        let [n1, n2, n3] = [100, 200, 300];

对象解构

        let monster = {name: "tom", age: 20};
        //传统，对象名.属性名
        console.log(monster.name, " ", monster.age)
        //取名要和对象的属性名保持一致，使用{ },顺序可以改变
        //如果不一致就是undefined
        //把monster对象的属性，赋值给{name, age}
        let {name, age} = monster;
        //也可以
        let {name, age} = {name: "kite", age: 18};
        console.log(name, " ", age);


        //在方法上解构
        function f1({name, age}) {
            console.log("name=", name, " ", "age=", age);
        }
        f1(monster);

模板字符串

当遇到字符串与变量拼接的情况使用模板字符串
换行会原生输出
可以放表达式，比如1+2
字符串中调用函数

使用反引号 ``

内容拼接变量时，用${xxx}包住变量

document.write('我今年${i + 3}岁了')
img[i].src = `img/${i + 4}.png`;


let str1 = `for(int i = 0; i < 10; i ++) {
    System.out.println(i);
}`;
console.log(str1);

let name = "tom"
//找最近的name变量进行替换，没找到就是空串
let str2 = `名字叫${name}`;



function sayHi(name) {
    return "h1 " + name;
}
let str3 = `sayHi()的返回结果是${sayHi(name)}`;

声明对象的简写方式

        //传统
        const name = "tom";
        const age = 18;
        let monster = {name: name, age: age};
        //ES6
        //{name, age}表示对象的属性名是name和age
        //属性的值从变量或常量得来
        let monster2 = {name, age};
        console.log("monster=>", monster2)

对象方法的简写方式

        //传统
        let monster = {
            name: "tom",
            age: 18,
            sayHi: function () {
                console.log("信息: name=", this.name)
            }

        }
        monster.f = function() {console.log("123");}
        monster.sayHi();
        //ES6
        let monster2 = {
            name: "tom",
            age: 18,
            sayHi() {
                console.log("信息: name=", this.name);
            },
            f() {
                console.log("hhh");
            }
        }
        monster2.sayHi();

对象运算符扩展

        let cat = {name: "小花猫", age: 2};
        // let cat1 = cat;
        //拷贝对象(深拷贝)互不影响
        let cat2 = {...cat};
        //合并对象(深拷贝)
        let monster = {name: "tom", age: 10};
        let car = {brand: "奔驰", price: 10000};
        let monster_car = {...monster, ...car};

箭头函数

        //传统
        let f1 = function (n) {
            return n * 2;
        }
        console.log(f1(2));
        //箭头函数
        let f2 = (n) => {
            return n * 2;
        }
        console.log(f2(2));
        //简写
        let f3 = n => n * 2;



        //函数也可以传给一个变量
        function hi(f4) {
            console.log(f4(100));
        }
        hi(n => n + 100); 



        function f8(arr, fun) {
            console.log(fun(arr));
        }
        f8([1,2,3,4,5], (arr) => {
            let sum = 0;
            for (let i = 0; i < arr.length; i++)
                sum += arr[i];
            return sum;
        });

对象解构

        let monster = {
            name: "红孩儿",
            age: 1000,
            skill: ['红缨枪', '三昧真火']
        };
        //传统方式
        function f1(monster) {
            console.log(monster.skill);
        }
        f1(monster);

        //箭头函数
        //要用{ }包起来
        //f2传入对象monster
        //f2形参是{skill}，会把monster对象的skill属性赋给skill
        //前提：{skill}的skill和monster的skill属性是一致的
        //顺序不影响
        let f2 = ({skill,age}) => {
            console.log(skill[0]," ", age);
        }
        f2(monster);