JavaScript

最新推荐文章于 2026-06-22 19:44:33 发布
原创 最新推荐文章于 2026-06-22 19:44:33 发布 · 375 阅读 · 10 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#javascript #开发语言 #ecmascript #前端 #vscode
#webstorm #node.js

一、初认JavaScript

1.1 JavaScript基础

JS是支持面向对象编程的跨平台脚本弱类型的语言

​ 面向对象是一种思想

​ 跨平台：ios、Android、windows、Linux

​ 脚本：依赖其他才能解析

​ 弱类型：变量在声明后还可以改变

1.2 JavaScript的组成

​ DOM：文档对象

​ BOM：浏览器对象

​ ECMAScript：规范

js的变量是用来储存数据的容器

1.3 JavaScript的书写位置

1.3.1 内部JS

<body>
	<script>
	//在此书写代码
	</script>
</body>

1.3.2 外部JS

<body>
	<script src = "first.js">
	//中间不要写内容 （会忽略）
	</script>
<body>

1.4 JavaScript的输出方式

alert（）浏览器弹窗、用户提示
document.write（）可在浏览器的显示区域显示文本
console.log（）控制台日志
confirm（）提示用户下一步操作
prompt（）用于提醒用户输入

二、JavaScript的基本语法

2.1 数据类型的分类

number数字型
string字符串类型（加了引号都是字符串）
undefind未定义（只声明为赋值）
Boolean布尔类型
object对象（数组、对象、null）

2.2 数据类型间相互转化的方法

2.2.1 转化为数字类型方法

Number（）
parseInt（）转为数字类型并取整
parseFloat（）转化为浮点数保留小数
Math.round（）小数后一位四舍五入进行取整
.toFixed（3）保留三位小数
注意

1. 布尔类型转化为数字时：

Number（）和 Math.round（）会转化为1或者0
parseInt（）和parseFloat（）会显示为NaN (not a number)

2. 将undefined转化为数字

​ 所有方法都会显示NaN

3. 将null转化为数字

Number（）和 math.round（）会转化为0
parseInt（）和parseFloat（）会显示NaN

2.2.2 转化为字符串方法

​ String（）
​ 被转换的数据.tostring（）

undefiend转换为字符串.tostring会报错
null转换为字符串.tostring会报错

2.2.3 转换为布尔类型方法

​ Boolean（）

​ 数字中除了0都是true

​ 字符串中有内容都为true，无内容都为false

​ undefiend和null都为false

2.3 JavaScript变量声明

let 变量名 //一般用于变量所赋的值会改变的声明
let 变量名 = 值
let name = 'ABC',age = '3'//声明多个变量 可以但是没必要
let name = prompt（'请输入姓名'）

const 变量名 = 值//一般用于声明常量

let arr = [10,20,30]  //声明数组
let data = arr[0]//对数组进行索引
let length = arr.length//获取数组的长度

2.4类型转换

2.4.1 隐式转换

console.log(1+1)
console.log('ABC'+1)//自动把1转为字符型
console.log('2'-2)//除+外会转换为数字型
console.log(+'123')//转为数字型

2.4.2 显示转换

let str= = '123'
let strNum = Number(str)//转为数字型
let num = 123
let intNum = parseInt(num)//保留整数 
let floatNum = parseFloat(num)//保留小数

2.5 运算符

==	//比较数值大小是否相等
===	//比较左右两边类型和值是否相等
&& 	//逻辑与
||	//逻辑或
!	//逻辑非

三、for-in 、 for-of 、forEach

1. for-in

const obj = {
  name: "Alice",
  age: 30,
  // 添加一个自定义方法
  sayHello() { console.log("Hello!") }
};

// 遍历对象的所有可枚举属性（包括原型链上的属性）
for (const key in obj) {
  console.log(key); // 输出：name, age, sayHello
}

// ❌ 不推荐用 for-in 遍历数组（可能包含非数字键）
const arr = [10, 20, 30];
arr.customProp = "Oops";
for (const index in arr) {
  console.log(index); // 输出：0, 1, 2, customProp（意外遍历到非数字键）
}

2.for-of

// 遍历数组
const arr = [10, 20, 30];
for (const value of arr) {
  console.log(value); // 输出：10, 20, 30
}

// 遍历字符串
const str = "Hi";
for (const char of str) {
  console.log(char); // 输出：H, i
}

// 遍历 Map
const map = new Map([["a", 1], ["b", 2]]);
for (const [key, value] of map) {
  console.log(key, value); // 输出：a 1, b 2
}

// ❌ 普通对象不可用 for-of（需手动实现迭代器）
const obj = { a: 1, b: 2 };
// for (const val of obj) { } // 报错：obj is not iterable

3.forEach

const arr = [10, 20, 30];

// 基本用法：遍历元素值和索引
arr.forEach((value, index) => {
  console.log(`索引 ${index} 的值是 ${value}`);
  // 输出：
  // 索引 0 的值是 10
  // 索引 1 的值是 20
  // 索引 2 的值是 30
});

// 跳过空位（稀疏数组）
const sparseArr = [1, , 3]; // 中间是空位
sparseArr.forEach((value) => {
  console.log(value); // 输出：1, 3（跳过空位）
});

// ❌ 无法中途跳出循环
try {
  arr.forEach((value) => {
    if (value === 20) throw new Error("Break");
    console.log(value); // 输出：10，之后抛出错误
  });
} catch (e) {
  console.log("强制跳出循环");
}
遍历数组时

​ 1.for-in 输出数组的索引（字符串形式），但会遍历所有可枚举属性（包括非数字键和原型链属性）

​ 不推荐用于数组

​ 2.for-of 输出数组的元素值，直接遍历值且忽略空位（视为 undefined），支持循环控制

​ 3.forEach 输出数组的元素值、索引和数组本身（回调参数：value, index, array）

​ 跳过空位，无法中途跳出循环

遍历对象时

​ 1.for-in 适合遍历普通对象的可枚举属性，需用 hasOwnProperty 过滤原型链属性

​ 2. for-of 只能遍历实现了 Symbol.iterator 接口的对象（如 Array, Map, Set, String 等）

​ 普通对象默认不可用，需手动实现迭代器

​ 3.是数组方法，不能直接用于对象

hasOwnProperty

​ hasOwnProperty 是 JavaScript 对象的一个内置方法，用于检查某个属性是否是对象自身的属性（而不是从原型链继承的）。它在处理对象属性遍历时非常重要，尤其是在使用 for-in 循环时，可以避免遍历到原型链上的意外属性。

​ 语法：

obj.hasOwnProperty(propertyName)

参数：propertyName（字符串或 Symbol 类型，表示要检查的属性名）

返回值：布尔值（true 表示是对象自身的属性，false 表示是继承的或不存在）

四、数组

1.声明数组

let arr = [10,20,30]

2.使用数组

let arr = [10,20,30]
let data = arr[0]	//对数组进行索引
let length = arr.length	//获取数组的长度

3.数组的方法

var arr = ['a', 'b', 'c'];
arr["foo"] = "foo";
arr["bar"] = "bar";

3.1查询索引的方法

    console.log(arr.indexOf('b'));  //1  元素在数组中的位置    找不到返回-1
    console.log(arr.lastindexOf('b'));  //3 元素在数组中最后出现的位置

3.2检测元素

