ｊｓ
2020-07-07 12:17:17 25 举报AI智能生成
登录查看完整内容
ＪＳ，全称JavaScript，一种轻量级的解释型或即时编译型的编程语言。它是Web的三大核心技术之一，与HTML和CSS并驾齐驱。JavaScript具有动态性、弱类型、基于原型等特性，支持面向对象和函数式编程风格。它最初被设计用于网页交互，但随着技术的发展，现在也被广泛应用于服务器端开发和移动应用开发。无论是网页游戏、数据可视化、还是复杂的单页应用，都离不开JavaScript的支持。此外，JavaScript还拥有丰富的库和框架，如React、Vue和Angular等，大大提高了开发效率和用户体验。
作者其他创作
大纲/内容
ｊｓ
概述
JavaScript脚本语言，
主要用来给HTML网页增加动态功能
html负责搭建页面结构
css负责添加样式
js负责页面的行为
基础语法
<script type=\"text/javascript\"> document.write(\"<h1>第一个js页面</h1>\");</script >
<script></script>必须放在系统可以加载的区域
一般是写在ｂｏｄｙ后面
定义变量
var
var num; num = 10;
打印变量
console.log(var)
数据类型
数 字（number）
非数字（String、boolean）
空值
空值（null）
未定义（undefined）
条件语句
if（）{}else
switch () { case 0: break;
循环语句
for（）{}
定义数组
var num = array(); num[0] = ''1'' num[1] = ''2'' num[2] = ''3''
打印元素
console.log(num[1]);
定义函数
function 函数名（）{}
函数触发
js触发函数可以直接在标签写入事件进行触发，也可以在script标签内直接写函数名（）来进行调用
DOM
浏览器上可操作
文档本身就是一个文档对象
所有 HTML 元素都是元素节点
所有 HTML 属性都是属性节点
元素内的文本是文本节点
注释是注释节点，就不用
DOM操作其实就是对节点的增删查改
元素节点
常用方法
获取元素节点的方法
根据id获取一个元素节点 var div1 = document.getElementById(\"div1\")
根据标签名获取一堆节点的集合var li1 = document.getElementsByTagName(\"li\");
根据class获取一堆元素节点 var div2 = document.getElementsByClassName(\"content\");
使用css选择器选择第一个匹配的元素节点 var d1 = document.querySelector(\".content\")
根据css选择器选择一批能够被匹配到的所有的元素var d1 = document.querySelectorAll(\".content\")
修改元素节点的内容
不渲染html标签，标签会当做文本打印出来 div.innerText = \"jiasoushi\"
会将html标签渲染出来 div.innerHTML = \"<h1>1258</h1>\"
删除一个元素节点
直接把自己干掉var mydiv = document.getElementById(\"div1\") mydiv.remove();
清除内容 mydiv.innerText = “”;
删除某个子元素节点：先找到这个字元素节点，再把它干掉var myul = document.getElementsByTagName('ul')[0];mydiv.removeChild(myul)
新建一个元素节点
创建一个div标签，在内存中 var mydiv = document.createElement(\"div\");
添加进几个属性 mydiv.setAttribute(\"name\
获取到我的divvar div1 = document.getElementById(\"div1\");
将内存中新建的div实实在在的加入到我的div中div1.append(mydiv)
获取所有的子节点
子节点一般是个集合，其实就是个数组
循环遍历可以批量操作
不仅仅是子节点集合，任何节点集合都能批量操作
方法
children属性能获取所有的子元素节点，不包括文本节点 mydiv.children HTMLCollection [ul]
子节点也是元素节点，一样可以有子节点 mydiv.children[0].children
属性节点
使用元素节点方法进行增删查改
var mydiv = document.getElementById(\"div1\")
获取这个属性的值 mydiv.getAttribute(\"name\")
修改，同时可以添加一个属性的值 mydiv.setAttribute(\"name\
删除一个属性 mydiv.removeAttribute(\"name\")
使用属性节点对象对属性本身进行操作
获取所有的属性节点的集合，是个可以当成数组 mydiv.attributes
通过下标拿到第二个属性 mydiv.attributes[1]
拿到属性的name var attrName = mydiv.attributes[1].name
拿到属性的值 var attrValue = mydiv.attributes[1].value
修改这个属性的值 mydiv.attributes[1].value = \"aaa\"
BOM
BOM是浏览器对象模型。
BOM提供了独立于内容 而与浏览器窗口进行交互的对象；
BOM的核心对象是window；
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；
setTimeout
一次性定时器，会在多少毫秒后执行这个函数
里边的是匿名函数，也叫回调函数
返回值是个定时器，这个方法是在未来去执行某个函数
如果时间未到，不想让他执行了，就需要取消这个定时器 clearTimeout(timer)
setInterval
周期性定时器，会每隔多少毫秒后执行这个函数
如果时间未到，或者中途不想让他执行了，就需要取消这个定时器 clearInterval(timer)
浏览器自带小型数据库
localStorage
localStorage只要不人为删除，会浏览器被删除数据会一直在 增加或修改一个window.localStorage.setItem(\"name\
获取window.localStorage.getItem(\"name\")
删除一个window.localStorage.removeItem(\"name\")
清空window.localStorage.clear()
sessionStorage
sessionStorage网页被关闭就没有了增加或修改一个 window.sessionStorage.setItem(\"name\
获取window.sessionStorage.getItem(\"name\")
删除一个window.sessionStorage.removeItem(\"name\")
清空 window.sessionStorage.clear()
js事件
阶段
事件捕获阶段：从外向内
事件目标阶段：从最开始选择的那个开始
事件冒泡阶段：从里向外
一般默认都是冒泡阶段
true表示事件冒泡/false代表事件捕获
检测目前是哪个阶段：eventPhase
1代表捕获阶段
2代表目标阶段
3冒泡阶段
定义
var div1 = document.getElementById(\"div1\
var div1 = document.getElementById(\"div1\"); div1.onclick = function(){ console.log(\"click\") }
<div class=\"content aaa\" onclick=\"test(123)\" id=\"div1\" name=\"bbb\"></div> <script type=\"text/javascript\"> function test(){ console.log(\"test\"); }</script>
消除事件
document.removeEventListener(\"click\
var callback = function(){ console.log(\"click\") }var div1 = document.getElementById(\"div1\
事件的分类
鼠标事件
onclick：点击某个对象时触发（常用）
ondblclick：双击某个对象时触发
onmouseover：鼠标移入某个元素时触发
onmouseout：鼠标移出某个元素时触发
键盘事件
onkeydown：键盘的键按下时触发
onkeyup：键盘的键放开时触发
onkeypress：按下或按住键盘键时触发
表单事件
onfocus：元素获得焦点时触发
onblur：元素失去焦点时触发
onchange：元素内容改变时触发
oninput：元素获取用户输入时触发
js中的内置对象
event对象
type
返回当前Event对象表示的事件的名称
keycode
返回keypress事件发生的时候按键的代码
key
返回keypress事件发生的时候按键的值
stopPropagation
阻止冒泡事件
字符串对象
length
获得数组元素的个数
concat
连接数组生成新的数组
join
使用指定的分隔符将数组连接成字符串
push、pop
分别表示向数组末尾添加元素、删除末尾的元素
shift、unshift
表示删除数组第一个元素、向数组开头添加一个元素
reverse
颠倒数组顺序
slice()
splice()
参数2：删除的元素个数 参数3：可选的，如果有参数3，表示使用参数3代替删除的那些元素
toString()
数学对象
Math.abs()
计算一个数值的绝对值
Math.ceil()
向上取整，进一取整
Math.floor()
向下取整
Math.round()
四舍五入取整
Math.max()、Math.min()
获得最大值、获得最小值
计算x的y次方
Math.sqrt()
返回数值的平方根
Math.random()
日期对象
toLocaleString()
将日期对象转换成本地时间格式
getTime()
获得当前的时间戳（单位毫秒） 1000毫秒==1秒
getDay()
getFullYear()，setFullYear()
获得年份，设置年份
getMonth()，setMonth()
获得当前的月份，设置月份
getDate()，setDate()
获得当前的日期，设置日期
getHours()，setHours()
获得当前的时间，设置小时
getMinutes()，setMinutes()
获得当前的分钟，设置分钟
getSeconds()，setSeconds()
获得当前的秒数，设置秒数
原型链
_proto_
每个对象都可以有一个原型_proto_，这个原型还可以有它自己的原型，一直往上推就形成了原型链
它总是指向 prototype
是查找某函数或对象的原型链方式
prototype
是函数所独有的，在定义构造函数时自动创建
prototype属性可以给函数和对象添加可继承的方法、属性
正则表达式
描述了一种字符串匹配的模式，去处理字符串
创建
字面量创建方式
var re=/a/i;
实例创建方式
var re=new RegExp ();
最简单的正则表达式，将匹配字母a：re=new RegExp (\"a\");
重载的构造函数，其第二个参数指定将不区分大小写：re=new RegExp (\"a\
第二个参数，为可选参数
g ：全文查找
i ：不区分大小写
m：执行多行匹配
test()
用于检测一个字符串是否匹配某个模式
var patt = /e/;patt.test(\"Love you\");
字符串中含有 \"e\"，所以该实例输出为：true
合并：/e/.test(\"Love you\")
exec()
用于检索字符串中的正则表达式的匹配
/e/.exec(\"Love you\")
字符串中含有 \"e\"，所以该实例输出为: e
search()
检索与正则表达式相匹配的子字符串，并返回子串的起始位置
使用正则表达式搜索 \"Runoob\" 字符串，且不区分大小写：
var str = \"Visit Runoob!\";var n = str.search(/Runoob/i);
输出结果为： 6
replace()
将接收字符串作为参数
var str=\"Visit W3CSchool!\"; var n=str.replace(\"W3CSchool\
console.log(n); 结果Visit Runoob!
console.log(str); 结果Visit W3CSchool!
常用语法
()、[]、{} 的区别
[] 是定义匹配的字符范围。 [0-9] 表示查找任何从 0 至 9 的数字。
{} 一般用来表示匹配的长度。 {8} 表示位数为8位。
() 的作用是提取匹配的字符串。表达式中有几个 () 就会得到几个相应的匹配字符串。比如 (\\s+) 表示连续空格的字符串。
^ 和 $
^ 匹配一个字符串的开头，比如 ( ^a ) 就是匹配以字母 a 开头的字符串
如果 ^ 出现在 [] 中一般表示取反，
出现在其他地方则是匹配字符串的开头
\\d \\s \\w .
\\d 匹配一个非负整数， 等价于 [0-9] ；
\\s 匹配一个空白字符；
\\w 匹配一个英文字母或数字，等价于 [0-9a-zA-Z] ；
. 匹配除换行符以外的任意字符，等价于 [^\] 。
5.4 * + ?
* 表示匹配前面元素0次或多次，比如 (\\s*) 就是匹配0个或多个空格；
+ 表示匹配前面元素1次或多次，比如 (\\d+) 就是匹配由至少1个整数组成的字符串；
剩余语法如果要用到可以去百度查 js正则语法大全
js的3个框架
拿来用即可，是一些组件化的动画，效果
layui框架
https://www.layui.com/doc/
echart组件
https://www.echartsjs.com/zh/index.html
Bootstrap框架
https://www.bootcss.com/
wangEditor编辑器
http://www.wangeditor.com/
0 条评论
回复 删除
下一页
