Visual Studio下使用jQuery的10个技巧

广泛流行的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预加载图像的代码片段:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

7、在DOM中保存数据

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

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

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

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

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

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

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

9、正确使用jQuery中的链表

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

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

10、使用jQuery操作选择列表

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

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

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

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

小结

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

转载于:https://www.cnblogs.com/joeblackzqq/archive/2011/01/08/1930500.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/495631.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

小甲鱼 OllyDbg 教程系列 (五) : 破解 PC Surgeon 之 查找字符串

https://www.bilibili.com/video/av6889190/?p11 https://www.bilibili.com/video/av6889190/?p12 程序下载地址:https://pan.baidu.com/s/1eVTLQ_AatLrmrz3FLwM5ww 提取码:wny9 修复 OllyDBG 右键 -> 复制到可执行文件 -> 所有修改 中 所…

深度概览卷积神经网络全景图,没有比这更全的了

来源: 人工智能头条 翻译 | 林椿眄摘要:深度卷积神经网络是这一波 AI 浪潮背后的大功臣。虽然很多人可能都已经听说过这个名词,但是对于这个领域的相关从业者或者科研学者来说,浅显的了解并不足够。通过这篇文章,我们…

深入理解Nginx~优化性能的配置项

1、Nginx worker进程个数 语法: worker_processes number; 默认: worker_processes 1; 一般情况下,用户要配置与CPU内核数相等的worker进程,并且使用下面的worker_cpu_affinity配置来绑定CPU内核。 2、绑定Nginx worker进程到指定…

学习C++的五十条忠告

50条忠告:(其中有几条觉得写的不够贴切,所以删了,发了余下的部分) 1.把C当成一门新的语言学习; 2.看《Thinking In C》,不要看《C变成死相》; 3.看《The C Programming Language》…

小甲鱼 OllyDbg 教程系列 (四) : 逆向 VisualSite Designer 之 硬件断点

去掉程序开始之前的界面:https://www.bilibili.com/video/av6889190?p9 去掉关闭程序后的广告:https://www.bilibili.com/video/av6889190?p10 VisualSite Designer.exe 下载地址:https://pan.baidu.com/s/1i-fi1wW-m0Cp72yyB_SBFw 提取码…

深入理解Nginx~事件类配置项

1、是否打开accept锁 语法: accept_mutex[on|off] 默认: accept_mutext on; accept_mutex是Nginx的负载均衡锁,可以让多个worker进程轮流地、序列化地与新的客户端建立TCP连接。 accept锁默认是打开的,如果关闭它,那么…

复杂人机智能系统功能分配方法综述

本文来源:人机与认知实验室摘要:功能分配是复杂人机智能系统设计进程中的重要内容, 它需要应用系统的分析方法, 合理地进行人、机两者的任务分配和科学地设计两者的功能结合。本文分析了国内外功能分配的研究现状和存在的问题。针对复杂人机智能系统的设计需求, 指出…

C++调用C#的dll

C调用C#的dll的三个方法: 1. 如果C使用clr语法编译: 通过#using(比如 #using "xxx.dll")引入C#的dll,在程序中调用C# dll中的变量或函数(采用正确的访问托管对象,即:使用 ^,而不是*&a…

JSONPath 解析 JSON 内容详解(翻译自 github)

Github :https://github.com/json-path/JsonPath http://www.ibloger.net/article/2329.html JSONPath Online Evaluator:http://jsonpath.com JsonPath 是一种简单的方法来提取给定JSON文档的部分内容。 JsonPath有许多编程语言,如Javascr…

深入理解Nginx~虚拟主机与请求的分发

1、监听端口 语法: listen address:port[default(deprecated in 0.8.21)|default_server|[backlognum|rcvbufsize|sndbufsize|accept_filterfilter|deferred|bind|ipv6only[on|off]|ssl]]; 默认: listen 80; 配置块: server示例 listen 127…

生物学将是下一代计算平台:DNA是代码,CRISPR是编程语言

来源:36氪每一个行业都在向Crispr投入大量的资金——制药、农业、能源、材料制造。甚至连那些大麻贩子都想砸钱进去。机器里面,运行的并不是由0和1组成的互联网编码,而是能重写生命密码的分子。日前,《连线》杂志发表了一篇文章&a…

还是重新回博客园

很长一段时间没有写博客了,因为这段时间做网管,没有怎么编程的缘故,倒是也写有了几个小工具。 原本打算在google的app engine上搭建一个博客,还不容易在windows上搭建好Google App Engine开发平台,没想到时不时出现访问…

Python 中使用 jsonpath

JSONPath 解析 JSON 内容详解(翻译自 github):https://blog.csdn.net/freeking101/article/details/103048514 JSONPath Online Evaluator:http://jsonpath.com Python 处理 JSON 我选择 ujson 和 orjson:https://bl…

【重磅】吴恩达宣布 Drive.ai 自动驾驶汽车服务落地 理想就这样成了现实!

来源: 网易智能美国当地时间5月7日,硅谷无人车创业公司 Drive.ai 宣布将于2018年7月在德克萨斯州弗里斯科市提供自动驾驶汽车服务。这或许会成为美国第一个真正落地的自动驾驶汽车载人服务,也标志着公众第一次有机会在公共道路上使用按需定制…

深入理解Nginx~文件路径的定义

1、以root方式设置资源路径 语法: root path; 默认: root html; 配置块: http、server、location、if eg.定义资源文件相对于HTTP请求的根目录 location /download/ {root optwebhtml; } 在上面的配置中,如果有一个请求的URI是…

小甲鱼 OllyDbg 教程系列 (八) :fjproducer 逆向 之 困境

小甲鱼 OllyDBG 教程:https://www.bilibili.com/video/av30969642?p15 程序下载地址: https://pan.baidu.com/s/1xTBrvuAx6hsyHQ2RsYiCoA 提取码: 11sd 打开程序显示如下: 可以看到标题栏的 Flash Jigsaw Produce (unregistered),可以根…

在sharepoint中添加视频播放

年初的时候想把公司举办的春晚发布在sharepoint中供大家观看,但是视频文件太大了,放到文档库中存储到数据库中是一个不切实际的办法,后来就搁置了。 其实也一直在想优酷等视频网站的发布方式,但没能得到解答。最近无意中发现了网页…

深入理解Nginx~网络连接的设置

1、读取HTTP头部的超时时间 语法: client_header_timeout time(默认单位:秒); 默认: client_header_timeout 60; 配置块: http、server、location 如果在一个时间间隔(超时时间)内没…

佛祖保佑永无BUG 神兽护体 代码注释(各种版本)

佛祖保佑 永无BUG 注释 1: /*_ooOoo_o8888888o88" . "88(| -_- |)O\ /O____/---\____. \\| |// ./ \\||| : |||// \/ _||||| -:- |||||- \| | \\\ - /// | || \_| \---/ | |\ .-\__ - ___/-. /___. . /--.--\ . . __.&qu…

打破国外垄断,我国拿下一项“制芯”关键技术

来源:科技日报“PM2.5,是大家很熟悉的微小颗粒物,直径小于或等于2.5微米。但我们研制这种制造芯片的关键材料,在过程中如果进入了哪怕PM1.0的粉尘,这个材料就是废品,就不能被应用到芯片当中。”唐一林唐一林…