js入门
js介绍
- 基于浏览器的脚本语言
- 是一门面向对象的弱语言
使用js
是嵌入在浏览器的脚本语言,需要再html网页中通过
js的引入方式
- 在标签上通过触发事件执行一段js脚本
<!--onclick 当触发div单击事件执行的代码-->
<div class="app" onclick="alert('这是一个div')"></div>
- 通过 script 标签,来定义脚本
<script>
//会阻塞程序的运行
alert("这是javascript入门")
</script>
- 通过外链的方式引入js文件
<script src="../js/xxx.js"></script>
如果script标签提供了src属性 则不能在标签内写其他内容
js 中的变量
可以使用 var
- var 定义的变量默认情况下是 全局变量 但不能被delete删除
- var 修饰的变量可以被重复声明
- var 存在变量提升的现象
- 一个网页中的所有全局变量都会默认成为window(内置对象,代表一个网页)的属性,可以被delete删除,删除后为undefined
let
- let修饰的变量是一个局部变量
- 存在 变量提升的现象
- 声明的变量不能被多次重复定义
- 会存在暂时性死区现象
const
- 常量 其他用法和let一样
js 中的运算符
算数运算符 +,-,*,/,% ,
**
- /0结果为Infinity无穷 正值为无穷大 负值为无穷小-Infinity
- 如果 算数运算符有任意一个不是数字,则返回NaN
- isFinite() 判断是否是有穷的
- isNaN() 判断一个数是否是 非数 会对内容进行转换,如果可以转成数字,则返回false,反则返回true
- Number.isNaN() 结果只有NaN 才返回true,其他一律返回false
- 5
**
3 表示5的3次方 - 空字符串转成数字是0
- null 转成数字是0
- undefined 无法转成数字
- true 转成数字为1,false为0
- 空数组转成数字为0
- 空对象无法转成数字
- 空数组+空数组=长度为0的字符串
- 空对象转字符串为[object Object]
- 空数组 转成字符串为长度为0 的字符串
NaN != NaN
关系运算符 >, >=, <, <=, ==, !=, =, !
- typeof()查看变量类型
- == 比较的是 值 是否相等,类型如果不一致,会自动转换成同一种数据类型进行比较
- === 比较 类型 和 值 是否相同
- null :代表值为空 可以转成数字0
- undefined :代表值为定义 不可以转成数字0
- null == undefined返回true null=== undefined返回false
逻辑运算符 (参考java)
位运算符 (参考java)
位移运算符 (参考java)
一元运算符 ??,++,–
- ??: 给 null 或者 undefined 设置默认值
三元运算符 (参考java)
赋值运算符 (参考java)
js 中的判断
if 条件只强调结果为真 即为为真 否则为假
- boolean表达式
- 数字 0为真、其他为假
- 字符串,长度为零的字符串为假 其他均为真
- null 和 undefined 均代表假
- 对象 均为真
- 数组(列表) 均为真
switch 有穿透效果 支持数字和字符串 不支持->
js 中的循环
while (参考java)
do while (参考java)
for (参考java)
js 常见的数据类型
null 和 undefined
number
- 表示数字, 使用Number 类表示
- 创建一个数字对象: Number(n) 、new Number(n)(构建出一个对象Number{n})
- 数字对象.toFixed(n) 保留n位小数 建议n的取值范围在0-20之间 默认采用四舍五入
字符串
- ‘’ 和 “” 都可以表示字符串 String() 、new String()
- padStart(n,‘’) 左对齐 在前面补字符串,一直补到长度为n 默认补空格
- padEnd(n,‘’) 由对齐 在后面补字符串,一直补到长度为n 默认补空格
- split(‘’,n) 拆分字符串 返回值为数组 传入n后代表获取拆完后的前n个值 不传默认获取所有
- substr(n,m) 截取字符串 从n开始获取m个字符
- substring(n,m) 截取字符串 从n开始到m结束 若m为负值则代表从后往前截取 正值代表索引 不传代表从n截取到尾部
- 支持定义字符串模板
${js表达式}xxxx
js表达式中就是变量名和方法
正则表达式 Regexp
-
创建方式 new Regexp(“”) 、 /xxx/
-
regex.test(" ") 验证传入的字符串是否符合正则表达式 返回boolean 通过RegExp$1-9 来获取分组内容
-
regex.exec(" ") 获取正则表达式匹配的内容及其分组的内容 默认只能获取正则表达式第一次匹配的内容
-
修饰符: g 全局模式 new Regexp(“”,g)、/xxx/g g模式下exec可以通过反复调用获取正则表达式匹配的所有内容
-
i 忽略大小写
-
m 多行模式 匹配多行的字符串 多行字符串用```(反逗号)包裹 必须使用g模式
-
s 点模式 .匹配所有
字符串中支持正则表达式的方法 (必须掌握)
- split(regex) :根据参数拆分字符串
- replace(regex,“”) : 将正则表达式匹配的内容 替换成指定内容 默认只能替换一次 在g模式下可以匹配多个
- match 获取匹配的内容 在非g模式下返回和exec结果一样,在g模式下返回一个数组,里面是所有匹配的对象
- search 获取正则表达式第一次匹配内容的索引位置
js 中的常用类
数学类
- ceil 向上取整
- floor 向下取整
- round 四舍五入
- max/ min 最大/最小值 支持传入多个数
- random 返回一个0-1的随机小数,包含0不包含1
- parseInt 取整(舍弃小数)
日期类
- new Date() : 获取日期 不传默认是当前系统日期
- date.getTime() : 获取时间戳 (1970年至date的时间)
- date.getFullYear() : 获取date的年份
- date.getMonth() : 获取月份(0-11)
- date.getDate() : 获取天数
- date.getHours() : 获取小时(24小时制)
- date.getMinutes : 获取分
- date.getSeconds : 获取秒
- date.getMilliseconds : 获取毫秒
- date.getDay : 获取当前周几
js 中的数组
数组的创建方式
- new Array() 创建一个 空的数组 ,返回一个数组对象
- new Array(n) 创建一个指定长度的数组
- new Array(a,b,c…) 创建同一个包含内容为a,b,c…的数组对象
- [a…] 创建一个包含a…的数组(字面量定义方式)
数组常见的属性
- length 获取数组的长度
数组常见的方法
- array[n] 获取下标为n的元素
- array[n] = m 将下标为n的元素改成m
- array.push(n…) 向数组尾部添加元素
- array.unshift(n…) 向数组头部添加元素
- array.pop() 删除尾部元素 并返回删除的元素
- array.shift() 删除头部元素 并返回删除的元素
- array.splice(index,n) 删除指定位置的n个元素
- array.splice(index,n,newValue…) 删除指定位置的n个元素 然后添加新元素
- array.splice(index,0,newValue…) 向指定位置添加元素
数组的高级用法
- array.map((val,index,arr)=>val*n) map映射 将数组中的元素扩大n倍
- array.filter((var,index,arr)=>{…}) 过滤
- reduce((result,val),defaultValue=>{})
- reduce((result,val)=>{})
- find((val, index, arr)=> {…}) : 查找满足条件的第一个元素,如果找不到,返回undefined
- findIndex((val, index, arr)=> {…}) : 查找满足条件的第一个元素索引,如果找不到,返回-1
- some((val, index, arr)=> {…}): 判断数组中是否有元素满足条件
- every((val, index, arr)=> {…}): 判断数组中是否都满足条件
数组的遍历方式
- for…in(遍历的 是数组中的索引,从零开始)
for(let index in array) {
console.log(array[index]);
}
- for …of 遍历
for(let val of array) {
console.log(val);
}
- forEach 遍历
array.forEach((val, index)=> {
console.log(val, index);
})
- 键遍历
for(let key of array.keys()) {
console.log(array[key])
}
- 值遍历 , for … of 默认使用的就是 值遍历
for(let val of array.values()) {
console.log(val);
}
console.log(array)
- 键值对遍历
for(let entry of array.entries()) {
console.log(entry[0] + "=" + entry[1])
}
数组的解构赋值
解构赋值 : ES6允许按照一定的模式从数组或者对象中提取数据、然后对变量进行赋值
- 按照数组的结构顺序进行解构然后赋值 适用于数组元素较少时
let array=[0,1,2,3,4,5];
//将数组的第一个元素赋值给a,第二个元素赋值给b
let [a,b]=array;
- 当解构位置超过数组位置时值为undefined 可以通过 = 来赋默认值
let a = 10;
lat b = 15;
//交换a b 的值
[a,b]=[b,a]
数组扩展运算符 …
- …array 将数组展开
- array.concat(array2) 合并数组
- [a,b,c,…d]=x d的值是x数组除a,b,c 剩下的所有元素 此时…只能运用在最后一个元素
js 中的对象
创建一个对象 {} 、new Object()
- 在js中 对象是以键值对形式的 对象的键是一个字符串 可以省略引号 如果键不符号标识符的命名规范则不能省略引号
- 对象的值同时也支持函数 但是在函数中this不能省略
形似数组的对象:对象中的键 是数字 对象中有一个length 属性,且值为数字
- Array.from(obj)
对象的遍历方式
- 可以通过for…in 遍历
for(let key in obj){
console.log(key,obj[key]);
}
- 键遍历
//获取对象中的所有键
let keys = Object.keys(obj);
for(let ksy of keys){
console.log(key,obj[key]);
}
- 键遍历
let values = Object.velues(obj);
for( let val of valuse){
console.log(val);
}
- 键值对遍历
let entries = Object.entries(obj);
for( let [key,val] of entries){
console.log(key,val);
}
console.log(entries);
动态
- 属性为动态时将属性名用[n]表示 n可以改变 值可以直接用变量
- 当对象的属性名字符串表示形式和 值的变量名 相同的时候,可以省略
- 当某一个属性对应的值 是一个函数的时候可以省略:function
对象的解构赋值
- 通过{n:m}进行解构 n为解构规则,按照该名称从对象中找 m为解构后被赋值的变量名 如果n和m名字一样可以简写 {n}
- 如果对象中没有该属性,则返回值为undefined
- 无法对null 和 undefined进行解构赋值
- 对象在解构赋值时 如果解构赋值没有以声明(var、let)开头时,必须用小括号()括起来
对象的展开运算符 …
- Object.assign(a,b) let c ={…a,…b } 合并两个对象
- 如果一个对象包含Symbol.iterator , 那么这个对象一定可以使用for…of 进行迭代遍历
js 的JSON序列化
JSON 序列化: 将数组/对象 转成 字符串
- JSON.stringify(obj)
JSON 序列化: 将字符串 转成 数组/对象
- JSON.parse(json)
js 中的函数
函数是一种行为,代表能做什么,相当于Java的方法
- 函数的作用:可以对代码进行封装,以达到代码复用的效果
JS 中,使用function关键字来定义函数,属于Function类型 会默认成为window的方法 window可以省略
- function 函数名([参数列表]){ 函数体 };
- let 函数名 = function(){ 函数体 };
- let 函数名 =new Function([参数列表],函数体); Function中的参数全为字符串
- 在js中,函数中如果没有return,则代表return undefined 如果return了多个值只会返回最后一个值
- 函数在定义参数时可以设置默认值
函数的内置变量arguments
- 是一个形似数组的对象
- 可以通过函数中的内置变量arguments来获取传入的所有参数
- 可以通过arguments.callee获取函数本身
rest 不定向参数 …
- 不定向参数可以代替arguments 来获取调用方法传入的参数 会变成一个数组对象
- 不定向参数只能出现在所有参数的尾部 且最多只能有一个
函数的解构赋值
在函数参数上使用解构赋值
在函数中的this关键字
- 在窗口中定义的函数,this指向Window
- 在对象中定义的函数,this指向当前对象
构造函数
- 通过new 关键字调用的函数
- 构造函数相当于java中的类 参数相当于属性 内部的普通函数相当于方法
- 构造函数中的this 指向当前对象
- 在函数中,可以通过 new.target 来判断一个函数是否是构造函数,在普通函数中new.target=undefined
- 在构造函数中new.target返回函数本身
箭头函数
- 是函数的一种简单写法,语法可以参考java lambda表达式
- 箭头函数中的this默认指向函数 所在环境中的对象
- 构造函数不能使用箭头函数
函数的方法
以下三个方法均可以可以修改this的指向
- call 调用函数 函数名.call(指向对象,参数列表) 参数列表为函数需要的参数列表
- apply 调用函数 函数名.apply(指向对象,数组) 数组中存放的是函数的参数列表
- bind 绑定函数 函数名.bind(指向对象,参数列表) 不会调用函数而是返回一个绑定后的函数,若想调用需要再加一个()但是参数不能修改
- 如果指向对象为null或undefined 则不修改指向对象
- 箭头函数的this指向不能修改
如果对一个对象的成员方法进行解构赋值,那么方法中的this指向会发生改变,需要通过call、apply、bind重新修改this指向
js prototype原型
可以对已知的类型进行扩展
- 已知类型.prototype.函数名
BOM 浏览器对象模型
window : 一个网页就是一个窗口,一个window 对象代表一个网页
screen : 和浏览器 屏幕相关的一个对象(了解)
navigator : 和浏览器 导航 相关的对象 可以获取浏览器的对象(了解)
history : 获取浏览器 历史记录 的对象
location : 和浏览器 网址 相关的对象
document : 和浏览器相关的 文档 对象
frames : 和浏览器 框架 相关的对象
window
- var在窗口中修饰的变量 是全局变量 ,会默认成为 window的属性
- 在窗口定义的函数 ,也会自动称为window 的方法
- 在使用window 对象的时候,可以省略window 关键字
对话框
- 提示框 alert(提示信息)
- 确认对话框 confirm(提示信息) 有返回值 true/false
- 输入对话框 prompt(提示信息) 有返回值 返回输入的内容 如果点击取消则返回null
- 会阻塞程序的运行
open() : 打开一个窗口
-参数列表: url(“”) , target(“”)//打开的样式,新窗口…, size("width: ,height: ")
close() : 关闭当前窗口
setTimeout(fn,delay ) : 用来设置延迟加载的代码
- fn :延迟执行的函数
- delay : 延迟时间 ,单位是毫秒
- 可以通过 cleanTimeout (句柄:延迟的返回值) 取消延迟
function log(){
console.log("hello");
}
setInterval(log, 3000) // 延迟3s ,每间隔 3秒 执行一次
log(); //进来就触发
// let playing = false ;
// function log(n) {
// console.log("hello" + ++n);
// playing = setTimeout(`log(${n})` , 3000)
// }
// log(0);
// function closeLog() {
// clearTimeout(playing)
// }
// 在控制上,输入一个 hello ,要求延迟3秒
// 在控制台上,要求 每间隔 3秒 打印一次 hello
//setTimeout( log , 3000)
// setTimeout(function(){
// log(3) ;
// } , 3000)
// let n = 3 ;
// setTimeout( "log("+ n +")" , 3000)
// console.log("world");
// let win = false ;
// function openWin() {
// win = window.open("./26.css-动画.html" , "_blank", "width=600px,height=300px;") ;
// console.log(win);
// }
// function closeWin() {
// // 获取弹出的窗口
// if (win) {
// win.close();
// }
// }
// 提示框 类型
//alert("我是一个弹出框"); //
// 确认对话框 confirm 有返回值, 返回 true / false
// if (confirm("您确定要删除该数据吗?")) {
// console.log("该条数据已被删除")
// }else{
// console.log("您已放弃该操作")
// }
// 输入对话框, 返回输入的内容,如果点击取消按钮,则返回一个 null
// let x = prompt("请输入您的手机号")
// console.log(x);
setInterval(fn,delay)
- 用来 进行轮询 (每间隔一段时间触发一次代码)
- 可以通过cleanInterval(句柄)取消轮询
<head>
<style>
#app {
width: 500px;
height: 500px;
background-color: red;
margin:200px auto 0;
font-size:400px;
color:#ffff;
text-align: center;
line-height: 500px;
}
</style>
</head>
<body>
<!-- <a onclick="closeLog()">取消延迟</a> -->
<div id="app">10</div>
<script>
// 获取 div元素
let div = document.querySelector("#app") ;
// 使用轮询 ,每间隔 1秒修改数据
let playing = setInterval(function(){
// 获取 div 标签体中的内容
let num = div.innerText - 1 ;
// 将 修改 后的内容,设置到标签中
div.innerText = num ;
// 当 num 的值 为 0 时候,停止轮询
if (num <= 0) {
clearInterval(playing);
// 将内容修改为 过年了!!!
div.innerText = "过年了" ;
// 设置字体大小为 80px
div.style.fontSize = "120px";
}
}, 1000)
</script>
网址
location 当前网址
- location.href 获取当前网址 可以实现网页跳转
- location.protocol 获取协议 尾部会多含一个
:
- location.hostname 获取域名/IP
- location.host 获取 主机 (域名加端口)
- location.port 获取端口号
- location.pathname 获取请求地址
- location.search 获取请求参数 头部会多含一个
?
- location.assign(“网址”)=location.href 可以实现页面跳转 会有历史记录
- location.replace(“网址”) 也可以实现页面跳转 直接替换当前网络地址 不会在历史中留下访问记录
- location.reload 重新加载页面 可以用来刷新
- location.hash 获取锚点
new URL(“网址”) : 获取任意网址的每一部分
new URLSearchParams(search) 获取网址中的请求参数
- get(key) 根据键获取值
- getAll(key) 根据键获取多个值
- has(key) 判断某个键是否存在
网址的组成部分
例如 https://www.baidu.com :443/s?wd=图片
(https)协议 protocol: 是计算机在网络中进行数据传输的一种规范
- 网页主要采用http 和 https 协议 是应用层协议 底层采用的是 TCP/IP 协议
- TCP/IP 是传输层协议
- 浏览器 遵循 http 和 https 协议
- http 采用明文进行数据传输
- https 是一种安全协议、 对传输的数据进行加密处理,可以通过证书进行验签
(www.baidu.com)域名 host: 是网络中一台计算机的唯一标识,可以简单理解为和ip一一对应
- 协议和域名采用
://
分割
(443)端口号 port : 用来查找匹配计算机指定的服务 ,端口号的取值范围是 0-65535 之间
- http协议在进行数据传输的时候采用的默认采用的端口号是80
- https 协议默认采用的端口号是443
- 域名和端口号采用
:
分割
(/s)请求路径 path : 用来定位 服务中的某一个具体协议
- 端口号和请求路径用
/
分割 多层路径也用/
分割
(wd=图片) 请求参数 : 在使用某一个具体服务的时候传递的数据请求参数
- 采用 键=值 的方式进行传递,多个值采用&进行分割
- 请求路径和请求参数用
?
分割
history
- history.go(n) : n为正及为前进n步,为负则为后退n步
- history.forward=history.go(1) 前进
- history.back=history.go(-1) 后退
- history.length 查看跳转了几次
DOM 文档对象模型
操作DOM的步骤
- 找到需要操作的DOM 元素(需要选择器)
- 根据元素的属性/方法 来完成具体的效果
JS选择器
为了快速选择网页中的标签
常见的选择器
- document.getElementByID(“”) : 根据 ID 选中对应的元素 返回一个对象
- document.getElementByTagName(tag) : 根据 标签名 选择的元素 返回一个形似数组的对象
- document.getElementByName(name) : 根据标签的 name属性 选择的元素 返回一个形似数组的对象
- document.getElementByClassName(class) : 根据标签的 class属性 选择的元素 返回一个形似数组的对象
- document.querySelector(css选择器) : 根据css选择器返回满足条件的第一个元素
- document.querySelectorAll(css选择器) : 根据css选择器返回满足条件的所有条件 (元素也可使用)
所有的html标签都可以使用 id ,class , style , title
**可以直接通过元素调用的属性有 id、name、style、title、src、href、value、checked、selected **