帕兰映像 » JavaScript

14条改善jQuery代码的技巧

帕兰 — Mon, 30 Nov 2009 05:19:14 +0000

jquery简单易学，但如果你想写出更漂亮更简洁高效的代码，总需要一些技巧。本文就为你总结了14条改善jQuery代码的技巧。

1.测试并提升你的jQuery选择器水平

这个jQuery选择器实验室非常酷，它能在线免费使用，当然你也能下来到本地离线使用。这个测试页面包含复杂的html组合字段，然后你能尝试预定义使用各种jQuery选择器。如果这还不够你也可以自定义选择器。

2.测试jQuery包装集是否包含某些元素

如果你想测试一下某个jQuery包装集中是否包含某些元素，你首先可以尝试使用验证首个元素是否存在：



if($(selector)[0]){...}
// 或者这样
if($(selector).length){...}

来看看这个例子：

//例子.如果你的页面有以下html代码 Item X Item Y Item Z

...
//这个if条件将返回true，因为我们有两个
// input域匹配了选择器，所以代码将会执行
if($('#shopping_cart_items input.in_stock')[0]){}

3.从jquery.org读取jQuery最新版本

你可以使用这句代码读取jQuery的最新版本的代码文件。

你可以使用这个方法来调用最近版本的jQuery框架，当然，你还可以使用下面这个代码从ajax.googleapis.com调用同样的最新版本jQuery：





(...)
继续阅读 14条改善jQuery代码的技巧

转载请注明: 来源于 14条改善jQuery代码的技巧 

原订阅地址即将失效，请大家更换到新的订阅地址: http://feed.paranimage.com/


© 帕兰 for 帕兰映像, 2010  |
添加到 del.icio.us 


通过这些关键词: JavaScript, jquery 找到更多你可能喜欢的内容





第5工作室 - 付费设计:　自定义个性化网页设计, 承接付费WordPress主题定制, PSD转XHTML等设计业务.

第7网赚室 - 在线赚钱:　向你推荐最热门最真实的在线赚钱途径, 让你在写博同时, 轻松赚取美元!

第9主机室 - 国外主机:　低于5美元/每月, 支持PayPal付款的美国虚拟主机, 直观图析评测导购,  帮您做出明智的选择.



