js完整篇

js开篇：前端三巨头我们已经分别认识了两位大哥HTML超文本语言和css层贴样式表，那么接下来我们就来介绍他们的好基友js语言。
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言，当然值得一提的是他虽然叫JavaScript但是他和Java没有一点点关系，只是为了当时蹭热度。

javascript 与 ecmascript：因为JavaScript没有一个固定的标准，所以当时市面上是以js开发公司的标准来进行定义的，但后来这家公司将这个标准制定交给了国际标准制定机构，所以有了ecmascript，所以二者其实是一个东西。

老规矩学习语言先接触注释：//单行注释 /**/多行注释

js的变量：
js变量的命名规范：
1.变量名只能是数字、字母、下划线、$
2.js中推荐使用驼峰式命名
3.不能用关键字作为变量名
在介绍中首次声明变量需要参数：var和let
在es6版本中出现了let方法定义，var声明变量是全局变量，let是区分全局和局部的。（可以用for循环来验证）
js的常量：
js中具有真正意义上的常量，也就是需要用一个特殊的关键字const 来声明常量，否则会报错。

数据类型：js是一门单纯的面向对象语言，即一切皆对象，同时也是一门动态语言。

1.数值类型number：
当你用typeof查询一个数字类型的变量的时候会返回一个number类型（其中包括了小数），同时你可以使用parseint或者parsefloat来进行类型的转换，当小数转化成整数的时候会舍弃小数部分，当你要转换的类型是123sdasdajs2312dasd这种字符串的形式的时候，也是会保留整数部分。
同时在这里为大家介绍一种特殊的数值类型NaN （not a number ）不是数值类型。

2.字符类型：
js通过单引号和双引号来定义字符串，但是不支持三引号，当我们定义多行我字符串的时候需要使用模板字符串。

模板字符串：通过``来定义多行字符串，除了多行字符串的定义之外还可以实现格式化字符串的操作。
在进行格式化的时候会搜索${}大括号中变量，如果变量没有定义会报错。

字符串的拼接：在js中我们直接使用+来进行字符串的拼接。

字符串常用方法：.length（）字符串长度
.trim（）消除空格
.trimLeft（）消除左空格
.trimRight（）消除右侧空格
.charAt（n）第n个字符
.concat（value）拼接
.indexOf（value）查询value索引位置
.substring（from，to）按照索引获取子序列
.slic（start，end）切片
.toLowerCase() 小写
.toUpperCase() 大写
.split(delimiter, limit) 分割，第一个参数是切割参照物，第二个参数是切割个数
js是弱类型(内部会自动转换成相同的数据类型做操作)

3.布尔值：在python中我们使用布尔值的时候是首字母大写True、False，但在js中是小写的true、false。在js中空字符串、0、null、und efined、NaN是假。

null
表示值为空 一般都是指定或者清空一个变量时使用

undefined
表示声明了一个变量 但是没有做初始化操作(没有给值)
函数没有指定返回值的时候 返回的也是undefined

二者一个是清空变量有值为空，一个是本身没有没有值。

4.对象：js中一切皆对象

数组：类似于python中的列表 object类型。
.push（）结尾追加
.pop（）结尾删除
.unshift（）前端添加
.shift （） 前段删除
.slice（） 切片
.reverse（） 反转
.join（） 拼接前端按照括号内的数值拼接
.contact（）拼接列表
.sort（）排序
三个比较重要的方法：
ll.forEach(function(value,index,arr){console.log(value,index,arr)},ll) # 元素 + 元素索引 + 元素的数据来源，最多只有三个参数。
.splice（a,b,c）先删除在添加，第一个参数是起始位置，第二个是个数，第三个是添加的元素
l1.map(function(value,index,arr){return value*2},l1) 数学运算

5.运算符：
++表示自增1 类似于 +=1 加号在前先加后赋值 加号在后先赋值后加

