JavaScript – WEB前端开发- 专注前端开发，关注用户体验

日志标签：JavaScript

javascript插入样式

时间：2012年01月30日作者：愚人码头查看次数:1,163 views评论次数：7

最近做一个项目，需要javascript动态插入样式，结果以前的方法失效了！查了2个小时的原因竟然是自己手贱，这个最后再说！

javascript插入样式在前端开发中应用比较广泛，特别是在修改前端表现和页面换肤的时候。最近做的这个任务是用户在别人的站点上点击一个按钮，就会在别的站点页面下插入一个脚本，执行，这其中包含了样式的插入。

一般情况下javascript动态插入样式有两种，一种页面中引入外部样式,在<head>中使用<link>标签引入一个外部样式文件，另一种是在页面中使用<style>标签插入页面样式（这里说的不是style属性）。

一、页面中引入外部样式：

在<head>中使用<link>标签引入一个外部样式文件，这个比较简单，各个主流浏览器也不存在兼容性问题：


function includeLinkStyle(url) {
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = url;
document.getElementsByTagName("head")[0].appendChild(link);
}

includeLinkStyle("http://css.sodao.com/home/css/reset.css?v=20101227");

但是在我目前做的这个项目中本身应用的样式非常少，直接用引入一个外部样式文件似乎不合适，所以我选择了第二种方案，在页面中使用<style>标签插入页面样式。

二、使用<style>标签插入页面样式：

这种方式在各个主流浏览器存在兼容性问题，像firefox等标准浏览器无法直接获取设置styleSheet的cssText值，标准浏览器下只能使用document.styleSheets[0].cssRules[0].cssText单个获取样式；同时使用：document.styleSheets[0].cssRules[0].cssText=newcssText；页面不会自动更新样式，必须使用：document.styleSheets[0].cssRules[0].style.cssText=newcssText；这点似乎没坑爹的IE来的人性化和简便。YUI中使用了一个很好的办法：style.appendChild(document.createTextNode(styles));采用createTextNode将样式字符串添加到<style>标签内；


function includeStyleElement(styles,styleId) {

if (document.getElementById(styleId)) {
return
}
var style = document.createElement("style");
style.id = styleId;
//这里最好给ie设置下面的属性
/*if (isIE()) {
style.type = "text/css";
style.media = "screen"
}*/
(document.getElementsByTagName("head")[0] || document.body).appendChild(style);
if (style.styleSheet) { //for ie
style.styleSheet.cssText = styles;
} else {//for w3c
style.appendChild(document.createTextNode(styles));
}
}
var styles = "#div{background-color: #FF3300; color:#FFFFFF }";
includeStyleElement(styles,"newstyle");

这样页面中的元素就能直接应用样式了，不管你的这些元素是不是通过脚本追加的。

关于手贱：

看这段代码：


var divObj = document.createElement("div");
divObj .id = "__div";
divObj .innerHTML="测试js插入DOM和样式";
document.body.appendChild(divObj );

var styles = "#__div{background-color: #FF3300; color:#FFFFFF }";
includeStyleElement(styles,"newstyle");

前面说了这个项目是用户在别人的站点上点击一个按钮，就会在别的站点页面下插入一个脚本，执行，这其中包含了样式的插入，我为了尽可能的保证我创建的元素ID唯一性，手贱在元素ID前加了“__”,表示私有防止冲突。结果悲剧了，IE6，IE7 class和id的命名不能以下划线开头（“_”），竟然把这个给忘了！花了两个小时才找到原因。悲剧啊！得出一个结论！做前端千万不能手贱！

标签：JavaScript,styleSheet分类：JS

[转载]2011回顾：20个将JavaScript推到极致的网站

时间：2011年12月29日作者：愚人码头查看次数:2,167 views评论次数：2

转载至：http://www.webapptrend.com/2011/12/1123.html

对于浏览器上的开发者来说，2011年又是相当精彩的一年。web开发者Phil Hawksworth在这篇文章中总结了web 上经典的JavaScript用法。

