26 个 jQuery使用技巧，26jquery使用技巧

The use of the jQuery library is growing and growing(just released jQuery 1.4), more and more people are using this useful javascript library. This means that more and more useful jQuery tips, tricks and solutions are coming available. That’s why i created a small list of 26 cool and useful jQuery tips, tricks and solutions.

1. 禁用右键点击（Disable right-click）

 

[javascript] view plaincopyprint?  

 

 

2. 禁用搜索文本框（Disappearing search field text）

 

[javascript] view plaincopyprint?  

 

 

3. 新窗口打开链接（Opening links in a new window）

 

[javascript] view plaincopyprint?  

 

 

4. 检测浏览器（Detect browser）

 

[javascript] view plaincopyprint?  

 

 

5. 预加载图片（Preloading images）

 

[javascript] view plaincopyprint?  

 

 

6. 样式筛选（CSS Style switcher）

 

[javascript] view plaincopyprint?  

 

 

7. 列高度相同（Columns of equal height）

 

[javascript] view plaincopyprint?  

 

 

8. 字体大小调整（Font resizing）

 

[javascript] view plaincopyprint?  

 

 

9. 返回页面顶部（Smooth(animated) page scroll）

 

[javascript] view plaincopyprint?  

 

 

11. 获取鼠标的xy坐标（Get the mouse cursor x and y axis）

 

[javascript] view plaincopyprint?  

 

 

12. 验证元素是否为空（Verify if an Element is empty）

 

[javascript] view plaincopyprint?  

 

 

13. 替换元素（Replace a element）

 

[javascript] view plaincopyprint?  

 

 

14. 延迟加载（jQuery timer callback functions）

 

[javascript] view plaincopyprint?  

 

 

15. 移除单词（Remove a word）

 

[javascript] view plaincopyprint?  

 

 

16. 验证元素是否存在（Verify that an element exists in jQuery）

 

[javascript] view plaincopyprint?  

 

 

17. 使整个DIV可点击（Make the entire DIV clickable）

 

[javascript] view plaincopyprint?  

 

 

18. id和class切换（Switch between classes or id’s when resizing the window）

 

[javascript] view plaincopyprint?  

19. 克隆对象（Clone a object）

 

[javascript] view plaincopyprint?  

 

 

 

20. 使元素居中屏幕（Center an element on the screen）

 

[javascript] view plaincopyprint?  

21. 自定义选择器（Write our own selector）

 

[javascript] view plaincopyprint?  

22. 统计元素个数（Count a element）

 

[javascript] view plaincopyprint?  

23. 自定义Bullets（Use Your Own Bullets）

 

[javascript] view plaincopyprint?  

24. 引用google分发的jQuery（Let Google host jQuery for you）

 

[javascript] view plaincopyprint?  

25. 禁用jQuery动画（Disable jQuery animations）

 

[javascript] view plaincopyprint?  

26. 防止不兼容冲突（No conflict-mode）

 

[javascript] view plaincopyprint?  

 

 

jquery 速查表：

 

jQuery对网站界面设计人员来说，该怎深入

jquery是对JS的一个封装，或者说是一个扩展。你做界面其实不需要对编程了解太多，因为不管你的DIV CSS是怎么设计的，只要加一个ID都可以通过JQUERY取出来。从实质意义上来讲，请求返回的都是字符串，不管是AJAX还是页面，而处理这些字符串都是由编程人员做的，你并不要关心太多后台的东西，如果你想深入，你可以想办法把界面做的更好看的同时让界面变得更小，这个很重要。再漂亮的东西，也没人愿意等30秒去看的。

怎让 jQuery 与 prototype 共存

群英汇研究的开源软件，绝大多数的Web端都使用了 Prototype，这是因为 Prototype 和核心思想是增强 JavaScript 本身的编程能力，而这无疑会让程序员将其作为框架的首选。 jQuery 的问世稍微比 Prototype 晚一些，但是因为 jQuery 拥有更为简单的windows.onload 调用“$(function() {…})” 或者稍复杂但更明显的 “$(document).ready(function() {…}) ”，让 jQuery 拥有非常多的拥趸和插件。关于这两个 JavaScript 的对比，在得空的时候，再说一说。那么能否在一个页面中同时使用这两个框架呢？同时使用 jQuery 和 Prototype 框架，大部分原因是页面中已经使用了一种框架（如 Prototype），而希望通过添加另外的一个框架的某个插件，迅速的得到某个效果（如默个 jQuery 插件）。实际上 jQuery 和 Prototype 在解决了命名空间的冲突之后，共存是完全可能的。 jQuery 和 Prototype 的命名空间冲突
Prototype JS框架为 JavaScript 增加了相当多的命名空间：$, $$, $A, $H, $w, Class, Prototype, Hash, Event, …而jQuery 和 Protype 相比则简单许多，因为整个 jQuery 代码就是一个闭包，且仅仅为JavaScript 命名空间引入两个新名字： $ 和 jQuery。很显然 $ 就是两者冲突的焦点，只要解决 $ 的冲突问题，两者即可共存。 jQuery 中的$ 和冲突解决机制
jQuery 中，$ 就是 jQuery
前面说过：整个 jQuery 代码就是一个闭包，且仅仅为JavaScript 命名空间引入两个新名字： $ 和 jQuery。让我们看看 jQuery 代码： 行号1: 行号 16: (function( window, undefined ) { ... 行号 6321: // Expose jQuery to the global object 行号 6322: window.jQuery = window.$ = jQuery; 行号 6323: 行号 6323: })(window); 从上面的代码可以看出，jQuery 引入的两个全局对象名实际上指向同一个对象，即 $ 实际上就等同于 jQuery。那么只要删除 jQuery.js 中对$ 的定义，并在 jQuery 相关脚本中将 $ 全部用 jQuery 替代不就可以了么？ 不必修改代码，jQuery 的 noConflict 方法可用于解决冲突
实际上 jQuery 已经考虑到和其他框架命名空间冲突的问题，提供一个 noConflict 方法用于冲突解决。让我们看一段 jQuery 中的代码： 行号24: // Map over jQuery in case of overwrite 行号 25: _jQuery = window.jQuery, 行号 26: 行号 27: // Map over the $ in case of overwrite 行号 28: _$ = window.$, ... 行号 363: jQuery.extend({ 行号 364: noConflict: function( deep ) { 行号 365: window.$ = _$; 行号 366: 行号 ......余下全文>>