比较：1 == '1' # 弱等于 内部自动转换成相同的数据类型比较了
1 === '1' # 强等于 内部不做类型转换

逻辑运算： js中 && || ! 与或非 优先级与python类似

6.流程控制：if（条件）{代码块} else{代码块}

for（条件）{代码块}

while（条件）{代码块}

switch（参数）{case 条件：代码块 break；case 条件：代码块 break；}
（switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。）

三元运算：c = a > b ? a : b，这里的三元运算顺序是先写判断条件a>b再写条件成立返回的值为a,条件不成立返回的值为b;三元运算可以嵌套使用

7.函数：在js中定义函数需要关键字function
function 函数名(形参1,形参2,形参3...){函数体代码}
arguments关键字：能够获取到函数接受到的所有的参数
return返回值，只能拿到一个值，无法收到多个
匿名函数：不起名的函数func
箭头函数：var func1 = v => v; 箭头左边的是形参 右边的是返回值（类似于python的匿名函数）

局部变量和全局变量：
局部变量：
在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。

全局变量：
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

变量生存周期：
JavaScript变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。

作用域
首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。（与python作用域关系查找一模一样）

8.词法分析：
JavaScript中在调用函数的那一瞬间，会先进行词法分析。

词法分析的过程：

当函数调用的前一瞬间，会先形成一个激活对象：Avtive Object（AO），并会分析以下3个方面：

1:函数参数，如果有，则将此参数赋值给AO，且值为undefined。如果没有，则不做任何操作。
2:函数局部变量，如果AO上有同名的值，则不做任何操作。如果没有，则将此变量赋值给AO，并且值为undefined。
3:函数声明，如果AO上有，则会将AO上的对象覆盖。如果没有，则不做任何操作。

函数内部无论是使用参数还是使用局部变量都到AO上找

9.自定义对象：类似于python中的字典，但是js中的这个属性要相较于python中的使用更简单方便。
定义方式一：var d1 = {'name':'jason','age':18}，除了d1[key]这种方式调用外还可以作为属性来调用d1.key
定义方式二：需要使用new
var d2 = new Object（）
d2.name = 'jason'
{name: "jason"}

d2['age'] = 18
{name: "jason", age: 18}

10.Date对象：通过new Date（）可以得到一个时间格式的对象

方法： .toLocaleString() 格式化的时间
.getDate() 获取日
.getDay() 获取星期
.getMonth() 获取月份(0-11)
.getFullYear() 获取完整的年份
.getHours() 获取小时
.getMinutes() 获取分钟
.getSeconds() 获取秒
.getMilliseconds() 获取毫秒
.getTime() 时间戳

11.json对象：为了使数据能够跨平台使用，js中也需要将数据进行序列化和反序列化。
JSON.stringify() dumps 序列化
JSON.parse() loads 反序列化

12.RegExp对象：我们继续类比python中的操作，在python中我们想使用正则的时候必须导入re模块，而在js中我们需要生成regexp对 象，因为js的不严谨所以正则存在几个需要我们注意的地方
两种方式检索：
第一种
let reg1 = new RegExp('^[a-zA-Z][a-zA-Z0-9]{5,11}')
第二种
let reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/

以上两种都是只检索一个，如果想要全局检索则需要添加g在末尾
不严谨一：js存在一个lastindex机制，当你第一次检索成功后索引就会至于最末尾，当你第二次检索就找不到了，这时lastindex重置，第三次又能够找到了。
不严谨二：当你的检索条件什么都没有的时候会传回一个undefined，如果你的检索条件和undefined相符合那么就会发生检索成功。

13.Math对象：
abs(x) 返回数的绝对值。
exp(x) 返回 e 的指数。
floor(x) 对数进行下舍入。
log(x) 返回数的自然对数（底为e）。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。

BOM与DOM操作：
截止目前为止，虽然我们接触了很多js语法牡丹石我们与HTML的交互根本没有，所以我们需要将他们串联起来
BOM：浏览器对象模型，js操作浏览器
DOM：文档对象模型，js操作标签

