一. 相对路径
“./”：代表目前所在的目录。
“…/”：代表上一层目录。
以”/”开头：代表根目录。
1、文件在当前目录
Page2.html访问Page2Image.jpg
<img src=”./Page2Image.jpg”>或者<img src=”Page2Image. jpg”>
2、文件在上一层目录
Page1.html访问Image下的Image.jpg
<img src=”../Image/Image.jpg”>
Page2.html访问Image下的Image.jpg
<img src=”../../Image/Image.jpg”>
3、文件在下一层目录
Page1.html访问Site2文件夹下的Page2Image.jpg
<img src=” ./Site2/Image.jpg”><img src=” Site2/Image.jpg”>
4、根目录表示法,任何页面访问Image下的Image.jpg图片
<img src=”/Image/Image.jpg”>
二、img
是空标签，它只包含属性，没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 的值是图像文件的 URL，也就是引用该图像的文件的的绝对路径或相对路径。alt 规定图像的替代文本即当图片未成功显示的时候显示的文本信息。title 设置鼠标悬停时显示的内容（一般不用设置）。此外还可以通过设置 width 和 height 的值来设置图片的宽和高。
<img
src="https://labfile.oss.aliyuncs.com/courses/1236/coder.jpg"
alt="程序员"
title="你好啊"
width="700px"
height="600px"
/>
三、input 的name和id , label标签，datalist标签
https://blog.youkuaiyun.com/xiao_seven/article/details/80248996
https://blog.youkuaiyun.com/zjjian1989_0611/article/details/7798946?utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control
1.id就像唯一的身份证号码，name就像是名字，可以重复，如果需要绑定，就要用id
2.可以使标签内的区域指向label标签for属性指代的对象的事件。
无label标签: 文本
有label标签:
有label标签的这一段，点击标签中的文本，可使多选框聚焦。
3.datalist与select相比，输入是会出现提示
四、javaScript
构造函数的prototype对象默认都有一个construtor属性，指向prototype对象所在的函数
function F() {}
console.log(F.prototype.constructor === F);
通过构造函数得到的实例对象内部会包含一个指向构造函数的prototype对象的指针_proto_
function F() {}
var a = new F();
console.log(a.__proto__ ==F.prototype);
原型链
function Student() {}
Student.prototype.sayHi = function () {
console.log('Hi');
};
JSON 是 JavaScript 的一个子集，但 JSON 是独立于语言的文本格式
{
"students": [
{ "firstName": "san", "lastName": "zhang" },
{ "firstName": "si", "lastName": "li" },
{ "firstName": "wu", "lastName": "wang" }
]
}
常用内置对象：
Array对象：
concat()/join()/pop()/push()/reverse()/shift()/unshift()/slice()/splice()/sort()/toString()
String对象：
charAt()/charCodeAt()/slice()/indexOf()/toString()/toLowerCase()/toUpperCase()/replace()/split()
Date对象：
Date()/getDate()/getDay()/getMonth()/getFullYear()/getHours()/getSeconds()/getMilliseconds()
Math对象：
abs(x)/round(x)/sqrt(x)/ceil(x)/floor(x)/sin(x)/cos(x)/tan(x)/acos(x)/asin(x)/atan(x)/exp(x)/pow(n,m)/log(x)/max(a,b)/min(a,b)/random()
BOM的顶级对象window以及常用操作方法
对话框：
alert()/prompt()/confirm()
页面加载时间：
onload/onunload()
定时器：
setTimeout()/setInterval()/clearTimeout(timeId)
var timerId = function(setTimeout {function(){
console/log('Hello');
} ,1000),
五、text,动画，跨列
图片：子绝父相
默认情况下，元素的宽度与高度计算方式如下：
width(宽) + padding(内边距) + border(边框) = 元素实际宽度
height(高) + padding(内边距) + border(边框) = 元素实际高度
这就意味着我们在设置元素的 width/height 时，元素真实展示的高度与宽度会更大(因为元素的边框与内边距也会计算在 width/height 中)。
如果在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中。
flex布局：
display:flex;设置为弹性布局
flex-direction定义排列方向:row|row-reverse|column|column-reverse
justify-content沿着主轴线对齐：flex-start|flex-end|center|space-between|space-around（重要）
align-item在侧轴方向对齐方式：flex-start|flex-end|center|baseline|stretch（重要）
flex-wrap换行方式：nowrap|wrap|wrap-reverse|initial|inherit
align-content
align-self
flex
display:
max-width:随窗口变小而改变来适应
charAt(2) 从字符串由index找值 / toUpperCase() 转为大写 / substr(start,length)截取字符串
=赋值 ==比较值（先转换为相同类型再比较 null=undefined) ===比较值和类型
px
em 1em=16px;(font-size=0.65->1em=10px),相对于父元素来说的
rem 在html设置font-size=0.65, 相对于html来说的，不会造成混乱。
querySelector()返回选择器的第一个元素，静态的/ querySelectorAll()返回所有的 nodelist
getElementsByTagName()动态的 htmllist
默认背景图片的起始位置为padding的位置
background-repeat:no-repeat;
background-origin:content-box;//设置起始位置为内容
background-origin:-50px 0;//再向左边移动50px;
防抖函数，与上一次时间执行大于规定时间再执行，节流函数，规定时间内执行一次
document.onscroll
js是单线程
回调函数被称为钩子函数，异步，轮询
Vue和React
不同点：
id选择器和类选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
id=""
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点".“号显示：
class=”"
line-height 设置行高（ px % normal 数字）
border-collapse: 设置表格边框是否设置为合并单一的边框 （collapse / separate)
Math.floor(Math.random()*4) 取整
window.getComputedStyle(con, null)[‘top’]; 取出con的top属性值
**confirm()**方法用于显示一个带有指定消息和确认及取消按钮的对话框。如果访问者点击"确定"，此方法返回true，否则返回false。
$(document).ready(function{}) : ready() 函数规定当 ready 事件发生时执行的代码。ready() 函数仅能用于当前文档，因此无需选择器。
方便经常用的 document.getElementById(id) 的书写方便：
function $(id) {
return document.getElementById(id);
}
$(document).ready(function(){
$(“p, button, h1”).click(function(event){
$(“div”).html(“通过 " + event.target.nodeName + " 元素触发。”);
});
});
Vue.config.productionTip = false 阻止启动生产信息
Async await异步
find函数
let item=result.find(item => item.type === 0)
toFixed(2)保留两位小数
filter函数：
var oldArray = [1,2,3,4,5,6,7,8,9,10];
var newArray = oldArray.filter(function(val){return val<6;});
javascript:是表示在触发默认动作时，执行一段JavaScript代码，而 javascript:; 表示什么都不执行，这样点击时就没有任何反应。
href：URL 规定链接的目标 URL。
这个a标签的话就是指点击后跳转到百度首页
点击后是不会跳转的，一般用于开发时页面还未完成。
监听：
watch:{
$route:“getAllGoods”
},
当路由跳转时监听这个方法，调用这个方法
if (this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …mentDid = this.route.query.did}
JSON 通常用于与服务端交换数据。
在接收服务器数据时一般是字符串。
我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
res.json([body]):发送一个json的响应。
token+jwt
签名，验证 用户
全局守卫
第一步：
在配置路由的文件
{path:’/user’,
name:‘user’,
component:User,
meta:{
auth:true //需要守卫
}}
第二步：
在main.js中
router.beforeEach((to,from,next)=>{
//用户未登录，跳转到登录界面
to.matched则只需要给较高一级的路由添加requiresAuth即可，其下的所有子路由不必添加。
if(to.matched.some(record=>record.meta.auth))=>{
next({
path:’/login’,
query:{
redirect:to.fullPath
}
})
}else{
//放行
next();}
})
https://blog.youkuaiyun.com/heshuaicsdn/article/details/88020796
commonjs和es的导入导出
commonjs:
const sum = require(’./add.js’)
module.exports = {
name: ‘haha’
};
(或者：exports.name=‘haha’)
ES6 Module的导入
import { add } from ‘./add.js’
export default {
name: ‘calculator’,
add: function(a, b) {
return a + b;
}
};
继承
1、原型链继承：每一个AO对象都有一个prototype，返回对象类型原型的引用，所以可以给它赋值一个对象，就可以实现简单的原型链继承。只要任意一个子类改变了父类对象的属性，那所有对象都会受到影响。
Bird.prototype = new Animal();
2、原型冒充继承：把父类的构造函数拿过来执行一遍
Animal.apply(this, arguments);this.fly = function(){
alert(“我会飞”);
}
var pigeon = new Bird();
3、复制继承：把父类所有的属性和方法复制过来
var pigeon = new Bird();
pigeon.extend(new Animal());
4、ES6标准类的继承
class Bird extends Animal {
constructor(name){
super(name);
this.type = “小鸟”;
}
}
性能优化
防抖，节流，图片懒加载，扁平化store，组件懒加载
Vue全家桶
一、vue-cli 二、vueRouter 三、vuex 四、Axios 五、搭配UI框架如：iview、vant、elementUI
前端数据请求
Vue项目运行流程
1 加载public的 index.html(什么都没有），
2 加载App.vue的import代码来引入组件（页面内容），
3 main.js 把App挂载到id=‘app’ (createApp(App).mount("#app")😉
4 加载App.vue export default里面的内容(调用组件）
prompt,eval,delegate
eval(‘2+2’),可以强制计算
name=prompt(“Please enter your name”,"")，显示提示框，前一个值是显示内容，后一个是默认内容
$(document).ready(function(){
$(“div”).delegate(“button”,“click”,function(){
$(“p”).slideToggle();
});
});
ajax请求
//php来请求数据xml/json文件的数据
btn.onclick=function(){
type:"get",
url:" .php",
data:"act=get&page="+number,
success:function(){
var res=xhr.responseXML |
//当请求json数据
var res = xhr.responseText
var obj=JSON.parse(res)
};
error:function(xhr){
alert(xhr.state);}
}
delegate
delegate() ：委托函数，方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
为指定元素添加一个或多个事件处理程序，并规定事件发生时运行的函数
$(“div”).delagate(“button”,“click”,function(){
$(“p”).slideToggle();
})
trriger
trriger函数：激活函数，rigger() 方法触发被选元素的指定事件类型
$(document).ready(function(){
$(“input”).select(function(){
$(“input”).after(“文本被选中！”);
});
$(“button”).click(function(){
$(“input”).trigger(“select”);
});
1万+
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
