- 博客(76)
- 收藏
- 关注
RSS订阅
原创 CSS中flex布局
flex布局，也称为弹性盒子布局，这是一种简单而强大的布局方式，我们通过弹性盒指明控件的分布方式、内容的对齐方式和元素的排布顺序，把不同的组件放置在页面中，内容可以轻易的横向或者是纵向的进行排布。基本属性flex依赖父子元素，在元素上声明display:flex或者display：inline-flex便可以激活弹性和子布局，而这个元素称之为弹性容器，弹性容器下面的子元素就是弹性盒子布局元...
2019-12-31 16:06:03
387
2
原创 js中indexOf()的使用
indexOf一般用于查看字符在字符串或者数组中首次出现的位置，如果在字符串或者数组中存在就返回该字符所处的位置，如果该字符子啊数组中不存在就会返回-1；而且indexOf还能区分大小写，由此我们可以用它来进行数组的去重，如下：var Arr = [1,2,3,3,2,1];var dataArr=[];for(i=0;i<Arr.length;i++){ if(dat...
2019-11-26 10:56:29
1717
1
原创 前端开发同步和异步的区别？
在前端开发中同步：一般指的是在代码运行的过程中，从上到下逐步运行代码，每一部分代码运行完成之后，下面的代码才能开始运行异步：指的是当我们需要一些代码在执行的时候不会影响其他代码的执行，也就是在执行代码的同时，可以进行其他的代码的执行，不用等待代码执行完成之后才执行之后的代码，就像我们人一样，可以一边看电视剧一边吃东西一样，互不干扰，这种方式就是异步。而在前端开发中常见的异步一般常见的包...
2019-11-25 14:44:58
6557
1
原创 CSS栅格布局grid详解
栅格布局分为常规栅格和行内栅格，值分别为display:grid；和display:inline-grid；但是大多数栅格布局都是块级的。这里有一个需要注意的是，如果我们给一个标签设置了栅格布局，有的css属性和功能也就无法使用了，具体如下：栅格容器上的所有column属性（column-count、columns等）都会被忽略。栅格元素没有::first-line和::first-let...
2019-11-13 17:33:51
3086
1
原创 数据缓存cookies，sessionStorage和localStorage的共同点的不同点
共同点：都是保存在浏览器上的数据，且都是同源的不同点： cookies数据始终在同源的http请求中携带，cookies可以在浏览器和服务器之间传递数据，且传递数据较小，一般不超过4k，有路径的概念，可以限制cookies只属于某个路径下面的 sessionStorage和localStorage都是把数据存到了本地，不会自动把数据发到服务器，数据也有大小限...
2019-11-11 15:01:29
234
原创 纯CSS实现幻灯片效果
先上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>css幻灯片</title> <link rel="stylesheet" href=""></head><style>...
2019-11-11 11:19:05
1250
原创 前端项目减少页面加载事件的办法，优化页面的方法
1、优化图片（gif格式的图片需要的颜色较少，一般都比较小）2、优化CSS：像margin-top、margin-bottom这种直接合并到一起，公用的样式提出来放到一个一起写3、网址后面加一个'/'，如'www.baidu.com/'，这样可以直接判断这个文件是什么文件类型，或者是什么目录4、减少http请求（合并文件、合并图片）5、标明高度和宽度（如果浏览器没有找到这两个参数，...
2019-11-11 10:08:43
358
原创 小程序开发学习：通用基本数据封装、基本样式封装和模板代码引入
1、首先学习的是小程序里面的事件，一般分为冒泡事件和非冒泡事件冒泡事件： bindtap点击事件为代表，还包括其他的冒泡事件如下： touchstart 手指触摸动作开始 touchmove 手指触摸后移动 touchcancel 手指触摸动作被打断，如来电提醒，弹窗 touchend 手...
2019-11-08 18:25:10
408
原创 js中创建对象的几种方式
1、字面量方式创建，也就是我们所常说的基本创建方式 但是这个方式有一个缺点，就是要创建多个对象的时候，需要每一个对象里面的属性都要重新声明一下，直接向中添加属性和方法，这样就造成了代码的冗余，而且这样创建对象的话，也必须先知道对象的属性和方法，否则无法创建；var object = new Object();object.name='lili';//向对象中添加属性和方法ob...
2019-10-30 15:09:58
486
原创 css淘宝通用样式
淘宝的样式初始化： body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form,fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }body, button, input,...
2019-10-28 14:09:02
2457
原创 js数组排序的几种方法
1、冒泡排序以从小到大排序为例，冒泡排序的原理就是通过两层循环把数组中两两相邻的元素进行比较，是的大的元素放到后边，元素交换位置，从而一步步的交换元素的位置，使得最大的元素放到数组的末尾，这样内部的循环就进行了一轮，再根据外部的循环依次再把次大一点的元素放到数组的末尾，从而实现数组的逐步排序。代码如下：// 冒泡排序var arr = [52,3,8,57,75,2,1];for (...
2019-10-23 14:12:13
12099
原创 CSS实现三角形
实现三角形的原理就是不给标签元素设置高度，然后给标签只设置外边框，从而实现三角形，例如：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>三角形实现</title> <style type="text/css">...
2019-10-22 10:31:09
100
原创 CSS实现正方形自适应大小
1、给标签宽度但是不设置高度，设置内边距padding，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>自适应正方形</title> <style type="text/css"> *{ ma...
2019-10-22 09:25:14
563
原创 CSS清除浮动方法
1、在浮动元素后面添加一个空的标签，并且让这个标签样式为：clear:both;2、父元素直接设置一个高度，放置子元素高度超过父元素高度，无法正常显示3、父元素overflow:hidden；超出的部分隐藏，但是有一个缺点，当内部浮动元素过多的时候就会造成多出的浮动元素不会自动换行，从而造成超出内容的元素显示不出来；4、伪类元素:after清楚浮动，其实和第一个方法原理类似如下：...
2019-10-21 14:42:28
121
原创 CSS权重值计算和选择器优先级
一、权重的值计算以及选择器权重值大小1、!important放在样式的最后面是最优先的，权重值是10000；2、内联样式权重值1000，优先级仅次于！important，一般都是在标签内部书写，如：‘<div style="color:red;"></div>’3、id选择器权重值是100，如：#first；4、类选择器、伪类选择器、属性选择器的权重值是10...
2019-10-21 13:58:43
313
原创 CSS元素垂直居中几种方法！！
一、子元素设置vertical-align: middle;但是有一个前提必须是子元素为行内元素；并且单独的设置vertical-align: middle;是无效的；如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>垂直居中<...
2019-10-21 09:42:18
161
原创 CSS盒子模型类型和解析
css盒子模型分为两种：W3c标准盒子模型和IE盒子模型，下面来回顾一下盒子模型的区别。其实盒子模型主要包括一下几个部分：margin(外边距) - 清除边框外的区域，外边距是透明的。border(边框) - 围绕在内边距和内容外的边框。padding(内边距) - 清除内容周围的区域，内边距是透明的。content(内容) - 盒子的内容，显示文本和图像。第一种W3C盒子模型...
2019-10-17 10:08:33
2938
1
原创 h5手机端微信自定义分享
一、绑定域名 首先要确保微信公众号后台的域名和自己代码里分享链接的域名要保持一致二、引入微信端js文件<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>三、根据微信sdk获取微信分享的配置参数：appId、生成签名的时间戳、生成签名的随机串、签名，一般这些...
2019-10-16 16:14:46
776
原创 js中的深拷贝和浅拷贝区别
js中的深拷贝和浅拷贝与值传递和引用传递有着些许的关联，都是根据堆栈中数据的储存来传递数据。下面主要说一下我对深拷贝和浅拷贝的理解：简单举个例子来说明；当我们声明一个a变量并且赋值，并且让b等于a，因为a，b都是基本数据类型所以数据都是存储在栈中，所以改变其中一个变量的数据他们之间不会相互干扰的，这种拷贝就是深拷贝。而浅拷贝就是改变其中一个变量或者对象等参数的值或者属性，另外一个变量或者对...
2019-09-03 17:26:29
1690
原创 js中的值传递和引用传递
在js中值传递和引用传递是让人容易混淆的问题，下面我就来根据自己的理解来区分一下这两个传递方式：值传递值传递是两个变量传递前后互补干扰，无法造成影响，下面代码举例说明var a=7;function fuc(a){ a++;}fuc(a)console.log(a); //7向上面这样，当我们给a赋值之后，在通过调用函数调用吧a的值自增，但是改变的a的值只是在函数中...
2019-09-03 16:32:23
773
原创 vue学习笔记：路由vue-router的使用，路由传递数据
在使用vue-router之前要先引入:cnpm/npm install vue-router --save引入之后就可以在组件之间使用路由进行跳转，首先建立两个组件titleHeader和homeHeader，和他们下面的内容路由文件titleContent和homeContent，再然后在main.js中引入vue-router,import VueRouter from 'v...
2019-09-02 18:29:58
447
原创 vue学习笔记：非父子组件之间的传值
首先建立两个组件title和news，用来验证非父子组建的传值，然后再把这两个组件引入根组件,显示即可，代码如下：app.vue:<template> <div id="app"> <v-news></v-news> <hr> <v-title></v-title> <...
2019-09-02 10:54:06
340
原创 vue学习笔记：父子组件之间的传值$refs和$parent，以及父组件给子组件传值props
父组件获取子组件的值和方法父组件：html代码 <!-- 父组件获取子组件的值 --> <v-header ref="headerTY"></v-header> <button @click="getData">父组件获取子组件的值和方法</button>js代码：<script>import H...
2019-08-29 18:25:03
3500
原创 vue学习笔记：vue-resource、axios、fetch-jsonp请求数据，以及虚拟数据接口mock使用
mock的使用mock是可以创建虚拟的数据接口，提供前端来使用，非常便捷，我们可以在mock官网查看mock的具体文档和语法，这里只是简单介绍一下用法。引入mock：npm/cnpm install mockjs 然后在src目录下面创建一个文件夹例如mock，下面新建一个文件mock.js然后创建虚拟数据如下：import Mock from 'mockjs'...
2019-08-29 14:35:24
340
原创 h5移动端滑动内容置顶
就想很多导航栏一样，这次是一个列表类型的滑动置顶需求，首先引入jquery，然后进行操作。<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>html代码：<div class="contentOuter"> <div class="tabTitle"&...
2019-08-28 17:11:05
2179
原创 html5移动端轮播滑动效果（swiper实现）
今天开发的项目有个页面需要做一个轮播图效果，我也在网上找了插件，最后通的是swiper插件，和移动端开发比较匹配，官网地址：https://www.swiper.com.cn/，可以在官网查看更多的api和下载插件。下面介绍一下如何用swiper来实现移动端的轮播图效果。因为我用的是vue开发的项目，所以我在项目中要先引入了swiper的插件，包括swiper.min.js和swiper....
2019-08-28 16:38:04
3846
原创 vue学习笔记：组件的使用和生命周期的详细介绍
一、Vue中组件的使用在vue中，初始只有一个根组件，默认加载的组件，如果我们想加载一下别的页面，或者是组件的时候，应该怎么做呢？这个时候我们可以先在src目录下面创建新的组件HelloWorld.vue和life.vue，如图：父组件html：<template> <div id="app"> <h1>父组件</h1&g...
2019-08-27 11:18:45
563
1
原创 vue学习笔记：用vue来写一个todolist，并且在vue中封装一个js，在组件中调用
今天我要实现的是一个简单的可以在本地进行缓存的todolist待办事项功能，例如网上的待办事项：http://www.todolist.cn/，可以根据自己的需要进行添加、删除和改变事项的状态，下面我们就用vue来实现 这个功能。我们使用的vue-cli搭建的一个项目，在app.vue根组件进行编写，这样就不用创建路由进行跳转了，具体实现如下：组件html模板：<templat...
2019-08-26 11:20:08
344
原创 vue学习笔记：事件中的$event对象作用
vue中点击事件或者是其他的事件可以通过在事件中添加$event进行对标签元素的dom获取或者修改标签指的属性等等。具体用法如下：1、可以通过$event进行对dom元素的获取html：<button data-get="数据按钮" @click="getRvent($event)">获取事件对象</button>首先我们先打印一下$event对象看一下，...
2019-08-22 15:41:17
17098
原创 vue学习笔记：ref和$refs的使用
vue中有一个特殊的属性ref，可以给每一个标签使用，用来获取标签的元素，和jquery中给标签添加一个class或者id，然后在获取这个标签的元素一样，每一个标签可以根据ref不同的值进行区分，用法如下html代码： <input type="text" ref="TwoInput"> <div ref="box">ss </div> <...
2019-08-22 14:50:01
880
1
原创 h5移动端开发，jquery的ajax请求安卓端没问题，ios端无法提交数据到后台？？？？
最近做了一个微信公众号开发，是以vue框架为基础配合jquery实现的前后台交互的一个项目，这个项目页面都做完之后，在对接接口的时候，有一个预约提交，需要把表单信息通过jquery的ajax提交到后台，实现前后台的数据交互，这里写完代码测试的时候出现了一个问题，安卓端能够提交信息到后台，但是ios端无法提交信息到后台，查了好多资料以为是代码有问题、或者是跨域的问题、但是都没有解决，还尝试换了两外一...
2019-08-20 10:32:25
5262
原创 h5开发手机端项目如何自适应布局？em和rem的区别？
首先要让屏幕自适应大小代码如下：<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>保证根据不同的设备进行适配，同时保证缩放比例是1:1，就可以实现屏幕自适应，除此之外还要实现字体大小的自适应，可以根据不同的屏幕大小来自动调整字体大小：// 根据...
2019-07-30 17:53:45
830
原创 uni-app中md5加密
html代码：<form @submit="formSubmit" > <view class="FormContent"> <text>手机号：</text> <view class="FormInput"> <input type="text" value="" name="tel" pla...
2019-07-30 17:25:13
20434
13
原创 uni-app中picker下拉列表中遍历双层数组
后台数据的结构如下："productfactors": [ {//产品投保要素 "factortype": "Period",//要素类型 "datatype": "08",//数据类型 "productfactorvalues": [ { //投保要素值列表 "factorvalue": "1Y",//投保要素值计算值 ...
2019-07-26 15:38:21
9827
原创 uni-app上拉页面加载数据，实现分页效果
实现分页效果是为了在上拉数据的时候逐渐加载下一页面的数据，这样就不会造成数据加载太多造成的页面显示过慢的问题，可以在一定成的上优化界面。首先要先定义数据和在上拉函数中调用this，代码如下：var _self,page = 1;然后也要在数据data中加入所要提示页面的消息，代码如下：loadingType: 0,contentText: { contentdown...
2019-07-25 18:05:24
30494
33
原创 Angular6部署项目到服务器，第一次打开页面慢
Angular6项目打包命令ng build,这种打包的压缩包大小一般都会很大的，我推荐使用ng build --prod --aot,这种打包的方法可以大大压缩压缩包的大小，大概可以压缩60%，但是一般会出现一些语法上的报错，比如一个变量在html中声明，但是没有在ts文件中赋值，那么就会出现报错，说语法错误，这种打包的方法就是非常的严谨，对语法上的要求更细节。这样打包之后的文件部署到服务器...
2019-06-25 22:24:47
923
原创 angular6中使用树形插件
效果图如下：1、在app.model.ts文件中引入ng-zorro框架插件，代码如下import { NgZorroAntdModule, NZ_I18N, en_US, zh_CN} from 'ng-zorro-antd';2、在需要使用树形插件的组件中进行引入树形插件：import { NzFormatEmitEvent,NzTreeNode,NzTreeCompo...
2019-06-24 22:12:46
4045
原创 Angular6中左右两个option进行单选和多选项的转移
其中htm代码如下： <form action="" > <div class="roleCheckbox"> <span>角色：</span> <label for="checkBox"><input type="checkbox" class="checkAll" (...
2019-06-24 22:00:09
473
3
原创 angular6中进行登录的用户信息进行缓存localStorage本地存储
想要在Angular6项目中进行登陆的账户信息缓存，我们需要在登录组件中把用户信息保存到本地通过localStorage，然后直接在另外一个组件中进行调用即可，代码如下：login.component.ts this.userID = this.loginData.data.userId; this.loginplay = this.loginData.data.userName; ...
2019-06-24 21:41:37
2585
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人