代码改变世界

随笔分类 -  JS+JQuery

定义并立即执行匿名函数的用法

2012-09-17 11:40 by @影子@, 658 阅读, 收藏, 编辑
摘要: 红皮书上有一个例子 function createFunctions(){ var result = new Array(); for (var i=0; i < 10; i++){ result[i] = function(n){return function(){return n;};}(i); } return result; } var funcs = cre... 阅读全文

JS面向对象,从创建对象到对象继承

2012-09-14 18:44 by @影子@, 1758 阅读, 收藏, 编辑
摘要: 以前写过一篇关于JS创建对象的帖子,JS创建对象的几种方法,突然想温习一下,所以写了下面的小例子,用来回顾这七种create pattern。每种pattern都有自己的特色。1 工厂模式中,在构造函数内部用 o={}创建一个新对象,最后返回这个对象。当实例化时,不需要用new关键字,就像调用一般的方法一样。我们可以把create函数设想成一个贴牌工厂,面对不同的需求,制作出内在相同,标签不同的产品。工厂模式最大的问题是容易和普通函数混淆,方便归方便,但我们只能通过命名来确认它是一个构造函数。 /*1.factory pattern*/ function createPerson(n... 阅读全文

利用canvas制作最简易的画板

2012-08-14 12:33 by @影子@, 1781 阅读, 收藏, 编辑
摘要: HTML5 横空出世,怎能不提神奇的 canvas。还记得多年前小探 GDI 和 opengl 时的心潮澎湃,那时一心想在web中实现画板功能,但困惑于如何在 html 中嵌入 c++ 编译后的 exe 文件。后来,flash 和 flash3D 的发展让人没理由再去纠结这个问题,在 web 中嵌入一个 swf 相比 exe 要轻松多啦。直到有一天,WHATWG 的那组人向世界宣称 HTML5 添加了对脚本和布局之间的原生交互能力,他们的目标是和插件说再见。哇,这太让人激动,当禁用屏蔽安装失败的隐患消除之后,世界将变得更加和谐,于是渺小的我,从 canvas 开始,开启 Html5 的入门之旅 阅读全文

M2级遍历和范围----Range

2012-08-05 19:33 by @影子@, 297 阅读, 收藏, 编辑
摘要: DOM中的范围DOM2在document类中定义了createRange()方法。在兼容DOM的浏览器中,这个方法属于document对象。使用hasFeature()或者直接检测该方法,都可以确定浏览器是否支持范围。var supportsRange = document.implemention.hasFeature("Range","2.0");var alsoSupportsRange = (typeof documnet.createRange == "function");如果浏览器支持range,则可以使用createR 阅读全文

DOM2级遍历和范围----TreeWalker

2012-08-05 17:36 by @影子@, 243 阅读, 收藏, 编辑
摘要: TreeWalker除了包括nextNode()和prevousNode()之外,还提供不同方向之上的遍历DOM结构的方法。parentNodefirstChildlastChildnextSiblingpreviousSibling创建TreeWalker对象的方法documnet.createTreeWalker()方法,该方法接受4个参数,与document.createNodeIterator()方法相同TreeWalker真正强大的地方在于可以在DOM结构中沿任意方向移动(IE不支持) 阅读全文

JavaScript中值的固有布尔属性及其比较

2012-07-19 09:24 by @影子@, 559 阅读, 收藏, 编辑
摘要: 固有的布尔属性值在js中存在一个固有的布尔值。以下的值总是false的,他们是:false0"" (空字符串)nullundefinedNaN (Not-a-Number)另外,有些值是true的,"0" (0在引号中),"false"(false在引号中),空函数,空数组,空对象。vara=!!(0);//variableissettofalsevarb=!!("0");//true 固有false值的比较false、 0 、"" (空字符串) 是相等的,并且可以进行比较varc=(false 阅读全文

Jquery的简写

2012-07-16 14:51 by @影子@, 1295 阅读, 收藏, 编辑
摘要: jquery大大简化了js的dom操作。除此之外,jquery还特别的注重自身的修炼,极力推崇瘦身。于是乎有些不可不知的常用jquery简写,在此一一总结。$(docment).ready(function(){…})简化为$(function(){…})$(selector).bind('click','function(){…}')简化为$(selector).click(function(){…})另外,toggle和hover有些相通,还有一个toggleClass和前面这两个函数有点共性。看例子,自动的在moveover和moveout的时候执行: $ 阅读全文

函数式编程----stream.js

2012-07-11 16:10 by @影子@, 363 阅读, 收藏, 编辑
摘要: http://www.aqee.net/stream-javascript-lib/http://www.aqee.net/docs/stream/http://streamjs.org/stream.js 是一个很小、完全独立的Javascript类库,它为你提供了一个新的Javascript数据结构:streams.<scriptsrc='stream-min.js'></script>下载 stream.js 2Kb minifiedstreams是什么?Streams 是一个操作简单的数据结构,很像数组或链接表,但附加了一些非凡的能力。它们有什么 阅读全文

JS创建对象的几种方法

2012-07-11 15:28 by @影子@, 2538 阅读, 收藏, 编辑
摘要: 题外话:昨天手欠,试图用alert(window.appName)到ff之下去查看浏览器版本,结果弹出的竟然是Netscape,咋不是 firefox。继而又跑去chrome下试验,又一次弹出了Netscape。baidu搜 Netscape 竟然发现js就出自Netscape公司。惭愧啊惭愧!!!研究了这么久的js都不认识祖师爷。于是又跑去找了找族谱,原来js出自Brendan Eich之手,95年他创造js时候,也不过就31岁。哎呀,真是白活了,如他一般老的我,到现在都学不会js,真是人比人气死人。。js当初设计的时候,没有想到自己能从一部打电话用的手机变成集拍照,上网,游戏,电话于一身的 阅读全文

Nicholas C. Zakas如何面试前端工程师

2012-07-10 23:59 by @影子@, 215 阅读, 收藏, 编辑
摘要: 2010年01月8日Web开发,原创,翻译Original Post:Interviewing the front-end engineerNicholas C. Zakas,2010年1月5日翻译完成:2010年1月7日,最后更新:2010年1月10日面试前端工程师对我来说是一件非常有意思的事,因为面试过程很大程度上也是自我提升的过程。无论大公司还是小公司,之所以在如何招聘到真正有能力的前端工程师方面会遇到同样的问题,就是因为负责招聘的那些人不知道自己公司需要什么样的人,结果问问题时也问不到点子上。经过这几年在行业里的摸索,我总结出了自己的一套很有效的面试前端工程的方法。有的应聘者说我不好对 阅读全文

JS字符串的slice和splice

2012-07-06 14:52 by @影子@, 895 阅读, 收藏, 编辑
摘要: 常用的是join,不常用的reverse sort concat都是顾名思义然后还有一对彼岸花,那就是slice和splice。。本是同根生啊···但是 一刀下去 slice在左,splice右,永不相见啦。需要注意的是数组剪掉了就是剪掉了的···比如一个c=d.splice(4);,,,之后d就剩下d.slice(0, 4)啦pop和push是很常用的···但是这两个是作用于数组的最后面··相当于栈···而shift和unshift则是反方向的· 阅读全文

转:jQuery框架学习第一天:开始认识jQuery

2012-06-27 10:11 by @影子@, 186 阅读, 收藏, 编辑
摘要: jQuery框架学习第一天:开始认识jQueryjQuery框架学习第一天:开始认识jQueryjQuery框架学习第二天:jQuery中万能的选择器jQuery框架学习第三天:如何管理jQuery包装集jQuery框架学习第四天:使用jQuery操作元素的属性与样式jQuery框架学习第五天:事件与事件对象jQuery框架学习第六天:jQuery中的Ajax应用jQuery框架学习第七天:jQuery动画–jQuery让页面动起来!jQuery框架学习第八天:ASP.NET jQuery实施方案jQuery框架学习第九天:jQuery工具函数介绍与使用jQuery框架学习第十天:实战jQue 阅读全文

转载:解决html的select(下拉框)宽度问题

2012-05-30 11:14 by @影子@, 2515 阅读, 收藏, 编辑
摘要: 本文转载自http://linjunhong.iteye.com/blog/462125我们经常要使用select ,但select的大小会随着内容的大小而变化。很烦人啊。网上有人说用层来替代,这个方法是可行的,就是觉得有点麻烦。本人喜欢投机取巧。。呵呵所以想了个懒办法--用脚本控制当select被点击(onclick或者onchange)的时候调用脚本函数改变这个select的width值当select失去焦点(onblur)的时候再一次调用脚本恢复这个select的width值。<select id="linjunhong" name="xiamen&q 阅读全文

转载:js页面文字选中后分享到新浪微博实现

2012-05-29 10:29 by @影子@, 311 阅读, 收藏, 编辑
摘要: byzhangxinxufromhttp://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1428一、功能简述正是微博如火如荼的时节,其中各个微博的分享功能是网站推广产品的好东东啊,此时如何方便快捷的使用微博的分享功能就显得比较重要了。我的站点每篇文章的底部有一些分享的链接:不过我觉得这些分享基本上就是聋子的耳朵——摆设。除非这篇文章惊天地、泣鬼神,痛彻心扉,穿越前世今生。但是,如果有更加方便快捷的分享方式,这种冷淡得让人结冰的场面或许就不会经常出现。一般翻译软件都有划词翻译功能,例如有道桌面词典的桌面划词翻译功能 阅读全文

jquery获取鼠标位置

2012-05-28 13:29 by @影子@, 942 阅读, 收藏, 编辑
摘要: functiongetScrollLeft(){vard=document;returnwindow.pageXOffset||d.documentElement.scrollLeft||d.body.scrollLeft;};functiongetScrollTop(){vard=document;returnwindow.pageYOffset||d.documentElement.scrollTop||d.body.scrollTop;};varxy={x:0,y:0};//监听当前网页的mousemove事件以获得鼠标的实时坐标$(document).mousemove(functio 阅读全文

OL有序列表 IE 与 非IE 浏览器兼容问题解决

2012-05-28 09:55 by @影子@, 208 阅读, 收藏, 编辑
摘要: 关键是引用让数字在内部显示list-style:decimal inside;如果不加,IE不会递增display: list-item;<style>.iknow_list{ width:241px; height:160px; padding:0px; margin-top:5px; background:url(img/fk.jpg) no-repeat right bottom}.iknow_list ol{ margin:0px; padding:0px; width:241px;}.iknow_list ol li{ margin:0px; padding:0px;li 阅读全文

How to alternate Range moveStart in Firefox?

2012-05-25 16:27 by @影子@, 408 阅读, 收藏, 编辑
摘要: QUESTIONDoes anybody know how to use range.setStart in the same way as range.moveStart works in IE? I'd like to implement backspace/delete in JS, something like this:range.moveStart('character',-1); range.deleteContents();but in FirefoxANSWERFirefox, along with all modern browsers except 阅读全文

JavaScript 中在光标处插入添加文本标签节点 详细方法

2012-05-25 16:01 by @影子@, 1077 阅读, 收藏, 编辑
摘要: 正确的方法是正确运用Selection对象和Range对象,实现在光标当前位置插入文本或结点。但是这两个对象在IE和标准的DOM方式的运用方法是不同的。思路:首先获得用户的选区(光标当前位置可理解成起始和终止位置一样的选区)。然后,从Selection对象转成Range对象。目的是利用Range对象的方法插内容进去。最后,插入动作结束后将光标移到插入内容的后面。Html代码 varsel=win.document.selection;//IEvarsel=win.getSelection();//DOMvarrange=sel.createRange();//IE下varrange=sel.g 阅读全文

兼容 FF&IE 的替换鼠标选择文字方法(转载)

2012-05-25 15:28 by @影子@, 247 阅读, 收藏, 编辑
摘要: <script type="text/javascript">function changes(obj){var TextIn=document.getElementById("textin");if(TextIn.createTextRange){ //ie兼容 TextIn.focus(); document.selection.createRange().duplicate().text=obj;}else{ //firefox兼容 var iStart = TextIn.selectionStart; var iEnd = TextI 阅读全文

转:ie和firefox的区别:range操作

2012-05-24 23:59 by @影子@, 353 阅读, 收藏, 编辑
摘要: //if firefoxirange = window.getSelection().getRangeAt(0);// if ieirange = document.selection.createRange();我先说一下代码的目的:要获得当前用户鼠标拖选内容所在的节点类型,我个人的功能目的在于判断当前是否一个A节点,如果是,那么取得他的href。我们先看firefox:在firefox的dom标准,定义了一个属性我们可以直接使用它来获得所选内容的父节点,同时使用nodeName来获得当前节点的类型:irange.startContainer.nodeName;我在firefox里面aler 阅读全文