Visual Studio中使用jQuery的10个技巧-技术开发专区

Visual Studio中使用jQuery的10个技巧

作者：黄永兵编辑：胡铭娅 2010-11-30 11:56 来源：51CTO

【IT168 技术文档】广泛流行的jQuery是一个开源的，跨浏览器和兼容CSS 3的JavaScript库，你可以用它简化你的JavaScript编码任务和操作(添加，编辑和删除)HTML内容中的DOM元素，本文介绍10个在Visual Studio下使用jQuery的10个有用的技巧，希望对你有所帮助。

　　你需要准备些什么

　　为了在Visual Studio中顺利使用jQuery，你需要安装下面这些软件：

　　Visual Studio 2008

　　Visual Studio 2008 SP1

　　jQuery库

　　Visual Studio 2008 jQuery插件

　　或者直接使用Visual Studio 2010，因为它已经内置支持jQuery了，如果你恰好在使用Visual Studio 2010，那么恭喜你，默认已经安装有jQuery库了。

　　在深入了解使用jQuery操作网页中的DOM元素之前，我们先来看看jQuery的介绍和它的好处。

　　一些有用的jQuery技巧

　　jQuery最显著的特点包括支持：

　　浏览器无关：jQuery支持绝大多数浏览器;

　　简化的事件处理模型：jQuery支持优秀的，易于使用的，范式化的事件处理模型，大大减少了代码量，jQuery事件处理模型在所有浏览器中都是一致的，事件对象是一个跨浏览器的标准化对象，事件对象总是作为一个参数传递给事件处理程序;

　　无缝扩展：jQuery通过易于使用的插件API提供了扩展支持，可以无缝扩展jQuery核心库。

　　下面开始介绍使用jQuery的一些技巧

　　1、使用jQuery预加载图像

　　预加载图像被认为是一个非常好的实践，因为它提高了网页的渲染速度，下面的代码显示了jQuery预加载图像的代码片段：

jQuery.preloadImages = function()
{
for(var x = 0; x").attr("src", arguments[x]);
}
};

　　2、使用jQuery禁用上下文菜单

　　下面的代码举例说明了如何使用jQuery禁用上下文菜单：

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

　　3、在jQuery中添加和删除CSS类

　　在jQuery中添加和删除CSS类非常简单：

//To add a css class, you can use the following piece of code
if($(id).hasClass('testClass'))
{
$('#div1').addClass('testclass');
}
//To remove a css class, you can use the following piece of code
if($(id).hasClass('testClass'))
{
$('#div1').removeClass('testclass');
  }

　　4、检查某个元素是否可用

　　你可以使用jQuery检查网页中的某个元素是否存在，下面是一个例子：

if ($('img').length)
{
alert('Image elements available');
}
else
{
alert('Image elements not available');
  }

　　5、使用jQuery检查浏览器类型

　　不同的浏览器执行脚本的方法有点不一样，但你可以使用jQuery轻松识别浏览器的类型，然后执行相应的自定义代码，下面是用jQuery检查浏览器的代码片段：

if (jQuery.browser.mozilla)
{
// Code to execute if browser is Mozilla
}
if (jQuery.browser.msie)
{
// Code to execute if browser is IE
}
if (jQuery.browser.safari)
{
// Code to execute if browser is Safari
}
if (jQuery.browser.opera)
{
// Code to execute if browser is Opera
}

　　6、使用jQuery发现隐藏的元素

　　你可以使用size()检查隐藏的DOM元素，下面是一个例子：

if( $("div.hidden").size)
{
alert('One or more divs are hidden');
}

　　你也可以使用length()函数实现相同的结果，其实size()函数也调用的是length()函数，因此length()函数更快。

if( $("div.hidden").length )
{
alert('One or more divs are hidden');
}

　　7、在DOM中保存数据

　　你可以使用Data()函数在DOM元素中保存数据，下面的代码片段显示了如何使用jQuery给一个DOM元素赋值：

$('#div1').data ('Key', 'Value');

　　如果要检索保存在DOM元素中的数据，你可以使用下面的代码：

$('#div1').data ('Key');

　　8、检索某个元素的父元素

　　使用jQuery检查某个元素的父元素非常简单，你需要做的就是像下面这样调用closest()函数：

var id = $("btnHello").closest("div").attr("id");

　　9、正确使用jQuery中的链表

　　链表(Chaining)是jQuery中的一个伟大功能，它促使链表中的行为被陆续执行，你可以使用链表方法来用它，下面的代码就是一个例子：

$('div1').removeClass('color').addClass('no-color');

　　10、使用jQuery操作选择列表

　　jQuery让使用选择列表变得更容易，你可以从选择列表中轻松地删除一个列表项，具体方法如下：

$("#employeeList option[value='9']").remove();

　　下面的代码举例说明了如何从选择列表中以文本形式检索一个选择项：

$('#employeeList :selected').text();

　　小结

　　jQuery是一个强大的JavaScript库，简化了跨浏览器，客户端脚本，事件处理，动画，DOM遍历和Ajax开发工作，本文呈现的这10个jQuery相关的技巧可以帮助你用好它，欢迎你也共享一些有用的jQuery使用技巧。

关注我们