HTML、CSS、JavaScript、Ajax的md笔记

2022年初刚开始学习前端做的一些笔记，包含HTML、CSS、JavaScript、Ajax等知识，这时候的笔记格式还是比较简洁的，可能不够全面，但是这也证明，自己还是一步步踏实前进的。

vscode快捷键

[toc]–把标题排列到开头

Ctrl+Alt+v–让图片以链接的方式粘贴到笔记。

Shilt+win+S–快速截图

Fn+<–到行首，若+Ctrl，到文本首

win+v–剪切板

一行的开头写‘#’–当标题

空元素没有结束标记

Ctrl+F2–全部选中特定字符

shift+Alt+下键–批量复制粘贴

alt+shift+a–添加注释符

shift+Alt+鼠标左键–多行同时修改

一、前端

w数+h数+bgc–快速设置宽高背景

<br/>–换行

align–对齐

indent–缩进

二、前端进阶

iconfont加字体图标名–使用字体图标

transition: all .5s;–变化速度为0.5s

opacity: 0;–不透明度为0，即透明

transform: translate(1px) scale(1);–位移并且缩放

transform-origin: right bottom;–以右下角为旋转中心

transform: rotate(1deg);–顺时针旋转度

linear-gradient线性梯度–渐变

vertical-align: middle;–图片垂直对齐：居中

perspective–透视属性

旋转左手法则–手握轴，拇指指正，四指弯曲方向为正数

animation动画

linear–匀速

alternate–反向

body的原始高度是0,要覆盖浏览器，加个cover

移动web

justify-content主轴对齐–取代浮动和外边距
justify-content: space-evenly;//间距相等
justify-content: center;//居中
justify-content: space-around;//两边固定间距
justify-content: space-between;

flex: 1;–占用父级剩余尺寸的份数

flex-direction: column;–主轴方向为列

flex-wrap: wrap;–弹性盒子换行

align-items:center;–侧轴中心

Less

less除加括号，加减乘不加
width:(68/37.5rem);

&:hover–当前的hover

@变量名:值;–定义变量
@colora:green;
CSS属性:@变量名;–使用变量
color: @colora;

@import “文件路径”–导入less文件内容
@import “base.less”;

在第一行加 // out: ./a/b.css–导出到a文件夹下的b.css

在第一行加 // out:false–禁止导出

1rem–1HTML字号大小

vw–1/100视口宽度
vh–1/100视口高度

z-index: 1;–层叠级别大的显示在上面，小在下；

媒体查询

min-width–从小到大写下去(css有层叠性，要有个顺序)
@media (min-width: px){
}
max-width–从大到小写下去

orientation–屏幕方向
portrait：竖屏
landscape：横屏

媒体查询-隐藏–视口宽度变小时，这部分内容隐藏

BootStrap

BootStrap把网页分成12等份–
col-lg-3表示每个内容占3等份，即一行可以放4个内容

xs(extra small)–超小屏幕
sm(small)–小屏幕
md(middle)–中等屏幕
lg(large)–大屏幕

container类自带间距15px
row有-15px的外边距，可以抵消container类15px的内边距

container-fluid–宽度100%,自带左右各15px的padding

"./bootstrap-3.4.1-dist/css/bootstrap.min.css"引入到HTML文件
https://v3.bootcss.com/css/–找对应样式

三、JS

querySelector–返回指定选择器的第一个元素对象
里面的选择器需要加符号 .box #nav

onclick–鼠标左键触发

getMonth–返回数值为0~11

getDay–返回数值为0~6

innerText–不识别html标签 去除空格和换行

pwd.type = ‘text’;–密码改为明文

div.style.backgroundColor = ‘purple’;–修改div背景色

box.style.display = ‘none’;–隐藏

cursor: pointer;–变为手指

onblur–失去焦点

mouseover–鼠标经过 子盒子也会触发
mouseenter–鼠标经过 只触发自身

onmouseout–鼠标离开

dataset–是集合 存放所有以data开头的自定义属性

###节点

children–获取所有的子元素节点

childNodes–获取所有的子节点
var ul = document.querySelector(‘ul’);
ul.children
ul.childNodes

