front _end
文章平均质量分 59
@sudo
stay rational,让进步发生
展开
-
合并数组e
const arr1=[1,2,3]const arr2=[4,5,6]arr.push(arr2) 此时arr为 [1,2,3,[4,5,6]]const newArr = [...arr1, ...arr2] //此时为 [1,2,3,4,5,6]把两个数组合成一个大数组用 [...数组1 , ...数组2]原创 2022-03-23 13:51:36 · 266 阅读 · 0 评论 -
Vue前端案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>学员.原创 2022-03-22 18:59:53 · 2243 阅读 · 0 评论 -
关于each的
// $('做循环的Dom元素').each(function(i,item){ // }) // $.each(循环的数据,function(循环的索引,循环的每一项){ // })<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewp...原创 2022-03-22 16:08:51 · 108 阅读 · 0 评论 -
flex布局
flex布局父项常见属性以下由6个属性是对父元素设置的1.flex-direction:设置主轴的方向 2justify-content:设置主轴上的子元素排列方式3 .flex-wrap:设置子元素是否换行4. align-content:设置侧轴上的子元素的排列方式(多行)5.align-items:设置侧轴上的子元素排列方式(单行)6.flex-flow:复合属性,相当于同时设置了 flex-direction 和 flex-wrapflex-direction 设置主..原创 2022-03-11 09:08:13 · 104 阅读 · 0 评论 -
多事件触发
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .login-header { width: 100%; text-align: center; height: 30px; .原创 2022-03-07 09:43:58 · 72 阅读 · 0 评论 -
css高级技巧
为什么需要精灵图:一个网页中往往会应用很多小的背景图像作为修饰。为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了 CSS 精灵技术 -->核心原理:将网页中的一些小背景图像整合到一张大图中 ,这样服务器只需要一次请求就可以了。精灵技术目的: 为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。移动背景图片位置, 此时可以使用 background-position 。.使用精灵图的时候需要精确测原创 2022-03-04 20:16:35 · 107 阅读 · 0 评论 -
传统网页布局的三种方式
传统网页布局的三种方式 1.普通流(标准流) 2.浮动 3. 定位标准流(普通流/文档流)所谓的标准流: 就是标签按照规定好默认方式排列.1. 块级元素会独占一行,从上向下顺序排列。 常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table2. 行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行。 常用元素:span、a、i、em 等以上都是标准流布局,标准流是最基本的布局方式。浮动(float)为什么需要浮动?假如如何让多个块级盒子(div原创 2022-03-04 19:37:54 · 6733 阅读 · 0 评论 -
盒子模型
盒子模型网页布局的核心本质: 就是利用 CSS 摆盒子盒子模型:盒子模型本质上是一个盒子,封装周围的 HTML 元素,它包括:边框、外边距、内边距、和 实际内容(border边框 padding内边距 外边距 margin content 内容)盒子模型(Box Model)组成 所谓盒子模型:就是把 HTML 页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器,它包括:边框、外边距、内边距、和实际内容边框样式 none:没有边框即忽略所有边框的宽度(默认值) solid:边框为原创 2022-03-04 18:08:37 · 106 阅读 · 0 评论 -
vue2.0
什么是vue?是一套用于构建用户界面的前端框架vue 简介:vue 的特性:---->vue 框架的特性,主要体现在两方面:① 数据驱动视图 ② 双向数据绑定数据驱动视图:在使用了 vue 的页面中,vue 会监听数据的变化,从而自动重新渲染页面的结构好处:当页面数据发生变化时,页面会自动重新渲染!---->注意:数据驱动视图是单向的数据绑定。双向数据绑定: 在填写表单时,双向数据绑定可以辅助开发者在不操作 DOM 的前提下,自动把用户填写的内容同步到数据源 中。示意图如原创 2022-02-23 20:33:55 · 154 阅读 · 0 评论 -
Jquery
JavaScript 库:仓库:可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。JavaScript库:即 library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如获取元素等。简单理解: 就是一个JS 文件,里面对我们原生js代码进行了封装,存放到里面。可以快速高效的使用这些封装好的功能了。比如 jQuery,就是为了快速方便的操作DOM,里面基本原创 2022-02-23 11:03:43 · 77 阅读 · 0 评论