2016年10月_Alan_阿兰

原创 js面向对象编程

我们先来了解概念概念一封装：这里讲的是我们要把属性(property)和方法(method)封装成一个对象 Javascript提供了一个构造函数（Constructor）模式 this变量和new运算符每一个构造函数都有一个prototype属性，指向另一个对象,产生（Prototype）模式,为的是

2016-10-28 16:33:56 183

原创 js闭包

js闭包首先，我们要了解的概念：全局变量，局部变量变量生命周期假如你想统计一些数值，且该计数器在所有函数中都是可用的。实际上，在 JavaScript 中，所有函数都能访问它们上一层的作用域,闭包可以创建额外的scope 还记得函数自我调用吗？解决计数器困境：闭

2016-10-28 15:23:33 149

原创 js事件处理机制

加载事件语法：常用事件句柄包括 onclick，onmouseover，onmouseout onload，onscroll onchange，onfocus，onsubmit，onselect onmessage 常用方法： preventDefault()

2016-10-28 14:25:47 305

原创 css3响应式设计

说明：手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中width 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"initial-scale 设置页面的初始缩放值，为一个数字，可以带小数minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数maximum-scal

2016-10-26 16:23:13 435

原创 css3-animation动画

animation动画取值：：检索或设置对象所应用的动画名称：检索或设置对象动画的持续时间：检索或设置对象动画的过渡类型：检索或设置对象动画延迟的时间：检索或设置对象动画的循环次数：检索或设置对象动画在循环中是否反向运动：检索或设置对象动画时间之外的状态应用：/*可以这么用*/ animation:animations 2s ease-ou

2016-10-26 16:06:31 274

原创 css3-transition

transition过渡取值：检索或设置对象中的参与过渡的属性：检索或设置对象过渡的持续时间：检索或设置对象中过渡的动画类型：检索或设置对象延迟过渡的时间 /*缩写方式*/ transition: border-color .5s ease-in .1s,background-color .5s ease-in .1s, color .5s

2016-10-26 15:51:13 126

原创 css3转换：transform

语法：transform：none | 常用转换函数列表：none：无转换2D Transform Functions：matrix()：平移translate()：指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0translatex()：指定对象X轴（水平

2016-10-26 15:37:13 142

原创 css3常用的用户界面属性