firstChild–
children[0]–第一个子节点

firstElementChild–返回第一个子元素节点

previousSibling–上一个兄弟节点

nextSibling–下一个兄弟节点

previousElementSibling–上一个兄弟元素节点

nextElementSibling–下一个兄弟元素节点

元素和节点的区别
<a>abc</a>，<a>是个元素，也是一个节点
abc不是元素，是文本节点

appendChild–添加节点
tr.appendChild(td);

removeChild–删除节点

insertBefore–添加到现有节点的前面
ul.insertBefore(li,ul.children[0]);

button.disabled = true;–按钮变灰，不可点击

javascript:;–阻止链接跳转

node.cloneNode(true);–复制标签和内容，括号内为空只复制标签
ul.children[0].cloneNode(true);

onclick–传统方式注册事件
.onclick = function() {
}
addEventListener–事件监听注册事件
.addEventListener( ‘click’, function() {
})
e.target比this更精准–返回触发事件的对象

preventDefault()–阻止默认行为，比如点击跳转
function(e){
e.preventDefault();
}
stopPropagation()–停止冒泡(点击子元素，阻止父元素行为)
stop 停止 Propagation 传播

事件委托–不用再循环给每个li添加监听，只监听父级就行
ul.addEventListener(‘click’, function(e) {
e.target.style.backgroundColor=‘’;
})//点击li，对应li就会变

contextmenu–右键菜单,类型跟click一样
selectstart–选中文字

screenX–鼠标在 电脑屏幕 的x和y坐标
pageX–鼠标在 页面文档 的x和y坐标
clientX–鼠标在 浏览器窗口可视区 的x和y坐标

keypress–按下触发，不识别功能键(ctrl)，但是能区分字母大小写
keydown–按下触发，识别功能键
keyup–弹起触发

load–等内容加载完毕，包含页面dom元素 图片等

DOMContentLoaded–等DOM加载完毕,不包含图片等

setTimeout(函数, 时间(毫秒));–定时器
clearTimeout(定时器);–清除定时器

setInterval(函数, 时间);–循环的定时器
clearInterval(定时器);–清除定时器

+new Date()–相当于new Date().getTime() 获取毫秒数

同步–做了再吃
异步–边做边吃

location对象–获取或设置窗体的URL(资源地址)

location.href–获取或设置整个URL
location.search–返回参数
？–=–

