自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 Git 版本控制系统

命令:git clone 远程仓库地址,例如:git clone https://gitee.com/lidongxu/work.git。例如:git remote add origin https://gitee.com/lidongxu/work.git。暂存区 -> 覆盖 -> 工作区,命令:git restore 目标文件(注意:完全确认覆盖时使用)1. 小传开发代码 -> 工作区 -> 暂存区 -> 提交 -> 拉取(可选)-> 推送。

2024-04-12 09:28:16 855

原创 Webpack

静态模块:指的是编写代码过程中的,html,css,js,图片等固定内容的文件打包:把静态模块内容,压缩,整合,转译等(前端工程化)把 less / sass 转成 css 代码把 ES6+ 降级成 ES5支持多种模块标准语法

2024-04-11 09:06:09 1176

原创 Node.js 入门

mac: /Users/xxx/Desktop/备课代码/3-B站课程/03_Node.js与Webpack/03-code/03。windows: D:\备课代码\3-B站课程\03_Node.js与Webpack\03-code\03。注意:导入软件包时,引入的默认是 index.js 模块文件 / main 属性指定的模块文件。问题:Node.js 代码中,相对路径是根据终端所在路径来查找的,可能无法找到你想要的文件。需求:封装数组求和函数的模块,判断用户名和密码长度函数的模块,形成成一个软件包。

2024-04-10 18:37:22 1344

原创 AJAX进阶

概念: 在 async 函数内,使用 await 关键字取代 then 函数,等待获取 Promise 对象成功状态的结果值。做法:每个 Promise 对象中管理一个异步任务,用 then 返回 Promise 对象,串联起来。定义:执行代码和收集异步任务的模型,在调用栈空闲,反复调用任务队列里回调函数的执行机制,就叫事件循环。异步代码:调用后耗时,不阻塞代码继续执行(不必原地等待),在将来完成后触发一个回调函数。概念:在回调函数中嵌套回调函数,一直嵌套下去就形成了回调函数地狱。

2024-04-08 08:57:17 607 1

原创 AJAX 原理

答:创建 XHR 对象,调用 open 方法,设置 url 和请求方法,监听 loadend 事件,接收结果,调用 send 方法,发起请求。核心: 请求头设置 Content-Type:application/json ,请求体携带 JSON 字符串。参数名1=值1&参数名2=值2。1. 定义 myAxios 函数,接收配置对象,返回 Promise 对象。好处:掌握使用 XHR 与服务器进行数据交互,了解 axios 内部原理。注意:Promise对象一旦被兑现/拒绝,就是已敲定了,状态无法再被改变。

2024-04-06 18:14:29 846

原创 AJAX 入门

1. 引入 axios.js:https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js。注册用户 URL 地址:http://hmajax.itheima.net/api/register。城市列表:http://hmajax.itheima.net/api/city?目标资源地址:http://hmajax.itheima.net/api/province。目标资源地址:http://hmajax.itheima.net/api/news。

2024-04-05 15:11:11 1433

原创 移动端WEB开发之响应式布局

原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。我们可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序。栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。

2024-04-04 16:32:05 1245

原创 移动WEB开发之rem适配布局

我们要做的,就是确定好我们当前设备的html 文字大小就可以了,比如当前设计稿是 750px, 那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以,里面页面元素rem值: 页面元素的px 值 / 75,剩余的,让flexible.js来去算。它在 CSS 的语法基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了 CSS 的编写,并且降低了 CSS 的维护成本,就像它的名称所说的那样,Less 可以让我们用更少的代码做更多的事情。

2024-04-04 16:00:12 1053

原创 移动WEB开发之flex布局

采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 flex 布局。注意: 主轴和侧轴是会变化的,就看 flex-direction 设置谁为主轴,剩下的就是侧轴。flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。默认主轴方向就是 x 轴方向,水平向右,默认侧轴方向就是 y 轴方向,水平向下。

2024-04-03 09:01:38 500

原创 移动WEB开发之流式布局

移动端浏览器我们主要对webkit内核进行兼容我们现在开发的移动端主要针对手机端开发现在移动端碎片化比较严重,分辨率和屏幕尺寸大小不一学会用谷歌浏览器模拟手机界面以及调试二、

