Get:速度快,安全性低 通过浏览器地址栏传值,不支持中文
最多支持2000个字符,浏览器地址栏格式为key=value&keyN=valueN,只能传字符串
post:速度慢,安全性高,不通过浏览器地址栏传值,通过消息体传值,不支持中文,不限制大小,支持Json和字符串
input="text" 单行文本输入框
input="password" 单行密码输入框
input="checkbox" 多选
input="radio" 单选
input="file" 上传文件
input="email" 邮箱
input="date" 日期
input="number" 数字
input="tel" 电话
input="submit" 提交
input="reset" 重置表单
input="image" 使用图片作为提交按钮
select > option 下拉列表框
1.引入css的三种方式的优先级
行内式 > 外链式和内嵌式谁放在后面听谁的如果出现冲突会覆盖冲突的部分
2.基本选择器的优先级
id选择器 > 类别选择器 > 标记选择器 如果存在行内式,则一切以行内式为准
页面元素类型:
在css中将页面的元素分为很多种，主要有以下三种特点比较明显的元素
1:内联元素（inline）
1:内联元素（inline）
内联元素结尾不换行,一行可以书写多个 从左到右依次排列,
元素的宽度高度与元素内部嵌套的内容有关 设置盒子模型无效 设置对齐方式无效
eg: span label a img*
2:块元素（block）
2:块元素（block）
块元素,自动换行,一行只能书写一个,从上到下排序,设置盒子模型有效,对齐方式有效
如果不设置宽度 则元素自动占满整个父元素
eg: div p ul li h1~h6 pre img*
3:空元素（empty）
3:空元素（empty）
一般不嵌套内容，直接用来设置页面的一些结构或者参数
多为整合标签
br hr meta
img
img:(内联块元素 inline-block)是一个具备块元素特征的内联元素
display
display:设置元素类型
display:block 设置元素为块元素（互相转换一下）
display:inline 设置元素为内联元素
display:none 隐藏元素
什么是盒子模型:
在css中将一个个元素看做一个盒子摆放在页面上,由于大多数都是块元素,
从上到下排列,这种排序方式成为标准文本流或者文档流,这些盒子可以通过设置一些参数,
来改变他们周边的空间位置,那么这些参数组成了盒子模型
内填充（padding），外边距（margin），边框（border）都有4个方向。比如内填充就有：padding-top, padding-right, padding-bottom, padding-left。
简略写法:
margin: 上 右 下 左; 四个值的时候
margin: 上 (右左) 下; 三个值的时候
margin: (上下) (右左); 两个值的时候
margin: (上右下左); 一个值的时候
在不设置宽度的前提下,块元素会占满父元素的整个空间,当设置浮动之后,
元素开始向浮动方向不断缩小,直到缩小到内部的内容大小为止,之后漂浮在页面上,该元素之前的空间被其他元素占据
float:left 左浮动
float:right 右浮动
float:both 两侧浮动
如果不想让元素受到其它元素浮动的影响，则添加clear属性
clear:left;去除左浮动影响
clear:right;去除右浮动影响
clear:both;去除两侧浮动影响
1:相对定位
根据元素的原先位置的左上角来定位,定位之后元素保持原先的类型,
元素原先的位置依然被占据，元素漂浮在页面上
top和bottom只能书写一个作为偏移量
left和right只能书写一个作为偏移量
2:绝对定位
根据距离元素最近的定位过的祖先元素的左上角进行定位，定位之后，元素
不再保持原先的类型，原来的位置也被占用，元素漂浮在页面上，可能会遮挡
页面上的元素
注意如果没有定位过的祖先元素，则根据body来进行定位，也就是浏览器的
左上角来进行定位，这样可能会出现严重的页面问题
基本数据类型(7种)
String number boolean null undefined
Symbol(ES6新特性) 表示一个独一无二的对象
BigInt(ES10新特性) 是对number的补充,用来表述2^53-1以外的数据精度
复合数据类型
Object
由对象引出
Array Function Math Date等内置对象
JavaScript不能直接修改页面的样式和结构,而是通过DOM模型来修改页面的结构和样式,浏览器一般存在一个引擎,这个引擎存在两个解析器,一个叫脚本解析器,一个叫标签解析器,浏览器从上到下解析,当解析完全文之后,会创建一个DOM模型,这个DOM模型全部封装在Document对象当中,Js并不是对页面上的元素进行增删改查,而是对DOM模型进行增删改查,修改完之后,模型和浏览器页面不一致时,浏览器会重新渲染页面使之保持一致
Javascript最基本的几个选择器
1:根据唯一的id在全文拿取元素
返回元素节点
Node document.getElementById('id')
2:根据标签名拿取多个元素节点
这些节点组成一个类数组，这个类数组中
封装了所有获取的元素节点
NodeList document.getElementsByTagName('tagName')
类数组其实就是DOM当中的数组，但是与ES规范也就是
Js中的Array并不是一码事，所以类数组无法使用
部分Array的方法
const newArray = Array.from(NodeList)
3:根据name属性值拿取多个元素节点，返回类数组
NodeList document.getElementsByName('name')
4:根据class属性拿取多个元素节点，返回类数组（民间）
NodeList document.getElementsByClassName('class')
尽量少用，严重兼容性问题
根据特点使用场合的不同，DOM将页面节点分为12种，
我们常见的节点由以下几种
以下节点根据 nodeType nodeName nodeValue几个属性用以区分
1:文档节点
就是指的document，一个页面只有一个文档节点
也就是根元素
nodeType 9
nodeName #document
nodeValue 不可用
2:元素节点
就是指页面上的各种元素，通过
document.getElementById()等拿取就是元素节点
nodeType 1
nodeName 标签名
nodeValue 不可用
3:属性节点
就是指元素节点中的各种属性
XXX="XXX"
我们之前写的 name="" id="" class=""
type=""
nodeType 2
nodeName 属性名
nodeValue 属性值
4:文本节点
就是指页面中的各种字符串
nodeType 3
nodeName 永远是#text
nodeValue 就是文本内容
5:注释节点
就是指页面中的注释
nodeType 8
nodeName 就是注释信息
nodeValue 不可用
window:BOM七对象之一，表示整个窗口，BOM(Browser
Object Model浏览器对象模型)，将浏览器的不同的功能
分别分为七个对象
window:表示整个窗口，也是BOM七个对象的
顶层对象，它包含着另外6个对象，属于全局变量
document:表示页面的正文部分，操作页面的元素
也是用此对象
location:表示浏览器的地址栏信息，用来负责页面的
条件以及地址的搜索等
navigator:浏览器信息，通过此对象可以查看当前页面
使用的是何种浏览器进行解析
history:浏览器历史记录以及缓存信息
screen:用户显示器信息
frame:页面的已经框架，目前已经被淘汰
1.行内引入 在标签内结合事件来使用
2.内部引入 在head或者body标签内定义script标签,然后在script标签内书写js代码
3.外部引入 引入一个独立的js文件
有两种创建数组的方式
1.let arr = [1,2,3,4,5]
2.let arr = new Array[元素个数]
arr[0] = **
arr[1] = **
....
迭代方式
1.普通迭代
for(let i = 0;i<arr.length;i++){
console.log(`${arr[i]}`)
}
2.ES5 for in 循环
for(let key in arr){
console.log(`${arr[key]}`)
}
3.ES6 for of 循环
for(let value of ar){
value就是要被遍历的值
}
4.循环体.forEach
循环体.forEach(a =>{
console.log(`${a}`)
})
1:使用对象字面量来创建对象
let|const 对象名 = {
属性名:属性值;
属性名:属性值;
属性名:属性值;
方法名(){
}
}
注意: 属性值不能加引号 属性名看数据类型来定(String,Number,boolean,null,undefined,Symbol,BigInt)
2:使用构造方法来创建对象
使用构造方法可以复用一个对象
this:书写在某个对象中，则表示本对象
书写在对象或者函数外表示全局变量window
1.当属姓名和属性值一致省略写法 name:name => name;
2.将类数组转化为数组 Array.form(类数组)
3.方法名:function(){} 写为 方法名(){}
4.基本数据类型 Symbol
5. 箭头函数
在js中为了简化书写，如果在书写匿名函数时
可以使用箭头函数，如果匿名函数中，存在一个以上
或者没有参数，则小括号保留，如果只有一个参数，则
小阔号省略，function去掉，则参数之后添加=>
如果函数体直接是return，则省略return 省略
大括号
6. 不再推荐使用var
使用let赋值变量
使用const赋值常量
7. 在前端中一般不使用后端的拼接字符串书写方式
这种书写方式太过繁琐了，如果遇到大量需要拼接的
地方非常容易出错
在ES6新规范中提出了模板字符串的概念
格式:
`${要输出的值}`
=:赋值
==:比对，如果不是同一种数据类型，则转换为同一种
数据类型，进行比对
===:如果两者不是同一种数据类型，则立刻返回false
如果是同一种数据类型则进行比对
1.$('tagName') : 根据标签名拿取元素
2.$('.class') : 根据类名拿取元素
3.$('#id') : 根据id拿取元素
4.$('tagName.class')/$('tagName#id') 拿取包含class或者id的特定元素
5.$('sel1,sel2,sel3') : 只要符合其中任意一个就可以成功选取
6.$('sel1 sel2 selN) : 拿取具有特定层级关系的元素
7.$('*') : 拿取全部元素
8.$('sel1 > sel2') : 拿取元素的特定子元素,仅仅拿取子元素
9.$('sel1 + sel2') : 需要满足三个条件 向下选取,互为兄弟,必须紧邻
10.$('sel1 ~ sel2') : 需要满足两个条件 向下选取,互为兄弟
1.$(':first') : 拿取第一个元素,注意冒号之前一般书写元素名用来限定什么第一个元素
2.$(':last') : 拿取最后一个
3.$(':eq(index)') : 拿取索引值匹配index的元素
4.$(':gt(index)') : 拿取索引值大于index的元素
5.$(':lt(index)') : 拿取索引值小于index的元素
6.$(':odd') : 拿取索引值是奇数的元素
7.$(':even') : 拿取索引值是偶数的元素 0是偶数
8.$(':has(sel)') : 拿取内部包含特定结构的元素
9.$(':contains(text)') : 拿取包含特定文本的元素,注意包含即可
10.$(':hidden') : 拿取隐藏的元素,必须指定限定条件
11.$(':visible') : 拿取可见元素
12.$(':root') : 拿取根元素
13.$(':empty') : 拿取空元素,内部没有文本也没有子元素的元素
14.$(':header') : 拿取所有的标题元素 h1~h6
1.$('[属性名=属性值]') : 拿取属性名匹配属性值的元素 注意必须一个字不差
2.$('[属性名^=属性值开头]')
3.$('[属性名$=属性值结尾')
4.$('[属性名*=包含属性值]')
5.$('[属性名!=属性值]')
注意 : 这种选择器没有冒号,直接书写限定条件
例如 : $('li[属性名^=属性值开头]') ==> $('li[id=thisisetoak]')
1.$(":input") : 匹配所有input,textarea,select和button元素
2.$(":text") : 匹配所有单行文本输入框
3.$(":password") : 匹配所有单行密码输入框
4.$(":checkbox") : 匹配所有复选框
5.$(":radio") : 匹配所有单选框
6.$(":submit") : 匹配所有提交按钮,理论上只匹配type="submit"的input或者button
7.$(":image") : 匹配所有图像域
8.$(":reset") : 匹配所有重置按钮
9.$(":button") : 匹配所有按钮
10.$(":file") : 匹配所有文件域
11.$(':enabled') : 匹配所有可用元素
12.$(':disabled') : 匹配所有不可用元素
13.$(':checked') : 匹配所有选中的复选框元素
14.$(':selected') : 匹配所有选中的option元素
1) $('sel')
引号内书写选择器，在全文或者指定内容中
拿取元素
$('span#etoak')
2) $(html)
直接在小括号内书写html超文本标签，多用来
配合一些方法使用
$('<span>XXXXX</span>')
3) $(dom)
直接将js的节点放置在括号内进行转换
$(document)
4) $(document).ready()
此方法在存在绑定事件时一般书写在函数最外侧
表示全文结构加载完毕时执行，类似js的
onload
$(document).ready(function(){
XXXXX
})
1.ready()方法在全文结构加载完毕并且其他要素无误的前提下就可以执行,而onload必须所有要素无误并且加载完毕才可以执行
2.ready()全文可以执行多次,从上往下执行,onload全文只能使用一次,如果存在多个执行最后一个
同步:
用户发出请求，必须等待响应的返回，响应返回之前
用户无法进行任何操作，只能傻等在那里，当响应返回之后，整个页面会被完全刷新
异步:
用户发出请求，不需要等待响应的返回，用户可以继续自己的其它动作，当响应
在未来的一个时间段返回之后，也不会刷新整个页面，而是仅仅修改页面的某一
部分结构或者样式
1:JSON字符串中的键值全部转换为Js对象的属性名
2:JSON字符串中的值全部转换为Js对象的属性值
Js对象
{
name:"elena",
age:20,
}
JSON字符串
{
"name":"elena",
"age":20,
}
js对象 => json字符串
JSON.stringify(js对象)
json字符串 => js对象
JSON.parse(json字符串)
创建JSON数据一般在后端进行创建
存在两种格式:
1:Map类型的json
{key1:value1,key2:value2,keyN:valueN...}
key:只能是字符串，必须使用双引号引起来
value:
Java八种基本数据类型
String
null
JSON
注意:java.utils.Date无法封装
可以封装java.sql.Date
2:数组类型的json
[value1,value2,valueN]
value:
Java八种基本数据类型
String
null
JSON
注意:java.utils.Date无法封装
可以封装java.sql.Date
url:'提交异步发送到的目的地'
发送异步的方式
get:查询，不能传递json，通过url传值
post:添加，可以传递json，也可以通过url传值
put:修改，可以传递json，也可以通过url传值
delete:删除，不能传递json，通过url传值
type:'书写发送异步的方式'
返回的响应类型
text script html json xml
支持以上五种类型，如果设置为json，则返回的
数据类型就是已经通过JSON.parse()转换好了的
js对象
dataType:'返回的响应类型'
是否使用异步
默认就是 true，如果设置为false，则使用同步
响应返回之前浏览器锁死，用户只能等待
async:true,
如果一切正常返回的回调函数
success(resp){
}
如果出现异常返回的回调函数
error(err){
显示错误状态码
400:格式转换异常
404:无法找到资源
500:服务器编译错误
405:提交方式不匹配
200:一切正常
}
text() : 相当于js中的innerText，如果没有参数表示拿取元素中的文本，多个文本合并为一个
如果有参数，表示向元素中添加（覆盖）文本
html() : 相当于js中的innerHTML，如果没有参数，则表示拿取元素中的超文本；
如果有参数，表示向元素中添加（覆盖）超文本
innerHTML:拿取元素中的所有超文本（万物皆为超文本）
innerText:拿取元素中的所有文本，如果存在多个文本,则合并为一个
XXX.innerHTML = XXXX
向元素中插入超文本，原先的内容会被覆盖
XXX.innerText = XXXX
向元素中插入文本，不支持标签，原先的内容会被覆盖
1.给元素绑定多个激发事件
sel.on('事件1 事件2 事件N',function(){
})
jQuery中的事件就是js中的事件去掉on
2.给元素绑定单一事件
$(document).dblclick(function(){
console.log('谁双击我了呀~~~~')
})
3.鼠标滑过滑出事件
sel.hover(
/* 鼠标滑过执行此函数 */
function(){
$(this).removeClass().addClass('red')
},
/* 鼠标滑出执行此函数 */
function(){
$(this).removeClass().addClass('blue')
}
)
jQuery元素是对js的节点的一个轻度的封装
jQuery元素只能使用jQuery中的函数 方法 属性等
js节点也只能使用自己的函数方法等
两者不能通用
两者如何转换
jQuery => js
$jqSp.get(0)
$jqSp[0]
js => jQuery
$(nodeSp)
1.传统开发方式
前端人员开发页面；后端人员将html转换成jsp,实现页面的业务逻辑前后端依赖性强。
后端开发人员等待前端开发完毕才能进行页面转换、逻辑渲染
前端页面效果由后端控制，后端需要前端展示
产品投产时，前后端代码部署在一台服务器
2.前后端分离
前后端通过约定api接口，约定好接口，并行开发，耦合度低，
前端调整页面 后端无需改动
后端提供数据，用户看到的效果由前端决定
前后端资源分离部署
MVVM是在MVP的基础上发展而来的一种思想
根据语言的特色将其分为如下几层
1:M层(Model)
就表示初始化在data中的数据源
2:V层(View)
就表示页面的DOM
3:VM层(view-model)
vm就表示我们通过Vue类库创建的Vue实例
通过这个实例，当m层的数据发生更改之后
v层数据立刻发生改动（单项绑定）
当页面中的dom发生改动时，m层中的数据立刻
随之发生改动（双向绑定）
这个Vue实例可以将数据源与页面绑定起来
1.大胡子表达式
在标签外使用大胡子表达式
{{ 要输出的值 }}
2.指令元素
v-html:后面绑定的值，就是插入元素的超文本
只支持html结构 css样式，不能添加js脚本
为了预防XSS网络攻击
v-once:一次性插值，将data中的数据插入到
页面中，之后不再保持任何绑定
v-model:使用在表单项中，类似表单项中的value属性
是唯一一个天生具有双向绑定功能的指令
注意大胡子表达式仅有单项绑定
v-on:后面绑定一个事件
v-on:click="函数名"
语法糖写法 @
@click="函数名"
注意函数如果没有参数，则不需要添加括号
v-bind:绑定一个元素的属性值
v-bind:属性名="data中的值"
语法糖写法 :
:属性名="data中的值"
let vm = new Vue({
el:'', // element的简写，表示管理的DOM模板
data:{
这里写要初始化的值
},
methods:{
所有绑定的函数都放置在此对象内
},
computed:{
设置计算属性
},
weatch:{
设置侦听器
被侦听的初始化的数据(更改之后的值,原先的值){
// 侦听器只能侦听基本数据类型,如果想要侦听数组或者对象的变化则需要开启深度侦听
deep:true
}
},
filter:{
设置过滤器
},
......
})
vm.$weatch('侦听的值',function(更改之后的值){
})
1:函数
一般绑定事件
函数没有缓存，不管参数是否改变，都会执行
（在控制台直接输入 vm.函数名() 则会有打印）
函数仅仅支持单项绑定，不支持双向绑定
2:计算属性
可以绑定事件也可以直接使用,
计算属性存在缓存机制，如果数据没有变化，则不再
执行（在控制台输入 vm.计算属性 不会有打印）
计算属性默认也仅仅支持单项绑定，但是覆盖setter方法之后
则支持双向绑定
3:侦听器
一般不考虑什么绑定
侦听器是用来侦听某一个值，这个值存在默认值，当这个值
发生改变时，则侦听器执行。侦听器默认只能侦听基本数据类型
如果想侦听对象或者数组的变化，则必须开启深度侦听，
deep:true
1.绑定class，后面是一个字符串
:class="初始化的值" 这个值对应一个类名
2.绑定class，后面是一个对象
:class="{类名1:boolean,类名2:boolean}"
boolean值如果为true或者不为0，则类名生效
如果为false或者为0则类名失效
3.绑定class，后面是一个数组
:class="[类名,类名]"
4.绑定style，后面是一个对象
:style="{样式名:初始化的值,样式名:初始化的值}"
样式名必须使用驼峰
1.v-if:如果后面为true或者不为0，则元素显示底层存在这个元素
否则如果为false或者为0，则元素不显示底层不存在这个元素
v-if适合切换频率低的场合使用,
可以配合v-else来搭配使用,必须紧邻,如果v-if隐藏，则执行v-else
2.v-show:如果后面为true或者不为0则元素显示，底层存在元素
如果后面为false或者为0，则元素不显示，底层依然存在元素，
但是元素上添加了一个display:none将元素隐藏
适合频繁切换的场合，初始载入消耗较大
不能搭配v-else
v-for:列表渲染,进行迭代
渲染数组:
v-for=(别名,index) in 循环体
in 可以替换为 of 这个循环体必须初始化在data中
由于v-for会出现就近策略的bug，所以一般要设置可选组件
:key="索引值|主键"
可以绑定索引(强烈不推荐)或者主键
v-for:迭代对象
v-for="(属性值,属性名,索引值) in 对象"
1206
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