14条最佳JS代码编写技巧
帕兰 — Sun, 08 Nov 2009 13:41:40 +0000
写任何编程代码，不同的开发者都会有不同的见解。但参考一下总是好的，下面是来自Javascript Toolbox发布的14条最佳JS代码编写技巧，Sofish翻译(1,2)。
1. 总是使用 ‘var’
在javascript中，变量不是全局范围的就是函数范围的，使用”var”关键词将是保持变量简洁明了的关键。当声明一个或者是全局或者是函数级（function-level）的变量，需总是前置”var”关键词，下面的例子将强调不这样做潜在的问题。
不使用 Var 造成的问题
var i=0; // This is good - creates a global variable
function test() {
   for (i=0; i<10; i++) {
      alert("Hello World!");
   }
}
test();
alert(i); // The global variable i is now 10!
因为变量函数中变量 i 并没有使用 var 使其成为函数级的变量，在这个例子中它引用了全局变量。总是使用 var 来声明全局变量是一个很多的做法，但至关重要的一点是使用 var 定义一个函数范围的变量。下面这两个方法在功能上是相同的：
正确的函数
function test() {
   var i=0;
   for (i=0; i<10; i++) {
      alert("Hello World!");
   }
}
正确的函数
function test() {
   for (var i=0; i<10; i++) {
      alert("Hello World!");
   }
}
2. 特性检测而非浏览器检测
一些代码是写来发现浏览器版本并基于用户正使用的客户端的对其执行不同行为。这个，总的来说，是一个非常糟的实践。更好的方法是使用特性检测，在使 用一个老浏览器可能不支持的高级的特性之前，首先检测（浏览器的）是否有这个功能或特性，然后使用它。这单独检测浏览器版本来得更好，即使你知道它的性 能。你可以在 http://www.jibbering.com/faq/faq_notes/not_browser_detect.html找到一个深入讨论这个问题的文章。
例子：
if (document.getElementById) {
   var element = document.getElementById('MyId');
}
else {
   alert('Your browser lacks the capabilities required to run this script!');
}
3. 使用方括号记法
当访问由执行时决定或者包括要不能用”.”号访问的对象属性，使用方括号记法。如果你不是一个经验丰富的Javascript程序员，总是使用方括号是一个不错的做法
对象的属性由两种固定的方法来访问：”.”记法和”[ ]“方括号记法：
“.”号记法
MyObject.property
“[ ]“方括号记法
MyObject["property"]
使用”.”号，属性名是硬代码，不能在执行时改变。使用”[ ]“方括号，属性名是一个通过计算属性名而来的字符串。字符串要以是硬代码，也可能是变量，甚至可以是一个调回一个字母串值的函数。 如果一个属性名在执行产生，方括号是必须，如果你有 “value1″, “value2″, 和 “value3″这样的属性，并且想利用变量 i=2来访问
这个可以运行：
MyObject["value"+i]
这个不可以：
MyObject.value+i
并且在某些服务器端环境（PHP、Struts等）下，Form 表单被附加了 [ ] 号来表示 Form 表单在服务器端必须被当作数组来对待。如此，用”.”号来引用一个包含 [ ] 号的字段将不会执行，因为 [ ] 是引用一个 Javascript 数组的语法。所以，[ ] 号记法是必须的：
这个可以运行：
formref.elements["name[]"]
这个不可以：
formref.elements.name[]
推荐使用”[ ]“方括号记法是说当其需要时（明显地）总是使用它。当不是严格需要使用它的时候，它是一个私人的偏好和习惯。一个好的经验原则是，使用”.”号记法访问标准的对象属性，使用”[   ]“方括号记法访问由页面定义的对象属性。这样，document["getElementById"]() 是一个完美可行的”[ ]“方括号记法用法，但   document.getElementById() 在语法上是首选，因为 getElementById 是一个 DOM   规范中定义的一个标准文档对象属性。混合使用这两个记法使哪个是标准对象属性，哪个属性名是由上下文所定义的，在代码中显得清晰明了：
document.forms["myformname"].elements["myinput"].value
这里，forms 是 document 的一个标准属性，而表单名 myformname 则是由页面所定义的。同时，elements 和   value 属性都是由规范所定义的标准属性。而 myinput 则是由页面所定义的。这页是句法让人非常容易理解（代码的内容），是一个推荐遵循的习惯用法，但不是严格原则。(...)
继续阅读 14条最佳JS代码编写技巧

转载请注明: 来源于 14条最佳JS代码编写技巧 

原订阅地址即将失效，请大家更换到新的订阅地址: http://feed.paranimage.com/


© 帕兰 for 帕兰映像, 2010  |
添加到 del.icio.us 


通过这些关键词: JavaScript 找到更多你可能喜欢的内容





第5工作室 - 付费设计:　自定义个性化网页设计, 承接付费WordPress主题定制, PSD转XHTML等设计业务.

第7网赚室 - 在线赚钱:　向你推荐最热门最真实的在线赚钱途径, 让你在写博同时, 轻松赚取美元!

第9主机室 - 国外主机:　低于5美元/每月, 支持PayPal付款的美国虚拟主机, 直观图析评测导购,  帮您做出明智的选择.




150个JS特效脚本
帕兰 — Sun, 01 Nov 2009 05:37:53 +0000
上月，我们整月都在发布javascript特效脚本，本文算是外传，收集了其它一些不太方便归类的JS特效，共150个，供君查阅。
1. simplyScroll
simplyScroll这个jquery插件能够让任意一组元素产生滚动动画效果，可以是自动、手动滚动，水平、垂直方向滚动。此外，它还可以接受动态图片输入通过Flickr供稿或一个本地JSON数据源。
2. Animated Collapsible DIV
为任何DIV层添加Web2.0风格的动画隐藏/显示效果
3. jQuery Pagination (演示地址)

jQuery分页插件
4. side bar menu using script.aculo.us (演示地址)

采用script.aculo.us开发的侧边滑条菜单。
5. mooSocialize