zoom: 1; text-overflow:elipsis; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; /*zoom: 1;设置或检索对象的缩放比例。box-sizing:border-box; 盒模型怪异模式,对象的实际宽度就

2016-10-26 15:35:30 237

原创 css3：border-radius

border-radius：如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。如果只提供一个，将用于全部的于四个角。如果提供两个，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。如

2016-10-26 11:59:34 164

原创 css3:display前端弹性盒布局

教程来源：http://www.runoob.com/w3cnote/flex-grammar.html知识总结Flex布局是什么？：Flex是Flexible Box的缩写，意为”弹性布局”。声明：任何一个容器都可以指定为Flex布局（div）行内元素也可以使用Flex布局（li，a等）设为Flex布局以后，子元素的float、clear和vertical

2016-10-26 11:31:12 931

原创 css3-rem相对长度单位特点

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持r

2016-10-26 10:51:42 417

原创 css：font-family 属性值

font-family： family-name - 指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。 generic-family - 通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace。

2016-10-26 10:44:58 1019

原创 css:font字体

font 简写属性在一个声明中设置所有字体属性。属性按顺序:"font-style font-variant font-weight font-size/line-height font-family"举例：常用到的字体属性包括 font:normal 62.5% Helvetica, Arial,sans-serif; font-style: normal;

2016-10-26 10:41:09 367

原创 js设计模式List

1.单例模式单例模式的定义是产生一个类的唯一实例但js本身是一种“无类”语言。js生成对象的方式有很多种，我们来看下另一种更有意义的单例。 1.只能用于创建遮罩层 2.能不能找到一个通用的singleton包装器. 3.遗憾的是js的函数式特性还不足以完全的消除声明和语句.2.桥接模式桥接模式的作用在于将实现部分和抽象部分分离开来，以便两者可以独

2016-10-21 14:54:53 238

原创 HTML5 DOM oninvalid事件;

input元素内的值为无效值时触发的事件提交的input元素的值为无效值时，触发oninvalid事件。代码：oninvalid="setCustomValidity('用户名不能为空')"oninput="setCustomValidity('')"3.HTML5表单自定义验证setCustomValidityHTML5表单验证给前端开发带来许多便利，但是默认的提示不友好

2016-10-21 14:44:41 6861

原创 html A标签属性name和href

1.name属性用法：name 属性用于指定锚（anchor）的名称。name 属性可以创建（大型）文档内的书签。标签内必须提供 href 或 name 属性。主流的浏览器几乎都支持 name 属性。在 HTML 4.0 之前的版本中，只有使用标签的 name 属性才能创建片段标识符。随着 HTML 4.0 中 id 属性的出现，所有 HTML 或 XHTML

2016-10-21 14:36:20 4747

原创 javascript promise

promise代表一个异步操作的最终结果。主要通过promise的then方法订阅其最终结果的处理回调函数，和订阅因某原因无法成功获取最终结果的处理回调函数。Promise对象有三种状态：pending（初始状态）、fulfilled（成功执行）、rejected（执行出错）。pending状态的Promise对象可以转换到其它两种状态。function callback(err, v

2016-10-21 14:14:50 379

原创 jquery - data 方法

说明：1.data() 函数用于在指定的元素上存取数据，返回设置值。2.通过 data() 函数存取的数据都是临时数据，一旦页面刷新，之前存放的数据都将被移除。举例：jQuery.data( div, "test", { first: "16元", last: "黄焖鸡!" });$( "span:first" ).text( jQ

2016-10-21 14:13:47 288

原创 h5<object> 标签变化

H4定义：用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。他的属性常用的有：width,height,name,typedata="url":规定对象使用的资源的 URL。form="form_id":规定对象所属的一个或多个表单。举例：

2016-10-21 14:12:32 2988

原创 h5触摸事件：touchstart、touchmove和touchend

说明：每个触摸事件的event对象都提供了在鼠标实践中常见的属性：bubbles(起泡事件的类型)、cancelable(是否用 preventDefault() 方法可以取消与事件关联的默认动作)、clientX(返回当事件被触发时，鼠标指针的水平坐标)、clientY(返回当事件触发时，鼠标指针的垂直坐标)、screenX(当某个事件被触发时，鼠标指针的水平坐标)和

2016-10-21 14:10:21 2971

原创 jquery方法List

1.jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素 2.它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。 3.jQuery 中所有选择器都以美元符号开头：$() 4.类选择器，ID选择器比如，$("#box").css("background-color","#8af4fb"); jque

2016-10-20 18:04:36 3831 1

原创 js设计模式-桥接模式-单例包装器

用一个变量来保存第一次的返回值, 如果它已经被赋值过, 那么在以后的调用中优先返回该变量. 而真正创建遮罩层的代码是通过回调函数的方式传人到singleton包装器中的. 这种方式其实叫桥接模式.能不能找到一个通用的singleton包装器？遗憾的是js的函数式特性还不足以完全的消除声明和语句.// 是抽象部分var singleton function(fn){

2016-10-19 14:45:36 448

原创 js设计模式-观察者模式

观察者模式，又叫发布者-订阅者模式，应该是最常用的模式之一.比如面试者把简历扔到一个盒子里，然后面试官在合适的时机拿着盒子里的简历挨个打电话通知结果./*观察者模式*/var Observe = function(){ var listen, log, obj, one, remove, trigger, __this; obj={}; __this

2016-10-19 14:28:32 372

原创 flex弹性盒布局（layout）

1.布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2.2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。3.已经得到了所有浏览器的支持4.Flex布局是什么？：Flex是Flexible Box的缩写，意为”弹性布局”

2016-10-17 10:37:40 340

原创 js-正则表达式组成：方括号，圆括号，元字符，量词，修饰符

1.当使用构造函数创造正则对象时，需要常规的字符转义规则（在前面加反斜杠 \）。var re = /\w+/;var re = new RegExp("\\w+");2.语法var patt=new RegExp(pattern,modifiers);或var patt=/pattern/modifiers;其中： pattern（模式）描述了表达式的模

2016-10-10 17:57:37 2427

原创 js-DOM

1.DOM分为三部分：（1）核心DOM：遍历DOM树、添加新节点、删除节点、修改节点（2）HTML DOM：以一种简便的方法访问DOM树（3）XML DOM：准用于操作XML文档2.核心DOM ：对象： Document,Node, ElementNode,TextNode,AttributeNode， CommentNode,NodeList核心D

2016-10-10 14:07:57 236

原创 SVG可缩放矢量图形（Scalable Vector Graphics）

SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式下面的例子是一个简单的 SVG 文件的例子。SVG 文件必须使用 .svg 后缀来保存：知识来自百科

2016-10-09 16:43:33 1963

原创 jQuery 3.0在日前发布了最终的全新版本新特性体现在：

文章来源：http://www.jb51.net/article/87998.htm1. 移除旧的IE工作区，如果想要了解弃用功能，可以通过ctrl+f键来进行搜索2.jQuery 3.0运行在Strict Mode下3. 引进for...of循环，for...of循环可以取代以前的 $.each(...) 语法4. 动画方面采用新的API，jQuery 3使用reques

2016-10-09 16:27:41 325

原创 SweetAlert详解

1. 官方给出的SweetAlert介绍是：SweetAlert可以替代JavaScript原生的alert和confirm等函数呈现的弹出提示框 swal("恭喜","添加成功","success"); 第一个参数是title，第二个参数是text，第三个参数是提醒类型（success,error,warning,input） 2.cofirm弹框参数说明：

2016-10-09 15:56:33 689

原创常见的正则表达式验证

/^\d+(\.\d+)?$/;// 验证金额，匹配数字的，可匹配情况// 1.正负整数// 2.正负浮点数（带小数点的数）/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;//验证邮箱格式/^[1][35

2016-10-08 17:19:18 261

原创 js，jquery 操作 dom

1.修改页面内容$("#test").text("你好");$("#test").html("你好")2.格式化日期var odate = new Date();var mon = parseInt(odate.getMonth())+1$("#applayDate").html(odate.getFullYear()+"年"+mon+"月"+odate.getDate()

2016-10-08 10:44:02 232

sixteen_cicle的博客