原生JS

最新推荐文章于 2023-01-08 17:10:16 发布

沉默的龙王

最新推荐文章于 2023-01-08 17:10:16 发布

阅读量340

点赞数 1

分类专栏：知识整理文章标签： javascript

本文链接：https://blog.csdn.net/yyj_ZS/article/details/104897598

版权

知识整理专栏收录该内容

15 篇文章 0 订阅

订阅专栏

什么是JavaScript

JavaScript是互联网上最流行的脚本语言,现代浏览器基本都使用了JS，它可以配合HTML和CSS使页面变得更加方便。

如何使用JavaScript

1. 嵌入式
	直接在html文档的<script></script>标签中编写，这个标签通常放在<head>和<body>中，
	一般都放在body底部，这样能够改善显示速度,因为脚本编译会拖慢页面显示速度。
2. 外部式
	当一个js脚本同时被多个页面调用时,可以单独写一个外部js文件，
	需要的时候直接在script的src属性中调用。

JS分为三部分

1.ECMAScript 基本语法和对象

js五种原始类型

 	1.  Undefined
 			出现undefined的情况：
 					变量声明但没有定义	
 					函数没有明确返回值
 					
 	2.  Null			
 			null表示一个空对象,函数返回的是一个对象，但是找不到这个对象，返回的就是Null
 			null和undefined区别：
 				undefined 变量初始化了但是没有定义
 				Null	表示不存在的对象
 	3.  Boolean	布尔值
 			布尔类型只有两个值 true和 false 严格区分大小写
 	4.  Number  数字 
 			JS中两个特殊的数字：
 			1.无穷(无穷大，无穷小)
 					infinity
	 				判断一个数不是无穷，用isFinite()
 					true  不是无穷   false   是无穷
 			2.NaN(Not a Number)
				一般类型转化失败时出现,比如说把"abc"转化成数字
 					Number("abc")	//NaN
 				判断一个数是NaN     用isNaN()
 					true   是   false  不是

 	5.  String		字符串
 			字符串需要注意的地方：
 				字符串内不能直接回车换行
 				字符串用+拼接
 				字符串不能解析变量
 				用引号包裹的都是字符串，单引号和双引号没有区别（都是英文状态下）
 				打印单引号时需要把包裹的变成双引号 反之亦然
 			 	或者转义符号：\   例子：\' 就是'
 							\n  回车
 这五种是js变量的类型，他们的值是储存在栈中的

js引用数据类型
```
1. Object  对象
2. Function  函数
3. Array   数组
这三种是引用类型的值,值放在堆中，地址放在栈中，当数组/对象的值发生改变时，其他地方的该数组/对象的值也会跟着改变
```
- js类型转换的方法
  1. 转换成字符串 .toString()
    除了undefined和null之外其余的数据类型都可以使用toString转换成String字符串
  2. 转换成数字 parseInt()
    对字符串从左到右逐个字符查看,直到遇到非法字符(数字以外都是),返回非法字符之前的数字,如果第一个字符就不是数字，那么返回NaN
  3. 转换成数字 parseFloat()
    和parseInt类似,除了第一个遇到的小数点当成有效字符,之后的全都当成非法字符
  4. 强制转换
    - String() 可以将undefined和null转化成字符串
    - Number() 首先看整体是不是数,如果整体是数字,那么转化这个数,如果不是则返回NaN
    - Boolean() 将这个东西转化成boolean类型，在js中只有六个假值( 0 , undefined , null , “” , false , NaN)
- js中的运算符
  1. 算数运算符（+、-、*、/、%）
  2. 增量、减量运算符(++、–)
  3. 关系运算符(>、<、==、！=、===、>=、<=)
  4. 逻辑运算符(或||、非!、与&&)
  5. 赋值运算符(=)
  6. 条件运算符(表达式?代码1:代码2)
ES语法
- js代码要写在script标签中,并且每行代码以分号结束
- 注释
  - // 单行注释
  - /**/ 多行注释
- 声明变量
  
  var 变量名
  - 变量的命名规则
  1. 变量名只能由大小写字母、数字、下划线(_)、美元符($) 组成
  2. 首字符不能是数字
  3. 变量名是区分大小写的
  4. 变量起名字的时候尽量有意义，尽可能的短
  5. 不能使用关键字或者保留字
  6. 变量名的命名方法
  - 常用的命名方法
    1. 驼峰命名法(userName)
      多个单词,首字母小写,剩余单词首字母大写
    2. 帕斯卡命名法(UserName)
      多个单词,单词首字母全大写
    3. 匈牙利类型命名法(suserName)
      在变量名前加一个小写字母,以表示改变量的类型
      i int
      s string
      b boolean
      o object