mooSocialize基于ajax的社会化网络书签收藏控件。
6. phatfusion Lightbox (演示地址)
这个Lightbox控件基于Mootools开发，它在页角上增加了向前/后退两按纽并能够用html来编写描述说明。(...)
继续阅读 150个JS特效脚本

转载请注明: 来源于 150个JS特效脚本 

原订阅地址即将失效，请大家更换到新的订阅地址: http://feed.paranimage.com/


© 帕兰 for 帕兰映像, 2010  |
添加到 del.icio.us 


通过这些关键词: JavaScript, jQuery插件 找到更多你可能喜欢的内容





第5工作室 - 付费设计:　自定义个性化网页设计, 承接付费WordPress主题定制, PSD转XHTML等设计业务.

第7网赚室 - 在线赚钱:　向你推荐最热门最真实的在线赚钱途径, 让你在写博同时, 轻松赚取美元!

第9主机室 - 国外主机:　低于5美元/每月, 支持PayPal付款的美国虚拟主机, 直观图析评测导购,  帮您做出明智的选择.




21个漂亮的Javascript菜单特效
帕兰 — Sat, 31 Oct 2009 09:36:41 +0000
继11个Javascript树形菜单和20个Javascript手风琴折叠菜单后，再整理21个漂亮的javascript菜单特效。
1. iconDock (演示地址)

iconDock一个基于jquery开发的Fisheye menu。
2. dhtmlxMenu

这个菜单控件支持水平和垂直布局并可以配置作为ContextMenu，支持通过ajax动态加载菜。
3. Control.Menu

采用Mootools开发的菜单控件。
4. Fancy menu

非常酷的导航菜单。
5. CSS Dock Menu ()

采用jQuery CSS实现，仿Mac Dock Menu的一个导航菜单。(...)
继续阅读 21个漂亮的Javascript菜单特效

转载请注明: 来源于 21个漂亮的Javascript菜单特效 

原订阅地址即将失效，请大家更换到新的订阅地址: http://feed.paranimage.com/


© 帕兰 for 帕兰映像, 2010  |
添加到 del.icio.us 


通过这些关键词: JavaScript, jQuery插件, 菜单 找到更多你可能喜欢的内容





第5工作室 - 付费设计:　自定义个性化网页设计, 承接付费WordPress主题定制, PSD转XHTML等设计业务.

第7网赚室 - 在线赚钱:　向你推荐最热门最真实的在线赚钱途径, 让你在写博同时, 轻松赚取美元!

第9主机室 - 国外主机:　低于5美元/每月, 支持PayPal付款的美国虚拟主机, 直观图析评测导购,  帮您做出明智的选择.




16款Javascript提示工具(Tooltips)
帕兰 — Fri, 30 Oct 2009 09:22:47 +0000
当我们把鼠标放在一个链接上时，如果该链接设置了title属性，就会悬浮显示一个淡黄色背景的文本提示，这就是最基础的Tooltips提示工具。但其平凡的样子实在很难让人注意。利用javascript则可以生成一些漂亮、高级的tooltips，这些提示信息不仅仅限于文本，还可以是图片，音频，视频甚至框架，并且可以包含html元素，方便使用CSS来美化。
先吸引到访问的眼球，才能达到提醒的目的。16款Javascript Tooltips提示工具。
1. HelpBalloon.js (演示地址)

一个可灵活控制
2. jQuery.UI MessengerOutlook like message notification Widget (演示地址)

这个jquery.UI控件类似于MessengerOutlook消息弹出提醒框。
3. Step by Step (演示地址)

该脚本能够为访问者逐步地展示和介绍当前页面所包含的内容，效果类似于Tooltips。
4. BeautyTips

BeautyTips是一个jQuery Tooltip插件.
5. qTip

6. Simple tooltip

Simple tooltip是一个非常简单的Tooltip jQuery插件。
7. Side Navigation Tooltip (演示地址)

利用jQuery为侧面导航菜单添加Tooltips气泡提示说明。(...)
继续阅读 16款Javascript提示工具(Tooltips)

转载请注明: 来源于 16款Javascript提示工具(Tooltips) 

