2017年09月_zcy_csdn123

原创数组/字符串去重并计算各元素的数量

Array.prototype.unique44 = function(){ var newArr = []; var obj = {} for(var i = 0 ; i<this.length; i++){ if(!obj[this[i]]){ console.log('if')

2017-09-22 11:19:56 649

原创 ES6--对象的扩展

属性和方法的简写属性//ES6function(x, y){ return {x,y}}//原来function(x, y){ return {x:x, y:y}}方法//ES6var obj = { method(){ return "hello" }}//原var obj = { method:function(){

2017-09-18 18:15:29 404

原创 ES6--数组的扩展

我是看了http://wiki.jikexueyuan.com/project/es6/array.html写的笔记，中间加了一些自己的理解回顾下 concat() 连接两个或多个数组 join() 将数组的所有元素放入到一个字符串，并通过分隔符分隔 pop() 删除并返回数组的最后一个元素 posh() 从数组尾部添加一个或多个元素，返回新的长度 shift() 删除并返回数组的第一个元

2017-09-15 18:29:23 258

原创 ES6--数值的扩展

我是看了http://wiki.jikexueyuan.com/project/es6/number.html写的笔记，中间加了一些自己的理解。老规矩回顾下： foFixed(n) 将数字转为字符串，保留n位小数ES6 刚开始介绍了些什么进制的问题，同样有兴趣看下上面。Number.parseInt() , Number.parseFloat() 大家一看不就会说这不以前就有么，是的，不过ES

2017-09-14 19:31:07 220

原创 ES6--字符串的扩展

我是看了http://wiki.jikexueyuan.com/project/es6/string.html写的笔记，中间加了一些自己的理解。gangkaishi 一开始介绍了一些编码之类的东西，看的云里雾里的，也不是很懂，就不写在这里了，有兴趣的朋友可以点上面的连接去看看。写一些我个人工作中会用到的吧。string对象的方法回顾下： charAt(index)：现实指定位置的字符 conca

2017-09-14 19:08:53 362

原创 ES6--变量的解构赋值

解构：ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值。var a = 1;var b = 2;var c = 3;//es6解构赋值var [a, b, c] = [1, 2, 3];从输出中提取值，按照对应的位置，对变量赋值。这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值看些例子let [foo, [[bar],

2017-09-14 15:25:25 304

原创 ES6--let和cost

let命令let声明变量，用法类似var。但是所有声明的变量只在let命令所在的代码块内有效。{let a = 1;var b = 2;}a //ReferenceError: a is not defined 语法错误 a 没有定义b //2不存在变量提升function func(){ console.log(bar); console.log(foo);

2017-09-14 15:06:50 1643 1

转载前端安全问题

传送门：https://segmentfault.com/a/1190000006672214?utm_source=weekly&utm_medium=email&utm_campaign=email_weekly#articleHeader14感觉我是个传送门提供者0.0主要分两种XSS和CSRF XSS简单说像是注入SQL那样，就是在用户输入的地方输入代码，造成攻击效果。 CSRF叫跨站点

2017-09-13 15:50:22 180

原创 web前端性能优化

前端性能优化其实就是让使用户等待的时间减少，那么显而易见的就是提高网速，但这不是我们程序员可以搞的东西，就说下我们能做的吧。要说前端性能有话，你必须先了解：从用户输入URL到页面渲染都经历了什么。传送门：https://segmentfault.com/a/1190000006879700上面文章内容很多，如果你了解上面知识，或者不想花时间了解上面，那么直接看下面吧。从URL到页面

2017-09-12 19:49:09 408

转载从输入URL到页面加载发生了什么

尊重原创，请看https://segmentfault.com/a/1190000006879700 写的很全面，而且里面的图片可以看原图，便于理解。

2017-09-12 18:45:07 248

原创 HTML5--SSE 和 WebSocket

先粗略介绍一下两个东西吧 SSE（Server-Send event）服务器发送事件。功能就是可以使网页自动的获取来自服务器的跟新。（以前是网页不得不询问是否有更新，轮询） WebSocket新一代的双向通讯技术。服务器能推送信息到客户端，客户端也能推送信息到服务器。看起来WebSocket更全面一些，不过根据具体情况选择不同的。SSE（Server-Send event）他的基

2017-09-12 12:09:08 1029

原创 HTML5--web存储

HTML5 引入了两种类似HTTP会话cookies的机制，用于在客户端存储结构化数据以及克服以下缺点。 1、每个HTTP请求中都包含cookies，从而导致传输相同的数据减缓我们的web应用程序。 2、每个HTTP请求中都包含cookies，从而导致发送未加密的数据到互联网上。 3、cookies存储量只有4KB数据，不足以存储所需要的数据。这两种方式是session storage 和 l

2017-09-11 21:24:12 232

HTML5新的Input类型email 用于提交应该填写e-mail的输入框E-mail:<input type="email" name="email">提交表单时会自动验证输入的是否满足email格式。url专门输入url的输入框URL:<input type="url" name="url">number应包含数值的输入框number: <input type="number" name="n

2017-09-11 17:55:09 340

原创 HTML5--新增的标签、属性和事件

（这里介绍的都是新增的一些，之前的属性事件依旧可以使用） HTML5标签正确的使用标签对网页的SEO有很大的帮助，例如使用h1-6搜索印象会自动认为是标题。每个标签都有它特有的想表达的意思，最后根据实际用途使用它们而不是乱用，然后在使用CSS修改效果。可以下看http://www.admin5.com/article/20131012/527361.shtml 下面进入正题：一、结构

2017-09-11 16:55:55 1055

原创 HTML5--视频，音频

视频<video src="movie.ogg" controls="controls">Your browser does not support the video tag.</viedo>1、当然你video支持三种视频格式 ogg、MPEG 4、WebM 2、video之间插入的内容是不支持video元素的浏览器显示的。 3、不同格式的文件使用不同的浏览器。因此为了兼容，vide

2017-09-11 12:03:24 300

原创 CSS3--Transition,Transform和Animation

因为说的是动态效果，所以并没有截图，如果想看效果复制代码后即可以看到。不过还是建议大家手动操作。一、Transition(过渡) 属性： transition-property：用于指定过渡的性质，比如 transition-property:backgrond 就是指对backgound的变化进行过渡。 transition-duration：用于指定这个过渡的时间。（多久将效果过渡完成）

2017-09-08 15:01:11 456

原创 JQuery 基本方法报错：... is not a function的问题

是否碰到过类似问题（前提是正确引入了JQuery）看图说问题<input type="file" name="pic1" id="pic1" onchange="preview(this)" multiple="multiple">其实是：JQuery选择器得到的元素对象，和JavaScript获取元素对象的问题上面两张图是我对 input元素的获取，使用的两种方式，pic1用的是原生JS

2017-09-07 17:45:27 16897

原创 jquery选择器和css选择器

今天开发中碰到一个问题。<div class="maindiv"> <div class="mydiv"> <select name="" id=""></select> </div> <div class="mydiv"> <select name="" id=""></select> </div> <div class="m

2017-09-06 18:53:17 802

原创 input表单内添加单位或者文字或者图标的方法

如上面图的需求。暂时想到两种方法一、绝对定位.div2 span{ position:absolute; right:50%;}<div class="div2"> <label for="money">输入金额：</label> <input type="text" name="money"><span>$</span></div>原理很好理解，父级pos

2017-09-05 17:57:53 22730

原创手动触发点击事件

jquery的trigger() 触发被选元素的指定事件类型$('obj').trigger('event');$('btn').trigger('click');写到这里顺便提一下click()与onclick()的区别 click是一个方法 onclick是一个事件<button onclick=('myclick()')>按钮</button>当我用鼠标点击这个button时，会触发my

2017-09-05 17:10:06 11521

原创 .map()和.filter()以及他们的区别

今天看到朋友写的一个数组对比，用的filter()，于是就想想起map()，都是对内部的元素一个一个去遍历，然后输出，到底有什么区别的。先说下，jquery也有这两个方法，不过大家都懂得，他们都是对JavaScript进行的封装，我这里只说下JavaScript的。我们说的map()和filter()其实是： Arrpay.prototype.map() 创建一个新的数组，其结果是该数组中每

2017-09-04 12:08:03 9894 7

原创 jquery 获取表单数据（获取序列化表单数据）

jquery方法:使用serialize()$("button").click(function(){ console.log($("form").serialize());});要表单元素的值包含到序列字符串中，元素必须有 name 属性。原生JS方法var myForm = document.getElementsByClassName('myForm');console.log(m

2017-09-04 09:59:38 2909

原创 CSS3--弹性盒模型（display:flex）

介绍篇好的文章：https://www.ibm.com/developerworks/cn/web/1409_chengfu_css3flexbox/盒模型的概念并不是很陌生。在传统的不居中，block不会是把块在垂直方向上从上到下排列；inline是在水平方向排列。而现在要介绍的CSS3的弹性盒模型并没有这样的限制，可以有开发人员自由操作。优势：弹性盒模型可以用简单的方式免租很多常见的布局

2017-09-01 12:05:01 1145

zcy_csdn123的博客