2024-04-02 09:19:19 761

原创 CSS3 (一)

transform:rotate3d(x,y,z,deg): 沿着自定义轴旋转 deg为角度(了解即可),xyz是表示旋转轴的矢量,是标示你是否希望沿着该轴旋转,最后一个标示旋转的角度。(3)2D 移动 translate(x, y) 最大的优势是不影响其他盒子, 里面参数用%,是相对于自身宽度和高度来计算的。是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果。(4)transform:rotate3d(x,y,z,deg): 沿着自定义轴旋转 deg为角度(了解即可)

2024-03-30 09:12:15 1438

原创 HTML5 和 CSS3 提高

HTML5 的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。n 可以是公式:常见的公式如下 ( 如果n是公式,则从0开始计算,但是第 0 个元素或者超出了元素的个数会被忽略 )(2)nth-child 对父元素里面所有孩子排序选择(序号是固定的) 先找到第n个孩子,然后看看是否和E匹配。HTML5 在不使用插件的情况下,也可以原生的支持视频格式文件的播放,当然,支持的格式是有限的。before 在父元素内容的前面创建元素,after 在父元素内容的后面插入元素。

2024-03-29 09:16:35 1036

原创 CSS(六)

1. 如果遇到一些结构和样式比较简单的小图标,就用字体图标。2. 如果遇到一些结构和样式复杂一点的小图片,就用精灵图。字体图标是一些网页常见的小图标,我们直接网上下载即可。因此使用可以分为:1. 字体图标的下载2. 字体图标的引入 (引入到我们html页面中)3. 字体图标的追加 (以后添加新的小图标)

2024-03-28 09:01:20 677

原创 CSS(五)

这个“子绝父相”太重要了,是我们学习定位的口诀,是定位中最常用的一种方式这句话的意思是:子级是绝对定位的话,父级要用相对定位。2. 如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点移动位置。2. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子。① 子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子。1. 它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)。

2024-03-27 09:01:43 1148

原创 CSS(四)

float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

2024-03-26 09:14:45 1237

原创 CSS(三)

当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的元素有下外边距 margin-bottom,下面的元素有上外边距 margin-top ,则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致。对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承,以及color属性)

2024-03-25 19:10:07 730

原创 CSS(二)

常见的行内元素有 、、、、、、、、、等,其中 标签是最典型的行内元素。在行内元素中有几个特殊的标签 —— 、、,它们同时具有块元素和行内元素的特点。常见的块元素有~、、、、、等,其中 标签是最典型的块元素。作用:网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页。

2024-03-24 09:56:30 858

原创 CSS(一)

比如 表明这是一个大标题, 表明这是一个段落, 表明这儿有一个图片, 表示此处有链接。标签选择器(元素选择器)是指用 HTML 标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的 CSS 样式。由于书写繁琐,并且没有体现出结构与样式相分离的思想,所以不推荐大量使用,只有对当前元素添加简单样式的时候,可以考虑使用。简单来说,就是选择标签用的。适合于修改简单样式.标签选择器可以把某一类标签全部选择出来,比如所有的 标签和所有的 标签。

2024-03-23 09:39:49 738

原创 HTML(二)

中只能嵌套 ,直接在 中只能嵌套,直接在.(1) 表单域 form 使用场景: 提交区域内表单元素给后台服务器(2) 文件域 file 是input type 属性值 使用场景: 上传文件(3) 文本域 textarea 使用场景: 可以输入多行文字, 比如留言板 网站介绍等

2024-03-22 09:48:10 907

原创 HTML(一)

网站是指在因特网上根据一定的规则,使用 HTML 等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”,通常是HTML 格式的文件,它要通过浏览器来阅读。网页是构成网站的基本元素,它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页,常见以.htm或.html后缀结尾的文件,因此将其俗称为HTML 文件。

2024-03-21 10:07:14 886 1

原创 jQuery 事件

jQuery使用$作为标示符,随着jQuery的流行,其他 js 库也会用这$作为标识符, 这样一起使用会引起冲突。

2024-03-20 08:53:45 997 1

原创 jQuery 常用API

