自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

春雨惊春.

学习中

  • 博客(18)
  • 收藏
  • 关注

原创 Vue实例的生命周期

文章目录前言一、挂载阶段二、更新阶段三、销毁阶段前言Vue实例的生命周期可以分为三个主要阶段:挂载阶段、更新阶段和销毁阶段。每个阶段的不同时期都会执行对应的函数,也就是钩子函数。一、挂载阶段挂载阶段主要执行与初始化属性相关的操作。对应的有四个钩子函数:beforeCreate:在实例初始化之后,数据观测和事件配置之前被调用。created:在实例创建完成之后立即被调用。beforeMount:在挂载开始之前被调用。mounted:实例被挂载后调用,这时页面上的 el 被新创建的 vm.

2021-08-02 09:44:57 336

原创 XMLHttpRequest Level2 的新特性

文章目录一、旧版本 XMLHttpRequest 的缺点二、XMLHttpRequest Level2 的新功能1. 设置 HTTP 请求时限2. 利用 FormData 对象管理表单数据3. 上传文件4. 获取文件的上传进度一、旧版本 XMLHttpRequest 的缺点只支持文本数据的传输,无法用来读取和上传文件传送和接收数据时,没有进度信息,只能提示有没有完成二、XMLHttpRequest Level2 的新功能可以设置 HTTP 请求的时限可以使用 FormData 对象管理表

2021-07-26 09:32:59 379 1

原创 ES6新增语法-关键字

文章目录1. let 关键字2. const 关键字3. let、const、var 的区别1. let 关键字功能: 声明变量特点:(1) 块级作用域有效, 使用 let 关键字生命的变量只在块级作用域中 {} 有效;(2) 没有变量提升, 使用 let 关键字声明的变量只能先声明后使用;(3) 暂时性死区特性,块级作用域中使用 let关键字 声明变量,该块级作用域会和该变量绑定,成为暂时性死区,不受外部变量的影响。优点:(1) 在业务逻辑比较复杂时 (代码量比较庞大), 能够防止内层

2021-07-19 09:11:54 218

原创 JS创建Piano

文章目录前言前言利用音视频标签创建钢琴。步骤很简单没什么好说的,写这篇文章的原因主要是觉得这个很好玩,分享一下,直接上代码吧:<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-sca

2021-07-10 11:20:45 244

原创 JS实现图片懒加载效果

文章目录前言一、图片实现懒加载步骤二、案例练习(三国女将)1. html 代码2. css 代码3. js 代码执行结果前言懒加载时一种也页面效果,可以提高页面加载速率,并降低服务器的贷款和资源损耗。一、图片实现懒加载步骤先清空图片的 src 属性值,以使浏览器不加载图片然后再在需要加载图片时,为图片添加上 src 属性二、案例练习(三国女将)1. html 代码<!doctype html><html lang="en"><head>

2021-07-05 09:24:06 635

原创 JavaScript-闭包

文章目录一、理解闭包二、常见的闭包三、闭包的作用三、闭包的生命周期四、闭包的应用:自定义JS模块五、闭包的缺点及解决办法六、面试题一、理解闭包如何产生闭包?当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量或函数时,就产生了闭包。闭包到底是什么?有两种理解:绝大多数人:闭包是嵌套的内部函数极少数人:闭包是包含被引用变量或函数的对象注意:(1)闭包存在于嵌套的内部函数中。(2)如果外部函数的外部没有对该内部函数的引用,当外部函数执行完毕,内部函数会成为垃圾对象,闭包也会消..

2021-06-26 11:35:39 192

原创 1px 边框问题

文章目录前言一、方法一:设置单独的元素表示边框步骤:缺点:二、方法二:缩放整体边框步骤:缺点:总结前言高清屏幕下 1px 会对应更多个物理像素,所以 1px 宽度的边框看起来会比较粗。解决方法如下:一、方法一:设置单独的元素表示边框步骤:边框使用伪类元素或单独的元素实现在高清屏幕时,设置缩放示例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">

2021-06-21 11:20:41 863

原创 移动端适配

移动端适配一、viewport 适配二、rem 适配rem 适配方法一rem 适配方法二三、less + rem 适配一、viewport 适配拿到设计稿之后,设置布局视口宽度为设计稿宽度,然后量尺寸进行布局即可。 <meta name="viewport" content="width=设计稿宽度">元素大小在不同移动设备上会等比缩放。缺点:兼容性问题二、rem 适配em 和 rem :em 参照的是父级元素的字体大小,1em = 1 父元素的 font-siz

2021-06-15 09:46:13 158

原创 屏幕、像素、视口

屏幕、像素、视口移动端的特点一、屏幕二、像素1. 相关概念2. 像素之间的关系3. 像素密度4. 像素比三、视口1. PC端2. 移动端3. 页面缩放4. viewport 视口控制移动端的特点小屏幕通过触摸交互屏幕尺寸繁多一、屏幕屏幕尺寸: 屏幕尺寸通常是指屏幕对角线的长度,单位一般为英寸。常见屏幕尺寸的查看网址:https://screensiz.es/屏幕分辨率:屏幕分辨率指的是屏幕上的物理像素点的个数。一般用 x * y 或者 y * x 表示。注意:屏幕分辨率时固