原订阅地址即将失效，请大家更换到新的订阅地址: http://feed.paranimage.com/


© 帕兰 for 帕兰映像, 2010  |
添加到 del.icio.us 


通过这些关键词: JavaScript, jQuery插件, Tooltips 找到更多你可能喜欢的内容





第5工作室 - 付费设计:　自定义个性化网页设计, 承接付费WordPress主题定制, PSD转XHTML等设计业务.

第7网赚室 - 在线赚钱:　向你推荐最热门最真实的在线赚钱途径, 让你在写博同时, 轻松赚取美元!

第9主机室 - 国外主机:　低于5美元/每月, 支持PayPal付款的美国虚拟主机, 直观图析评测导购,  帮您做出明智的选择.




23个Javascript弹出特效
帕兰 — Thu, 29 Oct 2009 11:35:53 +0000
之前我们看过12个Lightbox灯箱特效，主要是针对图片，现在则来看更多的javascript弹出对话框特效。
1. Lightview

Lightview是一个基于Prototype与Script.aculo.us开发，用于创建可以覆盖整个页面的模式对话框。展示的内容不仅可以是图片、文字、网页、通过ajax 调用的内容，还可以是Quicktime/Flash影片都能够以非常酷的效果展示。
2. ThickBox (演示地址)

ThickBox是一个模式对话框UI控件。基于jquery开发，可以用来展示单张或多张图片，内嵌的内容，iframed的内容，或通过Ajax获取的内容。
3. Fonshen JS Window (演示地址)

风声JS窗口为模拟WEB弹出窗口和对话框提供一种方案。程序基于 JavaScript/Xhtml/CSS 标准实现。支持自由度极高的窗口样式定制；交互方面提供模拟的按钮编程模型，可以很好的模拟对话框； 另外，接口参考Javascript内置对象window的一些方法（比如：window.open, window.alert, window.confirm），简洁方便。
4. ymPrompt

在web开发中，对于浏览器默认的消息提示框（如alert,confirm等）外观无法控制，为了实现更好的界面效果，于是模拟系统的消息提示框实现了该组件。在外观上可以通过css进行完全的控制。调用方式简单，直接使用ymPrompt.alert()的方式调用，传入相应的参数即可。提供四种消息类型。分别为消息提示、成功信息、错误信息、询问信息。
5. Modalbox

ModalBox用于生成Web2.0风格的模式对话框。基于Prototype script.aculo.us框架开发，效果类似Mac OSX的模式对话框。内容可以通过Ajax加载或普通的HTML页面。(...)
继续阅读 23个Javascript弹出特效

转载请注明: 来源于 23个Javascript弹出特效 

原订阅地址即将失效，请大家更换到新的订阅地址: http://feed.paranimage.com/


© 帕兰 for 帕兰映像, 2010  |
添加到 del.icio.us 


通过这些关键词: JavaScript, jQuery插件, 弹出特效 找到更多你可能喜欢的内容





第5工作室 - 付费设计:　自定义个性化网页设计, 承接付费WordPress主题定制, PSD转XHTML等设计业务.

第7网赚室 - 在线赚钱:　向你推荐最热门最真实的在线赚钱途径, 让你在写博同时, 轻松赚取美元!

第9主机室 - 国外主机:　低于5美元/每月, 支持PayPal付款的美国虚拟主机, 直观图析评测导购,  帮您做出明智的选择.




12个Javascript灯箱效果Lightbox脚本
帕兰 — Wed, 28 Oct 2009 09:10:24 +0000
Lightbox，也就是灯箱特效，是我们最常使用的javascript脚本之一。本文为你收集了一些比较流行的Javascript灯箱脚本。
1. Multibox (演示地址)

一个lightbox支持的内容格式包括：图片，Flash，视频，mp3，html。
2. YUI Based Lightbox ()

使用YUI Dialog class开发的lightbox控件。
3. weebbox

weebbox是一个基于Prototype Scriptaculous（172k） 开发，仿Lightbox效果用于展示图片的javascript控件。
4. Pirobox (演示地址)

采用jquery开发的Lightbox控件。能够根据浏览器窗体大小自动调整展示图片大小。提供向前/向后控制链接。动态加载图片效果。易于定制。(...)
继续阅读 12个Javascript灯箱效果Lightbox脚本

