2016年03月_Kou_Hi

原创解析url成字典对象

var s = "http://www.baidu.com?name=gmm&age=23";var s1 = s.lastIndexOf('?');var s2 = s.substring(s1+1);var re = /(\w+)=(\w+)/g;var params = {};s2.replace(re, function(match, pos, originText){

2016-03-30 21:13:00 826

正则表达式的() [] {}有不同的意思。() 是为了提取匹配的字符串。表达式中有几个()就有几个相应的匹配字符串。(\s*)表示连续空格的字符串。[]是定义匹配的字符范围。比如 [a-zA-Z0-9] 表示相应位置的字符要匹配英文字符和数字。[\s*]表示空格或者*号。{}一般用来表示匹配的长度，比如 \s{3} 表示匹配三个空格，\s{1,3}表示匹配一到三个空格。(0-9) 匹配 '0-9′...

2016-03-30 21:11:55 99529 10

原创 js分别用“==”"==="、"localCompare"比较new String和“string”

var s = "love";var s1 = "love";console.log(s.localeCompare(s1)); //0console.log(s==s1); //trueconsole.log(s===s1); //truevar s3 = new String("love");var s4 = new String("love");console.log(s3.loc

2016-03-30 14:35:19 3127

原创体会String对象的match方法和new RegExp(re).exec(str)的区别

var str ="cat matt daa bat"var re = /at+/g;var match = str.match(re);console.log(match);console.log(new RegExp(re).exec(str));输出如下[ 'at', 'att', 'at' ][ 'at', index: 1, input: 'cat matt daa bat' ]

2016-03-30 14:11:10 2229

原创正则实现String的trim方法

ES5里面的trim()方法是去掉字符串的前后空格，自己写个正则兼容一下不支持ES5的浏览器var re_f = /^\s+/g;var re_e = /\s+$/g;var s = " asd ";console.log(s);console.log(" asd");var s_f = s.replace(re_f, "");console.log(s_f);console.l

2016-03-30 13:52:47 1178

原创实现ES5以下兼容，Object.create()、getElementsByClassName()

Object.create：搞清楚new F()和Object.create(F.prototype)是一样的if (!Object.create) { Object.create = function(proto) { function F() {}; F.prototype = proto; return new F; }}g

2016-03-30 13:15:27 748

原创原生js实现addClass、removeClass、toggleClass

jquery里有添加样的().addClass和移除样式().addClass和移除样式()>removeClass()；那么如何用原生js实现？function hasClass(obj, cls) { return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));}function addClass(obj,

2016-03-30 12:58:57 3028

原创原生js实现表单的正则验证，所有验证都通过后提交按钮才可用

实现了如下功能： 1.用户名：onfouc显示msg规则；onkeyup计算字符，其中中文为两个字符；onblur，验证是否通过 2.邮箱：onblur 正则匹配，正则是根据自己的需求写的，可以根据个人需求更改 3..密码：onkeyup时显示密码的强弱度，onblur时验证密码，是否为相同字符，是否全字符，或全数字，长度是否符合要求 4.确认密码：验证是否和

2016-03-30 11:36:14 27971 3

原创 js拖拽遇到的问题，待解决

以下拖拽代码，遇到一个问题，点击拖拽狗狗后，鼠标松开，继续移动鼠标，狗狗仍是被拖拽状态，得再次点击鼠标，释放拖拽事件。我百思不得其解，猜测是不是document.onmouseup没有准确的检测鼠标的释放，诶，不知道window.onload = function() { drag();}function drag() { var oDog = document.getElem

2016-03-30 11:13:31 1289 1

原创自己对BFC的疑问

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。有几点我很疑惑：第一点： <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #div1 {float:left; background: red; height: 100px

2016-03-26 22:51:38 301

转载 BFC(块级格式化上下文)

BFC(块级格式化上下文)字数1536 阅读990 评论1 喜欢8BFC(块级格式化上下文)@(CSS)[CSS|BFC][TOC]　　已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。虽然我知道如何利用 BFC 解决这些问题，但当别人问我 BFC 是什么，我

2016-03-26 21:13:42 426

原创 <img>设置background有白色边框

因为没有给img标签这是src，所以浏览器当做没有图片处理，给加上了白色边框，解决方法有两个： 1.添加一个空白图； 2.不用img标签，用span、div等等

2016-03-26 10:56:35 8351 2

原创 angularjs实现点击加载更多

做个人博客时遇到这个需求，首先说下遇到难点： 1.动态插入指令，angular并不能正确渲染，而是以普通的html标签插入，也没有class=”ng-scope”，这与angularjs的加载顺序有关，下面再说。 2.angualr里的$http服务是异步的，没有同步的概念，当用户不停的点击“加载更多”按钮时，数据如果还未请求过来，等响应完毕后会出现相同的好几组数据。对于第一点：（图片来自h

2016-03-25 15:44:06 6339 1

原创修改button的text

button有两种类型：第一种修改方法 document.getElementById("btn1").value="新按钮"; JQuery: .val()第二种：按钮 document.getElementById("btn1").innerHtml="新按钮";

2016-03-24 21:05:45 6578

转载 AngularJS入门之动画

转自点击打开链接————————————————————————AngularJS中ngAnimate模块支持动画效果，但是ngAnimate模块并未包含在AngularJS核心库中，因此需要使用ngAnimate需要在定义Module时声明对其的引用。AngularJS中实现动画效果有两大种方式：基于CSS的动画效果CSS Transition Anima

2016-03-20 19:31:46 596

原创 angularjs表达式中的HTML内容，如何不转义，直接表现为html元素

默认情况下，AngularJS对会对插值指令求职表达式（模型）中的任何HTML标记都进行转义，例如以下模型： $scope.msg = “hello,<b>world</b>!” <p>{{msg}}</p> 渲染过程会对b标签进行转义，他们会议纯文本显示而非标记; 插值指令会对模型中任意html内容进行转义，这是为了防止html注入攻击。如果因为某种理由，包含htm

2016-03-18 16:54:51 7714

原创 angularJS过滤器date所接受的日期类型

使用ISO标准日期格式 -->{{ '2015-05-20T03:56:16.887Z' | date:"MM/dd/yyyy @ h:mma"}}使用13位（单位：毫秒）时间戳 -->{{ 1432075948123 | date:"MM/dd/yyyy @ h:mma"}}指定timezone为UTC -->{{ 1432075948123 | date:"MM/dd/yyyy

2016-03-18 13:16:24 3699

翻译 angularjs自定义指令的样式如何设置

翻译自这里写链接内容 http://stackoverflow.com/questions/19577027/how-to-css-style-angular-directive 问题（下面这是一种不好的指令使用方式”C”）假设你有一个自定义指令如下，并且有许多需要设置的样式<div class="mydirect"> <div class="classA"> <div class

2016-03-17 23:24:24 5392

原创 chrome中js的中文乱码

在网上搜到的都是说在，然而这对我并不管用，后来发现是浏览器自身的问题，在设置里更改字体，编码方式选utf-8，就okay！记得重启浏览器！

2016-03-17 21:03:28 8102

转载 jQuery中ready与load事件的区别

转自点击打开链接目录：1ready与load谁先执行2DOM文档加载的步骤3ready事件4load事件5总结概述：大家在工作中用jQuery的时候一定会在使用之前这样：12345678//document re

2016-03-14 10:42:10 480

转载 HTML5中div、article、section的区别及使用介绍

转自点击打开链接-------------------------最近正在学习html5，刚接触html5，感觉有点不适应，因为有一些标签改变了，特别是div, section article这三个标签，查了一些资料，也试着用html5和css3布局网页，稍微有点头绪了，下边还有一个我刚刚布局好的一个简单的网页，供大家参考，先看一下，最起码心里对html5的结构有些概念。div

2016-03-13 22:30:58 5022

转载 CSS中空格和>区别，A B, A>B

转自点击打开链接----------------------这些是CSS3特有的选择器，A>B 表示选择A元素的所有子B元素。与A B的区别在于，A B选择所有后代元素，而A>B只选择一代。另外：没有A+B表示HTML中紧随A的B元素。nth-child是个伪类的用法，如p:nth-child(2)就表示在p的父元素中选择位居第二位的p，这个可能不太好理解，自己试一

2016-03-13 15:01:56 6299

转载 CSS3详解：transform

转自点击打开链接-------------------------近来，HTML5和CSS3的发展速度还是很可观的，国内外不乏一些大站，酷站都在使用最新的技术。面对新的技术，我们该如何正确的把握和使用到今后的项目实战中呢？针对这一问题，浩子决定剖析CSS3，一一像各位同学解答CSS3到底是个神马东西。就已transform开始吧，写的不好的话，请严重拍砖！！CSS3 t

2016-03-13 14:55:41 360

转载 :before和::before的区别

转自点击打开链接_________________________在一次项目中，有一次要用到::selection伪元素，然后开发同学问我，CSS中一个冒号和两个冒号有神马区别？这好像真的是个问题，或许很多前端同学对此都有疑惑，查了些资料，证实了下两个符号的区别，简而言之：单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。W3C关于CSS3选择器的规

2016-03-12 22:39:47 416

转载 a标签的四个css伪类(link、visited、hover、active)样式理解

转自点击打开链接伪类是CSS 用于向某些选择器添加特殊的效果，chrome和firefox中的css监控并不会显示所有的样式，有些显示会有点不全，IE下还是有点问题的，不过大体不变伪类是CSS 用于向某些选择器添加特殊的效果。 a标签中有四个： link、visited、hover、active 未移入a标签链接时：link 移入a标签链接时：l

2016-03-12 21:53:05 5288

转载 HTML5本地存储Localstorage

转自点击打开链接————————————————HTML5本地存储Localstorage什么是localstorage前几天在老项目中发现有对cookie的操作觉得很奇怪，咨询下来是要缓存一些信息，以避免在URL上面传递参数，但没有考虑过cookie会带来什么问题：① cookie大小限制在4k左右，不适合存业务数据② cookie每次随HTTP事务一

2016-03-11 22:30:28 354

转载不再以讹传讹，GET和POST的真正区别

转自点击打开链接——————————————————————————————————————我的经历前几天有人问我这个问题。我说GET是用于获取数据的，POST，一般用于将数据发给服务器之用。这个答案好像并不是他想要的。于是他继续追问有没有别的区别？我说这就是个名字而已，如果服务器支持，他完全可以把GET改个名字叫GET2。他反问道，那就是单纯的名字上的区别喽？我想

2016-03-11 20:24:40 384

转载 JavaScript中函数参数的值传递和引用传递

转自这里写链接内容 JavaScript中函数参数的值传递和引用传递结论：对于数字、字符串等是将它们的值传递给了函数参数，函数参数的改变不会影响函数外部的变量。对于数组和对象等是将对象(数组)的变量的值传递给了函数参数，这个变量保存的指向对象(数组)的地址。当函数改变这个地址指向的对象(数组)的内容时，同时也改变了函数外部变量指向的对象(数组)的内容；当函数改变的是变量的地址时，实际就

2016-03-10 22:39:32 449

原创手写bind()函数，理解MDN上的标准Polyfill

若还不了解bind、apply、call的用法先看上一篇博文:JS中的call、apply、bind方法若还不了解Object.create()请先看[ JavaScript创建对象的三种方法] (http://blog.csdn.net/u010552788/article/details/50849191)看了慕课上Bosn讲的Ployfill实现的bind之后，做个总结。视屏网址在看Po

2016-03-10 21:52:32 7493 3

转载 JS中的call、apply、bind方法

转自点击打开链接JS中的call、apply、bind方法一、call()和apply()方法1.方法定义call方法:语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]])定义：调用一个对象的一个方法，以另一个对象替换当前对象。说明：call 方法可以用来代替另一个对象调用一个方法。cal

2016-03-10 19:13:44 1203

原创 JavaScript创建对象的三种方法

1. var person = new Object();这行代码创建了Object引用类型的一个新实例，然后把该实例对象保存在变量person中。使用的构造函数是Object，它只为新对象定义了默认的属性和方法。2. var person={name: “Jerry”, age: 100};这种方法叫对象字面量表示法。（对象名也可以使用字符串，如”name”: Jerry）。在通过对象字面量定义对

2016-03-10 18:55:12 4847

转载 javascript处理HTML的Encode(转码)和Decode(解码)总结

看decode，这篇写的比较好理解，转自点击打开链接HTML的Encode(转码)和解码(Decode)在平时的开发中也是经常要处理的，在这里总结了使用javascript处理HTML的Encode(转码)和解码(Decode)的常用方式一、用浏览器内部转换器实现转换1.1.用浏览器内部转换器实现html转码　　首先动态创建一个容器标签元素，如DIV，然后将要转

2016-03-10 10:56:24 7147

转载 JSON与XML的区别比较

转自点击打开链接1.定义介绍(1).XML定义扩展标记语言 (Extensible Markup Language, XML) ，用于标记电子文件使其具有结构性的标记语言，可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。 XML使用DTD(document type definition)文档类型定义来组织数据;格式统一，跨平台和语言，早已成为业

2016-03-08 16:25:59 219

转载同源安全策略

转自点击打开链接5.3.2 同源安全策略同源策略（Same Origin Policy）是一个很重要的安全理念，是客户端脚本的重要的安全度量标准，其目的是防止某个文档或脚本从多个不同源进行装载。根据这个策略，a.com域名下的JavaScript无法跨域操作b.com域名下的对象。比如，baidu.com域名下的页面中包含的JavaScript代码，不能访问google.com域名下

2016-03-08 15:46:41 462

原创 JQuery里的子元素过滤选择器，加空格与不加空格的区别

最近学习jquery，发现它的选择器的写法与css的基本语法很像，加不加空格差别很大。 $(“:first-child)——：first只是返回单个元素，而first-child选择符将为每个父元素匹配第一个子元素。例如子元素过滤选择器 li:first-child(不加空格),这里的父元素指的是li标签的父元素； li :first-child(加空格)，这时候因为变成了ance de

2016-03-08 14:25:05 3660

转载 CSS中margin边界叠加问题及解决方案(1)

你对CSS的margin边界叠加的概念是否了解，这里和大家分享一下，当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加。CSS的margin边界叠加深度剖析边界叠加简介边界叠加是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，当两个垂直边界相遇时，它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的

2016-03-03 20:48:08 491

u010552788的专栏