qq_44753552-CSDN博客

原创学习AJAX(二）HTTP

HTTP简介HTTP(hypertext transport protocol)协议（超文本传输协议），协议详细规定了浏览器和万维网服务器之间相互通信的规则。请求报文行: GET/POST URL hTTP/1.1头: Host: atguigu.com Cookie:name=guigu Content-type: applicaton/x-www-form-urlendcoded User-Agent: chrome 83空行体 username=admin&amp

2020-10-12 17:05:07 204

原创学习AJAX(一）简介

简介AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。优缺点优点： 1.可以无需刷新页面而与服务端进行同行 2.允许你根据用户事件来更新部分页面内容缺点： 1.没有浏览历史，不能回退

2020-10-12 16:52:17 155

原创 H5学习笔记（九）--其他新增标签

目录1、状态标签2、列表标签3、注释标签4、标记标签5、疯狂的表单6、新增表单控件7、新增表单属性8、表单验证反馈9、关闭验证1、状态标签meter:用来显示已知范围的标量值或者分数值。 value:当前的数值。 min:值域的最小边界值。如果设置了，它必须比最大值要小。如果没设置，默认为0 max:值域的上限边界值。如果设置了，它必须比最小值要大。如果没设置，默认为1 low:定义了低值区间的上限值,如果设置了，它必须比最小值属性大，并且不能超过high值和最大值。未设置或者比最小值还要小时，

2020-09-16 20:49:26 205

原创 H5学习笔记（八）--音视频

目录1、html5音视频标签2、video标签的属性3、audio标签的属性4、音视频js相关属性5、音视频js相关函数6、js相关事件（addEventListener)1、html5音视频标签<video>:Html5提供的播放视频的标签 src:资源地址 controls:该属性定义是显示还是隐藏用户控制界面 <audio>:Html5提供的播放音频的标签 src:资源地址 controls:该属性定义是显示还是隐藏用户控制界面 <source>

2020-09-16 20:37:55 283

原创 H5学习笔记（七）--canvas总结

1.注意点 ---canvas图像的渲染有别于html图像的渲染， canvas的渲染极快，不会出现代码覆盖后延迟渲染的问题写canvas代码一定要具有同步思想 ---在获取上下文时，一定要先判断 ---画布高宽的问题画布默认高宽300*150 切记一定要使用html的attribute的形式来定义画布的宽高通过css形式定义会缩放画布内的图像 ---绘制矩形的问题 a.边框宽度的问题，边框宽度是在偏移量上下分别渲染一半，可能会出现小数边框，一旦出现小数边框

2020-09-14 20:45:25 99

原创 H5学习笔记（六）--canvas像素、合成和事件

目录像素操作在canvas中的像素操作操作单个像素（行与列）马赛克合成全局透明度的设置覆盖合成挂挂卡事件将画布导出为图像事件操作像素操作在canvas中的像素操作到目前为止，我们尚未深入了解Canvas画布真实像素的原理，事实上，你可以直接通过ImageData对象操纵像素数据，直接读取或将数据数组写入该对象中得到场景像素数据 getImageData():获得一个包含画布场景像素数据的ImageData对像,它代表了画布区域的对象数据 ctx.getImageData(sx, sy, s

2020-09-14 20:35:13 224

原创 H5学习笔记（五）--canvas图片、背景和绘制文本

目录使用图片设置背景绘制文本在canvas中绘制文本文本样式measureTextcanvas中文本水平垂直居中阴影(文本阴影&盒模型阴影)使用图片在canvas中插入图片(需要image对象) 1.canvas操作图片时，必须要等图片加载完才能操作 2.drawImage(image, x, y, width, height) 其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。这个方法多了2个参数：width 和 he

2020-09-14 20:14:44 862

原创 H5学习笔记（四）--canvas钟表实例

在画布上制作一个钟表，显示当前时间。代码：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } html, body { height: 100%; overflow: hidden;

2020-09-14 19:53:58 112

原创 H5学习笔记（三）--canvas绘制矩形、路径、曲线和变换

目录1、绘制矩形笔记：实例2、绘制路径笔记：实例3、绘制曲线canvas绘制圆形canvas绘制圆弧二次贝塞尔三次贝塞尔1、绘制矩形笔记：HTML中的元素canvas只支持一种原生的图形绘制：矩形。所有其他的图形的绘制都至少需要生成一条路径1.绘制矩形 canvas提供了三种方法绘制矩形： ---->绘制一个填充的矩形（填充色默认为黑色） fillRect(x, y, width, height) ---->绘制一个矩形的边框（默认边框为:一像素实心黑色）

2020-09-14 18:32:08 1178

原创 H5学习笔记（二）--canvas基本用法

1、canvas基本用法概述1.什么是canvas(画布) <canvas> 是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形例如，它可以用于绘制图形，创建动画。<canvas> 最早由Apple引入WebKit 我们可以使用<canvas>标签来定义一个canvas元素 ----->使用<canvas>标签时，建议要成对出现，不要使用闭合的形式。 ----->canvas元素默认具有高宽

2020-09-14 17:43:32 231

原创 H5学习笔记（一）--基础

目录1、HTML5概述2、DOCTYPE3、自定义属性4、可编辑5、语义化标签1、HTML5概述HTML5: HTML5是定义HTML标准的最新版本，该术语标识两个不同的概念：它是一个新版本的HTML语言，具有新的元素、属性和行为；它有更大的技术集，允许更多样化、强大的网站和应用程序。 HTML5 约等于 HTML + CSS + JSHTML5的优势：跨平台:唯一一个通吃PC MAC Iphone Android等主流平台的跨平台语言快速迭代降低成本导流入口多分发

2020-09-14 17:35:09 213

原创 bootstrap学习笔记

目录一、容器二、栅格源码分析三、响应式工具四、栅格盒模型设计的精妙之处一、容器流体容器 <div class="container-fluid"> test </div>固定容器 <div class="container"> test </div> 阈值 width 大于等于1200(lg 大屏pc) 1170（1140+槽宽）大于等于992(md 中屏pc) 970

2020-09-11 20:16:31 83

原创 Less学习笔记

目录变量嵌套混合计算继承避免编译变量 @ 变量的延迟加载变量是块级作用域嵌套 &:平级混合什么是混合？将一系列的规则集引入另一个规则集中（ctrl c+ctrl v）混合的定义在less规则有明确的指定，使用.的形式来定义普通混合（编译到原生css中的）不带输出的混合（加双括号）带参数的混合带默认值的混合匹配模式 arguments计算加减乘除计算的一方带单位就可以继承 #test{ &:extend(.fat

2020-09-10 16:20:19 75

原创 javascript学习笔记（十三） --原型和原型链（二）

目录一、原型二、显式原型和隐式原型三、原型链四、原型链的属性问题一、原型1.函数的prototype属性每个函数都有一个prototype,它默认指向一个Object空对象（原型对象）原型对象有一个属性constructor，它指向函数对象2.给原型对象添加属性（一般都是方法）作用: 函数的所有实例对象自动拥有原型中的属性(方法)<script type="text/javascript"> console.log(Date.prototype, typeof Date

2020-09-08 22:33:05 85

原创 ES6学习笔记（八）--生成器函数

generator 生成器函数 -普通函数，一路到底 -generator函数，中间可以停，到哪停呢，用 yield 配合，交出执行权 yield 有放弃、退让、退位的意思需要调用next()方法启动执行，需要遇到 yield 停, 踹一脚走一步 generator函数前面加一个 * 两边可以有空格，或靠近函数或function 背后实际生成多个小函数，实现走走停停function show() { co

2020-09-06 17:57:33 113

原创 ES6学习笔记（七）--Promise

Promise 承诺异步和同步异步，操作之间没有关系，同时执行多个操作，代码复杂同步，同时只能做一件事，代码简单 Promise 对象用同步的方式来书写异步代码 Promise 让异步操作写起来，像在写同步操作的流程，不必一层层地嵌套回调函数改善了可读性，对于多层嵌套的回调函数很方便充当异步操作与回调函数之间的中介，使.

2020-09-06 17:50:35 86

原创 ES6学习笔记（六）--面向对象__基础

有了class关键字、构造器和类分开了class里面直接加方法继承： super 超类 == 父类老版本function User(name, pass) { this.name = name this.pass = pass}User.prototype.showName = function () { console.log(this.name)}User.prototype.showPass = function () { console.log(t

2020-09-06 17:39:39 132 1

原创 ES6学习笔记（五）--数组扩展

新增了四个方法映射(一个对一个) -- map 汇总(一堆出来一个) -- reduce 过滤器（保留为true的） -- filter 循环迭代 -- foreachmaplet arr = [12, 5, 8]let result = arr.map(function (item) { return item * 2})let result2 = arr.map(item => item * 2) // 简写console.log("result1 :

2020-09-06 17:26:42 119

原创 ES6学习笔记（四）--解构赋值

左右两边结构必须一样；右边必须是值；声明和赋值不能分开，必须在一句话里面let [a, b, c] = [1, 2, 3]console.log(a, b, c)let { x, y, z } = { x: 1, y: 2, z: 3 }console.log(x, y, z)let [json, arr, num, str] = [{ a: 1, b: 2 }, [1, 2, 3], 8, 'str']console.log(json, arr, num, str)...

2020-09-06 17:09:37 110

原创 ES6学习笔记（三）--参数

参数扩展/展开 …args 收集剩余的参数，必须放在最后一个参数位置，展开数组，简写，效果和直接把数组的内容写在这个一样function show(a, b, ...args) { console.log(a) console.log(b) console.log(args)}console.log(show(1, 2, 3, 4, 5)) //1,2,3,4,5let arr1 = [1, 2, 3]let arr2 = [4, 5, 6]let arr3

2020-09-06 17:05:05 87

原创 ES6学习笔记（二） --箭头函数

箭头函数，就是函数的简写：如果只有一个参数，() 可以省；如果只有一个return，{ }可以省。实例说明：let show1 = function () { console.log('abc')}let show2 = () => { console.log('abc')}show1() // abcshow2() // abclet show4 = function (a) { return a * 2}let show5 = a

2020-09-06 10:53:44 84

原创 ES6学习笔记（一） --块级作用域

一个{ }就是一个块级作用域。var let 和 const的区别var 的问题可以重复声明，没有报错和警告无法限制修改没有块级作用域 { }let 和 const 不能重复声明都是块级作用域 { } 在块内声明的，块外无效 let 是变量，可以修改 const 是常量，不能修改块级作用域实例比较<body> <input type="button"

2020-09-06 10:46:34 90

原创八、useRef的使用

const refContainer = useRef(initialValue);useRef返回的是一个可变的ref对象，它的属性current被初始化为传入的参数（initialValue），返回的ref对象在组件的整个生命周期内保持不变。常见的一个用例：function TextInputWithFocusButton() { const inputEl = useRef(); const getValue = () => { // `current` 指向已挂载到 D

2020-09-03 14:45:54 4405 1

原创 jQuery学习

jQuery是一个轻量级的javascript函数库，极大地简化了javascript编程。目录一、语法二、选择器（常用）三、事件四、效果五、HTML六、遍历一、语法语法：$(selector).action()文档就绪事件： $(document).ready(function(){ //jQuery代码 });这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。二、选择器（常用）元素选择器： $("p") #i

2020-09-03 10:06:02 98

原创 javascript学习笔记（十二）--原型和原型链

一、原型所有引用类型都有一个__proto__(隐式原型)属性，属性值是一个普通的对象所有函数都有一个prototype(显式原型)属性，属性值是一个普通的对象所有引用类型的__proto__属性指向它构造函数的prototypevar a = [1,2,3]a.__proto__ === Array.prototype //true二、原型链当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的prototy

2020-09-02 20:17:29 97

原创 javascript学习笔记（十一）--异步编程

目录一、异步的概念二、什么时候使用异步编程三、setTimeout四、异步AJAX五、Promise一、异步的概念在我们学习的传统单线程编程中，程序的运行是同步的（同步不意味着所有步骤同时运行，而是指步骤在一个控制流序列中按顺序执行）。而异步的概念则是不保证同步的概念，也就是说，一个异步过程的执行将不再与原有的序列有顺序关系。简单来理解就是：同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效果更高。二、什么时候使用异步编程当主线程作为一个线程，不能够同时接受多方面的请求时。比如，当一个事

2020-09-02 13:04:52 160

空空如也

空空如也