那些喜欢冒险体验前沿技术的开发者现在应该会非常开心。浏览器正变得越来越强大，上面有各种丰富的功能可以供开发者选择，一些在几年前几乎难以想象的功能都已经一一实现。有了这些新功能，开发者现在能够开发出更精细、更复杂、更有想象力的用户界面了。这为网站开发扫清了障碍，网站能够拥有让人惊喜的用户界面了。

有时候，这种技术的运用是非常精妙的，它无声无息地改变了应用的用户体验。有时结果就像是加入樱桃可乐中的跳跳糖，悄悄地给人们带来惊喜。

这里有20个特别突出的网站，他们在定位、技巧或者是JavaScript的使用上有各自的独到之处。

演示网站

先看一些有趣的东西。这些网站利用JavaScript将Canvas，WebGL，CSS3和HTML5元素这些浏览器技术融合在了一起。通常这些技术只是用来取悦用户，或是在现代的浏览器中显示一些新的功能。虽然大多数的功能都很不错，但有些会占用大量的处理器或是显卡，所以笔记本电脑用户常常需要关注他们的笔记本温度，以免温度过高而出现异常。

1. Baroque.me

Baroque.me是一个简单，但是能够催眠的网站，它就用到了HTML5 Canvas元素，并使用JavaScript巧妙地控制了一个简单的虚拟巴赫大提琴设备的渲染工作。网站的声音是由Flash提供的，并且使用JavaScript控制。你可以控制页面上那些跳动的圆点，但是却很难控制大提琴的时间节奏。

它的开发者Alexander Chen来自Google Creative Labs，也参与了非常受欢迎的Les Paul Google Doodle开发，在早些时候，还开发了一个非常棒的可视化NY地铁系统。

2. Beercamp

Beercamp 2011的界面非常有趣，可以自由缩放，它非常巧妙地使用了CSS3和JavaScript技术，这一点吸引了许多人的关注。网站大量采用了CSS3转换和变形效果，你还会发现它劫持了浏览器的滚动事件用来控制网页的缩放效果。今年的早些时候David DeSandro曾分享了相关效果实现的技术细节。

3. Three.js

Canvas和WebGL这些技术为浏览器带来了强大的渲染功能。Mr. Doob开发的Three.js项目是一个3D JavaScript引擎，能够利用浏览器上的这些新功能渲染页面。下面是一个利用Three.js渲染动画或是3D模型的例子。

4. Windows Phone Demo

最新消息：web将覆盖移动设备！老实说，这个消息确实对使用JavaScript技术的移动市场来说是一个好消息。这还只是推动移动市场发展的第一步。

为了演示新的Windows移动设备界面，Microsoft开发了一个Windows mobile上的演示示例。用户确实能够发现它的界面播放的动画非常流畅，并且响应相当及时。这也是CSS和JavaScript的功劳（最好是通过iPhone或是Android设备访问——目前还不支持Windows Phone！）。

工具

这一节介绍的技术可能不会直接给用户带来惊艳的感觉（虽然有些可能可以做到），但他们确实非常重要。其中有些是开发者可能会频繁使用的JavaScript资源，而有些是人们开发浏览器应用时的首选工具。

5. Workflowy

Workflowy可以帮助人们整理自己的想法。在2010年十一月推出了他们的测试版本，仅仅用了30天的时间，它就拥有了一百万条记录了。它是由 Jesse Patel和Mike Turitzin共同开发的，Workflowy使用JavaScript处理DOM操作和存储，并且能够在大量的本地记录中快速查找目标记录。如果你需要整理自己的记录或是想查找新的GTD 工具，Workflowy会是一个不错的选择。最近它还增加了对移动设备和平板电脑的支持，方便用户分享文档。

6. jQuery Mobile

虽然现在移动web开发正变得越来越热，但是移动设备的开发工作还是相当困难的。jQuery JavaScript库的目标就是想在浏览器上实现一个通用的JavaScript开发方法。而 jQuery Mobile的目标则更加远大：简化各种移动设备平台上的web开发工作。这个库已经推出了1.0版本，jQuery Mobile网站就是一个很好的示例，展示了如何使用jQuery Mobile开发一个能够在各种移动设备和传统浏览器设备上运行的网站。

