自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(32)
  • 收藏
  • 关注

原创 Canvas变形 Transformations

变形Transformations变形可以将原点移动到另一点、对网格进行旋转和缩放。状态的保存和恢复Saving and restoring statesave()保存画布(canvas)的所有状态restore()save 和 restore 方法是用来保存和恢复 canvas 状态的,都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。可以调用任意多次save()方法。每一次调用restore()方法,上一个保存的状态就从栈中弹出,所有设定都恢复。

2020-09-22 17:03:50 245

原创 Canvas色彩颜色

色彩fillStyle和strokeStylefillStyle=color设置填充形状时使用的样式strokeStyle=color设置形状轮廓时填充的样式color与css中的color一样注意:这两个颜色设置一次后其后面的颜色默认是设置的颜色除非重新更改ctx.fillStyle = 'orange';ctx.fillStyle = '#FFA500';ctx.fillStyle = 'rgb(255, 165, 0)';ctx.fillStyle = 'rgba(255, 16

2020-09-22 17:01:39 1233

原创 CanvasPath2D对象与绘制文本

Path2D对象Path2()Path2()可使用最新版本的浏览器中的对象来缓存或记录这些绘图命令。您可以快速播放路径。Path2D()构建函数返回一个新实例化的Path2D对象任意的与另一条路径作为参数(创建一个副本)或任选的用有一串svg路径数据new Path2D(); //空路径对象new Path2D(path); // 从另一个Path2D对象复制new Path2D(d); // SVG路径数据中的路径实例演示:创建一个矩形和一个圆两者存储为path2D对象,以

2020-09-22 16:46:07 706 1

原创 Canvas贝塞尔曲线和二次贝塞尔曲线

贝塞尔曲线和二次曲线贝塞尔曲线大概就是ps中钢笔工具那个曲线quadraticCurveTo(cp1x, cp1y, x, y)从当前笔位置到由指定的结束点绘制的二次贝塞尔曲线x,并y使用由指定的控制点cp1x和cp1y。例子:此示例显示了如何绘制二次贝塞尔曲线。 <!DOCTYPE html><html><head> <meta charset="utf-8" /> </head><body o

2020-09-22 16:41:45 402

原创 Canvas绘制形状

绘制形状画布坐标<canvas>元素有一个叫做 getContext() 的方法,这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数,上下文的格式。var canvas = document.getElementById('tutorial');var ctx = canvas.getContext('2d');12绘制矩形fillRect(x, y, width, height)fillRect()方法绘制一个填充的矩形x矩形起始点的

2020-09-22 16:38:26 290

原创 什么是Canvas

Canvas基本用法什么是CanvasHTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域,可以控制其每一像素。canvas是拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。基本用法<canvas>标签只有两个属性 – width 和 height,所以在低版本的浏览器是不支持的,要在浏览器中写上 :<canvas id="tutorial" width="150" height="150">浏览器版本不支持&lt

2020-09-17 22:51:15 2574

原创 FETCH中的基础语法

