作者：Joydip Kanjilal

 

jQuery是一个简单，重量轻，开源的，跨浏览器的JavaScript库，它简化了事件处理，动画和开发Ajax的Web应用程序，加快了应用程序的开发。在这篇文章中，我们将讨论jQuery中的一些有用的技巧和提示。

 

jQuery开发的前提条件

 

要开始使用jQuery，你应该在你的系统中安装有以下：

Visual Studio 2008中

Visual Studio 2008的SP1

jQuery库

Visual Studio 2008中的jQuery插件

在这里，您可以下载jQuery库。

或者，你可以安装Visual Studio 2010。默认情况下，使用jQuery库。

 

jQuery的技巧和提示

 

现在，我们将讨论一些技巧，使用jQuery来充分发挥其潜力。

 

禁用鼠标右键点击

 

如果您的浏览器禁用右键单击，您可以使用下面的代码片断：

 

$(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); });

检测浏览器类型

 

假设你要确定目前使用的浏览器类型。做到这一点，您可以使用下面的代码片断：

 

$(document).ready(function() { // If the browser type if Mozilla Firefox if ($.browser.mozilla && $.browser.version >= "1.8" ){ // some code } // If the browser type is Opera if( $.browser.opera) { // some code } // If the web browser type is Safari if( $.browser.safari ) { // some code } // If the web browser type is Chrome if( $.browser.chrome) { // some code } // If the web browser type is Internet Explorer if ($.browser.msie && $.browser.version <= 6 ) { // some code } //If the web browser type is Internet Explorer 6 and above if ($.browser.msie && $.browser.version > 6) { // some code } });

检测当前的鼠标坐标

 

现在，假设你需要在Web浏览器中检测当前鼠标的坐标。要做到这一点，你可以写下面的代码片段：

 

$(document).ready(function() { $().mousemove(function(e) { $('# MouseCoordinates ').html("X Axis Position = " + e.pageX + " and Y Axis Position = " + e.pageY); }); <DIV id=MouseCoordinates></DIV> });

检查一个元素是否存在

 

要检查一个元素是否存在，你可以写下面的代码：

 

if ($("#someElement").length) { //The DOM element exists } else { //The DOM element doesn't exist }

检测一个元素是否可见

 

要检查是否是可见的元素，你可以使用下面的代码片段：

 

if($(element).is(":visible") == "true") { //The DOM element is visible } else { //The DOM element is invisible }

设置一个计时器

 

可以使用下面的代码片断使用jQuery设置一个计时器：

 

$(document).ready(function() { window.setTimeout(function() { // some code }, 500); });

jQuery的链式调用(Chaining)

 

链式调用在jQuery中是一个伟大的功能，让您进行连续的方法调用。下面是一个例子：

 

$('sampleElement').removeClass('classToBeRemoved').addClass('classToBeAdded');

您可以在您的网页，还可以使用jQuery的DOM元素来保存状态信息。它包含了data()方法，你可以用它来存储状态信息的键/值对的DOM元素。下面是一个例子：

 

$('#someElement').data('currentState', 'off');

延迟加载

 

延迟加载是一个伟大的功能，它的实现原理是页面载入完毕后将html中所有img标签的src属性都替换为空，把src的初始值存储到一个自定义的属性中，当页面滚动到img标签位置时再将图片载入进来。要使用此功能，您应包括jquery.lazyload.js的脚本文件，如下所示：

 

<script src="jquery.js" type="text/javascript"></script> <script src="jquery.dimensions.js" type="text/javascript"></script> <script src="jquery.lazyload.js" type="text/javascript"></script> Next, you can use the lazyload() method as shown below: $("imageObject").lazyload();

预载图片

 

预载图像在网页中提高性能。特别是在进度中展现动画时很有用，你的网页不必等待加载图像。您可以通过简单的代码使用jQuery来预加载图像。下面是一个例子：

 

jQuery.preloadImagesInWebPage = function() { for(var ctr = 0; ctr<arguments.length; ctr++) { jQuery("<img>").attr("src", arguments[ctr]); } }

使用上面的方法，你可以使用下面的代码片断：

 

$.preloadImages("image1.gif", "image2.gif", "image3.gif"); To check whether an image has been loaded, you can use the following piece of code: $('#imageObject').attr('src', 'image1.gif').load(function() { alert('图像已加载…'); });

jQuery的克隆

 

jQuery支持克隆 - 您可以使用clone()方法在你的网页中创建任何DOM元素的克隆。下面是一个例子：

 

var cloneObject = $('#divObject').clone();

$(document).ready 在页面渲染过程中被调用，而对象仍然在Web浏览器下载。为了在加载页面时减少CPU的利用率，您可以在$(window).load事件中绑定您的jQuery函数。请注意，此事件在所有对象下载完成后被触发。这将在相当程度上会减少页面加载时间提高应用程序的性能。其他常见的方式，提高jQuery的性能可以压缩脚本，尽可能地限制DOM操作。

考虑下面的代码片断，在一个循环中添加DOM元素：

 

for (var ctr=0; ctr<=rows.length; ctr++) { $('#tableObject').append('<tr><td>'+rows[ctr]+'</td></tr>'); }

上面的代码可以被替换为一个更高效的代码，以尽量减少DOM操作，从而提高应用程序的性能，如下所示：

 

var str = ''; for (var x=0; x<=rows.length; x++) { str += '<tr><td>'+rows[x]+'</td></tr>'; } $('#tableObject').append(str);

参考文献

 

这里有一个链接列表，jQuery的一些有益的参考：

jQuery文档

20个jQuery的编程技巧和窍门

改善你的jQuery

jQuery的性能规则

 

总结

 

jQuery是一个快速，轻量级的JavaScript库，它广为流行，以简化的方式来编写JavaScript代码，在这篇文章中，我们讨论了一些jQuery有用的技巧和提示。

欢迎访问我的博客：

阅读快乐！