javascrpit
基础语法
1.语句：通常一行代码如果添加了分号 认为这是一条语句使用分隔
2.变量：目的：通过一个名字 表示一个可以改变的值
定义：var变量名=值；var关键字 不赋值 var变量名
什么是关键字？ 语言本身提供的名字
有固定的意义 var 如var就是定义变量的意思
语言本身 提供了很多关键字 var for while if static let
变量名： 开发者起的一个名字
注意：不能使用关键字 定义变量名
不能数字开头
不能以特殊符号开头
定义变量要有意义 驼峰命名法
下划线命名法
意义：变量名：开发者起的一个名字 外号 标记
值： 具体内容：数字
文字
数组
对象
由名字表示了后面的值 把右侧的值赋值 （通过=赋值）给左侧的名字
3.注释：单行注释 ctrl+/
多行注释 ctrl+shift+/
4.调试
引入方式：
script
var a=20
/script
script src="" /script
基础语法
运算符
算数运算符（必须数字与数字之间运算）：+ - * / %
数据类型
number 数字类型 （包含浮点和整数）
string 字符串类型 双引号或者单引号包裹的都是字符串
boolean 波尔类型 :true 对
false 错
array 数组
object 对象
function 函数
数据转换的类型
字符串 转数字：转整数parselnt（）
转浮点parsefloat（）备注：如果使用小数的话不要直接使用小数
精度丢失：非要使用小数的话：1.乘以100（精确的级别）倍2.运算完毕 在还原倍数
输入内容：prompt
使用代码 输出变量 没有实际意义 只是帮咱们在控制台 输出一下变量
console.log（a）；
输出
console.log(a);//日志
console.warn(a);//警告
console.info(a);//详细信息
调试方式
1.console.log（a）//日志
2.断点调试（至少是半个大神级别才会） 在程序大点 阻止继续执行
断点调试的流程：1.先通过经验 定位到 大概错误位置2.打开浏览器中的source
3.点击要调试的文件（js）
4.在怀疑有错误的地方 点个点（打断点）
5.程序重新运行 会在断点位置停止->鼠标移动到断点上面的变量->就会显示变量的值
6.如果继续排错 可以多打几个断点通过播放键调到下一个断点通过下一步，执行下一部代码
复合运算符
+=:var a=10;
var b=20;
a=a+b;
a+=b;
-=
*=
/=
%=
++：给自己增加一个1
--：给自己减少一个1
比较运算符
就是一个boolean类型的值
>
<
>=
<=
== :忽略数据类型 1与“1”认为是相同的
=== 严格查看数据类型 1与“1”认为不相同 必须类型与值相同
!= 1“1” 假的
！== 1“1” 真的
逻辑运算符
三元运算
三元运算（三目运算）经常代替 if else
if（睡觉）{
做梦}
else{
掌握三元运算}
三元运算
睡觉？ 做梦：掌握三元运算
条件？满足执行：不满足执行
分支结构
if（条件）{}
if（条件）{}else{}
if（条件）{}else if{}else{}
switch 选择其中的某一个点子（case ）
结构：switch（变量）
case 值1；
break；(如果不加break 程序会继续向下执行)
case 值2；
break;
default:
循环
知道循环次数 for
结构：for(var i=0 (初始化 变量)i<5（循环条件）;i++（更改变量的值）)
不知道循环次数 whilezz
continue
跳过本次循环 但是在continue前面不会跳过
while （条件）{循环体}
do while 不管条件满不满足 先执行一次循环
break 跳出循环
函数
四种类型：有返回值 ：带参数 不带参数
无返回值 ：带参数 不带参数
函数封装 是一种编程思想
组成： 声明函数 function 函数名（）{}
调用函数 函数名
作用域： 概念：变量起作用的范围
局部变量 ： 只在定义的函数体里面，在函数体外面是不可以使用的
全局变量：
自执行函数：解决作用问题 防止多个js文件间的 变量互影响
返回值：带返回值的函数是什么？ 返回值是什么 函数就是什么 1 function x（）{return 1}
return值；
return放到函数里面 加值是有返回值的函数
不加值 就是跳出函数
日期对象
Date
创建日期对象：
获取当前日期 var date = new date（）；{通过类名}
new通过类名 创建对象的关键字
Date 日期类
通过日期类—》创建一个当前的日期对象
日期包含： 年 月 日 周 时 分 秒 毫秒
date.getfullyear； 年
date.getmonth 月
date.gedate 日
时间戳
1970年 某个时间的 毫秒数
时间戳转日期对象： new date(1288336112000)
var date=new date()
date.settime(1288336112000)
日期转时间戳 var date=newdate()
var t=date.gettime()
设置日期 var date =newdate（）
获取dom元素
查询dom元素
1.document.queryselector（"选择器的名字"）{查找到的是第一哥元素}
2.document.queryselector（"选择器的名字"）{查询到的是一个伪数组}
创建dom元素
1.创建dom元素 var 变量名=document.createelement（“标签名”）
事件监听
1.添加监听事件 dom.addeventlistener("事件名"，函数)
2.移出监听事件 dom.remove事件里面的技巧
1.阻止元素的默认行为：event.preventdefault（）；
如：去掉a标签刷新或跳转页面的功能
2.事件冒泡或捕获
事件冒泡：从内向外触发
事件捕获：从外向内触发
JSON对象 一种数据格式 没有语言限制 格式：{“key键”：值，“key键”：[ 1,2,3 ] }
{
"username":"xiaoming",
"age":99,
"friends":["xiaohua","xiaolv","小猪"]
}
XML 数据格式 没有语言限制 类似于html格式
//复制元素 cloneNode（）
如：//复制dom元素
if(left%50===0||top%50===0){
varp =person.cloneNode();
document.body.append(p);
p.style.opacity=Math.random();
}
}
一、鼠标事件 点击事件 onClick dom.onClick = function (事件对象){ }
移动事件 onmuosemove
鼠标的事件对象 ：pageX 光标在页面x的位置
pageY 光标在页面y的位置
//鼠标事件
document.body.onmousemove=function(event) {
console.log(event);
//鼠标移动到页面的位置
varleft = event.pageX;
vartop = event.pageY;
person.style.top= top+"px";
person.style.left= left +"px";
//复制dom元素
if(left%50===0||top%50===0){
varp =person.cloneNode();
document.body.append(p);
}
}
鼠标移入事件
二、键盘事件 按下键盘触发 onkeydown dom.onkeydown = function(事件对象){ }
当键盘事件触发的时候会获得一个事件对象（event）
例：
document.body.onkeydown=function(event) {
console.log(event);
}
code、keycode区分按下是哪个键
按键抬起时触发 onkeyup
三、状态事件
获取编译完成的样式（css里面写的样式） ：getComputedStyle(dom);
jquery
简介
JavaScript函数库
轻量级框架
不是由浏览器去开发的，而是由其他开发者开发的，不是官方的框架 就叫做第三方框架
内容
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
包管理工具
下载及管理第三方的库
分类 bowerBower是一个客户端技术的软件包管理器，它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源
node.js 可以帮我们安装卸载工具
安装 一直下一步
基本使用 1.搜索工具 ：npm search xx
2.安装工具：局部安装 只安装到本项目中 npm i xx
全局安装 会添加到环境目录中 可以在所有项目中使用《工具》 npm i xx -g
3.卸载工具：npm uninstall xx
npm服务器在境外 下载内容比较慢 就可以选择使用淘宝镜像
//查找dom元素
varbox=$(".box")
//创建dom元素
varimg=$("img")
varsoan=$("yahaha");
//清空dom元素
// dom.empty()
//如box.empty
//删除dom
//dom.remove（）
//$(".image").remove()
//子元素放到父元素
varp=$("
hhhh
")$("body").append(p)
varp2=$("
");p2.text("哈哈");
$("body").append(p2)
p2.html("呼哈哈哈")
p2.css("font-size","40px")
分类
鼠标事件
click
dblclick
mouseenter
mouseleave
hover
键盘事件
keypress
keydown
keyup
表单事件
submit
change
focus
blur
文档/窗口事件
load
resize
scroll
unload
显示隐藏
显示
$(selector).show(speed,callback);
隐藏
$(selector).hide(speed,callback);
淡入淡出
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
动画$(selector).animate({params},speed,callback);
事件里
事件监听：on 添加事件监听 dom.no（事件名，监听者函数）
off 关闭事件监听 关闭后事件不会再去响应 dom.off（事件名，监听者函数）
选择器“：
$("*") 通配符选择器
$("this") 把dom元素转换成jquery对象
jQuery转换成dom：jQuery【0】
dom转换成jQuery：$(dom)
交集选择器： $("p.intro")
并集选择器： $("p，intro")
后代选择器：$("p .intro")
子类选择器：$("p>.intro)
选取第一个元素（只要是第一个就可以找到）：$("p:first")
选取最后一个元素（只要是最后一个可以找到）$("p:last")
选取父元素中的第一个子元素：$("ul li:first-child")
查找的是所有包含这个属性名的元素：$("属性名")
查找指定属性名及属性值的元素：$("【属性名=属性值】")
查找指定属性名不是某个属性值的元素：$("【属性名！=属性值】")
选取所有偶数：$（"选择器：even"）
选取所有奇数：$("选择器：odd")
jQuery 遍历方法
1.遍历祖先：1.parent（） ：找到父元素
2.parents（）： 找到祖宗无数代
3.parentsUntil（）：指定查找祖宗的范围（不包含查找这个元素）
2.遍历后代：children() ：返回备选元素的所有直接子元素
children(选择器) ：可以指定选择备选元素的子元素
find()：返回备选元素的后代元素，一路向下到最后一个后代
jQuery 遍历 - 同胞(siblings)
siblings()
被选元素的所有同胞元素
next()
被选元素的下一个同胞元素
nextAll()
元素的所有跟随的同胞元素
nextUntil()
介于两个给定参数之间的所有跟随的同胞元素
prev()
被选元素的上一个同胞元素
prevAll()
元素的所有前面的同胞元素
prevUntil()
介于两个给定参数之间的所有前面的同胞元素
jQuery 遍历 - 过滤
first()
被选元素的首个元素
last媒体查询
视口：可以看到内容的范围（可视的窗口）
通过viewport指定
widith： device-width 设备的宽度
initaial-scale 初始化的缩放比例
maximum-scale 最大的缩放比例
user-scalable 不允许用户缩放no
@media：现在web都会做多终端的页面处理
可以通过媒体查询 设置每一端的样式 根据媒体的宽度设置不同样式
AJAX
用于无刷新 更新内容的手段 并且这种方式是异步的
现在常用于 与服务端通讯
也可以用于加载本地数据或者件
线程和进程：电脑系统 就是一个runloop每一个软件就是一个进程 ： QQ：同时接收ppt
同时聊天
同时下载游戏 全是线程
陌陌：下载视频
渲染视频
刷新视频 全是线程
探探：
微信：
同步：上一个任务执行完 才会执行下一个任务 同步着进行
异步：可以同时进行多个任务，异步的任务没有执行完可以进行下一个任务的 常用于1.耗时任务：加载大的音频文件
加大大量数据
2.不确定执行完时间的任务：与服务器通讯
为什么要异步：1.不会堵塞下面任务的执行 js
是没有线程概念-》主线程（ui线程） 如果不使用异步就会一直等下一个任务-》渲染界面任务被延迟-》视觉效果卡死
实现AJAX的方式：1.原生js ：XMLHttpRequest实现：1.实例化XMLHttpRequest 2.打开一个请求 3.监听请求的状态 4.发送请求
2.jQuery ：ajax
3.axios
4.request
客户端与服务器通讯：使用http通讯 ：通讯方法 get ：把要发送的数据 拼接到url中 特点：1.传输速度快 2.重要的内容不要使用get-》参数放到 url中 直接获取 3.浏览器URL的长度是有限制的 超过之后会被截取 get不可以传比较多的内容 参数暴露在URL中-》相对来说 参数是不安全的
post：参数放到请求体中 特点：1.想对get参数相对安全 2. 可以传输任意的文件 （唯一限制 服务器硬盘大小限制）
请求内容：请求头 请求体
到底用哪个？：搞前端 接口文档 写的用GET必须用GET
写的post就必须用post
搞服务端 需要思考 传输数据的大小
是否需要暴露在URL中
决定使用哪种方法 服务端与前端 必须保持一致 不然没办法通讯
单位
px 像素单位
% 百分比
vw vh 视口的高度 均分成一百份 注意点电脑的工具栏和浏览器的工具栏都包括
em 相对于《父元素》字号的大小 父元素的字号 10px 1em=10px(父元素等于多少 em等于多少)
rem 相对于《根元素》字号的大小 html字号是18px 1rem=18px
less
浏览器只能识别 HTML CSS JS 文件
使用css遇到的问题：1.权重
2.不能定义变量
3.不能进行数值的运算
4.不能使用函数
5.结构不清晰
为了解决css遇到的这些问题就可以使用ess sass这类插件 最终都要解析成css ： 1.按他的规则定义样式 2.通过js解析样式的文件 3.生成css文件-》浏览器就可以
less的功能 安装引入less：1.安装：bower：bower install less
npm：npm i bower
cdn：
直接下载js
2.引入：1.less 创建less文件：需要在stylesheet后面添加less才能使用
2.js
类似DOM数的语法结构 html：1.head 2.body：1.div ：1.p 2.a 3.img 2.main：div：1.p 2.a 3.img()
被选元素的最后一个元素
eq()
被选元素中带有指定索引号的元素
首个元素的索引号是 0 而不是 1
filter()
filter() 方法允许您规定一个标准。
不匹配这个标准的元素会被从集合中删除，
匹配的元素会被返回
not()
不匹配标准的所有元素Eventlistener("事件名"，函数)