console.log(arr.includes('e');   //false 判断数组中是否存在此元素
console.log(arr.includes('b');   //true

3.3截取数组的元素

//截取数组的一部分，它有两个参数，分别是截取的起始位置和结束位置（结束位置不包含此数<）
//它返回的是截取出来组成的新数组，原数组不变，其实slice是在赋值
console.log(arr.slice(1,3));    //['b','c']
console.log(arr)    //['a', 'b', 'c', 'b']

//还可以利用slice筛取数组元素
let arr = ['a', 'b', 'c'];
arr.foo = "foo";
arr.bar = "bar";
console.log(arr); // [0:"a", 1:"b", 2:"c", foo: "foo", bar: "bar"]
console.log(arr.slice());	// ["a", "b", "c"]

3.4删除数组元素

//它返回的是删除数组的元素，原数组发生改变
// 第二个参数删除元素个数
console.log(arr.splice(1,3);    //['b','c','b']
console.log(arr);   //['a']

3.5队列方法

var arr = ['a', 'b', 'c', 'd']

//在数组的头部添加元素，返回操作之后数组的长度
console.log(arr.unshift(0));    //5
    //原数组发生改变
console.log(arr);       //[0, 'a', 'b', 'c', 'd'];

//在数组头部删除元素，返回被删除的元素
console.log(arr.shift());       //0  原数组发生改变

//在数组尾部添加元素，返回操作后数组的长度
console.log(arr.push('e'))      //5
console.log(arr);        // ['a', 'b', 'c', 'd', 'e'];

//在数组尾部删除元素，返回被删除的元素
console.log(arr.pop())      //e
console.log(arr);       //[0, 'a', 'b', 'c', 'd'];

//将数组元素拼接成字符串
var arr = [1,2,3,4,5]; 
console.log(arr.join("<");      //1<2<3<4<5
//合并数组
 var arr2 = [6,7,8,9,10];
console.log(arr.concat(arr2));   // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

3.6总结

方法语法示例说明
查询索引arr.index0f(ele)查询 ele 在数组中初次位置
查询索引arr.lastIndex0f(ele)说明査询 ele 在数组中最后位置
检测元素arr.includes(ele)检测数组中是否存在 ele 元素
截取数组arr.slice(begin,end)截取数组中编号从 begin 到end 之前的元素
截取数组arr.splice(start,n)删除数组编号从 start 开始的连续n个元素
队列方法arr.unshift(ele)数组头部添加一个 ele 元素，返回新数组长度
队列方法arr.push(ele)数组尾部添加一个 ele 元素，返回新数组长度
队列方法arr.shift()删除数组第一个元素，返回被删除的元素
其他方法arr.pop()删除数组最后一个元素，返回被删除的元素
其他方法arr.join(char)将所有数组元素以 char 字符连成字符串
其他方法arr.concat(arr2)一个数组合并另一个或多个其他数组

3.7字符串方法

创建字符串 - 数组类型

var str = "hello world"; // 字面量
// 创建字符串 - 对象类型
var str = new String("hello world"); // 构造器 
console.dir(str);

查看字符串长度

console.log(str.length);       //11

通过编号取字符

console.log(str[1]);       //e
console.log(str.charAt(1))     //e

由值找索引

console.log(str.indexOf("o");      //4
console.log(str.lastindexOf("o")        //7

字符串截取

//不包含第二个位置，如果不传第二个参数，则表示截取到末尾
//第二个参数表示结束位置
console.log(str.slice(6,11));       //world
    //第二个参数表示截取的长度
console.log(str.substr(6,5);        //world

字符串检测，是否包含某个内容

        var gname = "神舟十二号航天员指定太空用奶 伊利 纯牛奶 真正的牛奶"
        if (gname.includes("伊利")) {
            console.log("显示该商品")
        }

检测字符串开头

var name = "#user",
   cont = "神舟十二号航天员指定太空用奶 伊利 纯牛奶 真正的牛奶.";
            
if (name.startsWith("#")) {
           console.log("id选择器");
} else if (name.startsWith(".")) {
       console.log("类选择器");
}

检测字符串结尾

        if (cont.endsWith(".")) {
            console.log("一句完整的话")
        } else {
            console.log("没有结束的话");
        }

设置分隔符 分隔元素 组成数组

  split("&")      //foo=bar&a=1&b=2" 为 [foo=bar,a=1,b=2]

大小写转化

        var code = "Xi2d"; // 系统生成的验证码
        var user = "xI2d"; // 用户输入的验证码
        // 比较的要求是不区分大小写，所以需要统一转化
        // toLowerCase(小写) , toLocaleUpperCase(大写)
        if (code.toLowerCase() == user.toLowerCase()) {
            console.log("输入正确");
        } else {
            console.log("输入不正确");
        }

删除头尾空格

        str.trim()

替换字符

	str.replace(exp,new)	//将exp替换为new 	exp可为正则

查询字符 可使用正则

	str.match(exp);	// 找到返回字符  找到返回索引 ，找不到返回-1

合并字符

	"hello".concat("world");	// hellowworld

尾部填充

	str.padEnd(8,"!");	// 总长度为8位，不够在尾部添加"!"

头部填充

	str.padStart(8,"~");  // 总长度为8位，不够在头部添加"~"

字符复制

	"a".repeat(4);	// aaaa

五、Date 内置日期对象

Date是js内置对象，用来管理时间日期

//首先创造时间对象 Date构造函数 可以有参数
//如果不传参，则表示当前时间对象
var d = new Date ( );

// 快照打印字符串形式的值 相当于 隐式调用d.toString()
//Thu Jun 17 2021 09:36:50 GMT+0800 (中国标准时间)
console.log(d);

//本土格式的日期时间
console.log(d.toLocaleString ( ));      // 2025/5/27上午9:39:48

//创建指定日期时间
var d = new Date ("2025-05-26 20:08:08")
var d = new Date (2025,5,26,20,8,8);     //分别传入值


// 分别查看某一部分的值，年份，月份，日期，星期，时 分，秒
        console.log(d.getFullYear()); // 2025
        console.log(d.getMonth());  // 5 范围0-11分别代表12个月份
        console.log(d.getDate());   // 26
        console.log(d.getDay());    // 1-6 周一到周六 周日是0
        console.log(d.getHours()); // 20
        console.log(d.getMinutes()); // 8
        console.log(d.getSeconds()); // 8


// 返回一个毫秒数 当前时间距离1970年元旦（gmt）相隔的时间
// 该时间 对我们而言 就是用来帮助计算日期差值
console.log(d.getTime()); // 1753841288000 - 时间戳(unix)



// 计算北京奥运会 距今过去多少天
// 2025-05-26 到 2008-08-08 的天数
var d1 = new Date(2008, 7, 8), // 2008-08-08（注意：月份是 0-based，7 表示 8 月）
    d2 = new Date(2025, 4, 26); // 2025-05-26（4 表示 5 月）

var unix1 = d1.getTime(),
    unix2 = d2.getTime();

var days = (unix2 - unix1) / 1000 / 60 / 60 / 24;
console.log(days); // 输出天数（小数）

// 向上取整（如果希望精确到整天数，可以改用 Math.floor 或直接取整）
var result = Math.ceil(days); // 向上取整
console.log(result); // 4697（如果 d2 是未来日期，会得到正数；如果是过去日期，会得到 0 或负数）

// 如果 d2 是过去日期（比如 2008-08-08 到 2025-05-26），结果会是负数，可以取绝对值
var absoluteDays = Math.abs(Math.ceil(days)); // 确保天数是正数
console.log(absoluteDays); // 如果 d2 > d1，结果是正数；否则是负数

六、Math数学对象

Array、String、Date 实际上是构造函数 都需要new来创建对象，但是Math不需要

//取整数值的方法
var num = 3.14;
    //向上取整 取最近的最大值
console.log(Math.ceil(num))     //4
   //向下取整  舍掉小数部分
console.log(Math.floor(num))     //3
    
    
//四舍五入
var num = 1.5
console.log(Math.round(num))     //2


//取一组最大值和最小值 这里是挨个传参数
console.log(Math.max(1,2,3))      //3
console.log(Math.min(1,2,3))        //1

//在实际使用中，往往是求数组中的最大值
var arr = [1,2,3]
console.log(Math.max(...arr))       //3 借助 ... 展开语句


//取随机数 随机生成一个 0 - 1 之间的数
console.log(Math.random())

//随机生成 1-10
console.log(Math.floor(Math.random() * 10) + 1)

//随机数组中的元素
 var arr = ['a', 'b', 'c', 'd'];
var i = Math.floor(Math.radom() * arr.length ))
console.log(arr[i])

//生成N-M之间的随机数
console.log(Math.random()*(M-N+1))+N
方法用法示例说明
取整数值Math.ceil(number)对 number 进位取整
取整数值Math.floor(number)对 number 下舍取整
取整数值Math.round(number)对 number 四舍五入
最大最小值Math.max(n1,n2,n3)求 n1,n2,n3…的最大值
最大最小值Math.min(n1,n2,n3)求 n1,n2,n3…的最小值
生成随机数Math.random()返回 0-1之间的随机数

七、DOM

1.DOM概述

DOM：（Document Object Model）即文档对象模型。是W3C定义的访问文档的标准，他允许程序动态地访问、更新文档的内容、结构和样式

2.元素获取

更改文档内容，首先需要获取元素对象，常见的获取元素的方法有标签，ID，类名等等

2.1 ID获取元素

通过ID获取是最方便的方式之一，但是一次只能获取一个，ID重复时，只获取第一个，对于需要大量获取的不太适用；

document.getElementById('ID')

2.2 标签获取元素

通过标签可以获取指定标签的全部对象，并按照数组形式返回。对于页面结构复杂的，一般很难选中想要的元素，不太常用

document.getElementsByTagName('标签名字')

2.3 类名获取元素

获取指定类名的全部对象，并按照数组形式返回

document.getElementsByClassName('类名')

2.4 选择器获取元素

H5新加入了通过选择器来进行元素获取，实为一大福音

//单个选择
document.querySelector('选择器')
//选取全部
document.querySelectorAll('选择器')

querySelector会选择捕捉到的第一个元素，querySelectorAll会将捕捉到的全部元素按照数组形式返回。注意：选择器要按照css的样式书写，类名前加‘.’，ID前加‘#’

<body>
    <div class="father">
        <div class="son">
        </div>
    </div>

    <script>
        console.log(document.querySelector('.son'))
        console.log(document.querySelectorAll('div'))
    </script>
</body>

2.5 获取元素Body和HTML

获取Body和HTML元素的方式与以上不同

//获取HTML
document.documentElement
//获取Body
//document.body

3.元素操作

3.1 修改元素内容

获取和修改元素内容我们常用的有两种方式，innerText 和innerHTML。顾名思义，我们能看出来两者的区别在于能否插入标签

innerText：获取或修改元素内的文字，不包含标签和样式
innerHTML：获取或修改元素内所有内容，包括标签和样式

<div>
    </div>
    <script>
        var div = document.querySelector('div');
        div.innerText = '<h3>Hello Liyfn<h3>';
    </script>
//代码执行后，<h3>被当作字符串打印了

更改为innerHTML

 <div>
    </div>
    <script>
        var div = document.querySelector('div');
        div.innerHTML = '<h3>Hello Liyfn<h3>';
    </script>

总结：当仅仅需要获取或修改元素内容时，我们可以使用innerText,需要修改标签时，我们使用innerHTML

3.2 修改元素属性

我们可以通过js来修改元素自身的属性，包括src,href,disabled…等等

可以使用:元素 + . + 属性的方式

 <input type="checkbox" name="" id="">
    <a href="#"></a>
    <script>

        var int = document.querySelector('input');
        var a = document.querySelector('a')
        //修改标签默认状态为不选中
        int.checked = false;
        //修改a标签href属性
        a.href = 'http://www.baidu.com'
    </script>

3.3修改元素样式

操作元素的样式常用的有以下几种方式:

3.3.1 直接修改样式

1.修改字体颜色为红色

 var a = document.querySelector('a')
 a.style.color = 'red';

2.修改元素显示模式为隐藏

 var a = document.querySelector('a')
 a.style.display = 'none';

使用.style.属性可以修改元素样式，但是修改的样式是添加在行内样式中，需要注意权重

3.3.2 添加css类名修改样式

对于大量的属性变更我们可以通过修改css类名来实现

1.改变类名（会覆盖原来的类名）

 var a = document.querySelector('a')
 a.className = 'change'

2.添加类名（不覆盖原来类名）

 var a = document.querySelector('a')   
 a.classList.add('change_2')

3.移除类名

 var a = document.querySelector('a')   
 a.classList.remove('change_2')

4.切换类名（原来有类名就删除，原来没有就添加）

 var a = document.querySelector('a')   
 a.classList.toggle('change_2')

4.添加自定义属性

在js操作元素的时候，我们有时候需要给元素添加自定义属性，来达到我们的目的。比如获取元素是父元素的第几个，就需要给每个子元素打上索引号，再获取对应元素的索引号

1.添加自定义属性

//a元素添加index属性，属性值为2
 var a = document.querySelector('a')
 a.setAttribute('index', 2)

2.获取自定义属性

var a = document.querySelector('a')
a.setAttribute('index', 2)
//获取索引
var b = a.getAttribute('index')
console.log(b)

3.移除自定义属性

 var a = document.querySelector('a')
 a.setAttribute('index', 2)
 a.removeAttribute('index')

八、事件

1.事件类型

1.1 鼠标事件

事件类型语法触发条件
点击事件onclick鼠标点击触发
鼠标经过onmouseover鼠标经过触发
鼠标离开onmouseout鼠标离开触发
获得焦点onfocus获得鼠标焦点触发
失去焦点onblur失去鼠标焦点触发
鼠标移动onmousemove鼠标移动触发
鼠标弹起onmouseup鼠标弹起触发
鼠标按下onmousedown鼠标按下触发
禁用右键菜单contextmenu
禁止选中文字selectstart

1.2 键盘事件

事件类型语法触发条件
键盘弹起onkeyup某个键盘按键被松开时触发
键盘按下onkeydown某个键盘按键被按下时触发
键盘按下onkeypress某个键盘被按下时触发

2.事件绑定

2.1 传统方式绑定

//执行后打印123
 var a = document.querySelector('a')
 a.onclick = function () {
        console.log(123)
    }

2.2 添加事件监听

添加事件监听不需要加on,需要注意

        var a = document.querySelector('a')
        a.addEventListener('click', function () {
            console.log(123)
        })

2.3 事件解绑

传统方式解绑

		a.onclick = function () {
            console.log(123)
        }
        a.onclick = null;

监听方式解绑

		var a = document.querySelector('a')

        function _a() {
            console.log(123)
        }
        a.addEventListener('click', _a)
        a.removeEventListener('click', _a)

2.4 二者区别

传统方式绑定只能绑定一个事件，后来的事件会把前面的重叠掉
添加监听可以一次绑定多个事件

3.事件对象

3.1 什么是事件对象

事件对象是JS内置的一个对象，他包含了事件触发后一系列数据的集合，比如点击位置，点击对象等等
他是事件函数的一个参数，我们可以用传参把参数打印出来

3.2 常用鼠标事件对象

鼠标事件对象说明
e. clientX返回鼠标相对于浏览器可视窗口的X坐标
e.clientY返回鼠标相对于浏览器可视窗口的Y坐标
e.pageX返回鼠标相对于文档页面的X坐标
e.pageY返回鼠标相对于文档页面的Y坐标
e.screenX返回鼠标相对于电脑屏幕的X坐标
e.screenY返回鼠标相对于电脑屏幕的Y坐标

3.3 常用键盘事件对象

键盘事件最常用的就是判断按键值

鼠标事件对象说明
e.keyCode返回该键的ASCII码值

3.4 其他

事件对象属性方法说明
e.target返回触发事件的对象
e.type返回事件的类型，如:click mouseove
e.preventDefault()该方法阻止默认行为，如:不让链接跳转
e.stopPropagation()阻止冒泡

九、节点操作

1.节点定义

页面中所有的内容都是节点，包括元素，属性，文本，注释甚至空格和换行；当然，我们大部分的操作都是针对元素节点的

2.节点属性

2.1 节点类型

节点类型nodetype
元素节点1
文本节点3
注释节点8
document9

2.2 节点名称

标签名的大写

2.3 节点值

节点的value值

  <a href="#">123</a>
  <script>
  var a = document.querySelector('a')
   a.onclick = function (e) {
   //节点类型
   console.log(this.nodeType)  //节点类型：1
   console.log(this.nodeName)  //节点名称：A
   console.log(this.nodeValue) //节点值
   </script>

3.节点获取

父节点子元素. parentNode找更高层级的父级可以继续添加.parentNode
子节点父元素.children找精确的:父元素.children[索引号]
兄弟节点div.nextElementSibling当前元素下一个兄弟元素节点
兄弟节点div.previousElementSibling当前元素上一个兄弟元素节点
    <div class="father">
        <div class="sib"></div>
        <div class="son">
     	<span>1</span><span>2</span><span>3</span><span>4</span>
        </div>
        <div class="sib2"></div>
    </div>
    <script>
        var div = document.querySelector('.son')
        console.log(div.parentNode) //div class = father
        console.log(div.children) //span数组
        console.log(div.nextElementSibling) //sib2
        console.log(div.previousElementSibling) //sib
    </script>

十、BOM

1.BOM概述

​ BOM（browser Object）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
​ BOM由一系列的对象构成，并且每个对象都提供了很多方法与属性
​ BOM缺乏标准，JS语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分

2.BOM与DOM的区别

BOMDOM
浏览器对象模型文档对象模型
把浏览器当做一个对象来看待DOM是把文档当做一个对象来看待
顶级对象是window顶级对象是document
学习浏览器窗口交互的一些对象主要学习操作页面元素
各浏览器厂商在各自浏览器上定义的标准，兼容性较差W3C标准规范

3.BOM的构成(对象)

window对象： 当前页面窗口对象

navigator对象： 记录浏览器特性（版本、厂商、内核、产品名等）

screen对象： 查看客户机屏幕信息

history对象： 访问浏览器历史记录

location对象： 操作当前页面地址栏

3.1 Window (操作属性)

3.1.1 对话框

alert（提示框）

​ alert()是在浏览器弹出一个提示框

  1. 这个弹出层只是一个提示内容，只有一个确定按钮

  2. 点击这个确定按钮以后，这个提示框就消失了

    window.alert("我是一个提示框");

confirm（询问框）

​ confirm()是在浏览器弹出一个询问框

  1. 这个弹出层有一个询问信息和两个按钮

  2. 当你点击确认的时候，就会得到 true

  3. 当你点击取消的时候，就会得到 false

    var boo = window.confirm("我是一个询问框");
console.log(boo);

prompt（输入框）

​ prompt()是在浏览器弹出一个输入框

  1. 这个弹出层有一个输入框和两个按钮

  2. 但你点击取消的时候，得到的是null

  3. 当你点击确认的时候得到的就是你输入的内容

    var str = window.prompt("请输入内容");
console.log(str);
3.1.2 定时器

setTimeout（延时）

​ 倒计时多少时间以后执行函数

​ 语法：setTimeout(要执行的函数，多少时间以后执行);

​ 会在你设定的时间以后执行函数

var timerId = setTimeout(function (){
	console.log('我执行了');
},1000);
console.log(timerId) // 1
  1. 时间是按照毫秒进行计算的，1000 毫秒就是 1秒钟
  2. 所以会在页面打开 1 秒钟以后执行函数
  3. 只执行一次，就不在执行了
  4. 返回值是，当前这个定时器是页面中的第几个定时器

关闭定时器

​ 我们刚才提到过一个 timerId，是表示这个定时器是页面上的第几个定时器

​ 这个 timerId 就是用来关闭定时器的数字

​ 我们有个方法来关闭定时器 clearTimeout

​ 关闭以后定时器就不会在执行了

var timerId = setTimeout(function(){
	console.log("倒计时定时器");
},1000);
clearTimeout(timerId);	// 关闭倒计时定时器

原则上是clearTimeout关闭setTimeout，但是其实是可以通用的

var timerId = setTimeout(function(){
	console.log('倒计时定时器');
},1000);
// 关闭倒计时定时器
clearInterval(timerId);

定时器的返回值

​ 设置定时器的时候，他的返回值是部分 setTimeout 和 setInterval 的

​ 只要有一个定时器，那么就是一个数字

var timerId = setTimeout(function(){
	console.log('倒计时定时器');
},1000);
var timerId2 = setInterval(function(){
	console.log("间隔定时器");
},1000);

console.log(timerId) // 1
console.log(timerId2) // 2

setInterval（间隔）

​ 每隔多少时间执行一次函数

​ 语法：setInterval(要执行的函数，间隔多少时间);

​ 会在你设定的时间以后执行函数

var timerId = setInterval(function (){
	console.log('我执行了');
},1000);
  1. 时间是按照毫秒进行计算的，1000 毫秒就是 1秒钟
  2. 每间隔 1 秒钟执行一次函数
  3. 只要不关闭，会一直执行
  4. 返回值是，当前这个定时器是页面中的第几个定时器

关闭定时器

​ 我们刚才提到过一个 timerId，是表示这个定时器是页面上的第几个定时器

​ 这个 timerId 就是用来关闭定时器的数字

​ 我们有个方法来关闭定时器 clearInterval

​ 关闭以后定时器就不会在执行了

var timerId = setInterval(function(){
	console.log("间隔定时器");
},1000);
clearInterval(timerId);	// 关闭间隔定时器

原则上是clearInterval关闭setInterval，但是其实是可以通用的

var timerId = setInterval(function(){
	console.log('间隔定时器');
},1000);
// 关闭间隔定时器
clearTimeout(timerId);

定时器的返回值

​ 设置定时器的时候，他的返回值是部分 setTimeout 和 setInterval 的

​ 只要有一个定时器，那么就是一个数字

var timerId = setTimeout(function(){
	console.log('倒计时定时器');
},1000);
var timerId2 = setInterval(function(){
	console.log("间隔定时器");
},1000);

console.log(timerId) // 1
console.log(timerId2) // 2
3.1.3 开关窗口

open（打开）

​ 打开一个网址

// 如果strUrl 是一个空值，那么打开的窗口将会是带有默认工具栏的空白窗口
window.open()	
// 新窗口打开百度
window.open("https://www.baidu.com/","_blank")

close（关闭）

​ 关闭当前窗口

window.close()	// 关闭

3.2 Window(界面属性)

窗口：指的是浏览器窗口

视口：指的是浏览器窗口中页面视口（不包含浏览器边框和工具栏）

屏幕：指的是电脑屏幕

3.2.1 窗口与屏幕的位置

距离：screenLeft（左侧）screenTop（顶部）

screenLeft：表示窗口相对于屏幕左侧的位置，返回值的单位是像素值

screenTop：表示窗口相对于屏幕顶部的位置，返回值的单位是像素值

console.log("screenLeft 位置：", window.screenLeft);
console.log("screenTop 位置：", window.screenTop);

定位：moveTo（绝对）moveBy（相对）

moveTo：接收要移动到的新位置的绝对坐标 x和y

moveBy：接收相对当前位置在两个方向上移动的像素值

// 把窗口移动到左上角
window.moveTo(0,0)

// 把窗口移动到坐标位置（200，300）
window.moveTo(200,300)

// 把窗口向下移动100像素
window.moveBy(0,100)

// 把窗口向左移动10像素
window.moveBy(-10,0)
3.2.2 窗口与视口的大小

视口：innerHeight（高度）innerWidth（宽度）

​ 返回浏览器窗口中页面视口大小（不包含浏览器边框和工具栏）

console.log("innerWidth 宽度：",window.innerWidth);
// innerWidth 宽度： 1002
console.log("innerHeight 高度：",window.innerHeight);
// innerHeight 高度： 907

窗口：outerHeight（高度）outerWidth（宽度）

​ 返回浏览器自身窗口的大小

console.log("outerWidth 宽度：",window.outerWidth);
// outerWidth 宽度： 1680
console.log("outerHeight 高度：",window.outerHeight);
// outerHeight 高度： 1010
3.2.3 视口与滚动的关系

距离：scrollX（向右）scrllY（向下）

scrollX：文档向右滚动的距离，当窗口无法展示整个页面，这时候就需要滚动查看

scrollY：文档向下滚动的距离，当窗口无法展示整个页面，这时候就需要滚动查看

console.log("scrollX 向右滚动了多少距离：",window.scrollX);
// scrollX 向右滚动了多少距离： 0
console.log("scrollY 向下滚动了多少距离：",window.scrollY);
// scrollY 向下滚动了多少距离： 0

定位：scrollTo（绝对）scrollBy（相对）

​ 这两个方法接收x和y坐标，表示要滚动到的位置

// 滚动到页面左上角
window.scrollTo(0,0)

// 滚动到页面左边100像素和顶部200像素的位置
window.scrollTo(100,200)

// 相对于当前视口向下滚动100像素
window.scrollBy(0,100)

// 相对于当前视口向右滚动40像素
window.scrollBy(40,0)

十一、正则表达式

专门用来检测字符串是否符合规则

1.创建正则表达式

字面量创建

let reg = /abcdefg/

构造函数创建

let reg = new RegExp('abcdefg')
console.log(reg)

字面量和构造函数区别

let ch = "o";
//字面量表达式 只支持硬编码的字符 变量名不解析
const reg = /ch/gi;
console.log(reg); // /ch/gi

//通过正则对象设置
const reg = new RegExp(ch,"gi");
console.log(reg);	// /o/gi

元字符

. ： 匹配非换行的任意字符
\ ： 转译符号，把有意义的 符号 转换成没有意义的 字符，把没有意义的 字符 转换成有意义的 符号
\s ： 匹配空白字符（空格/制表符/…）
\S ： 匹配非空白字符
\d ： 匹配数字
\D ： 匹配非数字
\w ： 匹配数字字母下划线
\W ： 匹配非数字字母下划线

限定符

* :前一个内容重复至少 0 次，也就是可以出现 0 ～ 正无穷 次

+ ： 前一个内容重复至少 1 次，也就是可以出现 1 ～ 正无穷 次
? ： 前一个内容重复 0 或者 1 次，也就是可以出现 0 ～ 1 次
{n} ： 前一个内容重复 n 次，也就是必须出现 n 次
{n, } ： 前一个内容至少出现 n 次，也就是出现 n ～ 正无穷 次
{n,m} ： 前一个内容至少出现 n 次至多出现 m 次，也就是出现 n ～ m 次

边界符

^ ： 表示开头

$ ： 表示结尾

特殊符号

() ： 限定一组元素

[] ： 字符集合，表示写在 [] 里面的任意一个都行

[^] ： 反字符集合，表示写在 [^] 里面之外的任意一个都行

- ： 范围，比如 a-z 表示从字母 a 到字母 z 都可以

| ： 或，正则里面的或 a|b 表示字母 a 或者 b 都可以

标识符

i ： 表示忽略大小写
这个 i 是写在正则的最后面的
/\w/i
就是在正则匹配的时候不去区分大小写

g ： 表示全局匹配
这个 g 是写在正则的最后面的
/\w/g
就是全局匹配字母数字下划线

正则表达式方法

test

用来检测字符串是否符合我们正则的标准
语法：正则.test(字符串) 返回boolean

console.log(/\d+/.test('123')) //true

exec

把字符串中符合条件的内容捕获出来
语法：正则.exec(字符串) 返回符合要求的，以数组形式返回

let reg = /\d{3}/;
let str = "hello123worder456你好789";
let res = reg.exec(str);
console.log(res);	//123

使用正则的字符串方法

字符串中有一些方法是可以和正则一起使用的

search

search是查找字符串中是否有满足正则条件的内容
语法：字符串.search(正则) 找得到返回索引，找不到返回-1

let reg = /\d{3}/;
let str = "hello123";
let str2 = "hello";
console.log(str.search(reg))	// 5
console.log(str2.search(reg))	//-1

match

match找到字符串中符合条件的返回内容
语法：字符串.math(正则) 找到返回内容
没有标识符 g 的时候，是和exec方法一样
有标识符 g 的时候，是返回一个数组，里面是匹配的每一项

let reg = /\d{3}/;
let str = "hello123world456";
let str2 = 'hello';
console.log(str.match(reg));// ["123", index: 5, input: "hello123wor456", groups: undefined]
console.log(str2.match(reg));// null

replace

replace是将字符串满足正则条件的字符串替换掉
语法：字符串.replace(正则,要替换的字符串)返回替换后的字符串

let reg = /\d{3}/g;
let str = 'hello123world456';
console.log(str.replace(reg,'666'));	//hello666world666

十二、Ajax

1.Ajax概述

Ajax：Asynchronous JavaScript And XML，异步JavaScript和XML技术
描述：不是一门新的语言或技术是由JavaScript、XML、DOM、CSS等多种已有技术组合而成的一种浏览器端技术
功能：用于实现与服务器进行异步交互的功能。用js来实现页面的局部刷新

2.前后端交互-Ajax

创建Ajax对象

<script>
//W3C标准
  var xhr = new XMLHttpRequest();
</script>

<script>
//早期IE浏览器
  var xhr = new ActiveXObject('Microsoft.XMLHTTP');
  var xhr = new ActiveXObject('Msxml2.XMLHTTP');
  var xhr = new ActiveXObject('Msxml2.XMLHTTP.3.0');
  var xhr = new ActiveXObject('Msxml2.XMLHTTP.5.0');
  var xhr = new ActiveXObject('Msxml2.XMLHTTP.6.0');
</script>

Ajax向服务器发送请求

open(‘method’, ‘URL’ [, asyncFlag [, ‘userName’ [, ‘password’]]])

method：用于指定请求方式，如GET、POST，不区分大小写
URL：表示请求的地址
asyncFlag：可选参数，用于指定请求方式，同步请求为false，默认为异步请求true
userName和password：可选参数，表示HTTP认证的用户名和密码

send(content)

content：用于指定要发送的数据，其值可为DOM对象的实例、输入流或字符串，一般与POST请求类型配合使用
注意：如果请求声明为同步，该方法将会等待请求完成或者超时才会返回，否则此方法将立即返回

setRequestHeader(‘haeder’, ‘value’)

参数都为字符串类型
header表示请求头字段
value为该字段的值
此方法必须在open()方法后调用

<script>
    // 1、创建ajax对象
    var xhr = new XMLHttpRequest();
    // 2、建立http请求
    xhr.open('GET','test.php?a=1&b=2');
    // 3、发送请求到web服务器并接收响应
    xhr.send();
</script>
<!-- get:适合从服务器获取数据 -->

<script>
    // 1、创建ajax对象
    var xhr = new XMLHttpRequest();
    // 2、建立http请求
    xhr.open('POST','test.php?a=1&b=2');
    // 3、请求头内指定实体内容的编码格式
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
    // 4、发送请求到web服务器并接收响应
    xhr.send('c=3&d=4');
</script>
<!-- POST:适合向服务器发生数据 -->

在进行Ajax开发时，经常使用GET方式或POST方式发送请求
GET方式适合从服务器获取数据
POST方式适合向服务器发送数据。需要设置内容的编码格式，告知服务器用什么样的格式来解析数据

注意：
同步请求与异步请求
Ajax对象open()方法的第3个参数用于设置同步请求和异步请求
两种方式的区别在于，是否阻塞代码的执行

异步方式（默认）：是非阻塞的，浏览器端的JavaScript程序不用等待Web服务器响应，可以继续处理其他事情。当服务器响应后，再来处理Ajax对象获取到的响应结果

同步方式：是阻塞的，当Ajax对象向Web服务器发送请求后，会等待Web服务器响应的数据接收完成，再继续执行后面的代码

处理服务器返回的信息

readyState属性用于获取Ajax的当前状态，状态值有5种形式

状态值说明解释
0未发送对象已创建，尚未调用ope()方法
1已打开open()方法已调用，此时可以调用send()方法发起请求
2收到响应头send()方法已调用，响应头也已经被接收
3数据接收中响应体部分正在被接收,responseText将会在载入的过程中拥有部分响应数据
4完成数据接收完毕,此时可以通过responseText获取完整的响应

Ajax状态的还可以通过“XMLHttpRequest.属性名”的方式获取

<script>
  XMLHttpRequest.UNSENT;                    // 对应状态值0
  XMLHttpRequest.OPENED;                    // 对应状态值1
  XMLHttpRequest.HEADERS_RECEIVED;          // 对应状态值2
  XMLHttpRequest.LOADING;                   // 对应状态值3
  XMLHttpRequest.DONE;                      // 对应状态值4
</script>

onreadystatechange事件属性用于感知readyState属性状态的改变，每当readyState的值发生改变时，就会调用此事件

<script>
    // 1、创建ajax对象
    var xhr = new XMLHttpRequest()
    console.log(xhr.readyState)//0
    xhr.onreadystatechange = function(){
        console.log(xhr.readyState)//1,2,3,4
    }
    xhr.open('get','test.php')
    xhr.send()
</script>

status属性用于返回当前请求的HTTP状态码，值为数值类型

例如，当请求成功时，状态码为200
另外还有一个类似的属性statusText，值为字符型数据，包含了描述短语，如“200 OK”

获取服务器的响应信息

属性名说明
responseText将响应信息作为字符串返回
responseXML将响应信息格式化为XML Document对象并返回(只读)

responseXML属性在请求失败或相应内容无法解析时的值为null
需要注意的是，服务器在返回XML时应设置响应头Content-Type的值为text/xml或application/xml，否则会解析失败

<script>
    // 1、创建对象
    var xhr = new XMLHttpRequest();
    // 2、事件属性
    xhr.onreadystatechange = function(){
        // xhr.readyState 获取状态值 1，2，3，4
        if(xhr.readyState === XMLHttpRequest.DONE){
            // status 响应状态码
            if(xhr.status<200 || xhr.status>=300 && xhr.status !== 304){
                alert('服务器异常');
                return;
            }
            // xhr.responseText //Hello
            console.log(xhr.responseText)
            document.write('<h2>'+xhr.responseText+'</h2>')
        }
    }
    xhr.open('get','hello.php')
    xhr.send()
</script>

3.前后端交互-数据格式

前后端约定一种格式，确保通信双方都能够正确识别对方发送的信息

XML

XML：eXtensible Markup Language，可扩展标记语言
与HTML都是标签语言，XML主要用于描述和存储数据，可以自定义标签

当服务器返回的是一个XML格式的数据时，利用Ajax对象的responseXML属性即可对XML数据进行处理

<script>
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if(xhr.readyState === XMLHttpRequest.DONE){
            var data = xhr.responseXML;
            var booklist = data.getElementsByTagName('booklist')[0];//<booklist>...</booklist>
            console.log(booklist.childNodes)//[text\book\text]
            console.log(booklist.children)//[book]
            var book = booklist.children[0]//<book>...</book>
            console.log(book.children)//[name,author]
            console.log(book.children[0].innerHTML)//西游记
            console.log(book.children[0].firstChild)// '西游记'
            console.log(book.children[0].firstChild.wholeText)//西游记
        }
    }
    xhr.open('get','xml.php')
    xhr.send()
</script>

JSON

JSON：是一种轻量级的数据交换格式
特点：采用完全独立于语言的文本格式，这使得JSON更易于程序的解析和处理
与XML对比：使用JSON对象访问属性的方式获取数据更加方便，在JavaScript中可以轻松地在JSON字符串与对象之间转换

<script>
    var obj = {name:'Tom',age:21} //准备要发生的数据
    var json = JSON.stringify(obj)//将obj对象转换为json字符串
    var xhr = new XMLHttpRequest();//创建ajax对象
    xhr.open('post','json.php');//建立连接

    xhr.onreadystatechange = function(){
        if(xhr.readyState === XMLHttpRequest.DONE){
            console.log(typeof xhr.responseText)//查看服务器返回的数据类型：string
            var obj = JSON.parse(xhr.responseText)//将json字符串转换为对象
            console.log(obj)
            // eval() 将传入的字符串当js代码执行
            eval("var obj="+xhr.responseText)//用eval函数将字符型转换为对象
            console.log(obj.name)
            console.log(obj.age)
        }
    }
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
    xhr.send('json='+encodeURIComponent(json))//发送请求
</script>

4.前后端交互-跨域请求

域（Domain）是指网络中独立运行的单位
从网络安全角度来看，域是安全的边界，每个域都有自己的安全策略，不同域之间是隔离的，除非建立信任关系，否则无法互相访问。

什么是跨域：未遵循同源策略，同源是指请求URL地址中的协议、域名和端口都相同

跨域请求会导致网页失去安全性，因此浏览器阻止跨域请求

Access-Control-Allow-Origin响应头
解决办法之一：为使受信任的网站之间能够跨域访问，HTML5提供了一个新的策略，就是Access-Control-Allow-Origin响应头

目标服务器通过该响应头可以指定允许来自特定URL的跨域请求，其值可以设置为任意URL或特定URL等

十三、Jquery

1.Dom对象与Jquery包装集对象

1.1 Dom对象

​ javascript 中获取 Dom 对象，Dom 对象只有有限的属性和方法

var div = document.getElementById("testDiv");
var divs =document.getElementsByTagName("div");

1.2 Jquery包装集对象

​ 可以说是 Dom 对象的扩充.在 jQuery 的世界中将所有的对象,无论是一个还是一组,都封装成一个jQuery 包装集,比如获取包含一个元素的 jQuery 包装集:

var jQueryObject = $("#testDiv")

​ 获取Jquery对象的两种方式

// 第一种方式 获取jquery对象
var jqueryDiv = jquery('#mydiv');

// 第二种方式 获取jquery对象
jqueryDiv = $('#mydiv');

1.3 Dom对象转为Jquery对象

​ Dom对象转为jQuery对象，只需要利用$()方法进行包装即可

var domDiv = document.getElementById('mydiv');       //获取Dom对象
mydiv = $(domDiv);

1.4 Jquery对象转为Dom对象

​ jQuery对象转Dom对象，只需要取数组中的元素即可

var jqueryDiv = jquery('#mydiv');
// 将以获取的jquery对象转为dom
var dom = jqueryDiv[0];

​ 通过遍历jQuery对象数组得到的对象是Dom对象，可以通过$()转为jQuery对象

$('#mydiv').each(function(){
	var jquery = $(this);
});

2.Jquery选择器

2.1 基础选择器

选择器名称举例
id选择器#id$(“#testDiv”)选择id为testDiv的元素
元素名称选择器element$(“div”)选择所有div元素
类选择器.class$(“.blue”)选择所有class=blue的元
通用选择器*$(“*”)选择页面所有元素
组合选择器selector1,selector2,selectorN$(“#testDiv,span,.blue”)同时选中多个选择器匹配的元素

2.2 层次选择器

选择器名称举例
后代选择器ancestor descendant$(“#parent div”)选择id为parent的元素的所有div元素
子代选择器parent > child$(“#parent > div”)选择id为parent的直接div子元素
相邻选择器prev + next$(“.blue + img”)选择css类为blue的下一个img元素
同辈选择器prev~ sibling$(“.blue ~ img”)选择css类为blue的之后的img元素

2.3 表单选择器

Forms名称举例
表单选择器:input查找所有的input元素:$(“:input”);
注意:会匹配所有的input、textarea、select和button元素
文本框选择器:text查找所有文本框:$(“:text”)
密码框选择器:password查找所有密码框:$(“:password”)
单选按钮选择器:radio查找所有单选按钮:$(“:radio”)
复选框选择器:checkbox查找所有复选框:$(“:checkbox”)
提交按钮选择器:submit查找所有提交按钮:$(“:submit")
图像域选择器:image查找所有图像域:$(“:image”)
重置按钮选择器:reset查找所有重置按钮:$(“:reset")
按钮选择器:button查找所有按钮:$(“:button”)
文件域选择器:file查找所有文件域:$(“:file”)

3. Jquery Dom操作

1.操作元素属性

1.1 获取属性

​ attr(“属性名”)

​ prop(“属性名”)

1.2 设置属性

​ attr(“属性名”,“属性值”)

​ prop(“属性名”,“属性值”)

1.3 移除属性

​ removeAttr(“属性名”)

属性的分类：

​ **固有属性：**元素本身就有的属性(id、name、class、style)

​ 返回值为boolean的属性：checked、selected、disabled等

​ **自定义属性：**用户自己定义的属性

attr()和prop()的区别：

​ 固有属性：**attr()和prop()**方法均可操作

​ 返回值为boolean的属性：

​ 若设置了属性，attr()返回具体的值，prop()返回true

​ 若未设置属性，attr()返回undefined，prop()返回false

​ 自定义属性：**attr()**可操作，**prop()**不可操作

总结:
​ 如果属性的类型是boolean，则使用prop()方法; 否则使用attr()方法

2.操作元素样式

方法说明
attr(“class”)获取class属性的值，即样式名称
attr(“class",“样式名”)修改class属性的值，修改样式
addClass(“样式名”)添加样式名称
css()添加具体的样式
removeClass(class)移除样式名称

​ css()：

// css({'样式名1’:’样式值1’，样式名2’:'样式值2’})
css({"background-color" :"red" ,"color" :"#fff"});

// css(“样式名”,”样式值”)
css('color','white')

3.操作元素内容

方法说明
html()获取元素的内容，包含html标签(非表单元素)
html("html,内容”)设置元素的内容，包含html标签(非表单元素)
text()获取元素的纯文本内容，不包含html标签(非表单元素)
text("text 内容”)设置元素的纯文本内容，不包含html标签(非表单元素)
val()获取元素value值(表单元素)
val('值’)设置元素的value值(表单元素)

4.添加元素

方法说明
prepend(content)在被选元素内部的开头插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记
$(content).prependTo(selector)把 content 元素或内容加入 selector 元素开头
append(cöntent)在被选元素内部的结尾插入元素或内容，被追加的content 参数，可以是字符、HTML元素标记
$(content).appendTo(selector)把 content元素或内容插入selector 元素内，默认是在尾部
before()在元素前插入指定的元素或内容:$(selector).before(content)
after()在元素后插入指定的元素或内容:$(selector).after(content)

​ prepend,prependTo,append,appendTo是追加子元素

​ before,after是追加同级元素

5.删除元素

方法说明
remove()删除所选元素或指定的子元素，包括整个标签和内容一起删
empty()清空所选元素的内容，保留标签

6.遍历元素

​ each() $(selector).each(function(index,element))

​ function 为遍历时的回调函数

​ index 为遍历元素的序列号，从0开始

​ element是当前的元素，此时是dom元素

4.Jquery事件

4.1 ready()加载事件

​ ready()类似于 onLoad()事件
​ ready()可以写多个，按顺序执行
​ KaTeX parse error: Expected 'EOF', got '}' at position 28: …eady(function()}̲)等价于(function(){})

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ready加载事件</title>
        
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8">			</script>
		
		<script type="text/javascript">
			$(document).ready(function(){
			// 获取元素
				console.log($('#p1'));
            });
                
            // 简写
            $(function(){
                console.log($('#p1'));
            });
		</script>
	</head>
	<body>
        <p id="p1">文本</p>
    </body>
</html>

4.2 bind()绑定事件

​ 为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数

$(selector).bind( eventType [,eventData], handler(eventobject));

​ eventType:是一个字符串类型的事件类型，就是你所需要绑定的事件,
​ 这类类型可以包括如下:
​ blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick,
mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter,
mouseleave,change, select, submit, keydown, keypress, keyup, error

​ [,eventData] 传递的参数，格式:{名:值,名2:值2}

​ handler(eventObject):该事件触发执行的函数

​ 绑定单个事件:

// bind()绑定
$("#test").bind("click",function(){
	console.log("世上无难事，只怕有心人");
});
    
// 直接绑定
$("#btntest").click(function(){
    $(this).prop("disabled",true);
});

​ 绑定多个事件:

//1.同时为多个事件绑定同一个函数
$("#btn1").bind("click mouseout",function(){
	console.log("按钮1...”);
});

//2.为元素绑定多个事件，并设置对应的函数
$("#btn2").bind("click",function(){
	console.log("按钮2被点击了...”);
}).bind("mouseout",function(){
	console.log("按钮2移开了...");
});

//3.为元素绑定多个事件，并设置对应的函数
$("#btn3").bind({
	"click":function(){
		console.log("按钮3被点击了...”);
	}
	"mouseout":function(){
		console.log("按钮3移开了...“);
	}
});

// 直接绑定
$("#btn4").click(function(){
	console.log("按钮4被点击了...”);
}).mouseout(function(){
	console.log("按钮4移开了...");
});

5. Jquery Ajax

5.1 $.ajax

jquery调用ajax方法:

​ 格式:$.ajax({}):

​ 参数:
​ type:请求方式GET/POST
​ url:请求地址url
​ async:是否异步，默认是true表示异步
​ data:发送到服务器的数据
​ dataType:预期服务器返回的数据类型
contentType:设置请求头
​ success:请求成功时调用此函数
​ error:请求失败时调用此函数

5.2 $.get 和 $.post

​ 这是一个简单的 GET 和 POST 请求功能以取代复杂 $.ajax
​ 请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax

$.get("js/data.json",{},function(data){
	console.log(data);
});

$.post("js/data.json",{},function(data){
	console.log(data);
});

5.3 $.getJSON

​ 表示请求返回的数据类型是JSON格式的ajax请求

$.getJsoN("js/data.json",{name:"tom",age:100},function(data){
	console.1og(data);//要求返回的数据格式是JSON格式
});

​ 如果返回的数据不是json格式的，则无法获取

LHICOD
关注
深入JavaScript之JS引擎如何执行JS代码
flying meng的菜鸟居
04-23 5107
我们大概经常能听到“执行环境”、“作用域”、“原型（链）”、“执行上下文”等内容，它们都在描述什么？ JS代码的运行 我们知道了js是弱类型语言，在运行时才确定变量类型。js引擎在执行js代码时，也会从上到下进行 词法分析、语法分析、语义分析 等处理，并在代码解析完成后生成AST（抽象语法树），最终根据AST生成CPU可以执行的机器码并执行。 除此之外，JS引擎在执行代码时还会进行其它处理，如 V8 中还有两个阶段： 编译阶段：该阶段会进行执行上下文的创建，包括创建变量对象、建立作用域链、确定 this
node.js和javascript的关系
热门推荐
【小石头的茅坑】
03-17 71万+
node.js是一个基于 Chrome V8引擎的 JavaScript 运行时环境 一、类比JavaScript和java JavaScript java V8 JVM node.js JRE JavaScript和java都是一门编程语言，至于两者的关系，是雷锋和雷峰塔的关系 V8是google开源的JavaScript引擎，用于执行JavaScript，...
JavaScript的起源？不同的JavaScript和引擎？JS版本发展史？
编程语言开发、框架原理、编程思想、最佳实践技巧经验分享
12-22 1431
1995年，JavaScript诞生了。不得不提到它的标准ECMAScript, 它是一个语言标准，而非具体的语言。JavaScript除了名字有”Java”, 其它和Java没任何关系。Netscape为推广自家的LiveScript，命名中包含当时最流行的编程语言Java来蹭蹭热度。Netscape公司有些人可能不熟悉, 它就是早期被IE做浏览器对抗后来逐渐消亡一家公司。
javaScript-如何引入js代码
一只苟延残喘的卑微蝼蚁
08-20 1万+
javaScript-如何引入js代码 直接po代码和截图 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js01-如何引入js代码</title> <script type="text/javascript"> //script标签的...
JS讲解（JavaScript）
m0_73776815的博客
03-26 7010
JS，全称JavaScript，是⼀种。
基于java Web 训练管理系统设计与实现 源码 论文
qq_251836457的博客
06-17 2000
用户信息实体，主要包括 用户编号,用户名,密码,姓名,性别,出生日期,证件号,民族,政治面貌,单位,入伍时间,照片,班级,排 等信息实体。1 用户( 用户编号,用户名,密码,姓名,性别,出生日期,证件号,民族,政治面貌,单位,入伍时间,照片,班级,排 )讨论信息实体，主要包括 讨论编号,疑问,说明,发布人,发布时间,状态,回答 等信息实体。系统主要用户实体,班级实体,排实体,科目实体,成绩实体,教学视频实体,教学理论实体,讨论实体，如图所示。班级信息实体，主要包括 班级编号,班级 等信息实体。
Claude Code 从安装到调用的保姆级指南（MacOS）
m0_53581755的博客
06-18 109
本文详细介绍了在macOS上安装配置Claude Code的完整流程。主要内容包括：1）安装Node.js（推荐18+版本）；2）通过npm安装Claude Code；3）使用88api中转服务配置API连接（含获取API Key和两种配置方式）；4）VSCode插件的额外配置；5）常见问题排查方法（如连接失败的处理）。教程提供了从环境准备到实际使用的完整解决方案，特别针对国内用户无法直连的问题给出了中转服务配置方案，并附有详细的命令行操作指导和注意事项，帮助用户快速上手Claude Code。
Vue2 + flv.js 对接海康威视摄像头实现数据大屏实时视频监控（完整方案）
pony君的博客
06-18 388
本文介绍了在Vue2数据大屏中对接海康威视摄像头的完整方案，解决浏览器无法直接播放RTSP流的问题。通过对比HTTP-FLV、HLS、WebRTC等技术方案，最终采用HTTP-FLV为主+HLS为备选的策略，利用flv.js和hls.js实现低延迟视频监控。文章详细说明了整体架构设计、前端实现代码（包括分屏布局、播放器初始化等关键代码），并分享了实际项目中的技术选型经验和解决方案。该方案适用于工业MES系统、仓储管理等需要实时监控的场景，支持2x2/4x4分屏切换，已在淀粉厂MES系统中成功应用。
机场设备管理系统 - 项目完整文档
格子杰的博客
06-20 463
机场设备管理系统摘要 机场设备管理系统是一个专为机场设计的设备监控与管理平台，主要功能包括： 设备全生命周期管理：跟踪设备从入库、备机、安装使用到维修的全过程状态（使用中/备机/损坏/送修） 核心业务功能： 实时监控设备状态 故障设备快速更换（备机调配） CUSS自助值机机耗材管理 值机岛/登机口等站点配置 完整的变更历史追溯 技术架构： 采用Next.js框架构建 包含仪表盘、设备管理、站点管理等模块 使用TypeScript定义数据模型 提供CSV导入导出功能 支持PostgreSQL/MySQL数据库
Outline和Docmost vs zyplayer-doc：开源新秀与国产成熟方案怎么选
u010047583的专栏
06-16 698
本文对比了三款知识库产品：Outline、Docmost和zyplayer-doc。Outline和Docmost作为开源新秀，拥有Notion风格的现代界面和实时协作功能，但中文支持和国内生态集成较弱。国产方案zyplayer-doc则提供更全面的功能，包括多种编辑器、Office在线编辑、API文档管理和AI问答，且原生支持中文和国内账号体系。在部署复杂度上，Outline需要OIDC认证，而zyplayer-doc更易部署。
MonkCode + Qwen3.7-Plus：国产AI编程的王炸组合 [1782102026834]
2408_89646393的博客
06-22 125
MonkCode + Qwen3.7-Plus是2026年中文开发者的最佳组合。免费、好用、支持国产。如果你还在为Cursor付费，试试这个组合。立即体验：https://monkeycode-ai.com/?
从爬虫业务视角对比 JavaScript 与 Python 语言特性
Z_suger7的博客
06-22 200
结合语言特性与实战效果，可明确两门语言的爬虫业务适配边界：Python适合静态页面采集、结构化数据抓取、工程化分布式爬虫、复杂反爬场景，凭借成熟生态降低开发和维护成本，是企业常规爬虫业务的首选；JavaScript（Node.js）适合动态渲染页面抓取、高并发批量采集、前端加密参数破解、轻量实时爬虫，凭借异步非阻塞特性实现高吞吐抓取。在实际业务中，主流方案为双语言结合：使用Python搭建爬虫调度、数据存储、反爬核心架构，使用Node.js处理动态页面渲染、高并发请求场景，最大化发挥两门语言的核心优势。
于SpringBoot2+vue2智能无人仓库管理
06-19 257
智能无人仓库管理系统，旨在通过信息化手段优化仓库的补货与取货流程。系统主要面向管理员和员工两类角色，提供了从补货提醒、补货申请到取货申请的一整套闭环管理功能。 核心业务：系统以“物品”为核心，管理员可以发布补货提醒，员工看到提醒后可提交补货申请；同时，员工也可以主动发起取货申请。所有申请均需管理员审核，确保了仓库操作的规范性和可追溯性。 管理目标：通过线上流程化管理，减少沟通成本，避免库存积压或短缺，提升仓库运营效率。
【高级】AccessGuard v1.2：状态管理类型设计 — TypeScript Zustand/Immer 类型化深度实战
最新发布
我的博客
06-22 59
核心痛点: 在企业级 IAM 前端系统中，权限状态横跨 RBAC 角色检查、ABAC 策略评估、用户会话管理和审计追踪四大模块，传统 Redux 的手写 action type 枚举和 connect 高阶组件模式导致类型推导断裂——开发者需要在 action creator、reducer、selector、组件 props 四个位置重复声明同一份类型，一次权限模型升级往往引发数十处类型报错。
构建去中心化社交图谱：Lens + IPFS + EVM
ak123sbksn的博客
06-17 543
LensGraph SDK 的价值不在“又一个社交 DApp”，而在于提供最小可行图谱原语——它不存储、不索引、不运营，只做链上事实的翻译器。当你把嵌入钱包插件、D投票ao 页面、甚至硬件钱包固件时，Web3 社交才真正开始生长出自己的根系。✅ 当前 SDK 已开源：[github.com/lensgraph/sdk]9https://github.com/lensgraph/sdk)（MIT License）✅ 支持 TypeScript / ESM / Deno / Bun。
微信小程序浏览行为序列分析：用户在小程序里的真实动线
UV_UV_UV的博客
06-19 347
本文介绍了如何通过序列模式挖掘分析微信小程序用户行为路径。主要内容包括：1）小程序序列数据的特殊性，如页面栈限制、场景值差异等；2）序列数据采集方案，包括事件定义和SDK实现；3）序列分析方法，涵盖页面转移概率、频繁序列挖掘和流失路径分析；4）可视化展示方案，如桑基图看板。文章强调应区分不同场景值入口的用户路径特征，并针对微信特有的访问中断情况进行分析，以还原真实用户旅程。通过序列分析，可将离散的用户行为转化为具有业务意义的完整故事。
安装nvm 管理node.js版本实现vue2和vue3项目共存
weixin_44717159的博客
06-15 579
地址：https://github.com/coreybutler/nvm-windows/releases。**2.卸载node.js应用：**打开‘控制面板’——‘程序与功能’界面，找到node.js,点击卸载。3.1、【非必须，可直接跳过】选择需要使用的 node 版本，新建两个文件夹。3、配置 node 的 prefix（全局路径）和 cache（缓存路径）4、配置 node 环境变量（通用配置，仅需一次配置）node_cache：node 的缓存。2、修改 npm 默认镜像源。
TypeScript 基础入门：对象、函数、数组、元组、枚举和类型别名
前端开发努力中！
06-18 313
本文记录了 TypeScript 中的常用类型写法，包括对象类型、可选属性、任意属性、函数类型、数组类型、元组类型、枚举类型和类型别名。通过 Vue 3 项目中的实际代码示例，详细介绍了每种类型的语法规则和使用场景。文章特别强调了对象类型优于原始 object 类型的原因，以及如何利用可选属性和任意属性来灵活定义对象结构。此外，还展示了枚举类型和类型别名在业务开发中的实际应用，帮助开发者更好地组织和管理复杂类型。这些类型技巧能够显著提升代码的类型安全性和可维护性。
淘宝商品SKU图自动分类技术深度解析：从DOM容器定位到智能属性识别的完整实现
huangdong_的博客
06-21 204
SKU图是商品规格对应的细节图片，是电商运营中最重要的素材类型之一。类型说明淘宝示例颜色图不同颜色的商品展示红色款、蓝色款、黑色款尺码图不同尺码的细节展示S码、M码、L码型号图不同型号的配置展示标准版、Pro版、Max版平台测试商品数识别成功识别率平均耗时淘宝20019296.0%1.2秒京东20018492.0%1.1秒拼多多20018291.0%1.3秒168820019095.0%1.2秒容器定位：多选择器策略兼容不同平台属性提取。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值