BOM
- 概念：Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话， JavaScript 将浏览器的各个组成部分封装为对象。
- 组成：
- Window：浏览器窗口对象
- Navigator：浏览器对象
- Screen：屏幕对象
- History：历史记录对象
- Location：地址栏对象
- window
- 介绍：浏览器窗口对象
- 获取：直接使用window，其中window，可以省略
window.alert(“Hello Window”);
alert(“Hello Window”);
-
属性：
-
history：对 History 对象的只读引用。
-
location：用于窗口或框架的 Location 对象。
-
navigator：对 Navigator 对象的只读引用。
-
innerHeight
-
innerWidth
//浏览器的有效高宽（显示内容区的高宽） console.log(document.write("height:" + window.innerHeight)); console.log(document.write("width:" + window.innerWidth));
-
-
方法：
-
alert()：显示带有一段消息和一个确认按钮的警告框。
// 1. 警告窗口 window.alert() alert() -
confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框.
// 2.确认窗口 // 当点击确定时返回true;点取消返回false let b = window.confirm('确认要删除当前信息吗？') let b = confirm('确认要删除当前信息吗？') console.log(b); -
setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式(以固定间隔频率执行)。
-
clearInterval():结束定时器。
-
setTimeout()：在指定的毫秒数后调用函数或计算表达式(时间到期后只执行一次)。
-
prompt()：弹出输入框
//弹出输入框 // 第一个参数是提示信息；第二个参数是默认值；返回类型是字符串，返回输入的内容 let answer = window.prompt('请输入您的答案：') console.log(answer); -
open()：自定义弹出窗口
//弹出自定义窗口 // 第一个参数是弹出窗口的url； 第二个参数是弹出的目标，跟a标签的target // 返回值是弹出页面的window对象， //在弹出的页面中，用window.opener访问父页面的内容： window.opener.box window.open('index.html', '_blank')
-
- Location
-
介绍：地址栏对象
-
获取：使用 window.location 获取，其中 window. 可以省略。
window.location.属性;
location.属性;
-
location.href用于跳转页面
//浏览器的有效高宽（显示内容区的高宽）
console.log(document.write("height:" + window.innerHeight));
console.log(document.write("width:" + window.innerWidth));
//url地址. protocol//hostname:port/pathname
console.log("href: " + location.href)
// 主机名（域名）
console.log("hostname: " + location.hostname);
// 当前页面的路径和文件名
console.log("pathname: " + location.pathname);
// 端口名
console.log("port: " + location.port);
// 网络协议 http: https:
console.log("protocol: " + location.protocol); document.getElementById('gotoBaidu').addEventListener('click', ()=>{
// 在前端的js代码中跳转页面
location.href = 'http://www.baidu.com'
})
- history
-
介绍：历史记录对象
-
history.back()
-
history.forward()
// 浏览历史记录 document.getElementById('b').addEventListener('click', ()=>{ history.back() //在历史页面中后退一步 }) document.getElementById('f').addEventListener('click',()=>{ history.forward() //在历史页面中前进一步 })
- localStorage
- 介绍：在浏览器（客户端）上保存信息的对象。
- setItem()
- getItem()
- removeItem()
- clear()
localStorage.setItem("name", "hqyj")
//保存信息
console.log(localStorage.getItem("name"));
//读取信息
localStorage.removeItem("name")
//删除信息
localStorage.clear()
//清除localStorage的所有信息
数组
-
JavaScript 中 Array对象用于定义数组。
-
定义:
var 变量名 = new Array(元素列表); //方式一 var 变量名 = [ 元素列表 ]; //方式二 -
访问：
arr[ 索引 ] = 值;
注意事项
JavaScript 中的数组相当于 Java 中集合，数组的长度是可变的，而 JavaScript 是弱类型，所以可以存储任意的类型的数据。
- 属性：
| 属性 | 描述 |
|---|---|
| length | 设置或返回数组中元素的数量。 |
- 方法：
| 方法 | 描述 |
|---|---|
| push() | 将新元素添加到数组的末尾，并返回新的长度。 |
| splice() | 从数组中删除元素。 |
| forEach() | 遍历数组中的每个有值的元素，并调用一次传入的函数 |
| join() | 把数组元素用指定的字符拼接成一个字符串 |
箭头函数(ES6)：是用来简化函数定义语法的。
具体形式为: (…) => { … } ，如果需要给箭头函数起名字： var xxx = (…) => { … }
let arr = [] ;
// arr[0] = "JAVA"
// arr[1] = "HTML"
arr.push("Java") ;
//往数组的末尾添加一个元素
arr.push('HTML') ;
arr.push('JavaScript');
arr.push('jQuery') ;
arr.push('Vue');
for(let i=0; i<arr.length; i++){
console.log(arr[i]);
}
//数组元素拼接成字符串：
Java,HTML,JavaScript let str = arr.join(',');
console.log(str);
// forEach方法的参数是一个函数，这个函数有三个参数：
// current - 当前循环的数组元素的值；
//index - 循环变量（数组下标）；
//arr_full - 整个数组对象
// 循环处理代码就写在箭头函数里
arr.forEach((current, index, arr_full)=>{
console.log(current);
})
字符串
-
String字符串对象创建方式有两种：
var 变量名 = new String("…") ; //方式一 var 变量名 = "…" ; //方式二 -
属性：
属性 描述 length 字符串的长度。 -
方法：
方法 描述 charAt() 返回在指定位置的字符。 indexOf() 检索字符串。 trim() 去除字符串两边的空格 substring() 提取字符串中两个指定的索引号之间的字符。 toFixed() 保留小数的位数（四舍五入） parseInt(‘123abc’) 字符串转整数 parseFloat(‘3.14’) 字符串转小数. 特性跟parseInt类似 replace(‘abc’, ‘xxx’) 替换第一个匹配字符串字符串 replaceAll(‘abc’, ‘yyy’) 替换所有匹配的字符串
举例：
let s1 = '123'
let s2 = 123
// == 判断值是否相等
console.log(s1 == s2);
//true
// === 全等，判断类型和值是否都相等
console.log(s1 === s2);
//false
//length 字符串的长度
console.log(s1.length);
let s3 = '123abc456abc'
// 返回指定位置的字符，下标从0开始
console.log(s3.charAt(3));
// 返回指定的字符串在另一个字符串中第一次出现的位置
// 如果不存在该字符串，返回-1
console.log(s3.indexOf('abc')); //返回指定的字符串在另一个字符串中最后一次出现的位置
console.log(s3.lastIndexOf('abc')); // 替换第一个匹配字符串字符串
console.log(s3.replace('abc', 'xxx'));
// 替换所有匹配的字符串
console.log(s3.replaceAll('abc', 'yyy'));
// 按下标截取一段字符，左闭右开
console.log(s3.slice(3, 6));
// 按指定字符把一个字符串拆分为数组
// 指定的字符串可以有多个字母， 还可以用空字符
let s4 = 'Java,HTML,JavaScript'
let arr = s4.split(',') let arr2 =
'Java'.split('')
//把字符串拆分为字母数组 ['J','a','v','a']
console.log(arr2[0]);
// 去空格(去掉左右空格)
let s5 = ' abc def '
console.log(s5.trim());
// 大小写转换
console.log(s4.toLowerCase());
console.log(s4.toUpperCase());
// 字符串转整数. 只要是数字开头的字符串都可以转整数，后面的非数字的字符忽略
// 如果字符串不是数字开头，返回NaN
console.log(parseInt('123abc')); //123
console.log(parseInt('a123')); //NaN
console.log(parseInt('123')); //123
console.log(!isNaN('123'));
// 字符串转小数. 特性跟parseInt类似
console.log(parseFloat('3.14')); //3.14
console.log(parseFloat('3.14abc')); //3.14
console.log(parseFloat('a3.14')); //NaN
// 保留小数的位数（四舍五入）
let f = 22.7358 console.log(f.toFixed(2));
正则表达式
常用的 正则表达式
// 正则表达式
let p = /[0-9]/
console.log(p.test('123a'));
//email
let mail =/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z] {2,4})$/
console.log(mail.test('yudr_cq@hqyj.com'));
//url
let url =/^http://([w-]+.)+[w-]+(/[w-./?%&=]*)?$/
// phone let
phone = /^(13[0- 9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])d{8}$/
// 身份证号码18位
let id = /^[1-9]d{5}[1-9]d{3}((0d)|(1[0-2]))(([0|1|2]d)|3[0- 1])d{4}$/
JSON介绍
- 概念：JavaScript Object Notation，JavaScript对象标记法。
- JSON 是通过 JavaScript 对象标记法书写的文本。
JSON-基础语法
1、定义：
var 变量名 = ‘{“key1”: value1, “key2”: value2}’;
示例：
var userStr = '{"name":"Jerry","age":18, "addr":["北京","上海","西安"]}'
2、JSON字符串转为JS对象
var jsObject = JSON.parse(userStr);
3、JS对象转为JSON字符串
var jsonStr = JSON.stringify(jsObject)
4、value 的数据类型为：
- 数字（整数或浮点数）
- 字符串（在双引号中）
- 逻辑值（true 或 false）
- 数组（在方括号中）
- 对象（在花括号中）
- null
JSON文件
-
一种数据格式，广泛用于前后端数据交互
-
json文件扩展名是.json
1、特征：
- 只有符号：{} [] “” : ,
- 引号只能用双引号
- 字符串用引号，数字和boolean不加引号；属性也要用引号
- json文件中不能写注释
2、用json描述对象
{
"stuName": "张三",
"stuSex": "男",
"stuAge": 22
}
3、用json描述数组（列表）
[
{
"stuName": "张三",
"stuSex": "男",
"stuAge": 22
},{
"stuName": "李四",
"stuSex": "男",
"stuAge": 22
}
]
4、用json描述嵌套对象
{
"className":"计科一班",
"grade":"2022",
"studentList":[
{
"stuName": "李四",
"stuSex": "男",
"stuAge": 22
}
],"classRoom":{
"roomNum":808
}
}
3671
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