7. Spritecow

Spritecow是由Jake Archibald开发的，它能够帮助用户解决许多繁琐费时的问题。前台开发人员都知道，创建spritesheets的目标就是使得界面响应更加及时并尽量减少HTTP请求的次数。Spritecow将JavaScript，Canvas和一些数学逻辑算法融合在一起，为用户提供了一个好用的CSS生成工具。

8. Cloud 9 IDE

将整个开发环境整合到云和浏览器里面已经成为了我们这个时代的标志。在过去的几年里面，Cloud 9一直在开发他们的集成开发工具（IDE），但是今年，它变成一个令人期待的项目并且成为一个可用的web开发资源。创始人兼CTO Rik Arends表示，与其他类似项目（如Bespin）相比，使用JavaScript来管理DOM，在编辑环境中控制文档性能更好。通过配置和扩展JavaScript，还可以为这个开发环境带来更多的提升和功能。都相当值得期待。

9. Reveal.JS

Reveal.JS是Hakim El Hattab开发的一个演示文稿制作工具，能够制作绚丽的演示文稿并生成HTML格式，将它发布到web上。它使用了CSS3变换功能和JavaScript，这个工具大受web开发者的青睐。

10. Pusher

Pusher是一个很棒的工具，在此不得不提。虽然它已经推出一年多了，但最近提升了Web Sockets对浏览器的支持，Node使得Pusher受到了更多的关注。

Pusher提供了一组API用来提升实时apps和服务。有许多非常棒的网站都使用了Pusher。

Pusher最初是由New Bamboo的几个员工开发的，虽然规模不大，但是做的工作却相当了不起，New Bamboo需要实现实时通讯来提升web游戏和工具，所以Pusher自身用到了Node。

11. Speakerdeck

来自Ordered List的Speakerdeck最近被收录到Github上，它利用JavaScript和web技术在web上展示演示文稿。虽然许多其他类似的服务都利用了大量的Flash技术，Speakerdeck相比之下则较少用到Flash，而是利用JavaScript实现幻灯片预览功能。这里有许多丰富的功能和技术。

12. Gauges

既然已经提到了Speakerdeck，就不得不提一下Ordered List的另一个精彩服务——Gauges。它是一个分析工具，有点类似于Google Analytics，使用了常用的JavaScript插件获取用户的访问数据。Gauges有丰富的API，并且能够很好地渲染实时数据。JavaScripty相当的精彩。

改进界面

13. BBC主页

最近关于BBC更新的主页有一些争论。有些人喜欢它，而有些则对它感到反感。就个人而言，作者开始觉得新的主页看起来有点疯狂，但慢慢地也觉得它其实也挺可爱的。它的交互看起来非常酷，并且有许多的改进。即使在不支持JavaScript的环境中，这个主页也考虑得非常周到。但是，它还是显得有点拥挤和正正方方了。

14. BBC iPlayer

虽然已经介绍过BBC了，但是BBC iPlayer的确值得拿出来再说一说。它有一个非常了不起的JavaScript驱动界面，能够非常有效地呈现丰富的内容信息（不仅仅是视频信息，还包括图片信息）。使用BBC的主页和开源的Glow JavaScript库能够做许多新颖的工作。

15. Facebook

必须承认，Facebook在界面设计上做了大量复杂、精细的工作，使得它真实。上面有丰富的实时资讯，通知和聊天功能，虽然它的风格可能无法迎合所有人的口味，但是它的确对web设计产生了影响，并且影响了许多人。

背后的美丽

虽然作者非常关注视觉效果和代码库（代码库确实相当重要），但他最关心的其实是如何巧妙地利用这些技术。最后几个例子很好地展示了如何灵活地使用现有的技术。

16. Github

Github在用户交互方面做得相当出色并且非常注重细节的设计。在代码导航树中，用户能够在项目的目录树中平滑地切换，网站记录了各个页面的地址信息并且可以对地址进行标记，内嵌了编辑器，可以直接在浏览器中修改代码（使用Cloud 9 editor）。使用Canvas实现网站的可视化工作，包括搜索预览，弹出菜单和界面元素，这个列表还在不断增加。Github做得非常棒。