FETCH中的基础语法FETCH不是AJAX,它诞生的目的是为了代替AJAX,它是JS中内置的API:基于FETCH可以实现客户端和服务器端的信息通信 参考简书 使用Fetch发送请求GET/HEAD等请求不能设置BODY不管服务器返回的状态是多少,FETCH都不认为是失败(那怕是4或者5开头的状态码),都执行的是THEN中的方法(需要我们自己进行异常抛出处理)GET请求fetch('get获取地址', { method: 'GET', head

2020-09-12 20:42:47 579

原创 axios的请求合并以及参数配置

axios的请求合并以及参数配置并发请求 – 处理并发请求的助手函数axios.all(iterable) – iterable是一个可以迭代的参数如数组等let sendAry = [ axios.get('get获取的地址1'), axios.get('get获取的地址2'), axios.post('post获取的地址')];//=>三个请求都完成才做一些事情(可以基于ALL实现)axios.all(sendAry).then(result =>

2020-09-12 20:38:43 704

原创 axios的基础语法

主流Ajax库-Axiosaxios的基础语法如何安装axios在当前目录下打开命令行利用yarn安装 : yarn add axios,如果显示yarn没有找到该命令,则需要安装npm install -g yarn利用npm安装 : npm install axios --save利用bower安装 : bower install axios --save利用cdn引入 : <script src="https://unpkg.com/axios/dist/axios.min.j

2020-09-10 20:18:53 432

原创 Ajax实现跨域访问

实现跨域访问跨域访问是什么同源策略1995年。同源策略有Netscape公司引入浏览器。目前,所有浏览器都实行这个政策。同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。随着互联网的发展,“同源政策”越来越严格。目前,如果非同源,共有三种行为受到限制:1.Cookie,LocalStorage和indexDB无法读取2.DOM无法获得3.AJAX请求不能发送虽然这些限制是必要的,但是有时很不方便,合理的用途也收到影响。所谓“同源”指的是“三个相同”:协议相同,域名相同以及端口

2020-09-09 17:15:17 449 2

原创 jQuery中Ajax异步提交表单

异步提交表单所谓的异步提交表单,就是不再使用表单的提交按钮实现表单的提交功能,而是通过Ajax异步交互方式实现表单提交。异步提交表单的步骤获取表单及所有表单组件对应的数据值。将所有表单组件对应的数据值拼成特定格式的字符串或是JSON格式数据。通过Ajax异步交互方式提交表单。 var info ='username'+$('#username').val()+'&password'+$('#password').val(); $.ajax({ url:'

2020-09-09 11:16:40 520

原创 jQuery ajax模仿搜索框提示效果案例

案例搜索框提示效果一般说异步交互的时候,大多数想到的都是三级联动,三级联动虽然是很经典的案例。一般我们使用的百度搜索也是异步交互,所以百度搜索框也是一个很经典的异步交互案例。下面是一个用ajax和jQuery完成的一个百度搜索框案例效果图:从效果图中可以看出在不输入内容的情况下不显示输入有内容显示内容输入没有内容不显示内容所以,根据思路可以确定在刷新页面时清空列表内容获取到每一次用户在输入到输入框的内容根据获取到的内容利用方法getJSON获取到json

2020-09-09 10:01:28 398

原创 案例 jQuery的三级联动

案例 jQuery的三级联动案例演示server1.json代码展示[ { "province": "吉林省", "cities": [ { "city": "长春市", "counties": [ "朝阳区", "经济开发区", "高新区" ] }, { "city": "吉林市", "counties"

2020-09-08 15:47:20 469 1

原创 【JQuery中的Ajax】

JQuery中的AjaxjQuery不仅对JavaScript语言进行了封装,也对Ajax异步交互进行了封装。jQuery提供了六个Ajax操作的方法:load()方法$.get()方法$.post()方法$.ajax()方法$.getScript()方法$.getJSON()方法jQuery除了封装了六个Ajax操作的方法,还提供了以下几种事件:ajaxStart()事件ajaxStop()事件ajaxStop()事件ajaxComplete()事件ajaxSend()事件

2020-09-08 14:43:05 342

原创 JSON是什么

JSON是什么JSON是JavaScript Object Notation的缩写,是一种轻量级的数据交换格式。JSON是基于JavaScript Programming Language,Standard ECMA-262 3rd Edition -December 1999的一个子集。JSON是独立于任何语言的文本格式。易于程序员阅读和编写,同时也易于计算机解析和生成。JSON的中文官网JSON语法规则JSON格式的构建比较简单,主要为两种结构:“名称/值”对的集合(A collectio

2020-09-05 22:01:24 1298 1

原创 Ajax的基本用法

Ajax的基本用法同步交互与异步交互交互是什么同步交互是什么所谓同步交互,就是指发送一个请求,需要等待返回,然后才能够发送下一个请求。同步交互相当于排队,轮到下一个的情况会因为前一个而有所不同。说明:就是上一行代码没加载完,下一行不能加载异步交互是什么所谓异步交互,就是指指发送一个请求,不需要等待返回,随时可以再发送下一个请求。同步交互与异步交互的区别在于同步交互需要等待结果,而异步交互不需要等待。说明:有请求就响应异步交互的优势异步交互相比同步交互的优势主要具有以下几点:用户

2020-09-05 14:07:09 293

原创 HTTP各种特性总览

CORS跨域请求的限制与解决返回数据时设置头信息,只能有一个域名,需要多个域名要判断const http = require('http')http. createServer(function (request, response) { res.writeHead(200,{ "Access-Control-Allow-Origin":'*' })}).listen( 8887 )console.log( 'server listening on 8887' )

2020-08-27 07:59:33 432 1

原创 HTTP协议基础及发展历史

5层网络模型介绍经典五层模型:底三层物理层主要作用是定义物理设备如何传输数据数据链路层在通信的实体间建立数据链路连接网络层为数据在结点之间传输创建逻辑链路传输层向用户提供可靠的端到端(End-to-End)服务传输层向高层屏蔽了下层数据通信的细节应用层为应用软件提供了很多服务构建于TCP协议之上屏蔽网络传输相关细节HTTP协议的发展历史HTTP/0.9只有一个命令GET没有HEADER等描述数据的信息服务器发送完毕,就关闭TCP连接HTTP/1.0增

2020-08-26 08:02:36 271

原创 跨域资源共享是什么

跨域资源共享是什么CORS是什么CORS全称为Cross-Origin Resource Sharing,被译为跨域资源共享,新增了一组HTTP首部字段,允许服务器声明哪些源站有权限访问哪些资源。跨域资源共享标准规范要求,对那些可能对服务器数据产生副作用的HTTP请求方法(特别是GET以外的HTTP请求,或者搭配某些MIME类型的POST请求),浏览器必须首先使用OPTIONS方法发 起一个预检请求,从而获知服务端是否允许该跨域请求。服务器确认允许之后,才发起实际的HTTP请求。在预检请求的返回中,服

2020-08-25 07:20:40 1498

原创 Cookie是什么

CookieCookie是什么Cookie是服务器发送到用户浏览器并保存在本地的一小块数据,会在刘览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常,Cookie用于告知服务端两个请求是否来自同一浏览器,如保持用户的登录状态。Cookie使基于无状态的HTTP协议记录稳定的状态信息成为了可能。Cookie技术产生源于HTTP协议在互联网上的急速发展。Cookie曾一度用于客户端数据的存储,因当时并没有其它合适的存储办法而作为唯一的存储手段。但现在随着现代浏览器开始支持各种各样的存储方式,C

2020-08-21 14:54:01 626

原创 缓存机制是什么

缓存机制是什么缓存是-种保存资源副本并在下次请求时直接使用该副本的技术。当web缓存发现请求的资源已经被存储,它会拦截请求,返回该资源的拷贝,而不会去源服务器重新下载。缓存需要合理配置,因为并不是所有资源都是永久不变的。重要的是对一个资源的缓存应截止到其下一次发生改变(即不能缓存过期的资源)。无缓存机制存在的问题:对互联网的带宽造成比较大的压力对服务器的运行造成比较大的压力有缓存机制服务器向客户端缓存的数据内容,具有生命周期(不能是永久有效)优势:缓解服务器端的资原消耗和运行

2020-08-19 23:00:24 3802

原创 HTTP消息是什么

HTTP消息是什么HTTP报文HTTP报文,又称为HTTP消息,是服务器和客户端之间交换数据的方式。有两种类型的消息:请求,由客户端发送用来触发一个服务器上的动作;响应,来自服务器的应答。HTTP消息由采用ASCI编码的多行文本构成。在HTTP/1.1及早期版本中,这些消息通过连接公开地发送。在HTTP/2中,为了优化和性能方面的改进,曾经可人工阅读的消息被分到多个HTTP帧中。HTTP请求报文请求报文由以下元素组成: 一个HTTP的method、要获取的资源的路径、HTTP协议版本号、为服务端表

2020-08-18 20:49:10 1132

原创 认识HTTP

HTTP是什么HTTP全称为Hypec Text Transfer Protocol,被译为超文本传输协议,是互联网上应用最为广泛一种网络协议。HTTP协议是在Web上进行数据交换的基础,是一-种“客户端-服务器端”协议。也就是说,请求通常是由像浏览器这样的接受方发起的。-个完整的Web文档通常是由不同的子文档拼接而成的,像是文本、布局描述、图片、视频、脚本等等。HTTP协议历史与标准HTTP/0.9: 1991年制定,有严重设计缺陷,只支持GET方法,不支持MIME类型,很快被HTTP/1.0取

2020-08-13 08:14:08 238

原创 Node.js 模块化

Node JS 模块化内置模块Node JS 作者自己写的模块引入模块格式:// 1.导包const fs = require('fs');fs 模块名fs模块fs 模块文件管理unlink() 方法语法结构:// 假设 '文件.txt' 是普通的文件。fs.unlink('文件.txt', (err) => { if (err) throw err; console.log('文件已被删除');});作用:删除文件的方法文件.txt:文件的路径

2020-08-13 08:12:43 332

原创 ES6新语法

JS ES6常用语法const 关键字const关键字作用是是声明常量(一旦声明就无法修改)没有变量提升有块级作用域不能重复声明声明时必须要初始化不能重新赋值// 没有变量提升console.log(num); // 报错const num = 100;// 有块级作用域{ const num = 200;}console.log(num); // 报错// 不能重复声明const num = 300;const num = 400; // 报错cons

2020-07-04 22:16:19 400 1

原创 Node.js入门

Nodejs入门学习Nodejs建议1.了解客户浏览器与服务端后台交互过程,可以在以后的前端开发工作中与后端人员之间的沟通更加容易理解。虽然工作中不一定用的上Nodejs,但是通过对服务端开发的了解,能够让你在日常工作中与公司的后端人员之间的沟通变得更加轻松。2.了解服务端开发一些特性,可以在工作中,当我们前端与后端交互出现bug问题时,能够更快速的定位bug是出现自己的客户端还是别人的服务端。作为一名前端人员,如果对后台不了解,那么以后在于后台交互的开发中有可能明明是后台的问题但,是由

2020-07-02 11:14:57 341

原创 jQuery--节点操作

文档处理复制节点如果传入false就是浅复制, 如果传入true就是深复制浅复制只会复制元素, 不会复制元素的事件深复制会复制元素, 而且还会复制元素的事件浅复制$("button").eq(0).click(function () { // 1.浅复制一个元素 var $li = $("li:first").clone(false) // 2.将复制的元素添加到ul中 $("ul").append($li)})深复制$("button").eq(1).c

2020-07-01 19:50:27 232

原创 jQuery--动画效果

动画效果显示和隐藏动画show()hide()$(function () { 编写jQuery相关代码 $(button).eq(0).click(function () { $(div).css(display, block) 注意 这里的时间是毫秒 $(div).show(1000, function () { 作用 动画执行完毕之后调用 alert(显示动画执行完毕)

2020-07-01 19:49:38 166

原创 jQuery--事件相关

事件处理事件绑定有两种绑定事件方式eventName(fn)编码效率略高/ 部分事件jQuery没有实现,所以不能添加$(function () { $("button").click(function () { alert("hello lnj") }) $("button").click(function () { alert("hello 123") }) $("button").mouseleave(function () {

2020-07-01 19:48:30 304

原创 jQuery--属性操作与CSS相关

属性操作属性和属性节点1.什么是属性?对象身上保存的变量就是属性2.如何操作属性?对象.属性名称 = 值对象.属性名称对象[“属性名称”] = 值对象[“属性名称”]$(function () { function Person() { } var p = new Person() // p.name = "lnj" p["name"] = "zs" // console.log(p.name) console.log(p["name

2020-07-01 19:47:42 169

原创 jQuery--核心函数和工具方法

核心函数核心函数调用jQuery的核心函数$()jQuery传递一个函数$(function () { alert("hello lnj")}接受一个字符串选择器返回一个jQuery对象, 对象中保存了找到的DOM元素$(function () { var $box1 = $(".box1") var $box2 = $("#box2") console.log($box1) console.log($box2)}接收一个字符串代码片段返回

2020-06-21 16:49:57 170

原创 初识--jQuery

jQueryjQuery基础初识jQueryjQuery是什么?jQuery是一款优秀的JavaScript库,最主要的用途是用来做查询,还能让我们对HTML文档遍历和操作、事件处理、动画以及Ajax变得更加简单为什么要使用jQuery?强大选择器: 方便快速查找DOM元素链式调用: 可以通过.不断调用jQuery对象的方法隐式遍历(迭代): 一次操作多个元素读写合一: 读数据/写数据使用是一个函数事件处理DOM操作(C增U改D删)样式操作动画丰富的插件支持浏览器兼容(前

2020-06-16 17:09:12 300 1

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除