转载请注明: 来源于 12个Javascript灯箱效果Lightbox脚本 

原订阅地址即将失效，请大家更换到新的订阅地址: http://feed.paranimage.com/


© 帕兰 for 帕兰映像, 2010  |
添加到 del.icio.us 


通过这些关键词: JavaScript, jQuery插件, lightbox 找到更多你可能喜欢的内容





第5工作室 - 付费设计:　自定义个性化网页设计, 承接付费WordPress主题定制, PSD转XHTML等设计业务.

第7网赚室 - 在线赚钱:　向你推荐最热门最真实的在线赚钱途径, 让你在写博同时, 轻松赚取美元!

第9主机室 - 国外主机:　低于5美元/每月, 支持PayPal付款的美国虚拟主机, 直观图析评测导购,  帮您做出明智的选择.




7款Flash和Javascript网页视频播放器
帕兰 — Wed, 28 Oct 2009 09:03:22 +0000
7款Flash和javascript网页视频播放器。梦想中的视频播放器是这样的: 支持所有格式，兼容所有主流视频网站，支持播放列表、视频缩略图、全屏播放、画面调节、预加载、体积贼小，功能贼多……. 也许你的要求并没有这么高，找找下面有没有你满意的！
1. Videobox

Videobox是一个只有6k大小的脚本,用于在页面中显示视频。Videobox使用swfobject来嵌入Flash。视频可以来自Youtube、Metacafe、Google Video、iFilm和自己设置的Flash。
2. Panda

Panda是一个开源的视频平台，能够处理视频的uploading、encoding与streaming。所有处理过程都通过REST API完成。Panda设计运行在云计算平台中，利用Amazon的Web服务群来实现。因此你需要有Amazon Web Services账号。Panda使用SimpleDB来存储所有视频数据和账号。Panda支持Flash的FLV、h264格式和iphone格式等。Panda使用
3. OpenVideoPlayer

采用Adobe Flash与Microsoft Silverlight开发的开源Web视频播放器。(...)
继续阅读 7款Flash和Javascript网页视频播放器

转载请注明: 来源于 7款Flash和Javascript网页视频播放器 

原订阅地址即将失效，请大家更换到新的订阅地址: http://feed.paranimage.com/


© 帕兰 for 帕兰映像, 2010  |
添加到 del.icio.us 


通过这些关键词: Flash, FLV, JavaScript, 播放器, 视频 找到更多你可能喜欢的内容





第5工作室 - 付费设计:　自定义个性化网页设计, 承接付费WordPress主题定制, PSD转XHTML等设计业务.

第7网赚室 - 在线赚钱:　向你推荐最热门最真实的在线赚钱途径, 让你在写博同时, 轻松赚取美元!

第9主机室 - 国外主机:　低于5美元/每月, 支持PayPal付款的美国虚拟主机, 直观图析评测导购,  帮您做出明智的选择.




16个Javascript表单事件脚本(表单验证、选择)
帕兰 — Tue, 27 Oct 2009 11:50:26 +0000
16个javascript表单事件脚本, 含表单验证和表单选择。
JavaScript表单验证脚本
1. jQuery Inline Form Validation Engine (演示地址)
这是一个采用Tooltip效果显示校验提示信息的表单校验jquery插件。
2. jQuery formValidator

jQuery formValidator表单验证插件，它是基于jQuery类库，实现了js脚本于页面html代码的分离。你可以划分多个校验组，每个组的校验都是互不影响。对一个表单对象，你只需要写一行代码就可以轻松实现无数种（理论上）脚本控制。目前支持5种大的校验方式，分别是：inputValidator（针对input、textarea、select控件的字符长度、值范围、选择个数的控制）、compareValidator（提供2个对象的比较，目前可以比较字符串和数值型）、ajaxValidator（通过ajax到服务器上做数据校验）、regexValidator（提供可扩展的正则表达式库） 、functionValidator （可使用外部函数来做校验）
3. JSValidate

JSValidate 是一个免费的脚本库，用于 确认表单 ，需要 Prototype 和 Script.aculo.us 支持运行。
它支持的一些规则包括:

