一、注册事件的方式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 ： 日 ...

一、表单1. 表单必填属性 action ： 提交的 URL method ： 请求方法， get 或者 post enctype ： 三种编码方式 application/x-www-form-urlencoded 键值对方式 multipart/form-data 二进制编码 text/plain 文本方式 2. 处理 request 判断请求方法 request.method 值是大写的 POST 、GET 、 PUT 、 DELETE 获取 post 表单数据 request.POST[key] 或者 request.POST.get() request.POST 返回的是一个字典 二、 Django 安全策略1. CSRF 防御机制settings.py 文件 CSRF : 跨站请求伪造，是一个常见的网络攻击手段。 Django 默认为开启了 防范 CSRF 攻击机制。 对于 GET 请求，一般来说没有这个问题，CSRF 通常是针对 POST 或 PUT 方法的。 2. 处理方式 将防御机制注释 1# 'django.middleware ...