原生JavaScript
原生JavaScript
为了方便查看. 所有的js和css代码都是嵌入式直接写在html代码中
1.js的引入方式
Title
2.数组对象
var arr = ["Maxs_hu", 11, 3, 4]
// 取数组中内容
arr[0]
// 数组长度
arr.length
// 取出数组中最后一个元素
arr.pop() // 即使内部放置索引也会取出最后一个
// 头部插入元素
arr.unshift("xxx")
// 头部移出元素
arr.shift('xxx')
// 切片
arr.slice(0, 3) // 顾头不顾尾
// 反序
arr.reverse()
// 数组拼接
arr.join(':')
// 两个数组的拼接
arr.concat(数组1)
// 排序
arr = [5, 3, "a", "-1"] // 使用sort函数默认使用ascii排序
// sort会取出两个值进行减法运算(减法运算会将字符串转乘number类型进行运算). 最终比出大小
arr.sort(function (x, y){
return x - y
})
// splice用法: 可以删头删尾删中间
// 从1位置开始. 删除两个. 然后在1位置插入后面的三个字符串
arr.splice(1, 2, "xxx", "yyy", "zzz")
// 遍历列表中每个元素
arr.forEach(function(item){console.log(item)}) // 没有返回值
arr.map(function(item){console.log(item)}) // 有返回值
// 案例:
var res = arr.forEach(function(item){return item + "_sb"})
// output: undefined -> void function return value is used
var result = arr.map(function(item){return item + "_sb"})
// map可以拿到返回值
3.Date日期对象
// 四种生成时间的方法
var d1 = new Date() // 获取当前时间
var d2 = new Date('2022/9/29 9:08:08')
var d3 = new Date(7000)
var d4 = new Date(2022, 11, 11, 11, 11, 11, 3000)
// 获取本地时间
d1.toLocaleString()
// 获取当前时间
d1.getDate()
d1.getHours()
d1.getDay()
d1.getSeconds()
// 具体用法可查看文档 https://www.cnblogs.com/linhaifeng/article/9346128.html
4.Math对象
// 向下取整
Math.floor(5.9) // 5
// 向上取整
Math.cell(5.9) // 6
// 取最大. 最小
Math.max(1, 2, 3, 4)
Math.min(1, 2, 3, 4)
// 取0-1中十五位小数的随机数
Math.random()
//取3-7中的随机数
3 + Math.random()*4
5.Json对象
// Json字符串转化成对象
var str1='{"name":"egon","age":18}';
var obj1=JSON.parse(str1);
console.log(obj1.name);
console.log(obj1["name"]);
// dic对象转化成JSON对象
var obj2={"name":"egon","age":18};
var str2 = JSON.stringify(obj2)
console.log(str2)
6.RegExp对象
// 1. 创建正则对象的方式1
// 参数1 正则表达式
// 参数2 匹配模式：常用g(全局匹配;找到所有匹配，而不是在第一个匹配后停止)和i(忽略大小写)
// 注意：正则放到引号内，{}内的逗号后面不要加空格
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$"); // 匹配用户名只能是英文字母、数字和_，并且首字母必须是英文字母。长度最短不能少于6位 最长不能超过12位。
reg1.test("egon_123") // true
// 2. 创建正则对象的方式2
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/; // 不要加引号
reg2.test("egon_123") // true
// 3. String对象与正则结合的4个方法
var s1="hello world";
s1.match(/l/g) // 符合正则的内容["l", "l", "l"]
s1.search(/h/g) // 符合正则的内容的索引0
s1.split(/ /) // ["hello", "world"]
s1.replace(/l/g,'L') // "heLLo worLd"
// 4. 匹配模式g与i
var s2="name:Egon age:18"
s2.replace(/e/,"赢") // "nam赢:Egon age:18"
s2.replace(/e/g,"赢") // "nam赢:Egon ag赢:18"
s2.replace(/e/gi,"赢") //"nam赢:赢gon ag赢:18"
// 5. 注意1：
// 1、如果regExpObject带有全局标志g，test()函数不是从字符串的开头开始查找，而是从属性regExpObject.lastIndex所指定的索引处开始查找。
// 2、该属性值默认为0，所以第一次仍然是从字符串的开头查找。
// 3、当找到一个匹配时，test()函数会将regExpObject.lastIndex的值改为字符串中本次匹配内容的最后一个字符的下一个索引位置。
// 4、当再次执行test()函数时，将会从该索引位置处开始查找，从而找到下一个匹配。
// 5、因此，当我们使用test()函数执行了一次匹配之后，如果想要重新使用test()函数从头开始查找，则需要手动将regExpObject.lastIndex的值重置为 0。
// 6、如果test()函数再也找不到可以匹配的文本时，该函数会自动把regExpObject.lastIndex属性重置为 0。
var reg3 = /egon/g;
reg3.lastIndex
0
reg3.test("egon") // true，匹配成功
true
reg3.lastIndex // 匹配成功reg3.lasIndex=4
4
reg3.test("egon") // 从4的位置开始匹配，本次匹配失败
false
reg3.lastIndex // 匹配失败，lastIndex归为0
0
reg3.test("egon") // 再次匹配成功
true
// 6. 注意2：
// 当我们不加参数调用RegExpObj.test()方法时, 相当于执行RegExpObj.test("undefined"), 并且/undefined/.test()默认返回true。
var reg4 = /^undefined$/;
reg4.test(); // 返回true
reg4.test(undefined); // 返回true
reg4.test("undefined"); // 返回true
7.流程控制
Title
8.函数的使用
Title
9.闭包函数
Title
10.变量与函数提升
Title
11.let语法补充
Title
12.BOM操作
Title
我是div. 点我啊
13.dom-js查找
Title
14.dom-创建 删除 替换
Title
1111
2222
3333
4444
15.dom-修改元素属性
Title
333333
4444444
16.dom-类元素操作
Title
11111
2222
3333
17.模态框
Title
Title
用户名:
密码:
x
18.点击有惊喜
Title
点击有惊喜
19.简易评论框
Title
评论区
20.选项卡
Title
- 首页
- 双色球
- 大乐透
这里是首页
这里是双色球
这里是大乐透