文章目录
1、什么是 avaScript
1.1、概述
JavaScript是一门世界上最流行的脚本语言
Java、 JavaScript
10天—
一个合格的后端人员,必须要精通 JavaScript
1.2、历史
JavaScript的起源故事
https://blog.csdn.net/kese7952/article/details/79357868
ECMAScript它可以理解为是avascript的一个标准
最新版本已经到es6版本-
但是大部分浏览器还只停留在支持es5代码上!
开发环境一线上环境,版本不一致
2、快速入门
2.1、引入JavaSciprt
- 内部标签
<script>
//...
</script>
2、外部引入
abs.js
//...
test.html
<script src="abc.js"></script>
测试代码
2.2、基本语法入门
浏览器调试必备须知
2.3、数据类型
数值,文本,图形,音频,视频。。。
浮点数问题
2.4、严格检查格式
3、数据类型详解
3.1、字符串
console.log("\x41") ==> a
console.log(msg) ==> ‘你好呀,qinjiang’
3.2、数组
arr = [0,1,1];
常用的方法slice(截取),push(压入),pop(弹出),shift(压入首部),unshift(弹出首部),concat(拼接)
3.3、对象
JavaScript中的所有的键都是字符串,值都是任意对象
3.4、流程控制
forEach是ES5.1引入的
3.5、map和set
ES6的新特性~
3.6、iterator
ES6的新特性~
使用iterator来迭代Map和Set
4、函数
4.1、定义函数
function(x){…}这是一个匿名函数,但是可以把结果赋值给abs,通过abs就可以调用函数!
方式一和方式二等价
问题:arguments包含所有的参数,我们有时候想使用多余的参数来进行附加操作,需要排除已有参数~
rest参数只能卸载最后面,必须用…标识(rest是自定义名称)
function aaa(a,b,…like){
console.log(like);
}
4.2、变量的作用域
假设在JavaScript中,函数查找变量从自身函数开始。由“内”向“外”查找。
假设外部存在这个同名的函数变量。则内部函数会屏蔽外部函数的变量。
这个是在JavaScript建立之初就存在的特性,养成规范,所有的变量定义都放在函数的头部,不要乱放,便于代码维护。
JavaScript实际上只有一个全局作用域,任何变量(函数也可以视为变量),假设没有在函数作用范围内找到,就会向外查找,如果在全局作用域都没有找到,报错 RefernceError
规范
我们所有的全局变量都会绑定到我们的windows上。如果不同的js文件。使用了相同的全局变量。冲突 ~ >如果能够减少冲突?
把自己的代码全部放入自己定义的唯一空间名字中,上面。啊降低全局命名冲突的问题.
(jQuery库)
常量const
在ES6之前,怎么定义常量:只有用最全部大写字母命名的变量就是常量,建议不要修改这样的值。
4.3、方法
5、内部对象
5.1、基本语法
5.2、JSON
在JavaScript一切皆为对象,任何js支持的类型都可以用JSON来表示:number,String…
5.3、Ajax
6、面向对象编程
原型:
以前的继承
现在的继承
2、继承
本质:查看对象原型
原型链
7、操作BOM对象(重点)
8、操作DOM对象(重点)
获得DOM节点
这种都是原生代码,往后尽量用jQuery();
删除节点
注意,删除多个节点的时刻,children是在时刻变化的,删除节点的时候一定要注意。
插入节点
获得了某个DOM节点,假设这个DOM节点是空的,通过innerHTML就可以增加一个元素了,但是这个DOM节点已经存在元素了,就会产生覆盖。
效果:
创建一个新的标签,实现插入
9、操作表单(验证)
获取要提交的信息
提交表单,md5密码加密,表单优化(高级玩法 - hidden)
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- MD5工具类 -->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!-- 表单绑定提交事件
οnsubmit= 绑定一个提交检测的函数,true,false
将这个结果返回给表单,使用onsubmit接受 -->
<form action="" method="POST" onsubmit="return aaa()">
用户:<input type="text" id="uname" name="username" placeholder="用户名"/><br/>
密码:<input type="password" id="pname" name="userpassword" placeholder="密码"/><br/>
<input type="hidden" id="md5pwd" name="epassword"/>
<button type="submit">提交</button>
</form>
</body>
<script>
function aaa(){
var u = document.getElementById('uname');
var p = document.getElementById('pname');
var md5pwd = document.getElementById('md5pwd');
md5pwd.value = md5(p.value);
//可以校验判断表单内容,true就是通过提交,false是阻止提交
return true;
}
</script>
不用按钮提交,一般都用表单级别的提交 ← ← ← 刮刮乐
10、jQuery
获取jQuery - 公式:$(selector).action()
公式:$(选择器).事件(事件函数)
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- jQuery的cdn加速地址 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
<a href="" id="test-jquery">点我</a>
<script>
//选择器就是css的选择器
$('#test-jquery').click(
function(){
alert('holle,world');
}
)
</script>
</body>
选择器
文档工具站:https://jquery.cuishifeng.cn/
事件
鼠标事件,键盘事件,其他事件
比如获取鼠标坐标:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
<!-- 要求:获取鼠标当前的一个坐标 -->
mouse: <span id="mouseMove"></span>
<div id="divMove">
在这里移动试试:
</div>
<script>
// 在网页加载完毕之后,响应事件
$(function(){
$('#divMove').mousemove(function(e){
$('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
})
});
</script>
</body>
操作DOM
> 小技巧
1、巩固JS
- 看jQuery源码
- 看游戏源码
2、巩固HTML
- CSS —> 扒网站,全部下载下来,修改对应位置的样式,看效果