自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 修改 mint-ui 组件的默认样式

使用 mint-ui 可以方便实现很多特有的样式,可以很方便的进行调用,但如果 mint-ui 的默认样式与要求不一致时该如何修改? 比如 mint-ui 中有一个轮播图属性 mt-swipe,其默认样式如下: .mint-swipe-items-wrap { position: relative; ...

2019-03-19 10:06:46 1549

原创 通过设置代理解决Vue中的跨域问题

1.问题:在vue中,在使用Axios获取数据时,有时会出现数据无法访问的情形(即跨域问题),如例1所示:例1:在本地使用 Axios 来获取豆瓣上的数据this.$axios({ method: 'get', //以 get 方式获取数据 url: 'http://api.douban.com...

2019-03-10 15:59:53 438

原创 解决 webpack4 中无法压缩 CSS 代码的问题

在webpack4中,我们可以使用 optimize-css-assets-webpack-plugin 插件来压缩 CSS 代码(具体内容可结合该插件的官网:https://www.npmjs.com/package/mini-css-extract-plugin),但当正确安装和引入了该插件时,我们会发现 CSS 代码并未进行压缩,输出的还是未压缩的代码,如何解决这个问题?首先,检查代码与...

2019-02-25 21:56:25 1047 1

原创 jQuery实现常见的轮播图效果

1.在网页中常见的一类轮播图如下图所示,此处以小米官网(www.mi.com)为例进行说明                说明:红色箭头标注的是左、右箭头;右下角蓝色箭头标注的是可以控制图片播放顺序的小圆点;2.轮播图的特点    a. 能够进行左右方向的切换,即点击左箭头表示切换到上一张,点击向右箭头表示切换到下一张;    b. 点击左右翻页时,对应的小圆点要能够进行联...

2018-12-15 00:55:12 1163

原创 JS中的作用域和闭包

问题:1.说一下对变量提升的理解2.说明 this 几种不同的使用场景  (作为构造函数执行、作为对象属性执行、作为普通函数执行、call \ apply \ bind)3.创建10个a标签,点击的时候弹出来对应的序号4.如何理解作用域5.实际开发中闭包的应用 (闭包主要封装变量、收敛权限) 知识点:1.JS没有块级作用域,只有函数和全局作用域;2.自由变量:当...

2018-12-14 18:02:22 164

原创 jQuery插件的开发方法

主要有三种方法开发jQuery插件:1.通过$.extend()来扩展jQuery:    例:$.extend({                sayHello:  function(){                    console.log('Hello');                  }           })           $.sayH...

2018-12-14 15:19:55 208

原创 原型和原型链——构造函数

问题:1.如何准确判断一个变量是数组类型 ?2.写一个原型链继承的例子3.描述new一个对象的过程 知识点总结:1.构造函数:        例:    function  Foo (name, age){                  //构造函数通常以大写字母开头                          this.name = name;   ...

2018-12-14 14:57:03 283

原创 JavaScript 变量计算 ——— 强制类型转换

1.常见的强制类型转换场景:   (1).字符串拼接:           例1:    100 + '10'    //10010   (2).== 运算符:(要慎用)         例2:    100 == '100'    //true ;      0 == ' '    //true ;      null == undefined    //true   (3)...

2018-12-09 13:45:06 242

原创 JavaScript中的变量类型

问题:(1)JS中使用 typeof 能得到哪些变量类型?(2)何时使用 === ?何时使用 ==?(3)JS中有哪些内置函数?(4)JS变量按照存储方式区分为那些类型,并描述其特点(5)如何理解JSON 分析:变量类型: 值类型 / 引用类型引用类型: 对象、数组、函数typeof 只能区分具体的值类型(undefined、string、number、bo...

2018-12-09 13:28:19 772

原创 登陆注册页面的居中显示

在网页中,常常会使用到登陆注册功能,登陆框的显示要结合设备的尺寸进行居中显示,当我们使用前端框架(如React 或 Vue)时,登陆注册页面常常会作为一个组件,如何设置组件中的样式使得登陆框一直在屏幕上居中显示?以React框架为例:登陆注册页面如图所示(此处以简书的登陆页进行说明)登陆注册页面通常的效果图如图所示,在React中,我们使用组件化的开发,将该页面拆分为两个组件:整个背景...

2018-12-05 23:13:08 6704

原创 JavaScript 弹窗

弹窗在网页交互中非常常见,常用于给用户进行提示消息,当然目前比较常见的是广告弹窗,此处来演示一下基本的弹窗原理。弹窗效果示意图:图1 弹窗效果弹窗效果有以下几个要点:(1)弹窗开始时并不显示,当点击按钮之后才显示;(2)当单击弹窗内部的区域(图1的白色部分),弹窗并不关闭,点击白色部分的”ד符号时会关闭弹窗;(3)当点击弹窗白色区域之外的灰色部分时(图1)

2018-01-01 17:47:44 957

转载 JavaScript实现动态的轮播图效果

利用javascript能实现常见的动态的网页轮播图效果,如下图1所示:图1实现该轮播图有以下几个要点: (1)在左右两侧各有一个箭头,分别指的是向左和向右切换,即点击相应的位置就会切换到该图片之前(或之后)的一张图片(2)在图片的下方有一排圆形按钮,每个按钮有各自的单击事件,点击任意一个按钮就切换到对应的图片(3)不点击图片时,图片会自动播

2018-01-01 15:22:42 18376 1

原创 JavaScript 利用for-in循环数组或对象

使用for-in可以对数组或者对象的属性进行循环操作。每执行一次for-in循环,就会对数组中的元素或者对象的属性进行一次操作。  for-in循环的语法为:for(变量 in对象){//要执行的代码}“变量”用来指定变量,指定的变量可以是数组元素,也可以是对象的属性。例1:使用for-

2017-12-30 16:15:42 1304

原创 JavaScript 使用arguments对象寻找最大值

1.JavaScript函数内置的arguments对象,其包含了函数调用的参数数组(即是调用函数时传递的参数个数)。我们可以使用arguments方法来查找数组的最大值和最小值。例1:寻找数组的最大值function findMax(){var i,max=arguments[0];//将传入的第一个参数赋值给max;if(argument

2017-12-30 15:02:26 2079

原创 JavaScript 正则表达式的常用方法

正则表达式通常指的是:使用单个字符串来描述或匹配符合某个句法规则的字符串搜索模式。1.在JavaScript中。正则表达式常用对文本的搜索和匹配。这两个字符串方法 分别是:search() 和 replace()。(1).search()方法:用于检索子符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回相匹配的子字符

2017-12-29 23:56:31 400

原创 JavaScript 继承---寄生组合式继承

继承---寄生组合式继承寄生组合式继承指的是:通过借用构造函数来继承属性,通过原型链的混合形式来继承方法

2017-12-23 15:01:46 281

原创 JavaScript 继承---寄生式继承

继承---寄生式继承寄生式继承是与原型式继承紧密相关的一种思路。其思路与寄生构造函数和工厂模式类似,即创建一个仅用于封装继承过程的函数该函数在内部以某种方式来增强对象,最后再像真的是它做了所有工作一样返回对象。寄生式模式如下例1所示:例1:function createAnother(original){var clone=Object(original

2017-12-23 14:42:16 353

原创 JavaScript 继承---原型式继承

继承---原型式继承原型式继承并没有使用严格意义上的构造函数,是通过借助原型基于已有的对象创建新对象,同时还不必创建自定义类型。使用原型式继承的主要思路如例1所示:例1:function Object(o){function F(){}F.prototype=o;return new F();}将例1进行分析可知:在Object函数的

2017-12-23 12:55:40 352

原创 JavaScript 继承---组合继承

继承---组合继承组合继承也叫做伪经典继承,指的是将原型链和借用构造函数的技术组合到一块,从而发挥二者之长的一种继承模式。组合继承的基本思路是使用原型链实现对原型属性和和方法的继承,而通过借用构造函数来实现对实例属性的继承。组合继承通过在原型上定义方法实现了函数复用,又能够保证每个实例都有它自己的属性。如例1所示:例1:function aaa(

2017-12-23 02:05:58 380

原创 JavaScript 继承---借用构造函数

继承---借用构造函数借用构造函数,也称伪造对象或经典继承。借用构造函数实现继承的基本思想是:在子类型的构造函数内部调用超类型的构造函数。因为函数知识在特定环境中执行代码的对象,因此可以通过apply( )方法和call( )方法在新创建的对象上执行构造函数。如例1所示:例1:function SuperType(){this.colors=

2017-12-23 01:43:27 821

原创 JavaScript 继承---原型链

继承---原型链ECMAScript对象只支持实现继承,而且其实现继承主要是依靠原型链来实现的。1.原型链的概念ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法(也可以理解为一个引用类型的原型是另一个引用类型的实例)。如果我们让一个原型对象等于另一

2017-12-23 00:41:35 340

原创 JavaScript 创建对象---稳妥构造函数模式

稳妥构造函数模式

2017-12-23 00:14:33 250

原创 JavaScript 创建对象---寄生构造函数模式

寄生构造函数模式寄生构造函数模式

2017-12-22 19:24:56 384

原创 JavaScript 创建对象---动态原型模式

动态原型模式:动态原型模式将所有的信息都封装在构造函数中,通过在构造函数中初始化原型(仅在必要的条件下),又保持了同时使用构造函数和原型的优点。即使可以通过检查某个应该存在的方法是否有效,来决定是否需要初始化原型。例1:function Person(name,age){this.name=name;this.age=age;if(typ

2017-12-22 18:38:22 298

转载 JavaScript 创建对象--组合使用构造函数模式和原型模式

组合使用构造函数模式和原型模式:创建自定义类型的最常见方式,就是组合使用构造函数模式与原型模式。构造函数模式用于定义实例属性,而原型模式用于定义方法和共享的属性,这样就使得每个实例都会有自己的一份实例属性的副本,但同时又会共享着对方法的引用,最大限度地节省了内存,而且这种模式还支持想构造函数传递参数。例1:function Perso

2017-12-22 17:10:22 344

原创 JavaScript 创建对象---原型模式

原型模式:我们创建的每一个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。如果按字面意思来理解,prototype就是通过调用构造函数而创建的那个对象实例的原型对象。使用原型对象的好处就是可以让所有对象实例共享它所包含的属性和方法。换句话说,

2017-12-22 15:07:12 217

原创 JavaScript 创建对象--构造函数模式

构造函数模式:ECMAScript中的构造函数可以用来创建特定类型的对象,也可以创建自定义的构造函数,从而自定义对象类型的属性和方法。参考例2:例2:function Person(name,age){this.name=name;this.age=age;this.getName=function(){alert(this.name);

2017-12-22 14:13:24 1613

原创 JavaScript 创建对象---工厂模式

工厂模式:

2017-12-22 09:41:10 220

原创 JavaScript 对象的属性类型

ECMA-262定义只有内部才用的特性时,描述了属性的各种特征。这些定义特性是为了实现JavaScript引擎用的,因此在JS中不能直接访问它们ECMAScript中有两种属性:数据属性和访问器属性。1.数据属性:数据属性包含一个数据值得位置。在这个位置可以读取和写入值。数据属性有4个描述其行为的特性。(1)[[con

2017-12-21 13:59:36 332

原创 JavaScript 函数的apply()方法和call()方法

在JavaScript中,每个函数都包含两个非继承而来的方法:apply( )和call( )。这两个方法的用途都是在特定的作用域中调用函数,实际上等于设置函数体内this对象的值。(1)apply( )方法接收两个参数:一个是在其中运行函数的作用域,另一个是参数数组。其中,第二个参数可以是Array的实例,也可以是arguments对象。如例1所示

2017-12-21 11:29:54 190

原创 JavaScript 数组的操作方法

1.concat( )方法:基于当前数组中的所有项创建一个新数组。具体来说,该方法先回创建当前数组的一个副本,然后将接收到的参数添加到这个数组的末尾,最后返回新构建的数组。具体来说,可分为以下三种情况:(1)当没有向concat( )传递参数时,它会复制当前数组并返回当前数组的一个副本;如例1所示:例1:var str=[1,3,2,'red','green']

2017-12-21 10:07:33 289

原创 JavaScript 数组的重排序方法

数组中有两个可以直接用来排序的方法:reverse( )和sort( )。reverse( )方法:反转数组项的排列顺序,即逆序排列之前的数组。例1:使用reverse( )方法排列数组var arr=[12,2,31,4,55,38];alert(arr.reverse()); //输出结果为:38,55,4,31,2,12sort( )方法:

2017-12-21 00:09:32 275

原创 JavaScript 数组的队列方法

栈数据的结构规则是LIFO(后进先出),而队列数据结构的访问规则是FIFO(先进先出)。要实现FIFO的访问规则,需要在队列的末尾添加项,队列的前端移除项。push()方法是向数组的末尾添加项,所以只需要得到一个从数组的前端取得项的方法即可。shift( )方法:移除数组中的第一项并返回该项,同时数组长度减1。同时使用shift( )方法和push(

2017-12-20 23:50:04 436

原创 JavaScript 基本类型和引用类型

1.基本类型值指的是简单的数据段。常见的有5种基本数据类型:Undefined、Null、Boolean、Number和String。这5种基本数据类型是按值访问的,因为可以操作保存在变量中的实际的值。2.引用类型值指的是那些可能由多个值构成的对象。JavaScript不允许直接访问内存中的位置,即不能直接操作对象的内存空间。在操作对象时,实际上是在操作对象的引用而不是

2017-12-20 16:16:57 166

原创 Bootstrap CSS组件---小图标

小图标(icon)是一个优秀网站不可缺少的一组元素,新版的bootstrap提供了200个小图标(相应的,也提供了200个css样式),这200个样式均可在内联元素上应用,并显示出对应的图标。1.基本用法:在任何任何内联元素上应用所对应的样式即可。例如:,显示结果如下图1,图1:所有的icon样式都以glyphicon-开头,这是

2017-12-20 13:36:24 4322 1

原创 Bootstrap CSS表格

1.首先介绍一下CSS代码的显示:(1)元素显示单行内联代码。设置背景颜色和内部文本颜色。(2)元素新生多行代码块。显示大块的代码段,并保持原有格式不变。(3)元素显示用户输入代码。2.表格在表格组件里,Bootstrap提供了一种基础的table样式,4种附加样式(table-sstriped、table-borde

2017-12-20 10:26:09 675

原创 Bootstrap 列表

Bootstrap提供了6种形式的列表,分别是:普通列表、有序列表、去点列表、内联列表、描述列表和水平描述列表。(1).普通列表:普通列表的使用方式和平时的用法一致,只有一点细微的差别:列表的margin-top为0。(2).有序列表:有序列表也是做了一些微调,看起来比原来默认的显示柔和了一些。(3).去点列表:去

2017-12-20 10:00:03 1815

原创 Bootstrap CSS3基础排版

1.基础排版Bootstrap为传统的标题元素h1~h6重新定义了标准的样式,使得在所有的浏览器下显示的效果都一样。标题元素的用法与平时的用法一致。Bootstrap还同步定义了6个class样式(h1~h6),以便在非标题元素下使用相同的样式,唯一不同的是class没有定义margin-top和margin-bottom。

2017-12-20 00:02:01 289

转载 bootstrap 栅格系统

1.栅格系统的实现原理栅格系统是通过定义容器大小,平分12份,再调整内外边距,最后再结合媒体查询就制作出了强大的响应式的栅格系统。Bootstrap默认的栅格系统平分为12份,在使用的时候也可以通过重新编译LESS源码来修改这12个数值。2.栅格系统的主要工作原理如下:(1).一行数据(row)必须包含在.contai

2017-12-19 22:26:06 788

原创 bootstrap CSS概述

基础的CSS布局语法包括排版、代码、表格、表单、按钮、图片、辅助式和响应式设计。这些基础的布局语法都是通过CSS最基础,最简单的组合来实现的。新版的Bootstrap是一个移动先行的框架集。看如下代码:这是针对移动端浏览器写的一些页面属性,name="viewport"---表示针对移动端浏览器;width=device-width---

2017-12-19 22:01:32 401

空空如也

空空如也

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

TA关注的人

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