17. Google Doodle

Google Doodles提供了非常有趣的动画，用户能够与这些动画交互。有时，这些设计会让用户会心一笑，有时也许人们还没发现它们，它们就已经消失了。Marcin Wichary是Google的这个“delighters”项目的负责人之一，为了推广这个项目，必须扫清JavaScript优化技术中的障碍。这个团队使用了sprite-crunch技术，用来压缩它们在动画中使用的sprites的。处理方法相当妙。这些涂鸦非常巧妙地利用了浏览器API和JavaScript。Google的开发人员太聪明了！

18. Nike Better World

Nike团队的这个网站常常被复制和讨论。这个网页将JavaScript和CSS结合起来，当用户滚动页面时，营造出一种有趣的视觉差。即使浏览器不支持JavaScript，这个网站也能优雅地降级显示，将视觉差效果移除，但并不会影响页面的正常显示，作者建议将导航链接保留下来。可以用JavaScript劫持这个链接，这样无论应用环境是否支持JavaScript，这个导航都能够工作。

19. Mobile Beetle

作者在今年早前曾对Volkswagen Beetle的新网站提出了一些批评。在此不会重复这些批评，而只是介绍这个网站在将JavaScript推向极致的几个方面。它也是一个旋转效果做得相当不错的网站。这个网站的移动版本做得相当精巧。当你在iPhone上访问这个网站时，它充分利用了触摸和旋转事件提升服务的用户体验（尽管如果不是使用的WIFI的话，网页中的图片可能显得有点过大）。

20. Twitter移动网站

其实移动设备上已经有许多非常棒的Twitter客户端了，以至于大家可能会忽略今年Twitter推出的移动优化版本的web客户端，尽管它相当不错。Twitter的开发团队采纳了iPhone Twitter apps上的许多UI惯例，并且在自己的web框架中重新设计了一些UI。结果相当不错，在智能手机上访问浏览器中的页面就像是native app一样。在Android和iPhone上的效果都相当出色。真的是一个很棒的工作。

…这就是全部的20个网站

这就是作者挑选出来的20个将JavaScript推到极致的网站。当然，其实应该还有许多其他的网站也有资格出现在这个列表上，但是web太大了，而列举出20个网站只是一个很小的集合。虽然许多其他的网站也有一些突出的特点，但也各有不足。JavaScript让开发者能够在浏览器中做许多了不起的工作，但这里列出的20个网站中，有些为了实现某些特色牺牲了网站的访问性、地址性和其他性能或功能，这是一个优秀的web应用应该克服的。不过，它们确实在今年，给web开发者带来了不少新的想法。

文章来源：2011 in review: 20 sites thatpushed JavaScript to the limit

标签：JavaScript分类：前端志, 前端资源, 开发资源

50 New jQuery Plugins For Web Developers

时间：2011年07月04日作者：愚人码头查看次数:663 views评论次数：1

转载自：http://www.splashnology.com/article/50-new-jquery-plugins-for-web-developers/4141/

In spite of the fact that jQuery was released in January 2006 it still holds its position and it’s not surprising, because of its ability to add various elements without the necessity to write bulky and heavy code. Also, it’s getting even much more easier as the community of developers constantly releases plugins that allow web developers to enhance their projects. And to make your task simpler, in order you could just visit our site and choose some of these useful plugins, we’ve picked the best and the newest jQuery pluginsand listed them below.

Textualizer.js

A jQuery plug-in which transitions through blurbs of text, animating each character.

Download

Impress.js

Impress.js is a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

Download

Revolver.js

Revolver is a new content slider that makes no assumptions about your markup. 继续阅读：50 New jQuery Plugins For Web Developers»

标签：JavaScript,jquery,plugins分类：jQuery, 开发资源

文本域字符数判断（2010年12月30日更新）

时间：2010年12月30日作者：愚人码头查看次数:8,857 views评论次数：18

————-2009 年 11 月 19 日 22:03:06——————–

