10 2020 档案

创建web服务器
摘要：//引用系统模块const http = require('http') ;//创建web服务器对象const app = http.createServer () ; //返回值是网站服务器对象//当客户端发送请求的时候app.on('request', (req, res) => { // ap 阅读全文
posted @ 2020-10-23 23:20 清出于兰 阅读(147) 评论(0) 推荐(0)
闭包
摘要：1. 变量的作用域复习 变量根据作用域的不同分为两种：全局变量和局部变量。 函数内部可以使用全局变量。 函数外部不可以使用局部变量。 当函数执行完毕，本作用域内的局部变量会销毁。 2. 什么是闭包 闭包（closure）指有权访问另一个函数作用域中变量的函数。简单理解就是 ，一个作用域可以访问另外一 阅读全文
posted @ 2020-10-23 23:19 清出于兰 阅读(105) 评论(0) 推荐(0)
Node.js异步编程
摘要：1. 同步API,异步API //路径拼接const public = path.join(_ dirname, 'public') ; //通过返回值拿到//请求地址解析const url0bj = url. parse (req. ur1) ; //通过返回值拿到//读取文件fs. readFi 阅读全文
posted @ 2020-10-23 23:18 清出于兰 阅读(145) 评论(0) 推荐(0)
HTTP请求与响应处理
摘要：1. 请求参数 客户端向服务器端发送请求时，有时需要携带一些客户信息, 客户信息需要通过请求参数的形式传递到服务器端，比如登录操作。 2. GET请求参数 参数被放置在浏览器地址栏中，例如: http://localhost:3000/?name=zhangsan&lage=20 const htt 阅读全文
posted @ 2020-10-23 23:17 清出于兰 阅读(497) 评论(0) 推荐(0)
HTTP协议
摘要：1. HTTP协议的概念 超文本传输协议(英文: HyperText Transfer Protocol,缩写: HTTP)规定了如何从网站服务器传输超文本到本地浏览器,它基于客户端服务器架构工作，是客户端(用户)和服务器端(网站)请求和应答的标准。 2. 报文 在HTTP请求和响应的过程中传递的数 阅读全文
posted @ 2020-10-23 23:14 清出于兰 阅读(118) 评论(0) 推荐(0)
请求响应原理及HTTP协议--服务器端基础概念
摘要：1.服务器端基础概念 1.1网站的组成 网站应用程序主要分为两大部分:客户端和服务器端。 客户端:在浏览器中运行的部分,就是用户看到并与之交互的界面程序。使用HTML、CSS、 JavaScript构建。 服务器端:在服务器中运行的部分,负责存储数据和处理应用逻辑。 1.2 Node网站服务器 能够 阅读全文
posted @ 2020-10-23 23:12 清出于兰 阅读(233) 评论(0) 推荐(0)
package.json文件的作用
摘要：1. node_modules文件夹的问题 文件夹以及文件过多过碎，当我们将项目整体拷贝给别人的时候，传输速度会很慢很慢. 复杂的模块依赖关系需要被记录，确保模块的版本和当前保持一致， 否则会导致当前项目运行报错 2. package.json文件的作用 项目描述文件，记录了当前项目信息,例如项目名 阅读全文
posted @ 2020-10-22 09:09 清出于兰 阅读(5081) 评论(0) 推荐(0)
Node.js中模块加载机制
摘要：1. 模块查找规则-当模块拥有路径但没有后缀时 require(' ./find.js') ; require(' ./find') ; require方法根据模块路径查找模块,如果是完整路径。直接引入模块。 如果模块后缀省略，先找同名JS文件再找同名JS文件夹 如果找到了同名文件夹,找文件夹中的i 阅读全文
posted @ 2020-10-22 09:07 清出于兰 阅读(217) 评论(0) 推荐(0)
第三方模块
摘要：1. 什么是第三方模块 写好的、具有特定功能的、我们能直接使用的模块即第三方模块，由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹中，所以又名包。 第三方模块有两种存在形式: 以js文件的形式存在，提供实现项目具体功能的API接口。 以命令行工具形式存在，辅助项目开发 2. 获取第三方模块 阅读全文
posted @ 2020-10-22 09:06 清出于兰 阅读(297) 评论(0) 推荐(0)
系统模块
摘要：1.什么是系统模块 Node运行环境提供的API.因为这些API都是以模块化的方式进行开发的，所以我们又称Node运行环境提供的API为系统模块 2.系统模块fs文件操作 f: file文件，s: system系统，文件操作系统。 const fs = require ('fs') ; 读取文件内容 阅读全文
posted @ 2020-10-22 09:00 清出于兰 阅读(378) 评论(0) 推荐(0)
Node.js模块化开发
摘要：1. JavaScript开发弊端 JavaScript在使用时存在两大问题，文件依赖和命名冲突。 2.生活中的模块化开发 3.软件中的模块化开发 一个功能就是一个模块， 多个模块可以组成完整应用,抽离一个模块不会影响其他功能的运行。 4.Node.js中模块化开发规范 Node.js规定一 个Ja 阅读全文
posted @ 2020-10-22 08:58 清出于兰 阅读(307) 评论(0) 推荐(0)
Node.js快速入门
摘要：1. Node.js 的组成 JavaScript 由三部分组成，ECMAScript, DOM，BOM。 Node.js是由ECMAScript及Node 环境提供的一些附加API组成的，包括文件、网络、路径等等一 些更加强大的API。 2. Node.js基础语法 所有ECMAScript语法在 阅读全文
posted @ 2020-10-21 09:31 清出于兰 阅读(128) 评论(0) 推荐(0)
Node.js基础
摘要：1.Node开发概述 1.1为什么要学习服务器端开发基础 能够和后端程序员更加紧密的配合 网站业务逻辑前置,学习前端技术需要后端技术支撑(Ajax) 扩宽知识视野,能够站在更高的角度审视整个项目 1.2服务器端开发要做的事情 实现网站的业务逻辑 数据的增删改查 1.3为什么选择Node 使用Java 阅读全文
posted @ 2020-10-21 09:28 清出于兰 阅读(99) 评论(0) 推荐(0)
Set 数据结构
摘要：Set 数据结构（★★） ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。 Set本身是一个构造函数，用来生成 Set 数据结构 const s = new Set(); Set函数可以接受一个数组作为参数，用来初始化。 const set = new Set 阅读全文
posted @ 2020-10-20 09:02 清出于兰 阅读(210) 评论(0) 推荐(0)
String 的扩展方法
摘要：模板字符串（★★★） ES6新增的创建字符串的方式，使用反引号定义 let name = `zhangsan`;​ 模板字符串中可以解析变量 let name = '张三'; let sayHello = `hello,my name is ${name}`; // hello, my name i 阅读全文
posted @ 2020-10-20 09:01 清出于兰 阅读(129) 评论(0) 推荐(0)
ES6 的内置对象扩展
摘要：Array 的扩展方法（★★） 扩展运算符（展开语法） 扩展运算符可以将数组或者对象转为用逗号分隔的参数序列 let ary = [1, 2, 3]; ...ary // 1, 2, 3 console.log(...ary); // 1 2 3,相当于下面的代码 console.log(1,2,3 阅读全文
posted @ 2020-10-20 08:59 清出于兰 阅读(113) 评论(0) 推荐(0)
箭头函数
摘要：箭头函数（★★★） ES6中新增的定义函数的方式。 () => {} //()：代表是函数； =>：必须要的符号，指向哪一个代码块；{}：函数体const fn = () => {}//代表把一个函数赋值给fn 函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号 function su 阅读全文
posted @ 2020-10-20 08:58 清出于兰 阅读(384) 评论(0) 推荐(1)
解构赋值
摘要：解构赋值（★★★） ES6中允许从数组中提取值，按照对应位置，对变量赋值，对象也可以实现解构 数组解构 let [a, b, c] = [1, 2, 3]; console.log(a)//1 console.log(b)//2 console.log(c)//3//如果解构不成功，变量的值为und 阅读全文
posted @ 2020-10-20 08:56 清出于兰 阅读(157) 评论(0) 推荐(0)
let、const、var 的区别
摘要：let、const、var 的区别 使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象 使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升 使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值 阅读全文
posted @ 2020-10-19 23:14 清出于兰 阅读(100) 评论(0) 推荐(0)
ES6新增语法--const
摘要：const（★★★） 声明常量，常量就是值（内存地址）不能变化的量 具有块级作用域 if (true) { const a = 10; }console.log(a) // a is not defined 声明常量时必须赋值 const PI; // Missing initializer in 阅读全文
posted @ 2020-10-19 23:12 清出于兰 阅读(236) 评论(0) 推荐(0)
ES6新增语法--let
摘要：什么是ES6 ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。 为什么使用 ES6 ? 每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。 变量提升特性增加了程序运行时的不可预测性 语法过 阅读全文
posted @ 2020-10-19 23:11 清出于兰 阅读(269) 评论(0) 推荐(0)
正则表达式中的特殊字符
摘要：1. 正则表达式的组成 一个正则表达式可以由简单的字符构成，比如 /abc/，也可以是简单和特殊字符的组合，比如 /ab*c/ 。其中特殊字符也被称为元字符，在正则表达式中是具有特殊意义的专用符号，如 ^ 、$ 、+ 等。 特殊字符非常多，可以参考： MDN jQuery 手册：正则表达式部分 2. 阅读全文
posted @ 2020-10-19 23:05 清出于兰 阅读(21115) 评论(0) 推荐(1)
正则表达式在js中的使用
摘要：1. 正则表达式的创建 在 JavaScript 中，可以通过两种方式创建一个正则表达式。 方式一：通过调用RegExp对象的构造函数创建 var regexp = new RegExp(/123/);console.log(regexp); 方式二：利用字面量创建 正则表达式 var rg = / 阅读全文
posted @ 2020-10-19 23:01 清出于兰 阅读(846) 评论(0) 推荐(0)
正则表达式概述
摘要：1.什么是正则表达式 正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。 正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中文 阅读全文
posted @ 2020-10-19 22:58 清出于兰 阅读(113) 评论(0) 推荐(0)
递归
摘要：1. 什么是递归 递归：如果一个函数在内部可以调用其本身，那么这个函数就是递归函数。简单理解:函数内部自己调用自己, 这个函数就是递归函数 注意：递归函数的作用和循环效果一样，由于递归很容易发生“栈溢出”错误（stack overflow），所以必须要加退出条件return。 2. 利用递归求1~n 阅读全文
posted @ 2020-10-18 23:20 清出于兰 阅读(77) 评论(0) 推荐(0)
严格模式
摘要：1. 什么是严格模式 JavaScript 除了提供正常模式外，还提供了严格模式（strict mode）。ES5 的严格模式是采用具有限制性 JavaScript变体的一种方式，即在严格的条件下运行 JS 代码。 严格模式在 IE10 以上版本的浏览器中才会被支持，旧版本浏览器中会被忽略。 严格模 阅读全文
posted @ 2020-10-18 23:14 清出于兰 阅读(277) 评论(0) 推荐(0)
函数内部的this指向
摘要：2.this 2.1函数内部的this指向 这些 this 的指向，是当我们调用函数的时候确定的。调用方式的不同决定了this 的指向不同 一般指向我们的调用者. 2.2改变函数内部 this 指向 2.2.1 call方法 call()方法调用一个对象。简单理解为调用函数的方式，但是它可以改变函数 阅读全文
posted @ 2020-10-18 23:13 清出于兰 阅读(529) 评论(0) 推荐(0)
函数的定义和调用
摘要：1.函数的定义方式 方式1 函数声明方式 function 关键字 (命名函数) function fn(){} 方式2 函数表达式(匿名函数) var fn = function(){} 方式3 new Function() var f = new Function('a', 'b', 'cons 阅读全文
posted @ 2020-10-18 23:11 清出于兰 阅读(294) 评论(0) 推荐(0)
ES5新增方法
摘要：1.数组方法 迭代(遍历)方法: forEach0、map0、filter(、 some0、 every0 ; array. some (funct ion (currentValue, index, arr) ) ●some0 方法用于检测数组中的元素是否满足指定条件.通俗点查找数组中是否有满足条 阅读全文
posted @ 2020-10-18 20:46 清出于兰 阅读(111) 评论(0) 推荐(0)
继承
摘要：1.call() call()可以调用函数 call()可以修改this的指向,使用call()的时候 参数一是修改后的this指向,参数2,参数3..使用逗号隔开连接 function fn(x, y) { console.log(this); console.log(x + y);} var o 阅读全文
posted @ 2020-10-18 20:43 清出于兰 阅读(81) 评论(0) 推荐(0)
构造函数和原型
摘要：1.1对象的三种创建方式- 字面量方式 var obj = {}; new关键字 var obj = new Object(); 构造函数方式 function Person(name,age){ this.name = name; this.age = age;}var obj = new Per 阅读全文
posted @ 2020-10-18 20:34 清出于兰 阅读(181) 评论(0) 推荐(0)
面向对象版tab 栏切换
摘要：1.功能需求 点击 tab栏,可以切换效果. 点击 + 号, 可以添加 tab 项和内容项. 点击 x 号, 可以删除当前的tab项和内容项. 双击tab项文字或者内容项文字可以修改里面的文字内容 2.案例准备 获取到标题元素 获取到内容元素 获取到删除的小按钮 x号 新建js文件,定义类,添加需要 阅读全文
posted @ 2020-10-16 08:55 清出于兰 阅读(271) 评论(0) 推荐(0)
对象与类
摘要：1.对象 对象是由属性和方法组成的：是一个无序键值对的集合,指的是一个具体的事物 属性：事物的特征，在对象中用属性来表示（常用名词） 方法：事物的行为，在对象中用方法来表示（常用动词） 1.1创建对象 //以下代码是对对象的复习//字面量创建对象var ldh = { name: '刘德华', ag 阅读全文
posted @ 2020-10-16 08:53 清出于兰 阅读(125) 评论(0) 推荐(0)
面向过程与面向对象
摘要：1、面向过程 面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。 2、面向对象 面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。 3、面向过程与面向对象对比 面向过程面向对象 优点 性能比面向对象高，适合跟硬件联系很紧密的 阅读全文
posted @ 2020-10-16 08:49 清出于兰 阅读(112) 评论(0) 推荐(0)
引入CSS样式表（书写位置）
摘要：内部样式表 内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下： <head><style type="text/CSS"> 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</style></head> 语法中，styl 阅读全文
posted @ 2020-10-15 11:16 清出于兰 阅读(411) 评论(0) 推荐(0)
CSS外观属性
摘要：lor属性用于定义文本的颜色，其取值方式有如下3种： 1.预定义的颜色值，如red，green，blue等。 2.十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。 3.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%, 阅读全文
posted @ 2020-10-15 10:19 清出于兰 阅读(181) 评论(0) 推荐(0)
标签显示模式（display）
摘要：HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。具体如下： 块级元素(block-level) 每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。 常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<o 阅读全文
posted @ 2020-10-15 08:33 清出于兰 阅读(617) 评论(0) 推荐(1)
CSS 背景(background)
摘要：CSS 背景(background) CSS 可以添加背景颜色和背景图片，以及来进行图片设置。 background-color背景颜色 background-image 背景图片地址 background-repeat 是否平铺 background-position 背景位置 backgroun 阅读全文
posted @ 2020-10-15 08:27 清出于兰 阅读(348) 评论(0) 推荐(0)
CSS 三大特性
摘要：CSS层叠性 所谓层叠性是指多种CSS样式的叠加。 是浏览器处理冲突的一个能力,如果一个属性通过两个相同权重选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉 比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲 阅读全文
posted @ 2020-10-14 22:53 清出于兰 阅读(174) 评论(0) 推荐(0)
盒子模型（CSS重点）
摘要：其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成 阅读全文
posted @ 2020-10-14 20:32 清出于兰 阅读(310) 评论(0) 推荐(0)
版心和布局流程
摘要：阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。 “版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200 阅读全文
posted @ 2020-10-14 20:26 清出于兰 阅读(425) 评论(0) 推荐(0)
定位(position)
摘要：元素的定位属性 元素的定位属性主要包括定位模式和边偏移两部分。 1、边偏移 边偏移属性描述 top 顶端偏移量，定义元素相对于其父元素上边线的距离 bottom 底部偏移量，定义元素相对于其父元素下边线的距离 left 左侧偏移量，定义元素相对于其父元素左边线的距离 right 右侧偏移量，定义元素 阅读全文
posted @ 2020-10-14 20:25 清出于兰 阅读(436) 评论(0) 推荐(0)
清除浮动
摘要：浮动本质是用来做一些文字混排效果的，但是被我们拿来做布局用，则会有很多的问题出现， 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。 准确地说，并不是清除浮动，而是清除浮动后造成的影响 清除浮动本质 清除浮动主要为了解决父级元素因 阅读全文
posted @ 2020-10-14 10:30 清出于兰 阅读(179) 评论(0) 推荐(0)
CSS用户界面样式
摘要：CSS用户界面样式 所谓的界面样式， 就是更改一些用户操作样式， 比如 更改用户的鼠标样式， 表单轮廓以及 防止表单域拖拽等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。 鼠标样式cursor 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 cursor : d 阅读全文
posted @ 2020-10-14 09:44 清出于兰 阅读(229) 评论(0) 推荐(0)
元素的显示与隐藏
摘要：在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。 他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。 最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩躲猫猫！！ dis 阅读全文
posted @ 2020-10-14 09:41 清出于兰 阅读(126) 评论(0) 推荐(0)
css基础选择器
摘要：选择器（重点） 要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。 标签选择器（元素选择器） 标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下： 标签名 阅读全文
posted @ 2020-10-13 21:47 清出于兰 阅读(168) 评论(0) 推荐(0)
滑动门
摘要：滑动门出现的背景 为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门。 核心技术 核心技术就是利用CSS精灵（主要是背景位置）和盒子paddin 阅读全文
posted @ 2020-10-13 21:20 清出于兰 阅读(97) 评论(0) 推荐(0)
伸缩布局(CSS3)
摘要：CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。 主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的 方向：默认主轴从左向右，侧轴默认从上到下 主 阅读全文
posted @ 2020-10-13 16:02 清出于兰 阅读(113) 评论(0) 推荐(0)
CSS精灵技术（sprite）
摘要：精灵技术产生的背景 当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。 然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的 阅读全文
posted @ 2020-10-13 14:21 清出于兰 阅读(310) 评论(0) 推荐(0)
过渡(CSS3)
摘要：过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。 帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片 在CSS3里使用transition可以实现补间动画（ 阅读全文
posted @ 2020-10-13 13:53 清出于兰 阅读(152) 评论(0) 推荐(0)
字体图标
摘要：图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。 我们后面会学习移动端响应式，很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的技术出现了， 这 阅读全文
posted @ 2020-10-13 13:52 清出于兰 阅读(183) 评论(0) 推荐(0)
浮动(float)
摘要：普通流(normal flow) 这个单词很多人翻译为 文档流 ， 字面翻译 普通流 或者标准流都可以。 CSS的定位机制有3种：普通流（标准流）、浮动和定位。 html语言当中另外一个相当重要的概念 标准流！或者普通流。普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块 阅读全文
posted @ 2020-10-13 13:47 清出于兰 阅读(620) 评论(0) 推荐(0)
CSS复合选择器
摘要：复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。 交集选择器 交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。 记忆技巧： 交集选择器 是 并且的意思。 即.. 阅读全文
posted @ 2020-10-13 13:44 清出于兰 阅读(445) 评论(0) 推荐(0)
CSS样式规则及字体样式
摘要：CSS CSS(Cascading Style Sheets) CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。 CSS以HTML为基础，提供了丰富的功能，如字体、 阅读全文
posted @ 2020-10-13 13:40 清出于兰 阅读(936) 评论(0) 推荐(0)
表单
摘要：表单的目的是为了跟用户进行交互，收集用户资料 在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。 表单控件： 包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。 提示信息： 一个表单中通常还需要包含一些说明性的文字，提示用户 阅读全文
posted @ 2020-10-13 13:39 清出于兰 阅读(1044) 评论(0) 推荐(0)
表格标签的使用
摘要：在HTML网页中，要想创建表格，就需要使用表格相关的标签。 表格包含三对HTML标签，分别为 <table></table>、<tr></tr>、<td></td>，他们是创建表格的基本标签，缺一不可 1.table用于定义一个表格。 2.tr 用于定义表格中的一行，必须嵌套在 table标签中，在 阅读全文
posted @ 2020-10-13 13:38 清出于兰 阅读(475) 评论(0) 推荐(0)
HTML5标签2
摘要：表格 table(会使用) 表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。 创建表格 在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下： <table> <tr> <td>单元格内的文字</td> ... </tr> ...</tab 阅读全文
posted @ 2020-10-13 13:37 清出于兰 阅读(167) 评论(0) 推荐(0)
HTML标签
摘要：HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。 HTML骨架格式 <HTML><head><title></title></head><body></body></HTML> 1 阅读全文
posted @ 2020-10-13 13:35 清出于兰 阅读(349) 评论(0) 推荐(0)
外边距
摘要：外边距可让块级盒子水平居中，但需满足两个条件： 1、盒子必须指定宽度（width） 2、盒子左右外边距都设置为auto。 需注意： 1、使用margin定义块元素的垂直外边距时，可能会出现外边距合并 2、嵌套块元素设置垂直外边距时父元素会跟子元素一起塌陷，即父元素外边距会取最大值。 解决方案：1、为 阅读全文
posted @ 2020-10-13 13:33 清出于兰 阅读(217) 评论(0) 推荐(0)
h5css产品模块设计
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>产品模块</tit 阅读全文
posted @ 2020-10-13 13:32 清出于兰 阅读(223) 评论(0) 推荐(0)
mouseenter 和mouseover的区别
摘要：mouseenter 和mouseover的区别 当鼠标移动到元素上时就会触发mouseenter 事件 类似 mouseover，它们两者之间的差别是 mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发 之所以这样，就是因为mouseente 阅读全文
posted @ 2020-10-13 11:17 清出于兰 阅读(138) 评论(0) 推荐(0)
动画函数封装
摘要：动画函数封装 1. 动画实现原理 核心原理：通过定时器 setInterval() 不断移动盒子位置。 实现步骤： 获得盒子当前位置 让盒子在当前位置加上1个移动距离 利用定时器不断重复这个操作 加一个结束定时器的条件 注意此元素需要添加定位，才能使用element.style.left 2. 动画 阅读全文
posted @ 2020-10-13 11:16 清出于兰 阅读(90) 评论(0) 推荐(0)
jQuery 插件
摘要：1. jQuery 插件 jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。 这些插件也是依赖于jQuery来完成的，所以必须要先引入 jQuery文件，因此也称为 jQuery 插件。 jQuery 插件常用的网站： jQuery 插件库 http://www. 阅读全文
posted @ 2020-10-11 23:27 清出于兰 阅读(121) 评论(0) 推荐(0)
jQuery （事件、拷贝）对象
摘要：1. jQuery 事件对象 jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生。 语法 element. on (events, [selector], function(event) {}) 阻止默认行为: even 阅读全文
posted @ 2020-10-11 23:25 清出于兰 阅读(753) 评论(0) 推荐(0)
jQuery 事件注册和事件处理
摘要：1. jQuery 事件注册 jQuery 为我们提供了方便的事件注册机制，是开发人员抑郁操作优缺点如下： 优点: 操作简单，且不用担心事件覆盖等问题。 缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。 语法 语法:element.事件(function(){})$ (" 阅读全文
posted @ 2020-10-11 23:22 清出于兰 阅读(222) 评论(0) 推荐(0)
jQuery 尺寸、位置操作
摘要：jQuery 尺寸、位置操作 jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API，方便易用，内容如下。 1. jQuery 尺寸操作 jQuery 尺寸操作包括元素宽高的获取和设置，且不一样的API对应不一样的盒子模型。 语法 代码演示 <body> <div></div> <s 阅读全文
posted @ 2020-10-09 23:41 清出于兰 阅读(320) 评论(0) 推荐(1)
jQuery 元素操作
摘要：jQuery 元素操作 jQuery 元素操作主要讲的是用jQuery方法，操作标签的遍历、创建、添加、删除等操作。 1. 遍历元素 jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。 语法1 注意：此方法用于遍历 jQuery 对象中的每一项，回 阅读全文
posted @ 2020-10-09 23:37 清出于兰 阅读(277) 评论(0) 推荐(0)
jQuery 文本属性值
摘要：1. jQuery 文本属性值 jQuery的文本属性值常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性。 1.1 jQuery内容文本值 常见操作有三种：html() / text() / val( 阅读全文
posted @ 2020-10-09 23:32 清出于兰 阅读(155) 评论(0) 推荐(0)
jQuery 属性操作
摘要：1. jQuery 属性操作 jQuery 常用属性操作有三种：prop() / attr() / data() ; 1.1 元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属性，比如 <a> 元素里面的 href ，比如 <input> 元素里面的 type。 语法 1.获取属性语 阅读全文
posted @ 2020-10-09 23:29 清出于兰 阅读(146) 评论(0) 推荐(0)
jQuery 效果
摘要：1. jQuery 效果 jQuery 给我们封装了很多动画效果，最为常见的如下： 显示隐藏：show() / hide() / toggle() ; 划入画出：slideDown() / slideUp() / slideToggle() ; 淡入淡出：fadeIn() / fadeOut() / 阅读全文
posted @ 2020-10-09 00:22 清出于兰 阅读(396) 评论(0) 推荐(1)
jQuery 选择器
摘要：1 jQuery 选择器 原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。 1.1. 基础选择器 $("选择器") // 里面选择器直接写 CSS 选择器即可，但是要加引号 1.2. 层级选择器 层级选择器最常用的两个分别为：后代选择 阅读全文
posted @ 2020-10-09 00:13 清出于兰 阅读(105) 评论(0) 推荐(0)
jQuery 的基本使用
摘要：1. jQuery 的下载 jQuery的官网地址： https://jquery.com/，官网即可下载最新版本。 各个版本的下载：https://code.jquery.com/ 版本介绍： 1x ：兼容 IE 678 等低版本浏览器， 官网不再更新 2x ：不兼容 IE 678 等低版本浏览器 阅读全文
posted @ 2020-10-09 00:08 清出于兰 阅读(78) 评论(0) 推荐(0)
初识--jQuery
摘要：1. jQuery 介绍 1.1 JavaScript 库 JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。 简单理解： 就 阅读全文
posted @ 2020-10-09 00:02 清出于兰 阅读(61) 评论(0) 推荐(0)
本地存储
摘要：1.本地存储 随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。 1.1.本地存储特性 1、数据存储在用户浏览器中 2、设置、读取方便、甚至页面刷新不丢失数据 3、容量较大，sessionS 阅读全文
posted @ 2020-10-07 23:23 清出于兰 阅读(153) 评论(0) 推荐(0)
移动端常用开发插件和框架
摘要：1. 移动端常用开发插件 1.1. 什么是插件 移动端要求的是快速开发，所以我们经常会借助于一些插件来帮我完成操作，那么什么是插件呢？ JS 插件是 js 文件，它遵循一定规范编写，方便程序展示效果，拥有特定功能且方便调用。如轮播图和瀑布流插件。 特点：它一般是为了解决某个问题而专门存在，其功能单一 阅读全文
posted @ 2020-10-07 23:19 清出于兰 阅读(675) 评论(0) 推荐(0)
click 延时解决方案
摘要：1.click 延时解决方案 移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放(double tap to zoom) 页面。 解决方案： 1. 禁用缩放。 浏览器禁用默认的双击缩放行为并且去掉300ms 的点击延迟。 <meta name="viewport" cont 阅读全文
posted @ 2020-10-07 23:18 清出于兰 阅读(428) 评论(0) 推荐(0)
触屏事件
摘要：1. 触屏事件概述 移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android和 IOS 都有。 touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。 阅读全文
posted @ 2020-10-06 23:17 清出于兰 阅读(139) 评论(0) 推荐(0)
常见网页特效案例
摘要：1. 案例：网页轮播图 轮播图也称为焦点图，是网页中比较常见的网页特效。 功能需求： 1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。 2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。 3.图片播放的同时，下面小圆圈模块跟随一起变化。 4.点击小圆圈，可以播放相应图片。 5. 阅读全文
posted @ 2020-10-06 23:15 清出于兰 阅读(548) 评论(0) 推荐(0)
动画函数封装
摘要：1. 缓动效果原理 缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来 思路： 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。 核心算法： (目标值 - 现在的位置) / 10 做为每次移动的距离步长 停止的条件是： 让当前盒子位置等于目标位置就停止定时器 注意步长值需要取整 2. 阅读全文
posted @ 2020-10-06 23:13 清出于兰 阅读(142) 评论(0) 推荐(0)
三大系列总结
摘要：1. 三大系列总结 他们主要用法： 1.offset系列 经常用于获得元素位置 offsetLeft offsetTop 2.client经常用于获取元素大小 clientWidth clientHeight 3.scroll 经常用于获取滚动距离 scrollTop scrollLeft 4.注意 阅读全文
posted @ 2020-10-05 23:42 清出于兰 阅读(181) 评论(0) 推荐(0)
元素滚动 scroll 系列
摘要：1. scroll 概述 scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。 2. 页面被卷去的头部 如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。 阅读全文
posted @ 2020-10-05 23:40 清出于兰 阅读(313) 评论(0) 推荐(0)
元素可视区 client 系列
摘要：1. client概述 client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。 2. 淘宝 flexible.js 源码分析 立即执行函数 (function(){})() 或 阅读全文
posted @ 2020-10-05 23:39 清出于兰 阅读(139) 评论(0) 推荐(0)
元素偏移量 offset 系列
摘要：1.1 offset 概述 offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小（宽度高度） 注意：返回的数值都不带单位 1.2 offset 与 style 区别 offset of 阅读全文
posted @ 2020-10-05 23:36 清出于兰 阅读(366) 评论(0) 推荐(0)
JS执行机制
摘要：1 . JS 是单线程 JavaScript语言的一大特点就是单线程，也就是说，同-个时间只能做一件事。 这是因为Javascript这门脚本语言诞生的使命所致一JavaScript 是为处理页面中用户的交互，以吸操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作,不能同时进行。应该先进 阅读全文
posted @ 2020-10-05 00:13 清出于兰 阅读(113) 评论(0) 推荐(0)
什么是BOM
摘要：1. 什么是BOM BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。 BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。 BOM 缺乏标准，JavaScript 语法的标准化组织是 EC 阅读全文
posted @ 2020-10-04 23:57 清出于兰 阅读(1072) 评论(0) 推荐(0)
常用的键盘事件
摘要：1 键盘事件 <script> // 常用的键盘事件 //1. keyup 按键弹起的时候触发 document.addEventListener('keyup', function() { console.log('我弹起了'); })​ //3. keypress 按键按下的时候触发 不能识别功 阅读全文
posted @ 2020-10-04 23:55 清出于兰 阅读(3138) 评论(0) 推荐(0)