JavaScript 面向对象编程
面向对象编程介绍 面向过程编程 面向过程，就是按照我们分析好了的步骤，按照步骤解决问题 面向过程编程（Procedure Oriented Programming, POP）就是分析出解决问题所需的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。 面向对象编程 面向对象，就是以对象功能来划分问题，而不是步骤 面向对象编程（Object Oriented Programming, OOP）是把事务分解成一个个对象，然后由对象之间分工与合作。 面向过程与面向对象的对比 面向过程 优点：性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程 缺点：没有面向对象易维护、易复用、易扩展 面向对象 优点：易维护、衣服用、易扩展，由于面向对象有封装、继承、多态性等特点，可以设计出低耦合的系统，使系统更灵活，更好维护 缺点：性能比面向过程低 ES6 中的类和对象 对象是由属性和方法组成的： 属性：事物的特征，在对象中用属性来表示（常用名词） 方法：事物的行为，在对象中用方法来表示（常用动词） 类 class 在 ES6 中新 ...
jQuery 入门教程
jQuery 概述 JavaScript 库：即 library，是一个封装好的特定的集合。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画 animate、hide、show 和获取元素等。 简单理解：就是一个 JS 文件，里面对我们原生 js 代码进行了封装，存放到里面，这样我们可以快速高效的使用这些封装好的功能。比如 jQuery，就是为了快速方便的操作 DOM，里面基本都是函数（方法）。 常见的 JavaScript 库 jQuery Prototype YUI Dojo Ext JS 移动端的 zepto jQuery 的基本使用 jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互 官网地址：https://jquery.com/ 各个版本的下载：https://releases.jquery.com/ 入口函数 1234567$(function () { // 此处是页面 DOM 加载完成的入口});$(document).ready( ...
BOM 浏览器对象模型
BOM 概述 BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象 1. DOM 文档对象模型 DOM 就是把文档当做一个对象来看待 DOM 的顶级对象是 document DOM 主要学习的是操作页面元素 DOM 是 W3C 标准规范 2. BOM 浏览器对象模型 把浏览器当做一个对象来看待 BOM 的顶级对象是 window BOM 学习的是浏览器窗口交互的一些对象 BOM 是浏览器厂商在各自浏览器上定义的，兼容性较差 window 对象的常见事件 window.onload = function() {}; window.addEventListener("load", function() {}); window.onload 是窗口加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、css 文件等） 有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为是等页面内容全部加载完毕再去执行处理函数 window ...
自定义 Twikoo 邮件模板
本邮件模板适配 twikoo 需更改云函数 index.js 源码 twikoo 1.4.13 版本以上的用户无需更改源码啦 (感谢墨宝帮小弟改进了一下代码 #^.^#，部分邮箱可能显示不正常 (如: QQ 邮箱网页版得点击上方显示图片，谷歌邮箱网页版部分样式加载不了)，本人亲测 网易邮箱大师 客户端和移动端都能正常显示，各位酌情使用。 效果预览 原文地址 RZ.SBhttps://www.rz.sb/archives/1524/ 开始使用 更改邮件模板 直接把代码分别粘贴到上图对应位置即可，未压缩的源码在文末下载提供参考 MAIL_TEMPLATEMAIL_TEMPLATE_ADMIN1<head><style>*{margin:0;padding:0}img{-webkit-user-drag:none;border-radius:3px}ul,ol{margin-left:1rem! ...
DOM 文档对象模型
Web API 介绍 API 的概念 API（应用程序编程接口，Application Programming Interface）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，直接使用即可。 Web API 的概念 Web API 接口https://developer.mozilla.org/zh-CN/docs/Web/API Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。现阶段我们主要针对于浏览器讲解常用的 API , 主要针对浏览器做交互效果。比如我们想要浏览器弹出一个警示框， 直接使用 alert(‘弹出’)。 DOM 介绍 什么是 DOM 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（html 或者 xhtml）的标准编程接口。W3C 定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。 DOM 是 W3C 组织制定的一套处理 ht ...
JavaScript 基础语法 2
作用域 全局作用域 作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。 局部作用域 作用于函数内的代码环境，就是局部作用域。 因为跟函数有关系，所以也称为函数作用域。 JS 没有块级作用域 块作用域由 { } 包括。在其他编程语言中（如 java、c#等），在 if 语句、循环语句中创建的变量，仅仅只能在本 if 语句、本循环语句中使用，如下面的 Java 代码。 java 有块级作用域： 12345if(true){int num = 123;system.out.print(num); // 123}system.out.print(num); // 报错 以上 java 代码会报错，是因为代码中 { } 即一块作用域，其中声明的变量 num，在 “{ }” 之外不能使用； 而与之类似的 JavaScript 代码，则不会报错： Js 中没有块级作用域（在 ES6 之前） 12345if (true) { var num = 123; console.log(num); //123}consol ...
JavaScript 基础语法 1
引入方式 JS 有三种书写位置，分别为行内式、内嵌式和外链式 行内式 1<input type="button" value="点我试试" onclick="alert('Hello World')" /> 可以将单行或少量 JS 代码写在 HTML 标签的事件属性中（以 on 开头的属性，如：onclick） 注意单双引号的使用：在 HTML 中我们推荐使用双引号，JS 中我们推荐使用单引号 可读性差，在 html 中编写 JS 大量代码时，不方便阅读 引号易错，引号多层嵌套匹配时，非常容易弄混 特殊情况下才使用 内嵌式 123<script> alert('Hello World');</script> 可以将多行 JS 代码写到 <script> 标签的事件属性中 内嵌式 JS 是学习时常用的方式 外链式 1<script src="my.js"></script> 利用 H ...
移动 Web 开发
字体图标 目标：使用字体图标技巧实现网页中简介的图标效果 使用字体图标-Unicode 编码： 引入样式表：iconfont.css 复制粘贴图标对应的 Unicode 编码 设置文字字体 12345span { font-family: 'iconfont';}<span></span> 使用字体图标-类名： 引入字体图标样式表 调用图标对应的类名，必须调用两个类名 123<link rel="stylesheet" href="iconfont.css" /><span class="iconfont icon-auto"></span> 上传矢量图： 如果图标库没有项目所需的图标，则可与设计师沟通，得到 SVG 矢量图，上传 SVG 图标，然后去除颜色提交，即可下载使用 平面转换 目标：使用transform属性实现元素的位移、旋转、缩放等效果 位移 目标：使用translate实现 ...
HTML5 和 CSS3 提高
HTML5 的新特性 HTML5 新增的语义化标签 <header>：头部标签 <nav>：导航标签 <article>：内容标签 <section>：定义文档某个区域 <aside>：侧边栏标签 <footer>：尾部标签 注意： 这种语义化标签主要是针对搜索引擎的（对盲人也有用） 这些新标签页面中可以使用多次 在 IE9 中，需要把这些元素转换为块级元素 其实，我们移动端更喜欢使用这些标签 除此之外还有很多其他标签，但均有兼容性问题 HTML5 新增的多媒体标签 新增的多媒体标签主要包含两个： 音频：<audio> 视频：<video> 使用它们可以很方便的在页面中嵌入音频和视频而不再去使用 flash 和其他浏览器插件 视频 <video> 当前 <video> 元素支持三种视频格式：MP4、WebM、Ogg，尽量使用 MP4 格式 语法： 1234567<video src="文件地址" controls=" ...
CSS 基础教程 2
盒子模型 页面布局要学习三大核心，盒子模型、浮动和定位 看透网页布局的本质 网页布局的过程： 先准备好相关的网页元素，网页元素基本都是盒子 Box 利用 CSS 设置好盒子样式，然后摆放到相应位置 往盒子里面装内容 利用 CSS 摆盒子 盒子模型组成 盒子模型就是把 HTML 页面中的布局元素看作是一个矩形的盒子（容器） CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距和实际内容 边框 border可以设置元素的边框，边框有三部分组成：边框宽度、边框样式、边框颜色 语法格式如下： 12345border: border-width | border-style | border-color;border: 1px solid pink; /* 没有顺序 */border-top: 1px solid pink; /* 只设定上边框，其余同理 */ 属性 作用 border-width 定义边框粗细，单位是 px border-style 边框的样式 border-color 边框颜色 边框样式border- ...
