ｊｓ
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 >
document.write("<h1>第一个js页面</h1>");
</script >
<script></script>必须放在系统可以加载的区域
一般是写在ｂｏｄｙ后面
定义变量
var
var num;
num = 10;
num = 10;
打印变量
console.log(var)
数据类型
数 字（number）
非数字（String、boolean）
空值
空值（null）
未定义（undefined）
条件语句
if（）{
}else
}else
switch () {
case 0:
break;
case 0:
break;
循环语句
for（）{}
定义数组
var num = array();
num[0] = ''1''
num[1] = ''2''
num[2] = ''3''
num[0] = ''1''
num[1] = ''2''
num[2] = ''3''
打印元素
console.log(num[1]);
var array = [1,5,8,7,2];
alert(array);//1 5 8 7 2
alert(array);//1 5 8 7 2
定义函数
function 函数名（）{}
function test(num1,num2){
return num1 + num2;
}
return num1 + num2;
}
函数触发
js触发函数可以直接在标签写入事件进行触发，
也可以在script标签内直接写函数名（）来进
行调用
也可以在script标签内直接写函数名（）来进
行调用
DOM
浏览器上可操作
在 HTML DOM (Document Object Model)
即文档对象模型中, 每个东西都是 节点
即文档对象模型中, 每个东西都是 节点
文档本身就是一个文档对象
所有 HTML 元素都是元素节点
所有 HTML 属性都是属性节点
元素内的文本是文本节点
注释是注释节点，就不用
DOM操作其实就是对节点的增删查改
元素节点
常用方法
获取元素节点的方法
根据id获取一个元素节点
var div1 = document.getElementById("div1")
var div1 = document.getElementById("div1")
根据标签名获取一堆节点的集合
var li1 = document.getElementsByTagName("li");
var li1 = document.getElementsByTagName("li");
根据class获取一堆元素节点
var div2 = document.getElementsByClassName("content");
var div2 = document.getElementsByClassName("content");
使用css选择器选择第一个匹配的元素节点
var d1 = document.querySelector(".content")
var d1 = document.querySelector(".content")
根据css选择器选择一批能够被匹配到的所有的元素
var d1 = document.querySelectorAll(".content")
var d1 = document.querySelectorAll(".content")
修改元素节点的内容
不渲染html标签，标签会当做文本打印出来
div.innerText = "jiasoushi"
div.innerText = "jiasoushi"
会将html标签渲染出来
div.innerHTML = "<h1>1258</h1>"
div.innerHTML = "<h1>1258</h1>"
删除一个元素节点
直接把自己干掉
var mydiv = document.getElementById("div1")
mydiv.remove();
var mydiv = document.getElementById("div1")
mydiv.remove();
清除内容
mydiv.innerText = “”;
mydiv.innerText = “”;
删除某个子元素节点：先找到这个字元素节点，再把它干掉
var myul = document.getElementsByTagName('ul')[0];
mydiv.removeChild(myul)
var myul = document.getElementsByTagName('ul')[0];
mydiv.removeChild(myul)
新建一个元素节点
创建一个div标签，在内存中
var mydiv = document.createElement("div");
var mydiv = document.createElement("div");
添加进几个属性
mydiv.setAttribute("name","mydiv");
mydiv.setAttribute("class","test");
mydiv.setAttribute("name","mydiv");
mydiv.setAttribute("class","test");
获取到我的div
var div1 = document.getElementById("div1");
var div1 = document.getElementById("div1");
将内存中新建的div实实在在的加入到我的div中
div1.append(mydiv)
div1.append(mydiv)
获取所有的子节点
子节点一般是个集合，其实就是个数组
循环遍历可以批量操作
不仅仅是子节点集合，任何节点集合都能批量操作
方法
children属性能获取所有的子元素节点，不包括文本节点
mydiv.children HTMLCollection [ul]
mydiv.children HTMLCollection [ul]
children属性能获取所有的子元素节点，包括文本节点
mydiv.childNodes NodeList(3) [text, ul, text]
mydiv.childNodes NodeList(3) [text, ul, text]
子节点也是元素节点，一样可以有子节点
mydiv.children[0].children
mydiv.children[0].children
属性节点
使用元素节点方法进行增删查改
var mydiv = document.getElementById("div1")
获取这个属性的值
mydiv.getAttribute("name")
mydiv.getAttribute("name")
修改，同时可以添加一个属性的值
mydiv.setAttribute("name","cccc")
mydiv.setAttribute("name","cccc")
删除一个属性
mydiv.removeAttribute("name")
mydiv.removeAttribute("name")
使用属性节点对象对属性本身进行操作
获取所有的属性节点的集合，是个可以当成数组
mydiv.attributes
mydiv.attributes
通过下标拿到第二个属性
mydiv.attributes[1]
mydiv.attributes[1]
拿到属性的
name var attrName = mydiv.attributes[1].name
name var attrName = mydiv.attributes[1].name
拿到属性的值
var attrValue = mydiv.attributes[1].value
var attrValue = mydiv.attributes[1].value
修改这个属性的值
mydiv.attributes[1].value = "aaa"
mydiv.attributes[1].value = "aaa"
BOM
浏览器上可操作
BOM是浏览器对象模型。
BOM提供了独立于内容 而与浏览器窗口进行交互的对象；
BOM的核心对象是window；
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；
常用方法
setTimeout
一次性定时器，会在多少毫秒后执行这个函数
里边的是匿名函数，也叫回调函数
返回值是个定时器，这个方法是在未来去执行某个函数
var timer = setTimeout( function(){
console.log(123)
},2000 )
console.log(123)
},2000 )
如果时间未到，不想让他执行了，就需要取消这个定时器
clearTimeout(timer)
clearTimeout(timer)
setInterval
周期性定时器，会每隔多少毫秒后执行这个函数
var timer = setInterval( function(){
console.log(123)
},2000 )
console.log(123)
},2000 )
如果时间未到，或者中途不想让他执行了，就需要取消这个定时器
clearInterval(timer)
clearInterval(timer)
浏览器自带小型数据库
localStorage
localStorage只要不人为删除，会浏览器被删除数据会一直在
增加或修改一个
window.localStorage.setItem("name","lucy")
增加或修改一个
window.localStorage.setItem("name","lucy")
获取
window.localStorage.getItem("name")
window.localStorage.getItem("name")
删除一个
window.localStorage.removeItem("name")
window.localStorage.removeItem("name")
清空
window.localStorage.clear()
window.localStorage.clear()
sessionStorage
sessionStorage网页被关闭就没有了
增加或修改一个
window.sessionStorage.setItem("name","lucy")
增加或修改一个
window.sessionStorage.setItem("name","lucy")
获取
window.sessionStorage.getItem("name")
window.sessionStorage.getItem("name")
删除一个
window.sessionStorage.removeItem("name")
window.sessionStorage.removeItem("name")
清空
window.sessionStorage.clear()
window.sessionStorage.clear()
js事件
阶段
事件捕获阶段：从外向内
事件目标阶段：从最开始选择的那个开始
事件冒泡阶段：从里向外
一般默认都是冒泡阶段
true表示事件冒泡/false代表事件捕获
检测目前是哪个阶段：eventPhase
1代表捕获阶段
2代表目标阶段
3冒泡阶段
定义
var div1 = document.getElementById("div1");
div1.addEventListener('click',function(){
console.log("click");
})
div1.addEventListener('click',function(){
console.log("click");
})
var div1 = document.getElementById("div1");
div1.onclick = function(){
console.log("click")
}
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>
<script type="text/javascript">
function test(){
console.log("test");
}
</script>
消除事件
document.removeEventListener("click",test);
div1.onclick = null
或者
div1.onclick = false
div1.onclick = null
或者
div1.onclick = false
var callback = function(){
console.log("click")
}
var div1 = document.getElementById("div1");
添加一个事件
div1.addEventListener('click',callback)
移除一个事件
div1.removeEventListener('click',callback)
console.log("click")
}
var div1 = document.getElementById("div1");
添加一个事件
div1.addEventListener('click',callback)
移除一个事件
div1.removeEventListener('click',callback)
事件的分类
鼠标事件
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()
截取数组元素,并将截取的部分返回 参数1：开始的索引位置 参数2：结束的索引
splice()
参数2：删除的元素个数 参数3：可选的，如果有参数3，表示使用参数3代替删除的那些元素
toString()
将数组转换为字符串,该结果的返回值是修改后的字符串
数学对象
Math.abs()
计算一个数值的绝对值
Math.ceil()
向上取整，进一取整
Math.floor()
向下取整
Math.round()
四舍五入取整
Math.max()、Math.min()
获得最大值、获得最小值
Math.pow(x,y)
计算x的y次方
Math.sqrt()
返回数值的平方根
Math.random()
返回0-1之间的小数,这是js中取随机数的一种方法
日期对象
toLocaleString()
将日期对象转换成本地时间格式
getTime()
获得当前的时间戳（单位毫秒） 1000毫秒==1秒
getDay()
返回的是0-6的数字,分别代表了0为星期日,6为星期六;
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");
重载的构造函数，其第二个参数指定将不区分大小写：
re=new RegExp ("a","i");
re=new RegExp ("a","i");
第二个参数，为可选参数
g ：全文查找
i ：不区分大小写
m：执行多行匹配
常用方法
test()
用于检测一个字符串是否匹配某个模式
var patt = /e/;
patt.test("Love you");
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);
var n = str.search(/Runoob/i);
输出结果为： 6
replace()
将接收字符串作为参数
var str="Visit W3CSchool!";
var n=str.replace("W3CSchool","Runoob");
var n=str.replace("W3CSchool","Runoob");
console.log(n);
结果Visit Runoob!
结果Visit Runoob!
console.log(str);
结果Visit W3CSchool!
结果Visit W3CSchool!
常用语法
()、[]、{} 的区别
[] 是定义匹配的字符范围。 [0-9] 表示查找任何从 0 至 9 的数字。
{} 一般用来表示匹配的长度。 {8} 表示位数为8位。
() 的作用是提取匹配的字符串。表达式中有几个 () 就会得到几个相应的匹配字符串。
比如 (\s+) 表示连续空格的字符串。
比如 (\s+) 表示连续空格的字符串。
^ 和 $
^ 匹配一个字符串的开头，比如 ( ^a ) 就是匹配以字母 a 开头的字符串
如果 ^ 出现在 [] 中一般表示取反，
出现在其他地方则是匹配字符串的开头
$ 匹配一个字符串的结尾,比如 ( b$ ) 就是匹配以字母 b 结尾的字符串
\d \s \w .
\d 匹配一个非负整数， 等价于 [0-9] ；
\s 匹配一个空白字符；
\w 匹配一个英文字母或数字，等价于 [0-9a-zA-Z] ；
. 匹配除换行符以外的任意字符，等价于 [^\n] 。
5.4 * + ?
* 表示匹配前面元素0次或多次，比如 (\s*) 就是匹配0个或多个空格；
+ 表示匹配前面元素1次或多次，比如 (\d+) 就是匹配由至少1个整数组成的字符串；
? 表示匹配前面元素0次或1次，相当于 {0,1} ，比如 (\w?) 就是匹配最多由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 条评论
下一页