函数

  函数就是一段可以重复执行的代码,一般一个函数就是一段固定执行的工作。
  函数格式
  function 函数名(参数){
  	需要执行的代码
  }
  函数的定义方式
  1.函数声明
    function  函数名(){
    				//函数体
    }
    2.函数表达式
    	var fn=function (){
  			//函数体
  	}
  	区别:函数的声明语句,可以再任意位置调用,如果使用表达式定义函数,那么调用语句必须卸载定义函数的后面,不然会报错
  2.函数调用
  	1.直接调用     函数名()
  	2.在事件处理函数中调用     onclick 点击事件
  	3.将函数的返回值赋值给变量  var a=text(b)
  3.函数的参数
  	函数的参数分为实参和形参,形参就是在函数定义时括号里写的，实参是函数调用时括号里传进去的参数。
  	当实参比形参的个数多时,多余的实参会被忽略,当实参比形参的个数少时,多余的形参会被赋值成 undefined
  4.函数作用域、作用域链和生命周期
  	作用域分局部作用域和全局作用域,局部作用域是指在当前{}内的所有区域都可以使用,而全局作用域是指所有地方都可以使用。
  	作用域链：首先在当前作用域找这个变量,如果找到了就调用,没有找到就去上一级作用域查找,如果都没找到就会报错,这种链式结构就叫做作用域链
  	变量提升
  	如果有变量,系统会将该变量的声明提升到当前作用域的最顶端,但是不赋值,赋值还是在原来的位置,局部变量和全局变量重名,优先使用局部变量

数组
- 定义方式
  1. var arr=[]
  2. var arr=new Array()
  3. var arr=new Array(“张三”,“李四”)
- 数组的循环遍历
  1. for循环
  2. for…in循环 for(key in arr){} key是下标
- 数组的常用方法
  - concat() 连接两个或多个数组,返回新数组,不改变原数组
  - indexOf() 查看元素在数组中第一次出现的位置,如果元素存在就返回第一次出现的下标,不存在返回-1
  - lastIndexOf() 如果存在返回的是最后一次出现的下标,不存在返回-1
  - join() 将数组中的所有元素放入字符串中,不传参数默认以逗号连接
  - push() 在数组最后添加,返回数组长度
  - unshift() 向数组的开头添加,返回数组长度
  - pop() 里边没参数删除数组最后一位,返回值是删除的这个元素
  - shift() 删除数组第一个元素，返回值是删掉的元素
  - slice() 如果传一个下标,从这个小标开始,一直截取到最后,不改变原数组,如果传两个下标，那么从第一个小标开始,截取到第二个下标,第二个下标可以是负数,是负数时,数组会从最后边倒数第二个参数的位置当结尾。slice不仅可以截取，还可以替换,除了两个参数以外的参数，都会被插入到删除的位置
  - reverse() 反转
  - sort() 排序
    arr.sort(function(a,b){return a-b}) 升序
    arr.sort(function(a,b){return b-a}) 降序
字符串
- 字符串常用方法
  - charAt() 查看字符串中某一位的字符
  - concat() 连接两个或多个字符串
  - indexOf() 匹配字符出现的第一次位置
  - lastIndexOf() 匹配字符出现的最后一次位置
  - substring() 两个参数开始参数和结束参数,截取时不包括结束参数
  - slice() 第二个参数可以是负值，截取时不包括结束参数
  - substr() 从第一个参数开始,截取第二个参数数量的字符
  - split() 将字符串转换成数组
  - toLowerCase() 将字符串中的所有字符转换成小写
  - toUpperCase() 将字符串中的所有字符转成大写
  - trim() 去除字符串两端的空格,但是不去除中间的空格
  - toString() 将其他类型转换成字符串类型
  - replace() 替换，需要配合正则表达式
Math
- 执行常见的数学计算
  - Math.PI π
  - abs(x) 返回x的绝对值
  - ceil(x) 向上取整
  - floor(x) 向下取整
  - max(x,y) 返回最大值,参数不限
  - min(x,y) 同上
  - round(x) 四舍五入
  - random() 生成[0-1)之间的随机数
    规律: Math.random()*(m-n)+n
