Visual Studio下使用jQuery的10个技巧

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

我们是成立于2013年的成都网站建设公司,提供网站建设,电商网站设计开发,成都外贸网站建设,响应式网页设计,小程序开发、等服务。为客户创造有价值的品牌营销体验，让互联网提升企业的竞争力！

你需要准备些什么

为了在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预加载图像的代码片段：

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

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

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

 
 
 
      
  
  
  1. $(document).ready(function(){  
    2.   
  
  
  2.     $(document).bind("contextmenu",function(e){  
    3.   
  
  
  3.         return false;  
    4.   
  
  
  4.     });  
    5.   
  
  
  5. }); 
    6.

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

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

 
 
 
      
  
  
  1. //To add a css class, you can use the following piece of code  
    2.   
  
  
  2. if($(id).hasClass('testClass'))  
    3.   
  
  
  3. {  
    4.   
  
  
  4.  $('#div1').addClass('testclass');    
    5.   
  
  
  5. }  
    6.   
  
  
  6.  
    7.   
  
  
  7. //To remove a css class, you can use the following piece of code  
    8.   
  
  
  8. if($(id).hasClass('testClass'))  
    9.   
  
  
  9. {  
    10.   
  
  
  10.  $('#div1').removeClass('testclass');    
    11.   
  
  
  11. } 
    12.

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

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

 
 
 
      
  
  
  1. if ($('img').length)   
    2.   
  
  
  2. {    
    3.   
  
  
  3.     alert('Image elements available');    
    4.   
  
  
  4. }   
    5.   
  
  
  5. else   
    6.   
  
  
  6. {    
    7.   
  
  
  7.     alert('Image elements not available');    
    8.   
  
  
  8. } 
    9.

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

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

 
 
 
      
  
  
  1. if (jQuery.browser.mozilla)   
    2.   
  
  
  2. {  
    3.   
  
  
  3.     // Code to execute if browser is Mozilla  
    4.   
  
  
  4. }  
    5.   
  
  
  5. if (jQuery.browser.msie)   
    6.   
  
  
  6. {  
    7.   
  
  
  7.     // Code to execute if browser is IE  
    8.   
  
  
  8. }  
    9.   
  
  
  9.    
    10.   
  
  
  10. if (jQuery.browser.safari)   
    11.   
  
  
  11. {  
    12.   
  
  
  12.     // Code to execute if browser is Safari  
    13.   
  
  
  13. }  
    14.   
  
  
  14. if (jQuery.browser.opera)   
    15.   
  
  
  15. {  
    16.   
  
  
  16.     // Code to execute if browser is Opera  
    17.   
  
  
  17. } 
    18.

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

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

 
 
 
      
  
  
  1. if( $("div.hidden").size)  
    2.   
  
  
  2. {  
    3.   
  
  
  3.   alert('One or more divs are hidden');  
    4.   
  
  
  4. } 
    5.

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

 
 
 
      
  
  
  1. if( $("div.hidden").length )  
    2.   
  
  
  2. {  
    3.   
  
  
  3.   alert('One or more divs are hidden');  
    4.   
  
  
  4. } 
    5.

7、在DOM中保存数据

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

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

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

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

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

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

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

9、正确使用jQuery中的链表

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

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

10、使用jQuery操作选择列表

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

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

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

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

小结

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

本文名称：Visual Studio下使用jQuery的10个技巧
路径分享：http://www.shufengxianlan.com/qtweb/news17/493267.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

用户体验知识

同城分类信息

成都模板网站　　 　成都网站建设　　 　Android开发　　 　做手机网站　　 　成都装饰装修　　 　成都宣传画册设计　　 　成都标识标牌设计制作　　 　成都ssl证书申请　　 　响应式网站建设方案　　 　B2C电商系统　　 　小谭建站工作室　　 　内江服务器托管　　 　网站营销推广　　 　青羊区雕琢时光　　 　成都宣传海报　　 　香港云服务器　　 　成都活动策划　　 　德阳定制网站建设　　 　成都营销网站建设　　 　四川审计公司