前端小实战-CSDN博客

原创 JS学习笔记十二——DOM 操作

一、DOM 操作DOM 全名为 Document Object Model，是一整套操作文档流相关内容的属性和方法，这些方法可以用于操作元素修改样式、修改属性、改变位置、添加事件等。DOM 操作内容：获取元素可以确定要操作的元素，是重要步骤。方式：（1）根据 id 名获取：document.getElementById（‘id 名称’）可以获取文档流中 id 名对应的一个元素，若有 id 对应的元素，则返回值为该元素，若没有 id 对应的元素，则返回值是 null；（2）根据元素类名获取

2022-02-07 20:41:07 342

原创 JS学习笔记十一——BOM 操作

BOM 操作BOM 操作是指操作浏览器相关的内容，其操作范畴包括了：浏览器滚动条、页面历史会退和前进、开启新标签页和关闭当前标签页等。BOM 全名为 Browser Object Model，是一整套操作浏览器相关内容的属性和方法，这些方法可以用于操作浏览器历史记录、滚动条、页面跳转、标签页的开启和关闭等。BOM 操作内容：获取浏览器的可视窗口尺寸可视窗口指的是除控制台和浏览器头部外，可显示页面内容的窗口位置，其中包含了浏览器滚动条。

2022-02-07 17:44:47 1675 2

原创 JS学习笔记十——时间常用方法

前言时间本身是 JS 中的一个数据类型 Date，是一种引用数据类型，其创建方式有两种：一是 new Date（），创建时间对象，且为当前终端的时间，即电脑时间；二是 new Date（年，月，日，时，分，秒），通过传递参数来创建一个指定时间节点的时间对象，其中，月份为 0 - 11 表示 1 - 12 月一、时间常用方法JS 中提供的可对时间快速操作的方法。（一）获取时间getFullYear（）语法：时间对象.getFullYear（）作用：获取到时间对象中的年份信息返回值：时间对象

2022-02-07 16:34:15 1250

原创 JS学习笔记九——数字常用方法

一、数字常用方法JS 中提供的可对数字快速操作的方法。random（）语法：Math.random（）作用：获取 0 - 1 之间的随机小数，包含 0，但不包含 1返回值：0 - 1 之间的随机小数注意：小数点后最多只保留 17 位round（）语法：Math.round（数字）作用：对数字进行四舍五入的取整返回值：四舍五入后的整数ceil（）语法：Math.ceil（数字）作用：对数字进行向上取整返回值：向上取整后的整数

2022-02-07 15:54:05 572

原创 JS学习笔记八——字符串常用方法

一、字符串常用方法JS 中提供的可对字符串快速操作的方法，所有方法都不会改变原始字符串，且都以返回值形式出现结果，其中，方法7 - 9作用一致，但参数不同。charAt（）语法：字符串.charAt（索引）作用：获取对应索引位置的字符返回值：对应索引位置的字符toLowerCase（）语法：字符串.toLowerCase（）作用：将字符串中的所有字母转换为小写返回值：转换好的字符串toUpperCase（）语法：字符串.toUpperCase（）作用：将字符串中的所有字母转换为大写

2022-02-07 15:37:27 333

原创 JS学习笔记七——数组排序

数组排序前言一、冒泡排序二、选择排序三、结语前言数组排序指的是通过排序算法将数组从乱序变为有规律的顺序，数组排序分为很多种，其中包括了冒泡排序和选择排序。数组的相关知识可见数组具体介绍一、冒泡排序思路步骤（1）把数组的前两个数据拿出来比较，例如：使用大于比较运算符比较，若结果为 false，什么都不做，若结果为 true，则交换两个数字的位置，使得较小的数字位置靠前；（2）重复第一步操作，继续比较后面的数字，直到比较到最后的位置，表示一轮结束，此时，数组中最大的数字一定在最后一位；

2022-02-07 14:31:15 479

原创 JS学习笔记六——数组常用方法

一、数组常用方法JS 中提供的可对数组快速操作的方法。push（）语法：数组名.push（数据）作用：将数据追加到数组的末尾返回值：追加数据后数组的最新长度pop（）语法：数组名.pop（）作用：删除数组的最后一个数据返回值：被删除的数据unshift（）语法：数组名.unshift（数据）作用：在数组的最前方添加一个数据返回值：添加数据后数组的最新长度shift（）语法：数组名.shift（）作用：删除数组最前面的一个数据返回值：被删除的数据

2022-02-06 22:40:16 232

原创 JS学习笔记五——JavaScript 数据类型

JavaScript 数据类型一、数据类型介绍二、基本数据类型三、引用数据类型四、数据类型转换一、数据类型介绍JS 中分为基本数据类型和引用数据类型，基本数据类型中又细分为数值类型、字符串类型、布尔类型和空类型。JS 中要想检测变量的数据类型，需要使用 typeof 关键字，其语法为：typeof 要检测的变量；所得结果便是该变量存储的数据对应的数据类型。注意：空类型中，undefined 的数据类型是 undefined，而 null 的数据类型是 object。