Date
- 获取时间
  - date.getFullYear() //获取年
  - date.getMonth() //获取月范围0-11
  - getDay() //获取星期几 0-6 0代表周日
  - date.getDate() //获取日
  - date.getHours() //获取小时
  - date.getMinutes() //获取分钟
  - date.getSeconds() //获取秒
  - date.getMilliseconds() //获取毫秒
  - date.getTime() //获取从当前到1970年1月1日的毫秒数(UNIX认为1970年1月1日0点是时间纪元)
- 设置时间
  - var d=new Date(“2020-01-01”)
  - var date=new Date(“2019/08/15 15:05:45”)
  - var date=new Date()
  - date.setFullYear(2020)
  - date.setMonth(7)
- 计时器
  - setInterval(function(){},time)
    每隔一段时间执行一次函数
  - setTimeout(function(){},time)
    time时间后执行一次函数
  - clearInterval(计时器名字)
  - clearTimeout(即时起名字)

2.DOM 文档对象模型

常用的dom方法

document.getElementById(“user”); //根据id查找元素
document.getElementsByTagName(“div”); //根据标签名获取页面元素
document.getElementsByclassName(“box”); //根据类名获取页面元素
注意:
document可以使用其他标签代替,如果是通过id查找,那么只能使用document

对标签进行设置

var box=document.getElementById("box");
设置样式
box.style.color="red";
box.style.backgroundColor="white";		//带有 - 的属性需要写成驼峰命名的方式
设置内容
box.innerHTML="修改的内容"

事件类型

onclick 点击事件

box.onclick=function(){
	执行代码
}

onmouseover 鼠标移入
onmouseout 鼠标移出
onfocus 文本框获取焦点时触发事件
onblur 失去焦点时触发事件
onkeyup 按键弹起触发
ondblclick 双击触发

阻止冒泡和默认事件

冒泡

当某个标签触发了事件之后，会往上冒泡一直到它的最上层标签。

	通常用e.stopPropagation()可以阻止冒泡，ie浏览器使用e.cancelBubble = true，
	可以写成   window.event? window.event.cancelBubble = true : e.stopPropagation();

默认事件

某些标签有默认的效果,比如a标签的跳转,我们可以再事件里加上return false来阻止这种效果

box.onclick=function(){
	事件代码;
	return false; //在js中使用只阻止默认事件，在jquery中既阻止默认事件也可以阻止冒泡
}

或者使用 e.preventDefault()，ie下使用e.returnValue = false

if(e.preventDefault){
e.preventDefault();
}else{
window.event.returnValue == false;
}

表单属性

disabled 禁用
checked 复选框选中
selected 下拉菜单选中

节点

dom提供了一套访问关系

父子访问关系
parentNode 访问某个节点的父节点
childNodes	访问某个节点的所有子节点,包括文本节点
children		访问某个节点中的所有元素子节点
获取子节点
node.firstChild	第一个子节点(包含文本节点)
node.lastChild	最后一个子节点(包含文本节点)
获取元素子节点
node.firstElementChild	第一个元素子节点
node.lastElementChild	最后一个元素子节点
兄弟访问关系
previousSibling	前一个兄弟节点
previousElementSibling	获取前一个兄弟节点
nextSibling	下一个兄弟节点
nextElementSibling	获取下一个兄弟元素节点
添加子节点
appendChild	从后面添加
insertBefore		从前面添加
创建节点
节点.innerHTML
document.write("")
document.createElement("标签名")
删除节点
父节点.removeChild(子节点)
克隆节点
节点.cloneNode(参数)
替换节点
replaceChild(新节点,要替换的子节点)
节点属性
nodeType	获取节点的类型（1为元素节点,2为属性节点,3为文本节点）
nodeName	节点名	元素节点的节点名就是标签名
nodeValue	节点值 元素节点没有节点值,值为null，文本节点的值就是文本,属性节点的节点值就是该属性值
属性的操作
节点.getAttribute("属性名")获取属性
节点.setAttribute("属性名","新的属性值")设置属性
节点.removeAttribute("属性名") 移出指定属性

3.BOM 浏览器对象模型