BOM操作：

window对象：指代的就是浏览器窗口
window子对象：通过window子对象对浏览器进行一些操作
window.innerWidth（）浏览器窗口宽度
window.innerHeight（）浏览器窗口高度
window.open（）打开一个浏览窗口 第一个参数传url 第二个参数可以为空 第三个参数设置窗口大小
window.close() 关闭当前浏览器窗口
window.opener（） （了解）当你用open打开一个浏览器窗口时，可以用这个方法调用源窗口
这里在为大家介绍一个相对重要的对象集：navigator
window.navigator.appname（） app名字
window.navigator.appVersion（） 版本
window.navigator.userAgent（）判断访问端是否为浏览器 （基础的反爬手段之一）

history对象：前进和后退功能，简单的来说解释浏览器界面的前后两个箭头
window.history.forward（）向前
window.history.back（） 向后

location对象：页面的跳转，我们在之后会经常使用
window.location.href 获取当前页面的url
window.location.href = url 跳转到指定的url
window.location.reload() 属性页面 浏览器左上方的小圆圈

弹出框：
alter警告
confirm确认 返回true或者false
prompt提示框 返回用户输入内容

计时器相关：计时器分为两种情况，一种是持续一段时间之后执行一次，另一种是循环间隔时间执行
setTimeout（）两个参数一个是执行函数 一个是间隔时间 时间单位是毫秒 间隔时间后执行一次
setInterval（）两个参数一个是执行函数 一个是间隔时间 时间单位是毫秒 每隔一段时间就执行一次

DOM操作：可以操作HTML css 事件

DOM树概念：所有的标签都可以看做是一个节点，我们可以通过任意一个节点找到其余的节点
DOM操作操作的是标签 而一个html页面上的标签有很多
1.先学如何查找标签
2.再学DOM操作标签

查找标签：通过document关键字来进行查找
直接查找：
id查找：document.getElementById（"id"）
class查找：document.getElementByClassName（"name"）
属性查找：docume.getElementByTagName（"name"）得到的是一个元组对象 通过调用破[index]来获得标签对象
间接查找：
获取节点之后可以调用节点下的方法
.parentElement 获取父节点
.children 获取子标签
.firstElementChild 第一个子标签
.lastElementChild 最后一个子标签
.nextElementSibling 同级别下第一个标签
.previousElementSibling 通级别下最后一个标签

节点操作：
document.createElement('ele') 创建标签
对象.属性 设置默认属性
对象.setAttribute(key,value) 设置自定义属性 既然有set 就会有 get remove方法
对象1.appendChild(对象2) 向对象1标签添加对象2（追加）既然有append 那就有 remove replace方法
对象.innerText 设置文本内容 innerHtml 识别HTML语法
对象.insertBefore() 指定位置添加

获取值操作：
对象.value 获取值
对象.file 获取文件对象 通过调用 对象.file[index] 获取文件数据

class操作：
对象.classList 获取标签所有的类属性
对象.classList.remove 移除属性
对象.classList.add 添加属性
对象.classList.cotains 查询是否含有属性
对象.classList.toggle() 有就删除没有增加

css操作：添加css属性需要style起手
对象.style.color
对象.style.backgroudColor
对象.style.marginTop
对象.style.fontSize

事件：js主要使用就是在这，为html添加事件，到达某个条件自动触发的动作
<button onclick="func1()">点我</button>
<button id="d1">点我</button>

<script>
// 第一种绑定事件的方式
function func1() {
alert(111)
}
// 第二种
let btnEle = document.getElementById('d1');
btnEle.onclick = function () {
alert(222)
}
</script>
script标签既可以放在head内 也可以放在body内，但是通常情况下都是放在body内的最底部
也可以用onload来加载
等待浏览器窗口加载完毕之后再执行代码
window.onload = function () {
// 第一种绑定事件的方式
function func1() {
alert(111)
}
// 第二种
let btnEle = document.getElementById('d1');
btnEle.onclick = function () {
alert(222)
}
}

