javascript
文章平均质量分 50
ForMyWebFrontSide
做过后端,管理过项目,管过人。在前端技术迅猛发展的这几年,猛然的发现前端工作才是自己的心头爱。目前是一个热爱并志向能从头设计、并实现优秀项目的,偏设计、视觉系方向的前端人或者独立项目者,也喜欢了解性能、优化方面、安全、部署、测试等一条龙的东西。平时愿意倒腾同一玩意的不同实现,有一定程度的代码洁癖,喜欢高质量,结构优秀的代码。一定程度的喜欢研究原理性的东西。对项目能大包大揽,但更喜欢能各尽所能,发挥最大优势,提高工作效率的分工合作。
展开
-
css3动画事件—webkitAnimationEnd与计时器time事件
http://www.jb51.net/css/72443.html用css3的animation完成一个动画,当只有这个动画完成时才执行令一个事件,比如让动画保持在终止的状态或其他一些事件,关于这个问题,本文给出详细的解决方案,感兴趣的朋友可以了解下或许对你有所帮助.用css3的animation完成一个动画,当只有这个动画完成时才执行令一个事件,比如让动画保持在终止的状态或转载 2015-08-30 21:02:59 · 723 阅读 · 0 评论 -
Javascript引擎单线程机制及setTimeout执行原理说明
setTimeout用法在实际项目中还是会时常遇到。比如浏览器会聪明的等到一个函数堆栈结束后才改变DOM,如果再这个函数堆栈中把页面背景先从白色设为红色,再设回白色,那么浏览器会认为DOM没有发生任何改变而忽略这两句话,因此我们可以通过setTimeout把“设回白色”函数加入下一个堆栈,那么就可以确保背景颜色发生过改变了(虽然速度很快可能无法被察觉)。 总之,s转载 2015-08-30 20:01:53 · 664 阅读 · 0 评论 -
实现绝对定位元素的水平垂直居中
实现绝对定位元素的水平垂直居中转载 2015-09-09 21:01:10 · 1666 阅读 · 0 评论 -
JavaScript中的值类型和引用类型
在各类面向对象语言里面要涉及值类型和引用类型的概念,现在作为JS从业者,原理不能放下,在温习一遍。JavaScript中的值类型和引用类型一、拥抱JavaScript曾经名不经传的JavaScript随着AJAX的流行而身价倍增,现在JavaScript不再仅仅是WEB开发中一个可有可无的辅助工具,甚至有了专门属于它的职位“JavaScript工程师”,那怕你仅仅是转载 2015-09-27 17:11:20 · 570 阅读 · 0 评论 -
浅谈javascript的五种基本数据类型
浅谈javascript的五种基本数据类型http://glzaction.iteye.com/blog/1285147博客分类: javascriptundefinedjavascriptnumberstring编程 在javascript中申明变量使用的关键字都是var,这点与其他的编程语言不尽相同,但是javascript亦含有五种基本的转载 2015-10-02 19:41:29 · 670 阅读 · 0 评论 -
Javascript使用方括号([])引用对象的属性和方法,[]和.的区别
javascr在JavaScript中,每个对象可以看作是多个属性(方法)的集合,引用一个属性(方法)很简单,即:对象名.属性(方法)名除此之外,还可以用方括号的形式来引用:对象名["属性(方法)名"]注意,这里的方法名和属性名是一个字符串,而非原先点号后面的标识符,例如:var arr=new Array();//为数组添加一个元素arr["p转载 2015-10-19 20:58:24 · 876 阅读 · 0 评论 -
null 与Undefined的区别
JS在JavaScript中存在这样两种原始类型:Null与Undefined。这两种类型常常会使JavaScript的开发人员产生疑惑,在什么时候是Null,什么时候又是Undefined?Undefined类型只有一个值,即undefined。当声明的变量还未被初始化时,变量的默认值为undefined。Null类型也只有一个值,即null。null用来表示尚未转载 2015-10-05 11:22:00 · 497 阅读 · 0 评论 -
stopPropagation, preventDefault 和 return false 的区别
stopPropagation, preventDefault 和 return false 的区别23因为有父, 子节点同在, 因为有监听事件和浏览器默认动作之分. 使用 JavaScript 时为了达到预期效果经常需要阻止事件和动作执行. 一般我们会用到三种方法, 分别是 stopPropagation(), preventDefault() 和 ret转载 2015-10-05 11:56:07 · 462 阅读 · 0 评论 -
js 将json字符串转换为json兑现
在数据传输过程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键。例如:JSON字符串:var str1 = '{ "name": "cxh", "sex": "man" }'; JSON对象:var str2 = { "name": "cxh", "sex": "man" };一、JSON字符串转转载 2015-10-07 21:46:10 · 520 阅读 · 0 评论 -
关于JavaScript中apply与call的用法意义及区别
JavaScript中有一个call和apply方法,其作用基本相同,但也有略微的区别。先来看看JS手册中对call的解释:call 方法调用一个对象的一个方法,以另一个对象替换当前对象。call([thisObj[,arg1[, arg2[, [,.argN]]]]])参数thisObj可选项。将被用作当前对象的对象。arg1,转载 2015-10-06 16:22:51 · 407 阅读 · 0 评论 -
jquery 使用概览
jquery 使用方法 jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQuery作为他们的官方库。对于网页开发者来说,学会jQuery是必要的。因为它让你了解业界最通用的技术,为将来学习更高级的库打下基础,并且确实可以很轻松地做出许多复杂的效果。http://www转载 2015-10-07 22:43:41 · 394 阅读 · 0 评论 -
理解JavaScript中的事件轮询
理解JavaScript中的事件轮询原文:http://www.ruanyifeng.com/blog/2014/10/event-loop.html为什么JavaScript是单线程JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。那么,为什么JavaScript不能有多个线程呢?JavaScript的单线程,与它的用途有关。作为浏览器脚本语转载 2015-10-11 17:18:57 · 463 阅读 · 0 评论 -
理解Node.js事件驱动编程
理解Node.js事件驱动编程Node.js现在非常活跃,相关生态社区已经超过Lua(基本上比较知名的功能都有nodejs模块实现)。 但是我们为何要使用Node.Js?相比传统的webserver服务模式,nodejs有什么优点优势? Node.Js是基于javascript语言,建构在google V8 engine以及Linux转载 2015-10-11 17:53:18 · 493 阅读 · 0 评论 -
javascript中的 offsetParent
在td中的元素会把第一个绝对/相对定位的hierarchy parent当作offsetParent,如果没有找到需要分三种情况讨论 一,如果该元素没有绝对/相对定位,则会把td当作offsetParent 二,如果该元素绝对/相对定位并且table没有绝对/相对定位,则会把body当作offsetParent 三,如果该元素绝对/相对定位并且table绝对/相对转载 2015-11-12 21:10:40 · 454 阅读 · 0 评论 -
event.srcElement和e.target
event.srcElement 可以捕获当前事件作用的对象,如event.srcElement.tagName可以捕获活动标记名称。注意获取的标记都以大写表示,如"TD","TR","A"等。所以把看过的一些抄下来,不记得的时候再来看看。 复制代码代码如下: function tdclick(){ if(event.srcElement.tagName.toLow转载 2015-11-12 21:12:13 · 536 阅读 · 0 评论 -
拖拽表格单元格,改变单元格内容
拖动td{width:20%;height:20px;border-bottom:1px solid black;border-right:1px solid black;cursor:default;}div{font-size:13px;}th{height:20px;font-size:12px;font-weight:normal;border-bottom:2px sol转载 2015-11-12 21:32:40 · 1858 阅读 · 0 评论 -
onselectstart
onselectstart几乎可以用于所有对象,其触发时间为目标对象被开始选中时(即选中动作刚开始,尚未实质性被选中)。onselectstart该事件常使用使用js禁止用户选中网页上的内容,IE及Chrome下的方法一样。使用onselectstart,例如 IE: Firefox下,控制css: body { -moz-user-select: none; }转载 2015-11-12 22:44:49 · 478 阅读 · 0 评论 -
用JQuery写拖拽的简单实例
html>html>head lang="en"> meta charset="UTF-8"> title>title>head>style> #dv1 { background: red; width: 100px; height: 100px; position: absolute; }s原创 2015-11-13 00:27:41 · 1484 阅读 · 0 评论 -
Cookie/Session机制详解
Cookie/Session机制详解分类: 架构师之路2011-11-09 17:55 89093人阅读 评论(53) 收藏 举报session浏览器服务器stringjavascript加密会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话。常用的会话跟踪技术是Cookie与Session。Cookie通过在客户端记录信息确转载 2015-10-14 18:58:23 · 389 阅读 · 0 评论 -
在Javascript中什么是伪数组?如何将伪数组转化为标准数组?考虑兼容性
伪数组(类数组):无法直接调用数组方法或期望length属性有什么特殊的行为,但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数,还有像调用getElementsByTagName,document.childNodes之类的,它们都回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化转载 2015-10-15 11:49:29 · 5771 阅读 · 0 评论 -
让你彻底弄清offset
很多初学者对于JavaScript中的offset、scroll、client一直弄不明白,虽然网上到处都可以看一张图(图1),但这张图太多太杂,并且由于浏览器差异性,图示也不完全正确。图一 不知道大家看到这张图的第一感觉如何,反正我的感觉就是“这次第,怎一个乱字了得”。 既然我认为上图太多太乱,那么我就把offset、scroll、client分开说,希望能让转载 2015-10-29 12:40:41 · 828 阅读 · 0 评论 -
为什么将js脚本放在底部而不是头部
当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。转载 2015-10-15 19:19:46 · 2843 阅读 · 0 评论 -
按需加载图片、js
“按需加载”的应用 按需加载是前端性能优化中的一项重要措施,按需加载是如何定义的呢?顾名思义,指的是当用户触发了动作时才加载对应的功能。触发的动作,是要看具体的业务场景而言,包括但不限于以下几个情况:鼠标点击、输入文字、拉动滚动条,鼠标移动、窗口大小更改等。加载的文件,可以是JS、图片、CSS、HTML等。后面将会详细介绍“按需”的理解。 按需解析HT...转载 2015-10-14 21:07:32 · 2283 阅读 · 0 评论 -
完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单。HTML5的新标签元素有:定义页面或区段的头部;定义页面或区段的尾部;定义页面或区段的导航区域;页面的逻辑区域或内容组合;定义正文或一篇完整的内容;定义补充或相关内容; 使用他们能让代码语义转载 2015-10-14 21:40:14 · 604 阅读 · 0 评论 -
最全面的水平垂直居中方案与flexbox布局
最全面的水平垂直居中方案与flexbox布局最近又遇到许多垂直居中的问题,这是Css布局当中十分常见的一个问题,诸如定长定宽或不定长宽的各类容器的垂直居中,其实都有很多种解决方案。而且在Css3的flexbox出现之后,解决各类居中问题变得更加容易了。搜了搜园子内关于flexbox的文章觉得很多不够详尽,故想借介绍flexbox的同时好好总结转载 2015-10-15 23:54:19 · 1091 阅读 · 0 评论 -
改进的table单元格拖拽,可限制能拖动的连续单元格范围
html>HEAD> META http-equiv="Content-Type" content="text/html; charset=gb2312"> TITLE>拖动TITLE> STYLE> td { width: 20%; height: 20px; border-bott原创 2015-11-14 22:55:19 · 1573 阅读 · 1 评论 -
为什么建议使用link方式来加载css,而不是使用@import方式
href是Hypertext Reference的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,如果我们在文档中添加那么浏览器会识别该文档为css文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css,而不是使用@import方式。页面中使用CSS的方式主要有3种:行内添转载 2015-10-15 19:25:06 · 4737 阅读 · 0 评论 -
如何判断jQuery对象与dom对象
判断JQUERY对象当我们在用jquery的each做循环遍历的时候常常会使用到this,而有时候我们不知道this所指的到底是什么,因为要使用jquery的方法 前提此对象必须是jquery对象。另外要判断一个javascript的对象是什么类型,可以使用typeof, 但是typeof只能判断出js的基础对象(string,boolean,number,object转载 2015-11-15 18:52:07 · 6880 阅读 · 0 评论 -
网页图表Highcharts实践教程之图表区
http:/17http://my.oschina.net/u/1585857/blog/425317摘要 网页图表Highcharts实践教程之图表区网页图表 Highcharts 图表区目录[-]网页图表Highcharts实践教程之图表区网页图表Highcharts图表区网页图表Highcharts图表区的构成网页图表Highcha转载 2015-12-15 15:54:44 · 521 阅读 · 0 评论 -
点击子对象,不解触发父对象click事件
if(e.target!=e.currentTarget) return;原创 2015-12-15 21:41:28 · 554 阅读 · 0 评论 -
在jQuery,如何判断页面元素是否存在?
在jQuery,如何判断页面元素是否存在呢?这样?if ($("#Id")){ /*code*/}可这样是不对的,因为jQuery对象永远都有返回值!$("#Id")总是 true。正确的写法应该是:if ( $("#Id").length > 0 ) { /*code*/}关于判断某个页面元素是否存在,有说法是:判断某个页面元素存原创 2016-01-20 19:58:24 · 559 阅读 · 0 评论 -
Javascript异步编程的4种方法
Javascript异步编程的4种方法分享按钮作者: 阮一峰日期: 2012年12月21日你可能知道,Javascript语言的执行环境是"单线程"(single thread)。所谓"单线程",就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推。这种模式的好处是实现起来比较简单,执行环境相对单纯;坏处转载 2016-01-06 19:13:20 · 277 阅读 · 0 评论 -
Javascript定义类(class)的三种方法
作者: 阮一峰日期: 2012年7月 9日将近20年前,Javascript诞生的时候,只是一种简单的网页脚本语言。如果你忘了填写用户名,它就跳出一个警告。如今,它变得几乎无所不能,从前端到后端,有着各种匪夷所思的用途。程序员用它完成越来越庞大的项目。Javascript代码的复杂度也直线上升。单个网页包含10000行Javascript代码,早就司转载 2016-01-14 23:57:02 · 377 阅读 · 0 评论 -
应该如何在小,中,大型应用开发中组织前端js代码?
时间有限,粗略写一下:1.基础 - 函数版:function a(){};function b(){};2.入门 - 字面量版:var obj = { init : function(){ this.a(); this.b(); }, a : function(){}, b : function(){}}转载 2016-01-15 00:10:57 · 643 阅读 · 0 评论 -
javascript构造函数、单例模式资料
http://www.nowamagic.net/librarys/veda/detail/1642http://www.cnblogs.com/iceknp/archive/2010/06/08/1753729.html单例模式http://www.cnblogs.com/TomXu/archive/2012/02/20/2352817.html转载 2016-01-15 00:31:15 · 362 阅读 · 0 评论 -
js获取网页高度(详细整理)
http://www.jb51.net/article/32874.htmhttp://www.haorooms.com/post/js_jquery_height function getInfo() { var s = ""; s += " 网页可见区域宽:"+ document.body.clientWidth; s += " 网页可见区域高:"+ docum转载 2016-01-26 00:40:57 · 1589 阅读 · 0 评论 -
加载动画效果集
1.http://www.yyyweb.com/demo/page-loading-effects/index3.html转载 2016-02-22 23:46:53 · 412 阅读 · 0 评论 -
jquery 排除选择某个元素的正确写法
div id="content" style="border:1px solid red;"> div id="divWrap" style="border:1px solid blue;width:100px;height:100px;">divWrap div id="dv1" style="border:1px solid yellow;">divdiv> di原创 2016-03-16 17:18:48 · 3106 阅读 · 0 评论 -
jQuery的each方法的几种常用的用法
jQuery的each方法的几种常用的用法Js代码var arr = [ “one”, “two”, “three”, “four”];$.each(arr, function(){alert(this);});//上面这个each输出的结果分别为:one,two,three,fourvar arr1 = [[1, 4, 3], [4, 6, 6], [7, 2转载 2016-02-18 20:07:09 · 552 阅读 · 0 评论 -
jQuery.extend和jQuery.fn.extend的区别
jQuery插件开发分为两种:1 类级别、2 对象级别1 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法。 开发扩展其方法时使用$.extend方法,即jQuery.extend(object); 复制代码代码如下:$.extend({ add:function(a,b){return a+b;转载 2016-02-18 21:45:38 · 326 阅读 · 0 评论