Seven Two Blog

昨天上午根据自己的需求去找了一个安全虚拟键盘（Virtual Keyboard）,看到这个需求第一时间就会想到去 jQuery Plugins(http://plugins.jquery.com) 找这个插件,也许我习惯的原因，也许是我过于依懒 jQuery 吧。通过 jQuery Plugin 平台和 Google 找到几款虚拟键盘出来筛选，最终敲定了jQuery Keypad （http://keith-wood.name/keypad.html），她可以满足我自定样式、数字键随机排位、功能的名称可定义、键也是自定义的。最终修改的外观如图： 温馨提示：原来的 jQuery Keypad 切换大/小写的数字键也会重新排位的，可能有参数定义吧，我可能是我太累不愿意花太多时间去看看手册和代码，后来发给小林童鞋修改切换大/小写的数字键重新排位的问题。

jQuery之所以如此流行并被从大公司到个人博客的几乎每个人都广泛使用，是因为它上手和使用相当简单，而且为我们提供了一些人都不知道的相当棒的特性。我认为jQuery的大多数用户更趋向于使用jQuery插件来解决面临的难题，这通常是明智的选择。但是当插件相对于你的需求有一定缺陷的时候，你也许更应该想办法自己来解决，下面来看看这些实用的jQuery技巧，他们肯定会能够派上用场的！ 您还可以参考以下JavaScript相关教程及资源： 《10种JavaScript特效实例让你的网站更吸引人》 《300+Jquery, CSS, MooTools 和 JS的导航菜单资源》 《10个非常棒的Ajax及Javascript实例资源网站》 《推荐9款很棒的网页绘制图表JavaScript框架脚本》 1.测试并提升你的jQuery选择器水平 这个 jQuery选择器实验室 非常酷，它能在线免费使用，当然你也能下来到本地离线使用。这个测试页面包含复杂的HTML组合字段，然后你能尝试预定义使用各种jQuery选择器。如果这还不够你也可以自定义选择器。

最近自己一直使用 jQuery 做 Ajaxa 和一些特效，使用 jQuery 是本来就很简单的，但不知足的我有一天想在如果在 Dreamweaver 写 jQuery 时有语法提示这样开发起来不是更加快吗？于是我就通过万能的 Google 来查找 jQuery 的语法提示插件，嘻嘻，Google 真是有求必应的，有了这个插件一个字 爽，二个字：超爽。现在不用说把 jQuery 语法提示插件贡献出来吧。不会安装这个插件的别问我啊，你问问万能的 Google 吧。

8，尽量使用ID代替Class。 前面性能优化已经说过，ID选择器的速度是最快的。所以在HTML代码中，能使用ID的尽量使用ID来代替class。 看下面的一个例子： // 创建一个list var $myList = $(‘#myList’); var myListItems = ‘<ul>’; for (i = 0; i < 1000; i++) { myListItems += ‘<li class=”listItem’ + i + ‘”>This is a list item</li>’; //这里使用的是class }

4，对直接的DOM操作进行限制 这里的基本思想是在内存中建立你确实想要的东西，然后更新DOM 。 这并不是一个jQuery最佳实践，但必须进行有效的JavaScript操作 。直接的DOM操作速度很慢。 例如，你想动态的创建一组列表元素，千万不要这样做,如下所示： var top_100_list = [...], // 假设这里是100个独一无二的字符串 $mylist = $(“#mylist”); // jQuery 选择到 <ul> 元素 for (var i=0, l=top_100_list.length; i<l; i++){ $mylist.append(“<li>” + top_100_list[i] + “</li>”); }

1，总是从ID选择器开始继承 在jQuery中最快的选择器是ID选择器，因为它直接来自于JavaScript的getElementById()方法。 例如有一段HTML代码： <div id=”content”> <form method=”post” action=”#”> <h2>交通信号灯</h2> <ul id=”traffic_light”> <li><input type=”radio” class=”on” name=”light” value=”red” /> 红色</li> <li><input type=”radio” class=”off” name=”light” value=”yellow” /> 黄色</li> <li><input type=”radio” class=”off” name=”light” value=”green” /> 绿色</li> </ul> <input class=”button” id=”traffic_button” type=”submit” value=”Go” /> </form> </div>

一些简单的代码简化 下面是一个简单示例，它说明了 jQuery 对代码的影响。要执行一些真正简单和常见的任务，比方说为页面的某一区域中的每个链接附加一个单击（click）事件，您可以使用纯 JavaScript 代码和 DOM 脚本来实现，如 清单 1 所示。 清单 1. 没有使用 jQuery 的 DOM 脚本                 var external_links = document.getElementById(‘external_links’); var links = external_links.getElementsByTagName(‘a’); for (var i=0;i < links.length;i++) {     var link = links.item(i);     link.onclick = function() {         return confirm(‘You are going to visit: ‘ + this.href);     }; [...]