- 博客(23)
- 收藏
- 关注
RSS订阅原创 js-es6知识汇总（3）新增语法
ES6知识汇总 新增语法let 块级作用域的引入{var a = 5;let b = 6;}console.log(a); //5console.log(b); //b is undefinedlet声明的变量只在所处于的块级有效注：使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性。不存在变量提升console.log(a); // a is not defined let a = 20;暂时性死区var声明的变量可以在声
2021-08-16 12:28:44
255
原创 深拷贝与浅拷贝
深拷贝与浅拷贝原理：浅拷贝只是拷贝一层, 更深层次的 对象级别的 只能拷贝引用. 把对象的地址进行拷贝，拷贝前后的地址指向同一个数据，一旦对新数据进行修改会改变旧数据。深拷贝拷贝多层, 每一级别的数据都会拷贝.新数据的修改不会影响旧数据浅拷贝例子var obj = { id: 1, name: 'andy', msg: { age: 18 }
2021-08-14 22:07:22
143
原创 项目笔记——表单提交-字符串去掉前后空格
字符串去掉前后空格.trim应用于表单提交去掉前后空格创建一个简易表单进行判断如下：var input1 = document.querySelector('input');var btn1 = document.querySelector('button');var div1 = document.querySelector('div');btn1.onclick=function(){ if(input1.value === ""){ div1.innerHTML = '请输入内
2021-08-14 11:01:26
1405
原创 js-es5-数组常用方法（迭代方法、栈方法、队列方法）
es5-数组常用方法（迭代方法、栈方法、队列方法）一、迭代方法迭代（遍历）方法：forEach（）、map()、filter()、some()、every()1.数组方法forEach遍历数组 没有返回值//通常用来渲染全部数据var arr = [1, 2, 3];var sum = 0;arr.forEach(function(value, index, array) {//参数一是:数组元素 每一遍打印一个元素console.log('每个数组元素' + value);//参数二
2021-08-13 19:17:33
122
原创 js-es6知识汇总（1） 原型与原型链
js-es6知识汇总（1）原型与原型链1.面向过程与面向对象1.1面向过程面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用。1.2面向对象面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。1.3面向过程与面向对象对比面向过程面向对象优点性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程。易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的
2021-08-12 17:26:51
169
原创 js-本地存储
本地存储随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。1.本地存储特性1、数据存储在用户浏览器中2、设置、读取方便、甚至页面刷新不丢失数据3、容量较大，sessionStorage约5M、localStorage约20M4、只能存储字符串，可以将对象JSON.stringify() 编码后存储2.window.sessionStorage1、生命周期为关闭浏览器窗口2、在同一个窗
2021-08-10 18:37:56
70
原创 js- offset、client、scroll属性的使用（页面定位/跟随/滚动/悬停/返回顶部）
offset client scroll 属性的使用一、元素偏移量 offsetoffset 概述元素偏移量， 使用 offset相关属性可以动态的得到该元素的位置（偏移）、大小等。获得元素离带有定位的父元素的位置获得元素自身的大小（宽度高度）注意：返回的数值都不带单位offset属性是只读属性，只能获取不能赋值二、client元素可视区client概述client ：客户端，使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client的属性可以动态的得到该元
2021-08-09 19:48:58
190
原创 js-常用鼠标、键盘事件
常用鼠标、键盘事件鼠标事件键盘事件//展示代码//1. keyup 按键弹起的时候触发 document.addEventListener('keyup', function() { console.log('弹起');})//3. keypress 按键按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头啊document.addEventListener('keypress', function() { console.log('按下了press');}
2021-08-08 16:00:35
77
原创 项目笔记——图片懒加载
图片懒加载1.使用Vue-Lazyload库npm install vue-lazyload --save2.全局注册引用在main.js文件中//1import VueLazyload from 'vue-lazyload'//2Vue.use(VueLazyload)//3 error，loading等的配置可以不用写 Vue.use(VueLazyload, { loading: require('./assets/img/common/placeholder.png'),
2021-08-01 15:08:23
62
原创 前端学习_web移动布局 _bootstrap布局
前端学习——web移动布局—bootstrap布局1. 响应式布局容器响应式布局需父级做为布局容器配合子级元素来实现变化效果。在不同屏幕下，通过媒体查询改变布局容器的大小，再改变里面子元素的排列方式和大小。从而实现不同屏幕下不同的页面布局。通常父容器版心的尺寸划分超小屏幕（手机，小于 768px）：设置宽度为 100%小屏幕（平板，大于等于 768px）：设置宽度为 750px中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px大屏幕（大桌面显示器，大于等于 1200px
2021-05-05 00:03:51
179
原创 前端学习_web移动布局 _rem适配布局
前端学习——web—rem布局rem单位rem (root em)是一个相对单位，rem的基准是相对于html元素的字体大小。比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。（等比例缩放）/* 根html 为 12px */html { font-size: 12px;}/* 此时 div 的字体大小就是 24px */ div { font-size: 2rem;}rem的优势：父元
2021-05-04 13:19:39
115
原创 前端学习_web移动布局 _ flex布局
前端学习——web—flex布局flex布局原理flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局采用 Flex 布局的元素，称为 Flex 容器（flexcontainer），简称"容器"。它的所有子元素自动成
2021-05-02 22:14:32
306
原创 前端学习_CSS3_3d效果
前端学习——CSS3_3D转换效果三维坐标系x 轴：水平向右 – 注意：x 轴右边是正值，左边是负值y 轴：垂直向下 – 注意：y 轴下面是正值，上面是负值z 轴：垂直屏幕 – 注意：往外边的是正值，往里面的是负值3D转换知识要点3D位移：translate3d(x, y, z)3D 旋转：rotate3d(x, y, z)透视：perspctive3D呈现 transfrom-style3D移动 translate3d3D移动就是在2D移动的基础上多加了
2021-05-01 23:04:51
135
原创 前端学习_CSS3_动画效果
前端学习——CSS3_动画效果动画(animation)动画的基本使用先定义动画在调用定义好的动画语法格式(定义动画)@keyframes 动画名称 { 0% { width: 100px; } 100% { width: 200px }}语法格式(使用动画)div { /* 调用动画 */ animation-name: 动画名称; /* 持续时间 */ animation-duration: 持续
2021-05-01 19:15:54
115
原创 前端学习_CSS3_2d转换效果（移动、旋转、缩放）
前端学习——CSS3_2D转换效果2D转换(transform)2D转换是改变标签在二维平面上的位置和形状移动： translate旋转：rotate缩放： scale1. 移动 translate 语法 transform: translate(x, y) transform: translateX(n) transfrom: translateY(n)translate`最大的优点就是不影响其他元素的位置translate中的100%单位，是相对于本身的宽度和高度来进行计
2021-05-01 16:42:37
458
原创 前端学习_css笔记（6）精灵图
前端学习_css笔记（5）CSS精灵技术（sprite) 当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。精灵技术有效地减少服务器接受和发送请求的次数，提高页面的加载速度出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。1.精灵技术CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背
2021-04-28 20:08:08
109
原创 前端学习_css笔记（4）显示与隐藏
前端学习_css笔记（4）1.元素的显示与隐藏功能应用：下拉菜单、广告…1.1 display 显示（常用）display 设置或检索对象是否及如何显示。display: none 隐藏对象display：block 除了转换为块级元素之外，同时还有显示元素的意思。特点： 隐藏之后，不再保留位置。实际开发场景：配合js做特效，比如下拉菜单的使用对一组兄弟div进行点击下拉菜单设计<script type="text/javascript">
2021-04-28 18:59:57
150
1
原创 前端学习_css笔记（3）盒子模型
前端学习_css笔记（3）盒子模型（Box Model）盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。盒子里面的文字和图片等元素是 内容区域盒子的厚度称为盒子的边框盒子内容与边框的距离是内边距padding盒子与盒子之间的距离是外边距margin1. 盒子边框（border）语法：border : border-width || border-style || border-color 属性作用borde
2021-04-28 17:47:31
178
原创 前端学习_css笔记（2）文本与背景
前端学习_css笔记（2）文本与背景1.font文本属性表示注意点font-size字号我们通常用的单位是px 像素font-family字体如1.1所注明font-weight字体粗细加粗为 700 或者 bold 不加粗 是 normal 或者 400 数字表示时不需要单位font-style字体样式属性 倾斜：italic 不倾斜：normal 工作中常用 normalfont字体连写1. 字体连写是有顺序的 不能随意换位
2021-04-28 17:46:52
81
原创 前端学习_css笔记（1）
前端学习_css笔记（1）1. 外部样式表（外链式）其基本语法格式如下：放在head头部标签中，href 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。<head> <link rel="stylesheet" type="text/css" href="css文件路径"></head>2. CSS选择器选择器分为基础选择器和复合选择2. 1 CSS基础选择器1）标签选择器概念：标签选择器（元素选择器）为页面中某一类
2021-04-28 17:44:58
80
原创 前端学习——html笔记
1.HTML常用标签1.1 排版标签排版标签总结标签名定义说明h标题标签作为标题使用，并且依据重要性递减p段落标签可以把 HTML 文档分割为若干段落hr水平线生成水平线br换行标签充当换行符divdiv标签盒子spanspan标签盒子1）标题标签h单词缩写： head 头部. 标题为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，即标题标签语义： 作为标题使用，并且依据
2021-04-27 15:33:01
120
原创 前端学习——ico图标与字体图标
前端学习——ico图标与字体图标目标：能会引入ico图标能使用字体图标1. ico图标在网站的首页加上/favicon.ico 可以获取不同网站的ico图标1). 使用ico图标首先把favicon.ico 这个图标放到根目录下。再html里 head 之间 引入 代码。 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> 2). 制作ico图标自己做的图片
2021-04-25 13:01:22
1544
原创 基于TCP协议的mfc多人聊天室
基于TCP协议的MFC多人聊天室简易的mfc聊天室思路实现前言一、socket通信二、效果展示三、代码实现1.ClientSocket.cpp 客户端套接字2.ServerSocket.cpp 监听套接字3.ClientDlg.cpp 客户端设计总结后续改进简易的mfc聊天室思路实现目录简易的mfc聊天室思路实现前言一、socket通信二、效果展示三、代码实现1.ClientSocket.cpp 客户端套接字2.ServerSocket.cpp 监听套接字3.ClientDlg.cpp 客户端设计总结后
2021-04-24 22:08:37
3871
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人