前端基础

目录

面向对象与面向过程的本质的区别

HTML超文本标记语言

CSS

兼容性

引入方式：

Javascript

数据类型

事件

正则表达式

 

this指针

ES6

框架

---

面向对象与面向过程的本质的区别

https://blog.csdn.net/jerry11112/article/details/79027834

HTML超文本标记语言

网站后缀 html\shtml\htm

块级标签：

         div、h1,p,ul,li,ol,hr,table,tr

行内元素：

         A,i,em,b,strong,span（单独更改一部分格式时使用）,

行内块元素：

         Img,input,button,td,select

 

CSS

兼容性

引入方式：

         第一种-在标签里写样式。

         <p style=’color:red;font-size:20px;’></p>

第二种

         另嵌样式

         写在head标签里面加入

         <style>

         选择器{属性：属性值；属性：属性值}

         </style>

第三种：外部引入样式

         <link rel=’stylesheet’ href=’css文件路径/文件名’>

 

元素选择器     1

Class选择器    10

Id选择器         100

行内                   1000

!important       强调，权重为最高

 

Javascript

数据类型

类型                                     数据值

Undefined                           undefined                   声明变量，但是没有赋值

Null                                       null                               对象的指针为空

Boolean                               true、false                用于作比较判断，结果为true的时候执行；false不执行。

Number                               number                    数字

String                                    “”                            字符串

Object                                  object                          对象

null、undefined、'' 判断true false

 

事件

onClick                        点击事件                事件名-click                 点击触发（必须在元素内抬起）

onfocus                       获取焦点事件         事件名-focus                获取焦点触发

onblur                         失去焦点事件         事件名-blur                    失去焦点触发

onmouseover            鼠标划过事件           事件名-mouseover        鼠标划过触发

onmouseout              鼠标划出事件           事件名mouseout            鼠标划出触发

ondblclick                   双击事件                  事件名 dblclick               双击触发

onmousedown          按下事件                   事件名 mousedown         按下触发事件

onmouseup                鼠标放开事件           事件名 mouseup             抬起事件（必须在元素内抬起）

onmousemove          鼠标移动事件             事件名 mousemove        鼠标在元素内部移动时触发

onmouseleave           鼠标离开事件            事件名 mouseleave        鼠标离开父元素才触发，离开子元素不触发

window事件

window.onload         加载完成

window.onscroll       滚轮滚动

window.onresize      页面缩放事件           浏览器页面缩放的时候触发

window.onunload     卸载事假                   当页面完全卸载时触发

 

正则表达式

主要使用匹配方法

Reg.test(str)              正则表达.test(字符串)            匹配         返回值为boolean值

Reg.exec(str)             返回值为搜索的值，否则为null

其他方法

Str.match(reg)                                      检索，如果有则返回reg的字符串，否则返回null

Str.search(reg)                                      检索，如果有则返回下标，否则返回-1      可以判断字符串

Str.replace(reg,””)                               替换，reg加g的时候将全部替换，否则只替换一个

Str.split(reg)                                           分割，将reg替换成逗号，并将字符串变为数组

 

this指针

构造函数

在构造函数中，this指向的是实例

全局函数

在html element方法中this指向的是该element，具体element信息可以在控制台中查看

深入理解JS—作用域和执行上下文

https://blog.csdn.net/cecilia620/article/details/71173190

JS 中构造函数和普通函数的区别

https://blog.csdn.net/weixin_41796631/article/details/82939585

最详尽的 JS 原型与原型链终极详解（高阶）

https://blog.csdn.net/u010298576/article/details/86165783

https://blog.csdn.net/u010298576/article/details/86165783

图解

https://blog.csdn.net/cc18868876837/article/details/81211729

 

ES6

http://jsrun.pro/tutorial/FZKKp

例如：

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6]();


var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6]();

 

跨域问题

https://www.jianshu.com/p/827b041be446

本地开发Vue项目 用axios请求本地服务器数据，解决跨域问题

https://blog.csdn.net/freedom7426/article/details/81000003

 

框架

mvc及mvvm

https://www.jianshu.com/p/220729f01a25