2021-06-07 11:07:16 320

原创 bootstrap栅格

定义我的栅格前言一、全局设置二、变量声明三、行的实现四、列的实现五、测试六、代码拆分、测试前言本文主要介绍模仿bootstrap的栅格系统,运用栅格系统的原理,自定义栅格系统。主要步骤有:全局设置、变量声明、容器的实现、行的设置、列的设置、测试、代码拆分。提示:以下是本篇文章正文内容,下面案例可供参考注意:本文所有样式设置的代码都使用less预处理语言一、全局设置样式重置:引入重置样式文件可以到bootCDN官网上下载保存,添加链接描述,搜normalize就可以找到,然后复制链接,..

2021-05-31 10:21:44 148

原创 PC项目练习

PC项目练习HTMLjs开机遮罩层样式头部css主体样式侧边导航点第一屏第二屏第三屏第四屏第五屏实现效果:开机:shoHTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test</title><!-- 清除默认样式--> <link rel="stylesheet" href=

2021-05-21 19:11:52 204

原创 学习jQuery扩展插件

学习jquery扩展插件一、扩展jQuery工具方法二、扩展jQuery对象的方法三、多库共存四、window.onload与document.ready的区别一、扩展jQuery工具方法语法:$.extend(object)示例:提示:上面的示例中jQuery扩展文件是自定义的,文件名是my_jQuery_plugin.js二、扩展jQuery对象的方法语法:$.fn.extend(object)示例:三、多库共存概念:当文件中引用了多个库文件时,有可能发生对

2021-05-17 10:32:26 154

原创 利用jQuery实现todolist任务列表

todolist任务列表前言一、pandas是什么?二、使用步骤1.引入库2.读入数据总结项目场景:问题描述:原因分析:解决方案:前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例可供参考一、pandas是什么?示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码如下(示例)

2021-05-10 11:34:13 421

原创 利用jQuery实现图片轮播

利用jQuery实现轮播图需求实现步骤一、获取相关对象二、设置切换按钮三、设置图片首尾相接效果四、随图片切换更新小圆点五、点击小圆点切换图片六、鼠标无操作时图片自动轮播示例需求在设置好html结构和css样式之后,利用jQuery实现轮播图效果。初始结构和样式代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播图</ti

2021-05-06 10:17:05 3324

原创 jQuery核心函数&核心对象

jQuery核心函数&核心对象核心函数理解作为函数调用作为对象调用核心对象理解属性/方法注意总结核心函数理解jQuery核心函数即$()函数 或jQuery()函数jQuery定义了全局函数$()供我们调用。$()函数既可以作为一般函数调用,且如果传递的参数不同(即参数类型/格式不同),执行的功能也就不同。$()函数也可以作为一般的对象调用其定义好的方法,此时$就是一个工具类。作为函数调用       当j

2021-04-26 19:34:15 218

原创 JS的线程机制与事件机制

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档JS的线程机制与事件机制前言一、进程与线程的概念二、浏览器内核概念三、思考定时器1. 定时器真的是定时执行的吗?2. 定时器回调函数是在哪个线程执行的?3. 定时器是如何执行的?四、JS单线程1. 如何证明JS是单线执行2. 为什么JS采用单线程执行模式?3. 代码分类4. JS执行代码的基本流程五、浏览器的事件处理机制1. js的基本处理流程2. 模型的两个重要组成部分3. 模型的运转流程4. 模型原理图5. 相关重要概念六、 H5的We

2021-04-19 10:54:10 833 2

原创 原型与原型链

JavaScript函数高级原型与原型链原型的概念函数的prototype属性每个函数都有一个prototype属性,它默认指向一个Object空对象(即没有我们定义的属性或方法的对象,也称为原型对象)。原型对象中有一个constructor属性,指向该函数对象。给构造函数添加属性给构造函数的原型对象添加属性(一般是方法),实例对象可以访问到。显示原型与隐式原型每个函数都有一个显式原型属性,即prototype属性每个实例对象都有一个隐式原型属性,即__proto__属性

2021-04-12 10:40:04 112

原创 二级菜单练习

二级菜单练习练习要求实现步骤实现练习要求实现二级菜单效果,即打开一个一级菜单时其他一级菜单不能同时打开,但可以同时关闭所有菜单,且要求菜单的打开和关闭有动画效果。(结合定时器和类的操作)实现效果如图:解决思路:1、当表示一级菜单的div有collapsed类时,菜单处于折叠状态,没有collapsed类时,处于展开状态。2、为二级菜单的标题绑定单击响应函数。实现步骤首先,搭建好基础结构和设置相关样式。其次,创建相关工具函数:类操作的相关函数//添加指定class属性functio

2021-04-04 18:11:07 577 2

空空如也

空空如也

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

TA关注的人

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