BOM，即 browser object model (浏览器对象模型),BOM使JS可以和浏览器进行交互,获取浏览器信息并对浏览器进行操作，
由于BOM主要用于管理窗口和窗口之间的通讯,所以其核心对象是window,BOM有很多对象组成，每个对象都有自己的属性和方法。
注意：window对象是BOM的顶层对象,其他对象是该对象的子对象，包括(document),window一般可以省略。

window属性
- window.innerHeight window.innerWidth 获取浏览器窗口的宽高(不包括工具栏和滚动条)
  不过一般更推荐写成
```
  var width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth
```
window方法
- window.open(url,target)
  打开新窗口,有可能被当成广告拦截
- window.close()
  关闭当前窗口
- window.alert("")
  弹出一个有ok按钮的系统消息框
- window.confirm(“提示消息”)
  弹出一个有ok和cancel的系统消息框,并返回一个布尔值
- window.prompt(“提示消息”,“默认值”)
  弹出一个带有文本框的系统消息框,并把用户输入的内容返回
- window.setTimeout(“alert(‘xxx’)”,1000)
  设置一个一次性的计时器
- window.setInterval(“alert(‘xxx’)”,1000)
  设置一个定时触发的计时器
window事件
- onload
  所有资源加载完毕后触发
- onresize
  浏览器窗口发生改变后触发
- onscroll
  浏览器窗口滚动时触发
window对象
- history对象
  用来存放浏览器当前窗口的访问历史
  常用方法：
  1.window.history.go()
  访问浏览历史,参数为负数后退,为正数前进,0则刷新当前页面,如果history没有这个页面则不发生变化
  2.window.history.back()
  后退,无参数
  3.window.history.forward()
  前进,无参数
  4.window.history.length
  查看历史中的页面数
- location对象
  获取当前页面的url信息,页面重定向的场景
  
  属性：
  - location.href 当前载入页面的完整url
  - location.search 执行GET请求的URL中问号后的部分,又称查询字符串
  - location.hash 如果url包含#,返回该符号后的内容
  方法:
  - location.reload(true||false) 重新载入当前页面
    参数是true，页面从服务器重载,参数是false，页面从缓存重载,默认参数false
    注意：使用get请求传递中文数据时浏览器会把中文编码,所以接受时需要重新解码，decodeURL()编码 encodeURL()解码
  - location.protocol url中双斜杠前的部分
  - location.host 服务器的名字
  - location.hostname 通常等于host(但host里面带端口)
  - location.port url声明的请求的端口,默认情况下,大多url没有端口信息
  - location.pathname url中主机名后的部分
  - location.assign("") 同location.href，新地址都会被加到浏览器的历史栈中
  - location.replace("") 同assign(),但新地址不会被加到历史栈
- navigator对象
  存放有关web浏览器的信息,检测浏览器和操作系统方面非常有用
  常用方法:
  navigator.userAgent //用户代理头的字符串表示
  其他方法：
  navigator.appCodeName //浏览器代码名的字符串表示
  navigator.appName //官方浏览器名的字符串表示
  navigator.appVersion //浏览器版本信息的字符串表示
  navigator.cookieEnabled //如果启用cookie返回true，否则返回false
  
  navigator.javaEnabled //如果启用java返回true，否则返回false
  
  navigator.platform //浏览器所在计算机平台的字符串表示
  navigator.plugins //安装在浏览器中的插件数组
  navigator.taintEnabled //如果启用了数据污点返回true，否则返回false
- screen对象
  存放有关显示浏览器屏幕的信息
  常用属性:
  availHeight 属性返回访问者屏幕的高度,以像素计，减去界面特性
  availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性
  height 返回屏幕区域的实际高度和分辨率一致
  width 返回屏幕实际宽度

JavaScript常用的语法

1. 输出

document.write() 直接在网页上(html文档中)输出
document.write(“Hello World!”)
图片
window.alert() 弹出警告框 window可以省略
元素.innerHTML 获取/修改元素内容
console.log() 控制台输出
document.getElementById() 用id查找元素
document.getElementById(“name”)
图片
元素.value 获取值
元素.style.样式=“” 修改样式
元素.innerHTML="" 修改内容

沉默的龙王

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
原生JS

什么是JavaScriptJavaScript是互联网上最流行的脚本语言,现代浏览器基本都使用了JS，它可以配合HTML和CSS使页面变得更加方便。如何使用JavaScripthtml中的js脚本都是写在<script></script>标签中的,这个标签通常放在<head>和<body>中，一般都放在body底部，这样能够改善显示速度,因...
复制链接

扫一扫