2022-02-06 22:17:16 289

原创 JS学习笔记四——函数及作用域

JavaScript 函数及作用域一、函数介绍二、递归函数三、作用域一、函数介绍函数是 JS 中的一个数据类型，其就类似一个盒子，其中可以承载一段代码，通过函数名来区分不同的函数。函数分为两个阶段，函数定义阶段和函数调用阶段，函数在定义后不会立即执行其中的代码，只在函数调用后才执行相应代码。函数定义阶段函数定义是指把代码装在函数中，并通过给函数命名，来确定一个函数。当函数想要返回一个值时，可以设置 return 语句放置返回的结果。

2022-02-06 21:34:58 242

原创 JS学习笔记三——条件语句与循环语句

JavaScript 条件语句与循环语句一、条件分支语句二、循环结构语句根据条件选择执行哪些代码。if 语句常与 else 搭配，if 后的条件为 true 时，执行紧邻的{ }中的代码，为 false 时，紧邻的后方有 else 语句，则执行 else 中的代码，没有 else 时不执行代码书写形式：（1）if（）{…}（2）if（）{…} else {…}（3）if（）{…} else if（）{…}（4）if（）{…} else if（）{…} els

2022-02-06 17:31:15 158

原创 JS学习笔记二——JavaScript 基础知识

一、JavaScript 变量二、JavaScript 的输出三、JavaScript 运算符变量是指在程序运行过程中，让计算机保存一个中间值。语法：var 变量名 = 变量值；注意：1、变量可二次赋值，即设新的变量值；2、变量只可由数字、字母、下划线、美元符号组成；3、变量不能以数字开头；4、变量严格区分大小写，同字母不同大小写的变量名不同；5、变量不能是关键字，如：var；6、变量名尽量有意义，可为英文或拼音，不可为拼音缩写；

2022-02-06 16:21:17 144

原创 JS学习笔记一——JavaScript 组成部分及书写位置

JavaScript的组成部分BOM、DOM、ECMAScript 是 JavaScript 的三大核心组成部分。三大组成部分：1、BOM（Browser Object Model）指的是操作浏览器的内容，例如：控制网页滚动条滚动，网页的滚动条是浏览器自带的内容，而不是人为代码生成的。2、DOM（Document Object Model）指的是操作文档流的内容，例如：JS操控轮播图定时切换。3、ECMAScript 是 JS 代码的书写语法与规则。JavaScript 书写位置 1. 行内式

2022-02-04 23:17:26 247

原创 HTML学习笔记八——表单标签

一、表单form 标签，主要用于收集用户信息，其内部可存放许多表单控件，例如：input 标签等。（一）form 标签属性：（1）action，定义表单要提交的地址，必须设置；（2）method，提交表单的方式，其取值有 get 和 post；（二）input 标签（三）下拉菜单（四）文本域（五）字段集

2022-02-04 22:32:52 328

原创 CSS学习笔记九——布局形式

两栏布局与三栏布局一、两栏布局将窗口划分为左右两栏，常用于左边为导航栏，右边为内容的形式。设置左边固定，右边自适应宽高的布局方法一：先设置窗口自适应，左边盒子设置固定宽度，右边盒子通过 margin-left 空出左边位置且宽度自适应，左右盒子均设置高度百分百及左浮动；方法二：先设置窗口自适应，左边盒子设置固定宽度，右边盒子宽度设为 calc（100% - 左边盒子的固定宽度），左右盒子均设置高度百分百及左浮动；calc 函数用于动态计算长度值，其运算符前后需保留一个空格

2022-02-04 17:02:54 583

原创 CSS学习笔记八——宽高自适应

宽高自适应一、宽度自适应二、高度自适应三、浮动元素的高度自适应一、宽度自适应不写宽度或者写 width：auto就表示宽度自适应，可用于横栏或导航栏。与 width：100%不同，设为100%已经固定了宽度，宽度始终不变，而宽度自适应是会自动更改宽度，前者在设置 padding 时横向出现滚动条，后者在设置 padding 时会自动压缩宽度大小。有 min-width、max-width 属性，max-width 用于图片上可避免拉大屏幕时图片失真。二、高度自适应

2022-02-04 16:29:36 12733

原创 PhotoShop便捷操作

一、基本操作 1. 打开图片：在图片所在文件夹，鼠标移至图片后右键选择 PhotoShop 作为打开方式或者在 PS 软件中点击文件 - 打开后，选择对应图片； 2. 拖动标尺：标尺显示后，可以在出现的标尺位置点击并向图片位置拖出一条标尺，拉到要测量的位置； 3. 设置选区：使用矩形选框工具（左侧条栏第二个）； 4. 查看数据大小：点击窗口 - 信息；二、快捷键 1. 图片放大：Ctrl + 加号或者 Alt + 鼠标滚轮向上；

2022-01-29 23:01:28 402

原创前端实战：小实例5——锚点导航