本来也写过类似这个小功能《js对输入框的字数限制》，但是今天有朋友说要个简单的貌似twitter微博输入的功能！所以写了一个。

基本的思路：当文本域获取焦点后，当键盘松开时，判断里面的字符是否为空，从而改变按钮的显示状态和文字的个数。

demo：http://www.css88.com/demo/textarea-num-chack/textarea-num-chack.html

=============2009年11月24日更新============

感谢各位的留言和测试，特别感谢Chaos提供的解决方案，灰灰关于粘贴的测试！

在以上两位的建议和测试下重新修改了一下源代码，主要文本框获得焦点时启动定时器，计算文本框的字数。

demo：http://www.css88.com/demo/textarea-num-chack/textarea-num-chack1.html

=============2010年12月30日更新============

今天接到一个类似的需求，就是想腾讯微博和新浪微博那样，将中文视为一个字符，将英文视为半个字符，也就是两个英文字符按一个字符计算。所以我再原来的基础上做了调整，主要的思路是：继续阅读：文本域字符数判断（2010年12月30日更新）»

标签：JavaScript,文本域分类：JS

Javascript浅拷贝与深拷贝

时间：2010年08月08日作者：愚人码头查看次数:5,127 views评论次数：4

js中的赋值都为引用传递.就是说,在把一个对像赋值给一个变量时,那么这个变量所指向的仍就是原来对像的地址.引用就是浅拷贝。
深拷贝就是不紧复制对象的基本类,同时也复制原对象中的对象.就是说完全是新对象产生的，新对象所指向的不是原来对像的地址。
Javascript深拷贝有很多封装的方法，大家网上可以搜索一下.看下面这个例子：


var S=KISSY,
	obj={a:"a",b:"b"};
	var newObj=S.clone(obj);//深拷贝
	var newObj1=obj;//浅拷贝，赋值
	obj.b="b2";
	S.log(obj);//{a:"a",b:"b2"}
	S.log(newObj);//{a:"a",b:"b"}
	S.log(newObj1)//{a:"a",b:"b2"}

标签：JavaScript分类：JS

js数组去重

时间：2010年08月03日作者：愚人码头查看次数:9,756 views评论次数：18

js数组去重就是把数组中重复的元素去掉：


Array.prototype.delRepeat=function(){
	var newArray=new Array();
	var len=this.length;
	for (var i=0;i<len ;i++){
		for(var j=i+1;j<len;j++){
			if(this[i]===this[j]){
				j=++i;
			}
		}
		newArray.push(this[i]);
	}
	return newArray;
}

但是很明显这里有for循环内嵌了另一个for循环，在大数据量下肯定非常耗时！效率低下！经过查找和高人指点优化了一个新方法：继续阅读：js数组去重»

标签：JavaScript,数组分类：JS

JS操作iframe里的dom

时间：2010年06月24日作者：愚人码头查看次数:11,076 views评论次数：3

看到断桥残雪对我上一篇日志的回复我也学习了一下JS操作iframe里的dom；主要参考了断桥残雪的《用JavaScript在IE和Firefox下进行iframe的DOM操作》和支付宝UED的《用JS访问操作iframe里的dom》，非常不错的两篇文章。

一、父级窗口操作iframe里的dom

JS操作iframe里的dom可是使用contentWindow属性，contentWindow属性是指指定的frame或者iframe所在的window对象，在IE中iframe或者frame的contentWindow属性可以省略，但在Firefox中如果要对iframe对象进行编辑则，必须指定contentWindow属性，contentWindow属性支持所有主流浏览器。

相关的还有一个contentDocument属性，这个属性是指指定的frame或者iframe所在的document对象，但是悲剧的是，ie6-ie7并不支持这个属性。

ie6和ie7还可以使用document.frames["iframe Name"]或者document.frames["iframe ID"]来获取相当于contentWindow属性，而firefox和chrome并不支持这些document.frames["iframe Name"]或者document.frames["iframe ID"]，但是window.frames["iframe Name"]或window.frames[index]（index是索引值）也支持所有主流浏览器；

