前端技术

从 HTML/CSS 到 JavaScript/jQuery/AJAX，再到 Vue 响应式框架。

---

HTML & CSS

HTML 基础

常用标签：div, span, p, a, img, ul/ol/li, table, form 表单元素：input(text/password/radio/checkbox), select/option, textarea, button 语义化标签：header, nav, main, section, article, footer

CSS 基础

选择器：元素、类、ID、属性、后代、子代、伪类 盒模型：content + padding + border + margin 定位：static, relative, absolute, fixed, sticky 浮动与清除浮动 Flex 布局、Grid 布局

JavaScript

数据类型

基本类型：string, number, boolean, null, undefined, symbol, bigint 引用类型：object, array, function typeof / instanceof 类型判断 类型转换：Number(), String(), Boolean()

DOM 操作

获取元素：getElementById, querySelector, querySelectorAll 修改内容：innerHTML, textContent, innerText 修改属性：setAttribute, getAttribute 修改样式：element.style.xxx, element.classList.add/remove 事件绑定：addEventListener, onclick

BOM 操作

window：全局对象 location：URL 信息，href 跳转 navigator：浏览器信息 history：前进后退 localStorage / sessionStorage：本地存储

jQuery

核心用法

选择器：$("selector") — 与 CSS 选择器语法一致 DOM 操作：html(), text(), val(), attr(), prop(), css() 事件：click(), hover(), on("event", handler) 动画：show(), hide(), toggle(), fadeIn(), fadeOut(), slideDown(), slideUp()

AJAX

$.ajax({ url, type, data, success, error }) $.get(url, data, callback) $.post(url, data, callback) $.getJSON(url, data, callback) $.load(url, data, callback) — 加载远程 HTML 到元素中

AJAX 原理

XMLHttpRequest

1. 创建：new XMLHttpRequest()
2. 配置：xhr.open("GET", url, true)
3. 回调：xhr.onreadystatechange 检查 readyState === 4
4. 发送：xhr.send() readyState：0(未初始化) → 1(已打开) → 2(已发送) → 3(接收中) → 4(完成)

同源策略与跨域

同源：协议 + 域名 + 端口 三者相同 跨域解决方案：

• CORS：服务端设置 Access-Control-Allow-Origin
• JSONP：利用 script 标签不受同源限制
• 反向代理：Nginx 代理转发

Vue

Vue 核心概念

响应式数据：data() 返回的对象自动变为响应式 模板语法： 插值、v-bind、v-on、v-if、v-for、v-model 计算属性：computed（有缓存，依赖不变不会重算） 侦听器：watch（监听数据变化执行副作用）

组件化

组件注册：全局 Vue.component() / 局部 components Props：父 → 子 数据传递 $emit：子 → 父 事件传递 插槽 (slot)：父 → 子 内容分发

Vue Router

路由配置：path → component 映射 <router-link>：声明式导航 <router-view>：路由出口 路由守卫：beforeEach（全局前置守卫） 动态路由：/user/:id → $route.params.id

Axios

HTTP 请求库，替代原生 AJAX axios.get/post/put/delete 请求拦截器：统一添加 Token 响应拦截器：统一错误处理 配合 Vue 使用：this.$http 或 import axios