文章目录
一、什么是Javascript
JavaScript（简称js），是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言（解释型语言）。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。是一种动态、弱类型、基于原型的语言，内置支持类。
二、Javascript组成
- ECMAScript
JavaScript 的语法标准 - DOM（Document Object Model）
操作网页上的元素API - BOM（Browser Object Model）
操作浏览器的部分功能API
三、引入方式
1.行内样式
写在标签内部
<div onclick=" xxx;"></div>
2.内嵌样式
和CSS一样，写在head标签内
<head>
<script>
window.onload=function(){ //等到页面上所有内容都加载完毕再执行{}内的代码
xxx;
}
</script>
</head>
如果要在head标签内操作页面中的元素，必须要写window.onload=function()，如果写在body标签中的最后，就不用写window.onload=function()
3.外链样式
从别的文件中引入
<head>
<script src="文件路径.js"></script>
</head>
四、常见输出方式
1.通过弹窗的形式来输出
普通提示弹窗
alert("XXX");
带选项的弹窗
confirm("XXX");
带选项带输入框的弹窗
prompt("XXX");
2.通过网页内容区域的形式来输出
document.write("XXX");
3.通过开发者工具控制台的形式来输出
console.log("XXX"); //普通输出
console.warn("XXX"); //警告输出
console.error("XXX"); //错误输出
五、JavaScript基本语法
1.常量
固定不变的数据
整型常量：整数
实型常量：小数
字符串常量
布尔常量
自定义常量：在ES6中新增的 const 常量名称 = 常量取值;
2.变量
存数据：
var a=1;
或者可以写成
var a;
a=1;
也可以同时定义多个变量
var a=1,b=2;
如果a和b值一样，也可以写成
var a=b=1;
ES6以后，定义变量名称可以用let,会更严格一些，方便排错
let a=1;
取数据：
console.log(a);
3.标识符命名规则与规范
规则：
1.只能由数字，字母，下划线，$组成
2.不能以数字开头
3.区分大小写
4.不能是关键字和保留字
规范：
1.见名知意
2.驼峰命名法
4.数据类型
基本数据类型：
Number 数值
String 字符串
Boolean 布尔
Undefined 未定义
Null 空值
引用数据类型：
Object 对象
判断数据是哪一种类型：
typeof 数据;
数值类型的相互转换：
1.转换为字符串类型
（1）数值->字符串
（2）布尔->字符串
（3）未定义->字符串
（4）空值->字符串
① (1)和(2)可以用：变量名.toString();方法
② let str = String(数据); （1）-（4）都可以用，数据可以是变量，也可以是常量
③ let str = 数据 + “”
2.转换为数值类型
（1）字符串->数值
let num = Number(“字符串”);
如果字符串中没有数据，转换结果为0
如果字符串中数据不仅仅为数值，那么转换结果为NaN
如果需要提取字符串中的数字，可以通过parseInt（）和parseFloat（）方法来进行转换【从左到右提取数值，一旦遇到非数值，立即停止】
（2）布尔->数值
如果为true，结果为1，为false，结果为0
（3）未定义->数值
结果为NaN
（4）空值->数值
结果为0
也可以通过在其他数据前加上+/-号也可以转为数值
3.转换为布尔类型
let flag = Boolean(数据);
字符串中没内容/数值为零或者是NaN/未定义/空值 这些都会转换为false，其余都是转换为true
5.运算符
算数运算符
+-*/%
注：
1.任何非数值类型的数据再参加加（减/乘/除）法运算之前，都会自动转换为数值类型
2.任何数据与NaN进行运算，结果都是NaN
3.任何数据与字符串相加，都会先转换为字符串类型，进行拼接运算；如果是相减（乘/除），就会把字符串转换为数值
4.取余：m%n=余数
如果m>n,正常取余
如果m<n，结果为m
如果n=0,结果为NaN
取余结果的正负性，取决于m,而不是n
赋值运算符
= += -= *= /= %=
优先级低于算数运算符
a+=1等效于a=a+1其余同理
自增/自减运算符
++ --
自增：数值加一
自减：数值减一
i++：先参与其他运算，再进行自增
++i：先自增，再参与其他运算
自减同理
注：
1.自增/减运算符只能出现在变量前后，不能出现在常量前后
2.表达式前后也不能出现自增/减运算符
关系运算符
> < >= <= == != === !==【前四个优先级高于后四个】
1.对于非数值类型的数据，会先转换为数值类型，在进行比较
2.任何数据和NaN进行比较，返回都是false
3.如果比较的都是字符串类型，那么不会转换成数值，而是之间比较字符对应的Unicode编码【一位一位去比】
4.判断一个数是否为NaN,用isNaN()方法
特殊情况：
null ==0 结果为false
undefined == 0 结果为false
null == undefined 结果为true
NaN == NaN 结果为false
== 只会判断值是否相等，不会判断数值类型；=== 会判断数值类型是否相等，更严格
!=和!==同理
逻辑运算符
逻辑与：&&
逻辑或：||
逻辑非：!
优先级：!>&&>||
在逻辑与中只要前面条件是假的，就不会计算后面；在逻辑或中，只要前面的条件为真，就不会计算后面
逗号运算符
在所有运算符中优先级最低
可以利用逗号运算符同时定义多个变量
三目运算符
又称条件运算符
格式：条件表达式?结果A:结果B;
当条件为真是，返回A；条件为假时，返回B
6.流程控制
顺序结构
程序从上到下执行
选择结构
if条件
第一种：
if(条件表达式){
条件满足执行的语句
}
第二种：
if(条件表达式){
条件满足执行的语句
}
else{
条件不满足执行的语句
}
第三种：
if(条件表达式A){
条件A满足执行的语句
}
else if(条件表达式B){
条件B满足执行的语句
}
...
else{
条件全不满足执行的语句
}
switch语句
switch(表达式){
case 表达式A:
语句A;
break;
case 表达式B:
语句B;
break;
...
default:
前面都不匹配后满足的代码;
break;
}
循环结构
while循环
while(条件表达式){
条件满足执行的语句;
}
先判断条件，再执行循环
do while循环
do{
需要重复执行的代码
}
while(条件表达式);
先进行循环，再判断条件
for循环
for(初始化表达式;条件表达式;增量表达式){
循环体;
}
break和continue
break; 立即结束当前循环
continue; 立即结束本次循环，跳到下一次循环
7.数组
创建一个数组：
let arr =new Array(size); 指定大小为size
let arr=new Array(); 创建一个空数组
let arr = new Array(data1,data2,...)； 创建一个带数据的数组
存数据：
变量名称[索引号] = 需要存储的数据;
取(查)数据：
变量名称[索引号]
循环遍历数组：
for(let i=0;i<arr.lenth;i++){
console.log(arr[i]);
}
数组解构赋值：
let arr=[1,3,5];
let [a,b,c]=[1,3,5];
数组可以进行增删改查
改：
单个修改：
arr[索引] = 新数据;
多个修改：
arr.splice(1,2,"","") 第一个参数：从哪开始修改 第二个参数：修改几个 后面的参数：依次为修改的内容
增：
arr.push(新增的内容); 直接加到数组最后 可以接受多个参数 返回值为数组当前长度
arr.unshift(新增的内容); 在数组最前面添加数据 可以接受多个参数 返回值为数组当前长度
删：
arr.pop(); 直接删除最后一条数据 返回值为删除的参数
arr.shift(); 删除最前面一条数据 返回值为删除的参数
arr.splice(1,1); 第一个参数：要删除数据的索引 第二个参数：从第一个参数开始删除几个
数组转换为字符串：
let str = arr.toString();
转换为指定格式的字符串
let str = arr.join("拼接符");
数组的拼接：
第一种：let res = arr1.concat(arr2);将arr2拼接到arr1后面
第二种：let res = [...arr1,...arr2];
数组的反转：
let res = arr.reverse();
切片：
arr.slice(开始索引,结束索引) 左闭右开区间
查找元素在数组中的位置：
let res = arr.indexOf(元素内容，从哪个位置开始寻找);
返回值为元素的索引，如果数组中没有，返回-1；如果查到的内容有多个，返回第一个找到元素的索引
lastIndexOf从右向左寻找
判断是否包含某个元素：
let res = arr.includes(内容);
如果有，返回true；如果没有，返回false
二维数组：
let arr = [[1,2],[3,4]];
取数据：
let num2=arr[0][1];
8.函数
function 函数名称（形参列表）{
被封装的代码;
return 返回值;
}
调用：
函数名称（形参列表）;
函数可以有返回值，也可以没有返回值
arguments:
保存所有传递给函数的实参，这样函数就可以接受无限个参数了
function 函数名称(arguments){}
除了可以用arguments,也可以用扩展运算符，将所有实参打包到一个数组中
function 函数名称(...values){}
形参默认值：
从ES6开始，可以直接在形参后面通过=指定默认值
如果不传值，则返回默认值，如果传值，就返回传的值
匿名函数：
没有名称的函数
function (){
函数体;
}
箭头函数：
为了简化定义函数的代码，ES6中新增了一种定义函数的格式
let 函数名称=(形参列表)=>{
需要封装的代码;
}
如果形参只要一个，()可以省略
如果{}内只要一个代码，{}也可以省略
9.作用域
代码变量在某个范围内起作用和效果，减少了命名冲突
全局作用域：在整个代码中起效果
局部作用域：只在函数内部起效果和作用
全局变量：在全局作用域下的变量 如果在函数内部，没有声明直接赋值的变量也是全局变量
局部变量：在局部作用域下的变量 函数的形参也是局部变量
在ES6中，新增了块级作用域
作用域链：根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链
由里到外，就近原则
。。。。。
六、DOM
文档对象模型
获取元素
console.dir:打印返回元素对象，可以更好地查看里面的属性和方法
1.根据ID获取
document.getElementById('id号·');
2.根据标签名获取
document.getElementsByTagName('标签名');
3.根据类名获取
document.getElementsByClassName('类名');
4.返回指定选择器的第一个元素对象
document.querySelector('选择器');
5.返回指定选择器的全部元素对象
document.querySelectorAll('选择器');
6.获取body标签
document.body;
7.获取html标签
document.documentElement;
基础事件
事件由事件源,事件类型,事件处理程序三部分组成
事件源:被触发的对象
事件类型:如何触发
事件处理程序 通过一个函数赋值的方式完成
示例:
<button id="btn">按钮</button>
<script>
let btn = document.getElementById('btn');
btn.onclick = function () {
alert('对话框');
}
操作元素
改变元素内容
1.改变标签内的文字内容
innerText
2.可以改变整个标签内容(可以识别标签) W3C标准
innerHTML
操作属性
常见的属性为src,href,title,alt等
element.属性='xxx';
表单里面的内容,是通过value属性来修改的
样式属性操作
1.element.style 行内样式操作
element.style.属性='属性值';
2.element.className 类名样式操作
如果一个元素修改的样式比较多，可以另写一个类，然后直接修改元素的类名，更改样式，会覆盖原先的类名
自定义属性的操作
1.获得属性值
(1).element.属性
(2).element.getAttribute('属性');
2.设置属性值
(1).element.属性 = ‘xxx’
(2).element.setAttribute('属性','值');
3.移除属性
element.removeAttribute('属性');
为了区分是自定义属性还是内置属性，自定义的属性前面要加'data-',这样方便其他人区分
节点操作
1.父节点
node.parentNode; 返回一个节点的父节点，如果找不到父节点，就返回null
2.子节点
node.childNodes; 得到所有的子节点，包括元素节点和文本节点，不推荐使用
node.children; 获得所有子元素节点
node.firstChild 获取第一个子节点，包括元素节点和文本节点
node.lastChild 获取最后一个子节点，包括元素节点和文本节点
node.firstElementChild 返回第一个子元素节点
node.lastElementChild 返回最后一个子元素节点
3.兄弟节点
ndoe.nextSibling; 下一个兄弟节点 包括元素节点和文本节点
node.previousSibling; 上一个兄弟节点 包括元素节点和文本节点
node.nextElementSibling; 下一个兄弟元素节点
node.previousElementSibling; 上一个兄弟元素节点
4.创建节点
document.createElement('');
5.添加节点
node.appendChild(child)
node.insertBefore(child,指定元素); 添加到指定元素的前面
6.删除节点
node.removeChild(child); 返回值是删除的节点
7.复制节点
node.cloneNode();
括号里的参数为false或空，浅拷贝
括号里的参数为true，深拷贝
事件高级
方法监听注册方式：
eventTarget.addEventListener(type,listener[,useCapture]);
参数：
type:事件类型 比如click，mouseover，不带on
listener:事件处理函数，事件发生时，会调用该监听函数
useCapture:可选参数，默认是false（冒泡阶段）；true（捕获阶段）
解绑事件：
1.传统方式：eventTarget.onclick = null;
2.方法监听注册方式：eventTarget.removeEventListener(type,listener[,useCapture]);
解绑的函数不能是匿名函数
常见事件对象：
e.target 返回的是触发事件的对象 this返回的是绑定事件的对象
e.type 返回的是事件的类型
e.preventDefault() 阻止默认行为
e.stopPropagation() 阻止事件冒泡
事件委托：
利用事件冒泡来实现的
常用鼠标事件：
1.禁止鼠标右键菜单
contextmenu
2.禁止鼠标选中
selectstart
e.clientX:鼠标在可视区的x坐标
e.cilentY:鼠标在可视区的y坐标
e.pageX:返回鼠标相对于文档页面的X坐标
e.pageY:返回鼠标相对于文档页面的Y坐标
e.screenX:返回鼠标相对于电脑屏幕的X坐标
e.screenY:返回鼠标相对于电脑屏幕的Y坐标
常用键盘事件：
onkeyup：某个键盘按键被松开时触发
onkeydown：某个键盘按键被按下时触发
onkeypress：某个键盘按键被按下时触发（不识别功能键）
键盘事件对象：
e.key:返回输入的键
e.keyCode:返回输入键的ASCII码值
七、BOM
BOM的构成：
window
–document
–location
–navigation
–screen
–history
window常见事件
窗口加载事件：
window.onload = function(){}
window.addEventListener('load',function(){});
DOMContentLoaded:当事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等
调整窗口大小事件：
window.onresize = function(){}
window.addEventListener('resize',function(){})；
window.innerWidth:当前窗口宽度
定时器
1.window.setTimeout(调用函数,[延迟的毫秒数]);
window可以省略
setTimeout这个调用函数我们也称为回调函数
清除定时器：clearTimout(定时器的名字)
2.setInterval(回调函数,[间隔的毫秒数]);
每间隔一段时间执行一次函数
清除定时器：clearInterval(定时器名字);
location对象
属性：
location.href 获取或设置整个url
location.host 返回域名
location.post 返回端口号
location.pathname 返回路径
location.search 返回参数
location.hash 返回片段
方法：
location.assign() 跳转页面
location.replace() 替换当前页面，因为不记录历史，所以不能后退页面
location.reload() 重新加载页面，相当于刷新
history对象
back() 后退功能
forward() 前进功能
go(参数) 前进和后退，如果是n，前进n个页面；如果是-n，后退n个页面
993
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