这个可以看实例：http://www.css88.com/demo/iframe-correspond/index-test.html

我们知道document对象是window对象的一个子对象，所以我们可以通过document.getElementById(“iframe ID”).contentWindow.document来获取iframe的document对象，相当于contentDocument属性。

二、iframe里的js操作父级窗口的dom

iframe里的js要操作父级窗口的dom，必须搞懂几个对象：

parent是父窗口（如果窗口是顶级窗口，那么parent==self==top），

top是最顶级父窗口（有的窗口中套了好几层frameset或者iframe），

self是当前窗口（等价window），

opener是用open方法打开当前窗口的那个窗口；

这样iframe里的js要操作父级窗口的dom可以通过parent，top这些对象来获取父窗口的window对象，例如：

parent.document.getElementById(“dom ID”)；

parent，top还能调用父级窗口的的js方法，比如，getIFrameDOM(iID）是父级窗口的一个方法，那么iframe里可以使用parent.getIFrameDOM(“wIframeA”)来调用父级窗口的getIFrameDOM(iID）方法；

————————————————

查看一下JS操作iframe里的dom的demo：http://www.css88.com/demo/iframe-correspond/

虽然iframe在现在WEB开发中越来越少用到了，但是iframe还有很多值得使用的地方，比如使用iframe解决跨域问题.关于iframe还有很多东西要学习，比如iframe自适应高度，使用iframe解决跨域问题，iframe加载问题，iframe加载性能问题等等，还有很多东西要学习，

标签：Dom,iframe,JavaScript分类：JS

JQ插件：获取文本框（textarea）内的所选字符和光标位置索引值-selection

时间：2010年05月26日作者：愚人码头查看次数:20,378 views评论次数：8

用javascript写网页编辑器，获取textarea中的光标位置和选取的文本是一个非常常见的问题。今天用jQ封装了这么一个插件。

在Firefox，safari,chrome,opera的标准浏览器下获取这些textarea中的光标位置非常简单：


function Selection(obj)
var start =obj.selectionStart;
var end = obj.selectionEnd;
return {"start":start,"end":end}
}

这里的obj是文本框或者文本域对象；

如果要获取所选择的文本那就很简单了:

obj.value.substring(Selection(obj).start,Selection(obj).end)

点击查看demo：http://www.css88.com/demo/edit-box/ff-test.html

悲剧的是IE就比较麻烦了，ie如果要获取所选择的文本还是非常简单的，可以直接使用：

document.selection.createRange().text;

但是ie要获取光标在字符串中的索引位置就比较麻烦了：继续阅读：JQ插件：获取文本框（textarea）内的所选字符和光标位置索引值-selection»

标签：JavaScript,jquery,jQuery插件分类：jQuery

10个javascript Frameworks 外连

时间：2010年05月14日作者：愚人码头查看次数:3,783 views评论次数：2

google提供的10个javascript Frameworks 外连：

jquery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

jquery UI

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>

Chrome Frame

<script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js"></script>

swfobject

<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

mootools

<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>

Yahoo! UI

<script src="http://ajax.googleapis.com/ajax/libs/yui/2.8.1/build/yuiloader/yuiloader-min.js"></script>

Prototype

<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>

Ext.JS

<script src="http://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js"></script>

Dojo

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.4.3/dojo/dojo.xd.js"></script>

Scriptaculous

<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js"></script>

标签：Frameworksl,JavaScript,jquery分类：JS

一个简单加分效果-文字放大显示动画效果

时间：2009年11月25日作者：愚人码头查看次数:4,652 views评论次数：9

项目应用：当一项操作完成后，肯能会给某个图片，音乐打分，或者积分增加，平淡的将数值改变用户一点没什么直观的感觉，当然要突出这个加分效果有很多，我这里只是实现了一种：

数字会放大且半透明显示，当放大到最大尺寸时，数值加上分值，然后，数字执行还原的动画，大小透明度均复原。

点此查看demo：http://www.css88.com/demo/awarded_marks/awarded_marks.html

标签：JavaScript,加分效果,动画效果分类：JS

Page 1 of 212 »