js
用一种专门的编程语言，进行web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用
常用的CSS预处理器有
SASS：上手难道高
LESS：我们后台人员建议使用LESS
JS框架
Jquery库
三大框架
Angular
react
vue 最火
前端通信框架：Axios
JS构建工具
Babel：JS编译工具
WebPack：模块打包器
javascript
最流行的脚本语言
一个合格的后端人员必须精通js
ECMAScript是JS的一个标准
快速入门
引入script的两种方法，不用表明type
1.<script src="less1.js"></script>
2. <script>
alert("hello world");
</script>
基本语法
和java类似
定义变量用 var
console.log（）：可以在控制台打印日志
数据类型
number
JS不区分小数和整数
NaN not a number
Infinity：无限大
字符串
' abc' "abc"
布尔值
true，false
逻辑运算
&&，||，！
比较运算符
=
== 等于 类型不一样 值一样也会为真
=== 绝对等于（类型一样，值一样）
尽量避免浮点数进行运算
数组
js数组可以是不同的对象，如果越界就会报undefined
对象
对象用大括号
var people={
name:"liu",
age:18
}
取值
people.name
严格检查模式
'use strict'
局部变量都用let
必须写在第一行
字符串
正常字符串用单引号双引号包裹
注意转义字符
字符串不可变
数组
数组可赋值变化
赋值数组大小会变化
slice（） 截取数组 类似于substring
push（） 加入尾部元素
pop： 弹出尾部元素
unshift（） 头部加入元素
shift（） 头部去掉元素
sort（） 排序
reverse（） 反转
concat（） 连接数组
join（） 连接符
对象
可以通过delect删除属性
动态添加：直接给新的属性赋值就好
判断属性是否在对象中 可以用in
遍历 for(var num of age){
console.log(age)
}
map和set
map.set() 设置值
var map=new Map([["jack",100],["mike",98]])
set可以去重，用has可以判断是否有值
函数
function f() {
}
arguments 系统赠送的数组
rest 只能用在...之后
变量作用域
内部函数可以访问外部函数的成员
由内像外查找，就近原则
两个函数定义相同的变量名，不冲突
所有的变量定义都放在函数头部，不要乱放
全局对象放在window下
规范：把自己的代码放入自己定义的唯一空间
平时建议使用let定义局部作用域变量
const是常量关键字
apply：在js中可以控制this指向
Date
typeof 可以查看类型
var now=new Date();
now.getDate() //日
now.getFullYear() //年
now.getHours() //时
now.getMonth() //月
now.getDay //周几
now.getMinutes() //分
now.getTime() //时间戳
now.tolocalstring()
Json
在javascript 一切皆为对象，任何js支持的类型都可以用JSON来表示；
格式：对象都用{} 数组都用[] 所有键值对都用 key：value
Json字符串和js对象的转化
var user={
name:"xxx",
age:18
}
JSON.stringify(user);
JSON.parse('{"name":"xxx","age":18}')
面向对象
var user={
name:"xxx",
age:18,
run:function () {
alert("1")
}
}
var xiaoming={
}
xiaoming.__proto__=user //类似于继承
class继承 在ES6之后引入
'use strict'
class Student{
constructor(name) {
this.name=name;
}
run(){
alert(hello)
}
var xiaoming=new Student(xiaoming);
//继承
class xiaoxuesheng extends Student{
constructor(name,gread) {
super(name);
}
gread(){
alert(hello)
}
BOM
浏览器对象模型
js的诞生就是为了让他在浏览器运行
window 代表浏览器窗口
navigator 封装了浏览器信息，大多数不会使用navigator对象
screen 代表全屏
location(重要) 代表当前页的信息
document 代表当前页面，html，dom文档树
获取具体的文档树结点
<body>
<dl id="dl1">
<dt>Java</dt>
<dd>JavaSe</dd>
<dd>JavaEe</dd>
</dl>
</body>
<script>
var d1 = document.getElementById('dl1');
</script>
获取cookie
document.cookie
history 用法有.forward 和 .back 代表浏览器记录
DOM
文档对象模型
浏览器就是一个DOM树形结构
-
更新
-
遍历dom节点
-
删除
-
添加
要操作节点，必须先获得
获得
var a2 = document.getElementById('a2');
var a1 = document.getElementsByClassName('a1');
var d1 = document.getElementsByTagName('h1');
这是原生代码，之后会用到JQUery
更新
var d1 = document.getElementsByTagName('h1');
d1.innerText=' '
d1.style.(color，font...)
删除
先获取父节点，再通过父节点再删除自己
<div id="father">
<h1>haha</h1>
<p id="p1">1</p>
<p class="p2" id="p21"> 2</p>
</div>
<script>
var p2 = document.getElementsByClassName('p2');
var h1 = document.getElementsByTagName('h1');
var father= document.getElementById('father');
father.removeChild(p21)
删除只能删除带有id的
father.removeChild(father.children[1]) 动态删除 删除完[1]之后，原来[2]变为[1]
插入节点
<p id="java">JAVA</p>
<div id="div">
<p id="se">se</p>
<p id="me">me</p>
<p id="ee">ee</p>
<script>
div.appendChild(java)
</script>
//插入
var newP = document.createElement('p');
var div=document.getElementById('div');
newP.id='newp';
newP.innerText='我爱你'
div.appendChild(newP);
//创建新的节点
造作表单
text文本框查看值用value
多选框复选框查看值用.checked 结果时true和fales
提交表单
表单里边要加onsubmit
JQuery
是个库，里边有大量的JS函数
引入的方式
1.下载
2.CDS jquery 取得链接导入
公式：$(selector).action()
<body>
<input type="button" value="点我" id="b">
<script>
$('#b').click(function () {
alert("1")
})
</script>
</body>
文档工具站
action 事件
鼠标事件，键盘事件，其他事件
当网页元素加载完之后
$(function () {
})
鼠标移动事件
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.4.1.min.js"></script>
<style>
#div2{
width: 500px;
height: 500px;
margin: 0;
border: 1px solid red;
}
</style>
</head>
<body>
显示：<div id="div1"></div>
<div id="div2">
鼠标移动试试
</div>
<script>
$(function () {
$('#div2').mousemove(function (e) {
$('#div1').text('x'+e.pageX+'y'+e.pageY)
})
})
</script>
</body>
操作DOM
文本
$('#div2').text()
css
$('#div2').css() 用键值对逗号隔开
显示与隐藏
hide（）
show（）
浙公网安备 33010602011771号