一、 DOM
web API 是浏览器 提供的一套操作 浏览器功能（BOM）和 页面元素（DOM）的 API。
DOM：处理 HTML 的标准 编程接口
1. 获取元素
通过 document 查找元素，是查找整个页面所有的元素；
通过 标签元素查找，是查找的该标签元素下的 子元素；
id 获取 元素 （ getElementById() ）
获取的元素的返回值是一个对象；
console.dir(元素对象) ：可以查看元素的 属性 和方法；
如果没有找到元素，则返回 null；
123456<div id="time"></div><script type="text/javascript"> var el = document.getElementById('time') console.log(el)</script>
标签名 获取元素 （ getElementsByTagName() ）
getElementsByTagName() : 返回一个 ...
DOM 案例1. 显示当前时间
代码示例
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> < ...
一、注册事件的方式1. 传统方式利用 on 开头的事件，如： onclick
特点：唯一性
同一个元素同一个事件只能注册一个处理函数
2. 方法监听 方式（addEventListener())
addEventListener() ie9 以上支持，ie9 以下可以用 attachEvent() 来代替
特点：
同一个元素同一事件可以注册多个监听处理函数
语法：
1eventTarget.addEventListener(type, listener[, useCapture])
eventTarget.addEventListener() 方法将指定的监听函数注册到 eventTarget（目标对象）上，当该对象触发指定事件时，就会执行事件处理函数。
type ： 事件类型 字符串，比如 click、mouseover，注意这里不要带 on
listener ： 事件处理函数，事件发出时，会调用该监听函数
useCapture ： 可选参数，是一个布尔值，默认为 false（冒泡阶段），为 true（捕获阶段）
1234567891011121314<div c ...
一、窗口加载事件123window.onload = function () {};或;window.addEventListener("load", function () {});
1. window.onloadwindow.onload : 窗口（页面）加载事件，当页面完成加载后直接触发事件，就调用的处理函数
有了 window.onload，就可以把 JS 代码放到页面元素的任何地方，因为 onload 是页面加载完成后才调用的函数
页面有多个 window.onload 时，以最后一个为准
12345678910111213141516<script> // onload 可以使 函数在 页面加载完成后再执行，所以可以使JS 代码放到页面的任何位置 window.onload = function () { var but = document.querySelector('button'); but.addEventListe ...
一、 网页偏移量 offset 系列
offset ： 网页偏移量，动态获取 该元素的 位置及大小等
注意：
获取元素距离带有定位父元素的位置
获取元素自身的大小（宽度和高度）
返回 的数值没有单位
常用属性：
属性
作用
element.offsetParent
返回作为该元素的带有定位的父级元素，如果父级都没有定位，则返回 body
element.offsetTop
返回元素 相对带有定位的，父元素上方的偏移
element.offsetLeft
返回元素 相对带有定位的，父元素左边框的偏移
element.offsetWidth
返回自身包括 padding 、 边框 、 内容区的宽度（不带单位）
element.offsetHeight
返回自身包括 padding 、 边框 、 内容区的高度（不带单位）
123456789101112131415161718192021<div class="father"> <div class="son"></di ...
一、动画1. 动画的原理
获得盒子当前位置
让盒子在当前位置加上 1 个移动距离
利用定时器不断重复这个操作
加一个结束定时器的条件
意此元素需要添加定位， 才能使用 element.style.left
12345678var div = document.querySelector("div");var timer = setInterval(function () { if (div.offsetLeft >= 400) { // 停止动画 本质是停止定时器 clearInterval(timer); } div.style.left = div.offsetLeft + 1 + "px";}, 30);
2. 动画函数的封装12345678910111213141516 function animate(obj, target) { var timer = setInterval(function() { if (obj.offsetLeft ...
–、 安装 Vue1. 本地引用安装 — Vue.js (vuejs.org)
1<script src="../lib/vue.js"></script>
2. 外部引用1<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
二、 模板语法1. 插值语法
功能：用于解析标签体内容。
语法：
123456// xxx是js表达式，{ { xxx; }}
可以直接读取到 data 中的所有属性。
1. 文本12345678910<div id="app">{{ message }}</div><script> var app = new Vue({ el: "#app", data: { message: " ...
一、 组件1. 非单文件组件Vue 使用组件的三大步骤：
创建组件使用 Vue.extend(options) 创建组件注意：
el 不好写
data 必须写成函数
123456789101112131415//第一步：创建student组件const student = Vue.extend({ template: ` <div> <h2>学生姓名：{{studentName}}</h2> <h2>学生年龄：{{age}}</h2> </div> `, data() { return { studentName: "张三", age: 18, }; },});
注册组件
局部注册：靠 new Vue 的时候传入 components 选项
全局注册：靠 Vue.c ...
一、web 开发1. web 开发框架
底层逻辑 —- 请求与响应
协议 —- 信息交换的标准
传统 MVC 和 Django MTV 的区别
Django 路由示意图
二、 环境搭建Python 环境需要 < Badge text=”v3.6 +” /> 以上版本Django 需要 < Badge text=”v3.1 +” /> 以上版本
1. 创建 虚拟环境12python -m venv 环境名称python -m venv venv
2. 激活虚拟环境1venv\Scripts\activate.bat
3. 安装库1pip install django
4. 创建 Django 项目1234python -m django startproject 项目名称django-admin startproject 项目名称python -m django startproject loginwebsite
5. 创建 APP123456cd loginwebsitedjango-admin startapp 应用名python manage.py sta ...
一、 多级路由转发
1. Django 的路由分发1234567from django.urls import path, includefrom app import urlsurlpatterns = [ # 以 app 开头的路径，全部交给 app 处理 path('1级路由', include(urls))]
二、 数据库模型 —- ORMObject Relational Mapping 对象关系映射
ORM 的优势 ： 利用编程语言方便操作数据库，无需掌握复杂的 sql 语句
1. ORM 用法
数据模型定义在 APP 目录下的 models.py 中
模型类继承 Django 的 models.Model 模型基本类
类名对应表名称，实际是小写应用名_小写模型类名
类成员对应数据的字段类型
2. 数据库常用字段类型Django 字段参考
常用字段CharField ： 字符串类型， 必须接收一个 max_length 参数， 表示字符串最大长度
BooleanField ： 布尔值类型， 默认为 None
DateTimeField ： 日 ...
