Visual Studio下使用jQuery的十个技巧

日期: 2010-11-29 翻译:黄永兵 来源:TechTarget中国

  广泛流行的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使用技巧。

我们一直都在努力坚持原创.......请不要一声不吭,就悄悄拿走。

我原创,你原创,我们的内容世界才会更加精彩!

【所有原创内容版权均属TechTarget,欢迎大家转发分享。但未经授权,严禁任何媒体(平面媒体、网络媒体、自媒体等)以及微信公众号复制、转载、摘编或以其他方式进行使用。】

微信公众号

TechTarget微信公众号二维码

TechTarget

官方微博

TechTarget中国官方微博二维码

TechTarget中国

相关推荐