原生js事件绑定：
开关灯案例：
<div id="d1" class="c1 bg_red bg_green"></div>
<button id="d2">变色</button>

<script>
let btnEle = document.getElementById('d2')
let divEle = document.getElementById('d1')
btnEle.onclick = function () { // 绑定点击事件
// 动态的修改div标签的类属性
divEle.classList.toggle('bg_red')
}
</script>
焦点获取案例：
input type="text" value="老板 去吗?" id="d1">

<script>
let iEle = document.getElementById('d1')
// 获取焦点事件
iEle.onfocus = function () {
// 将input框内部值去除
iEle.value = ''
// 点value就是获取 等号赋值就是设置
}
// 失去焦点事件
iEle.onblur = function () {
// 给input标签重写赋值
iEle.value = '没钱 不去!'
}
</script>
时间展示案例：
<input type="text" id="d1" style="display: block;height: 50px;width: 200px">
<button id="d2">开始</button>
<button id="d3">结束</button>

<script>
// 先定义一个全局存储定时器的变量
let t = null
let inputEle = document.getElementById('d1')
let startBtnEle = document.getElementById('d2')
let endBtnEle = document.getElementById('d3')
// 1 访问页面之后 将访问的时间展示到input框中
// 2 动态展示当前时间
// 3 页面上加两个按钮 一个开始 一个结束
function showTime() {
let currentTime = new Date();
inputEle.value = currentTime.toLocaleString()
}

startBtnEle.onclick = function () {
// 限制定时器只能开一个
if(!t){
t = setInterval(showTime,1000) // 每点击一次就会开设一个定时器 而t只指代最后一个
}
}
endBtnEle.onclick = function () {
clearInterval(t)
// 还应该将t重置为空
t = null
}
</script>
省市联动案例：
<select name="" id="d1">
<option value="" selected disabled>--请选择--</option>
</select>
<select name="" id="d2"></select>

<script>
let proEle = document.getElementById('d1')
let cityEle = document.getElementById('d2')
// 先模拟省市数据
data = {
"河北": ["廊坊", "邯郸",'唐山'],
"北京": ["朝阳区", "海淀区",'昌平区'],
"山东": ["威海市", "烟台市",'临沂市'],
'上海':['浦东新区','静安区','黄浦区'],
'深圳':['南山区','宝安区','福田区']
};
// 选for循环获取省
for(let key in data){
// 将省信息做成一个个option标签 添加到第一个select框中
// 1 创建option标签
let opEle = document.createElement('option')
// 2 设置文本
opEle.innerText = key
// 3 设置value
opEle.value = key // <option value="省">省</option>
// 4 将创建好的option标签添加到第一个select中
proEle.appendChild(opEle)
}
// 文本域变化事件 change事件
proEle.onchange = function () {
// 先获取到用户选择的省
let currentPro = proEle.value
// 获取对应的市信息
let currentCityList = data[currentPro]
// 清空市select中所有的option
cityEle.innerHTML = ''
// 自己加一个请选择
let ss = "<option disabled selected>请选择</option>"
// let oppEle = document.createElement('option')
// oppEle.innerText = '请选择'
// oppEle.setAttribute('selected','selected')
cityEle.innerHTML = ss

// for循环所有的市 渲染到第二个select中
for (let i=0;i<currentCityList.length;i++){
let currentCity = currentCityList[i]
// 1 创建option标签
let opEle = document.createElement('option')
// 2 设置文本
opEle.innerText = currentCity
// 3 设置value
opEle.value = currentCity // <option value="省">省</option>
// 4 将创建好的option标签添加到第一个select中
cityEle.appendChild(opEle)
}
}
</script>

标签：对象,标签,value,js,window,let,完整篇
来源： https://www.cnblogs.com/Jicc-J/p/12920216.html