(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值。(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值。三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。

2024-03-19 18:52:19 1351 1

原创 JavaScript 进阶(四)

深浅拷贝。如果是简单数据类型拷贝值,引用数据类型拷贝的是地址 (简单理解: 如果是单层对象,没问题,如果有多层就有问题)。所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。

2024-03-18 09:17:01 1012

原创 JavaScript 进阶(三)

指向构造函数的 prototype 原型对象,之所以我们对象可以使用构造函数 prototype 原型对象的属性和方法,就是因为对象有 __proto__ 原型的存在。构造函数可以创建实例对象,构造函数还有一个原型对象,一些公共的属性或者方法放到这个原型对象身上,但是 为啥实例对象可以访问原型对象里面的属性和方法呢?基于原型对象的继承使得不同构造函数的原型对象关联在一起,并且这种关联的关系是一种链状的结构,我们将原型对象的链状结构关系称为原型链。

2024-03-17 11:03:48 1126 1

原创 JavaScript 进阶(二)

之所以具有对象特征的原因是字符串、数值、布尔类型数据是 JavaScript 底层使用 Object 构造函数“包装”来的,被称为。比如我们创建了佩奇的对象,继续创建乔治的对象还需要重新写一遍,此时可以通过。在 JavaScript 中的字符串、数值、布尔具有对象的使用特征,如具有属性和方法。4. 构造函数内部的 return 返回的值无效,所以不要写return。通过构造函数创建的对象称为实例对象,实例对象中的属性和方法称为实例成员。Object,Array,RegExp,Date 等...

2024-03-16 12:02:13 946 1

原创 JavaScript 进阶(一)

正因为垃圾回收器的存在,许多人认为JS不用太关心内存管理的问题但如果不了解JS的内存管理机制,我们同样非常容易成内存泄漏(内存无法被回收)的情况不再用到的内存,没有及时释放,就叫做。在开发中【使用箭头函数前需要考虑函数中 this 的值】,事件回调函数使用箭头函数时,this 为全局的 window,因此DOM事件回调函数为了简便,还是不太推荐使用箭头函数。凡是能从根部到达的对象,都是还需要使用的。引入箭头函数的目的是更简短的函数写法并且不绑定this,箭头函数的语法比函数表达式更简洁。

2024-03-15 10:14:31 848 1

原创 JavaScript Web APIs(六)

大多数的字符仅能够描述它们本身,这些字符称作普通字符,例如所有的字母和数字。表示重复 0 次或1次、* 表示重复 0 次或多次、{m, n} 表示复 m 到 n 次。是一些具有特殊含义的字符,可以极大提高了灵活性和强大的匹配功能。如果正则表达式与指定的字符串匹配 ,返回true,否则false。(1)[ ] 里面加上 - 连字符,使用连字符 - 表示一个范围。g 是单词 global 的缩写,匹配所有满足正则表达式的结果。边界符(表示位置,开头和结尾,必须用什么开头,用什么结尾)

2024-03-14 14:38:22 1006 1

原创 JavaScript Web APIs(五)

一、Window 对象一、Window 对象1.1 BOM(浏览器对象模型)BOM(Browser Object Model ) 是浏览器对象模型。window对象是一个全局对象,也可以说是JavaScript中的顶级对象像document、alert()、console.log()这些都是window的属性,基本BOM的属性和方法都是window的。所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法window对象下的属性和方法调用的时候可以省略window。

2024-03-13 19:39:35 697 3

原创 JavaScript Web APIs(四)

是指1970年01月01日00时00分00秒起至现在的毫秒数,它是一种特殊的计量时间的方式。

2024-03-13 10:43:23 943 1

原创 JavaScript Web APIs(三)

1.1 事件流和两个阶段说明事件流指的是事件完整执行过程中的流动路径。说明:假设页面里有个div,当触发事件时,会经历两个阶段,分别是捕获阶段、冒泡阶段。简单来说:捕获阶段是 从父到子 冒泡阶段是从子到父。实际工作都是使用事件冒泡为主。1.2 事件捕获事件捕获概念:从DOM的根元素开始去执行对应的事件 (从外到里)。事件捕获需要写对应代码才能看到效果。代码:说明:(1)addEventListener第三个参数传入true代表是捕获阶段触发(很少使用)

2024-03-12 11:19:03 1181 2

原创 JavaScript Web APIs(二)

什么是事件?事件是在编程时系统内发生的动作或者发生的事情比如用户在网页上单击一个按钮什么是事件监听?就是让程序检测是否有事件产生,一旦有事件触发,就立即调用一个函数做出响应,也称为 绑定事件或者注册事件。比如鼠标经过显示下拉菜单,比如点击可以播放轮播图等等语法:事件监听三要素:那个dom元素被事件触发了,要获取dom元素用什么方式触发,比如鼠标单击 click、鼠标经过 mouseover 等要做什么事。举例说明:注意:1. 事件类型要加引号。

2024-03-12 10:46:16 837 1

原创 JavaScript Web APIs(一)

在html5中推出来了专门的data-自定义属性在标签上一律以data-开头在DOM对象上一律以dataset对象方式获取。

2024-03-11 20:52:31 820 1

原创 JavaScript 基础(七)

引用类型(复杂数据类型):通过 new 关键字创建的对象(系统对象、自定义对象),如 Object、Array、Date等。2、堆(操作系统):存储复杂类型(对象),一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收。声明对象,并添加了若干属性后,可以使用 . 获得对象中属性对应的值,我称之为属性访问。数据描述性的信息称为属性,如人的姓名、身高、年龄、性别等,一般是名词性的。数据行为性的信息称为方法,如跑步、唱歌等,一般是动词性的,其本质是函数。人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能。

2024-03-10 16:06:53 862 1

原创 JavaScript 基础(六)

比如我们前面使用的 alert() 、 prompt() 和 console.log() 都是一些 js 函数,只不过已经封装好了,我们直接使用的。函数体是函数的构成部分,它负责将相同或相似代码“包裹”起来,直到函数调用时函数体内的代码才会被执行。函数可以把具有相同或相似逻辑的代码“包裹”起来,通过函数调用执行这些被“包裹”的代码逻辑,这么做的优势是有利于精简代码方便复用。通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。

2024-03-10 15:30:11 938 1

原创 JavaScript 基础(五)

数组:(Array)是一种可以按顺序保存数据的数据类型为什么要数组?思考:如果我想保存一个班里所有同学的姓名怎么办?场景:如果有多个数据可以用数组保存起来,然后放到一个变量中,管理非常方便。

2024-03-10 14:53:33 711 1

原创 JavaScript 基础(四)

赋值运算符:对变量进行赋值的运算符。已经学过的赋值运算符:=将等号右边的值赋予给左边, 要求左边必须是一个容器其他赋值运算符:+=、使用这些运算符可以在对变量赋值时进行快速操作举例:1. 以前我们让一个变量加 1 如何做的?现在我们有一个简单的写法啦~~~1.2 一元运算符众多的 JavaScript 的运算符可以根据所需表达式的个数,分为一元运算符、二元运算符、三元运算符。二元运算符:一元运算符:正负号问题:我们以前让一个变量每次+1 ,以前我们是怎么做的呢?

2024-03-09 10:54:34 983

原创 JavaScript 基础(三)

概念:使用 const 声明的变量称为“常量”。使用场景:当某个变量永远不会改变的时候,就可以使用 const 来声明,而不是let。命名规范:和变量一致常量使用:注意:常量不允许重新赋值,声明的时候必须赋值(初始化)小技巧:不需要重新赋值的数据使用const。

2024-03-08 21:08:03 920

原创 JavaScript 基础(二)

1.1 变量是什么?问题1:用户输入的数据我们如何存储起来?答案:变量白话:变量就是一个装东西的盒子。通俗:变量是计算机中用来存储数据的“容器”,它可以让计算机变得有记忆。注意:变量不是数据本身,它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子问题:变量有什么用呢?答案:用来存放数据的。注意变量指的是容器而不是数据。

2024-03-07 11:23:45 821 2

原创 JavaScript 基础(一)

DOM 操作文档,比如对页面元素进行移动、大小、添加删除等操作BOM 操作浏览器,比如页面弹窗,检测窗口宽度、存储数据到浏览器等等

2024-03-06 21:27:44 805 2

空空如也

空空如也

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

TA关注的人

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