前言锚点定位用于网站某一模块的定位，让用户能够通过锚点直接跳到相应模块，从而实现页面内跳转，常在网页内容较长时使用。多个锚点显示可用一个无序列表显示，利用 ul 和 li 标签，在 li 标签中使用 a 标签实现锚点。实现思路1. 使用 div 包住锚点导航栏，在其中放置列表 ul 和 li；2. 在 li 标签中放置 a 标签，href 属性设置为 #锚点值使其指向锚点处；3. 设置多个 div 模块模拟网页内容；4. 在 div 模块中设置 id 或在 div 模块中添加 a 标签并设置

2022-01-29 21:01:50 2738

原创前端实战：小实例4——三角形图标绘制

前言给一个 div 元素设置一定的宽度、高度及四条不同颜色的边框时，每个颜色对应的边框形状为梯形（如下图左），将元素的宽高设为 0 后，边框形状变为三角形（如下图右）。实现思路1. 设置一个边框颜色不同且边框形状为三角形的正方形；2. 保留其中一个三角形的背景色，将其余三个的背景色改为其所覆盖的元素的背景色或改为透明色；3. 将绘制好的小三角形通过绝对定位放置在想要的位置

2022-01-29 17:49:56 326

原创 CSS学习笔记七——定位属性

定位属性position 属性是定位属性，可让某个元素显示在某个位置。其取值有：static、absolute、relative、fixed 和 sticky。 1. static 静态定位（默认值）按照文档流顺序，从左到右、从上到下，与元素显示类型有关；不支持 top、left、right、bottom；2. relative 相对定位相对自己原来的位置移动；不脱离文档流，仍然占据文档流位置，下一元素不会顶上来；可以覆盖在其它元素上；

2022-01-29 17:17:57 946

原创前端实战：小实例3——顶部栏

前言顶部栏是用户进入网站后最先看到的部分，一般包含了网站 logo、搜索框、登录注册按钮及其他内容等。通常制作顶部栏时，会将其划分为两部分，左边放置网站 logo，右边放置其余内容部分。内容部分一般可看作一个链接列表，在 HTML 使用 ul 标签和 li 标签元素进行表示，对应标签元素的具体用法可查看 HTML常见标签介绍。而搜索框则在 HTML 使用 input 标签元素进行表示，对应标签元素的具体用法可查看 HTML常见标签介绍2]

2022-01-29 15:57:20 756

原创 CSS学习笔记六——元素显示类型

元素显示类型一、块元素 1. 块元素在网页中以块的形式显示，即矩形区域显示； 2. 默认情况下，块元素独占一行，且按顺序自上而下排列； 3. 块元素可自定义宽高； 4. 块元素一般作为其他元素的容器，可以容纳其它内联元素和块元素，这种容器也可称为盒子 5. 块元素会默认添加 display：block 属性值，但 li 标签会默认添加 display：list-item 属性值，表示让该元素显示为列表类型，通常该属性值也归类在块元素中； 6. 注意 p 标签中可以放文本，但不能放块元素；

2022-01-27 23:12:34 579

原创 CSS学习笔记五——CSS常见属性二

CSS常见属性二一、浮动与清浮动属性浮动属性作用：1、让网页的其它文本环绕某一元素显示；2、让竖着放置的元素横向展示；浮动属性就是 float 属性，其取值有 left、right、none（默认）。多个元素设置浮动时，会平行并列显示，见缝插针，先浮动的最靠边。一个元素在设置了 float 属性后会漂浮起来，其下方的元素会顶上其所在的位置，此时，漂浮起来的元素可能会覆盖其下方元素的一部分（高度塌陷1），且下方元素的文字会被挤到一边显示。

2022-01-27 18:01:36 142

原创 HTML学习笔记七——特殊符号

2022-01-27 17:21:21 432

原创 HTML学习笔记六——HTML标签扩展

一、pre 标签pre 标签是预格式化文本标签，可以用于保留内容中的空格、tab、回车，常用于技术性文档的显示。

2022-01-27 17:13:20 272

原创 CSS学习笔记四——盒子模型

一、盒子模型内边距padding 属性，设置元素内容与边框之间的距离，即内边距，如：padding: 20px。该属性会改变盒子占用的位置。取值：（1）1个值，4个方向内边距一致（2）2个值，上下一致，左右一致（3）3个值，按照上左右下的顺序设值（4）4个值，按照上右下左的顺序，顺时针设值

2022-01-27 15:40:09 555

原创 CSS学习笔记三——CSS常见属性一

一、文本属性 1. 字体大小 font-size：单位是 px，浏览器默认16px，设计图常用字号是12px； 2. 字体 font-family：字体中有空格时，需加双引号，且可设置多重字体，用逗号间隔，浏览器解析时，先以第一个字体解析，没有该字体时解析第2个字体，以此类推； 3. 颜色 color：三种取色方式，一是写对应颜色的英文单词，如：red、purple；二是十六进制写法（0-9,A-F），任意搭配，如：#00FFAA，#FFFFFF（六个值一样可省略为 #FFF）；三是 rgb 配色

2022-01-25 21:29:18 220

weixin_43328954的博客