location.assign–跟herf一样，可以后退
location.assign(‘http://www…com’);

location.replace–替换页面，不能后退

location.reload()–刷新
location.reload(true);//加true强制刷新

navigator.userAgent–可以用来判断用户的终端

history.go(1);– 1前进，-1后退

offset–获得元素位置
offsetTop距离最上端的位置

client–获得元素大小，不包含边框

(function() {})()–立即执行函数
或者(function(){}());

scroll–滚动事件，获取滚动距离

scrollTop–距离元素顶的距离

pageYOffset–距离页面顶的距离

高度100的边框，边框大小为2，放入scrollHeight为180的元素，
offsetHeight为100，clientHeight为100-2*2=96。
scrollHeight–元素的实际高度
offsetHeight–包含边框的元素高度
clientHeight–不包含边框的元素高度

Math.ceil–向大取整 1.2->2
Math.floor–向小取整 1.2->1

fastclick插件–引用后可以取消移动端的300ms点击延迟

swiper–轮播图插件
https://www.swiper.com.cn/

sessionStorage–本地存储，生命周期为关闭浏览器窗口
sessionStorage.setItem(key,value)；
sessionStorage.getItem(key)；
sessionStorage.removeItem(key)；
sessionStorage.clear(key)；

localStorage–关闭浏览器窗口也会存在
localStorage.setItem(key,value)；

四、ajax

ajax–
$.ajax({
type:‘’,//请求的方式(GET、POST大小写都可以)
url:‘’,//请求的 URL地址
data:{id:*},//这次请求要携带的数据
success:function(res){//请求成功之后的回调函数
console.log(res)
}
}}

$(‘#a’).val().trim()–获取a对应值

$(‘#a’).val(‘’)–把a设置成空

**$(this).attr{(}^{\prime }i{d}^{\prime })\ast \ast --获取this的id值‘‘‘$(“#input”).attr(‘value’,‘设置属性值’)```

resetui()–重置滚动条(到底部)

$(selector).serialize()–获取表单中所有数据

模板引擎–减少字符串拼接操作

template的信息传递
{{name}}
name: ‘zs’

{{@ test}}
test: '<h3>测试</h3>'

{{$value}}
value: [‘吃饭’, ‘睡觉’, ‘写代码’]

{{value | filterName}}//过滤器使用

exec函数–用于检索字符串中的正则表达式的匹配，无匹配值就返回null

XMLHttpRequest(即xhr)–可以请求服务器上的数据资源

xhr发起get请求
① 创建 xhr 对象
② 调用 xhr.open() 函数
③ 调用 xhr.send() 函数
④ 监听 xhr.onreadystatechange事件

查询字符串–放在url末尾，发送到服务器
例：http://www.ll/get?id=1&bookname=西游记

URL编码–用英文字符去表示非英文字符
例：http://www.ll/get?id=1&bookname=SE8%A5%BF%E6%B8%B8%E8%AE&BO
encodeURI() 编码
decodeURI() 解码

数据交换格式–XML和JSON。JSON本质是字符串，用得比较多

JSON对象结构
{key:value,key:value,…}的键值对结构，key和value的字符串必须有双引号
例{“name”: “zs”,
}

JSON转换成js对象
var obj = JSON.parse(‘{“a”:“Hello”}’)
//结果是{a:‘Hello’}

js转换成JSON对象–
var json = JSON.stringify({a:‘Hello’})
//结果是"{“a”:“Hello”}"

设置超时时限–过了时限就停止HTTP请求
xhr.timeout = 30
xhr.ontimeout = function () {
console.log(‘请求超时了！’)
}

FormData–管理表单数据
var fd=new FormData();
fd.append(“name”,“zs”);//name=“zs”
xhr.send(fd)

监听文件上传的进度
xhr.upload.οnprοgress=function(e){
(e.loaded/e.total)*100// 已加载/总进度
}

axios–网络数据请求的库

JSONP–通过script标签的src属性获取跨域数据，只支持GET数据请求
使用 jQuery 发起 JSONP 请求，会自动携带一个 callback=jQueryxx 的参数

自定义 JSONP 的参数和回调函数名称
$.ajax({
url:‘’,
dataType:‘jsonp’,
//发送到服务端的参数名称,默认值为 callback
jsonp:‘callback’,
//自定义的回调函数名称,默认值为jQueryxxx格式
jsonpCallback:‘abe’,
success:function(){
})
}

HTTP协议–超文本传输协议

只有 POST 请求才有请求体

HTTP常用请求方法
GET
POST
PUT//提交资源，替换服务器的旧资源
DELETE

HTTP响应状态码–判断请求成功与否
2** //成功
3** //重定向，需要进一步的操作以完成请求
4** //客户端错误,比如404 Not Found,服务器无法根据客户端的请求找到资源（网页）
5** //服务器错误

在现有目录 初始化git仓库–右键->git bash->输入git init

git add 文件名–跟踪新文件
然后文件就会被跟踪并放入暂存区

提交更新
git commit -m “相关描述”

it三个区域–工作区、暂存区、Git仓库

Git三种状态–已修改modified、已暂存staged、已提交committed

补充

flex布局–

.justify-content属性决定了flex items在主轴main axis上的对齐方式。（水平对齐的方式）
flex-start（默认值）：左对齐，与main start 对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
|o  o  o|
Space-evenly：flex items之间的间距相等。
| o o o |
space-around：每个项目两侧的间隔相等。
| o  o  o |


align-items 项目在交叉轴的对齐方式
align-items:flex-start; flex项目在交叉轴开始位置展示(起点对齐)，不再适应整个容器的高度了
align-items:flex-end; flex项目在交叉轴结束位置展示(终点对齐)
align-items:flex-center; flex项目在交叉轴居中展示(中点对齐) 常用
align-items:stretch;(默认值) 如果项目未设置高度或设为auto,将占满整个容器的高度