必填字段
仅允许数字
仅允许字母
E-mail
信用卡号码格式
美国邮政编码, 电话号码和国家代码格式

4. InputMask Class for MooTools (演示地址)

这是一个可以让用户按设定好格式输入的MooTools插件。
5. meioMask (演示地址)

meioMask是一个可以让用户按指定格式输入的jQuery插件。既可以使用预先设置的格式，也在class属性中自定义输入格式。
6. Validanguage

JavaScript 表单验证框架。它拥有集成逻辑，一些设置可以针对全局，单个表单或单个对象。提供两个API，集成 AJAX 支持，缓存，以及回调函数。它提供类似 HTML 的 API 语句，以及面向对象的 JavaScript API 。
7. yav
一个强大，灵活，可扩展的表单验证库。支持各种场合，从简单的如日期，电子邮件地址以及整数的验证，到复杂的，如正则表达式。内置 AJAX 支持，输出的错误消息可以定位到对象级。(...)
继续阅读 16个Javascript表单事件脚本(表单验证、选择)

转载请注明: 来源于 16个Javascript表单事件脚本(表单验证、选择) 

原订阅地址即将失效，请大家更换到新的订阅地址: http://feed.paranimage.com/


© 帕兰 for 帕兰映像, 2010  |
添加到 del.icio.us 


通过这些关键词: JavaScript, jQuery插件, 表单, 表单验证 找到更多你可能喜欢的内容





第5工作室 - 付费设计:　自定义个性化网页设计, 承接付费WordPress主题定制, PSD转XHTML等设计业务.

第7网赚室 - 在线赚钱:　向你推荐最热门最真实的在线赚钱途径, 让你在写博同时, 轻松赚取美元!

第9主机室 - 国外主机:　低于5美元/每月, 支持PayPal付款的美国虚拟主机, 直观图析评测导购,  帮您做出明智的选择.




10款Flash和Javascript网页音乐播放器
帕兰 — Mon, 26 Oct 2009 08:56:48 +0000
10款音乐播放器， 有基于javascript的网页音乐播放器，也有基于Flash的音乐播放器。赶快挑一款，分享你喜爱的音乐吧！
1. Dewplayer

Dewplayer是一个微型，免费的Flash mp3播放器，具有简洁的界面。Dewplayer包含三种不同的尺寸界面。
2. NiftyPlayer

NiftyPlayer是一个非常小（4KB），开源的Flash MP3播放器。拥有非常简洁的界面。可以利用JavaScript指定要播放的MP3文件，控制播放和暂停等。
3. ExtPlayer

ExtPlayer基于adobe air和Ext JS开发的MP3播放器。ExtPlayer利用Ext.air package新增加的两个类Ext.air.MusicPlayer和Ext.air.Notify实现。Ext新发布的Ext.air package中增加了许多新的功能包括：音频处理，信息提示与数据库、文件系统、剪贴板交互等。
4. AudioPlay

AudioPlay是一个基于Flash技术的简单MP3播放器。其操作界面上只有一个播放按纽。通过其提供的一个XML文件可以配置：按钮图片，背景颜色，指定播放mp3文件名称，循环播放，自动开始等。(...)
继续阅读 10款Flash和Javascript网页音乐播放器

转载请注明: 来源于 10款Flash和Javascript网页音乐播放器 

原订阅地址即将失效，请大家更换到新的订阅地址: http://feed.paranimage.com/


© 帕兰 for 帕兰映像, 2010  |
添加到 del.icio.us 


通过这些关键词: Flash, JavaScript, jQuery插件, MP3, 播放器, 音乐 找到更多你可能喜欢的内容





第5工作室 - 付费设计:　自定义个性化网页设计, 承接付费WordPress主题定制, PSD转XHTML等设计业务.

第7网赚室 - 在线赚钱:　向你推荐最热门最真实的在线赚钱途径, 让你在写博同时, 轻松赚取美元!

第9主机室 - 国外主机:　低于5美元/每月, 支持PayPal付款的美国虚拟主机, 直观图析评测导购,  帮您做出明智的选择.