Visual Studio下使用jQuery的10个技巧
今天我们要讲的是在Visual Studio 2010下如何使用jQuery的10个技巧,这些已经在VS2010中内置支持了。
- 作者:黄永兵 译来源:51CTO|2010-11-30 09:06
【51CTO经典译文】广泛流行的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使用技巧。
原文标题:10 jQuery Tips and Tricks for Visual Studio
【编辑推荐】
- Visual Studio自定义调整窗体的两个小技巧
- Visual Studio 2010中关于C#的几点改进
- Visual Studio 2010及.Net 4新功能一览
- 提高效率 用好Visual Studio 2010自定义代码段
点赞 0
- 大家都在看
- 猜你喜欢
编辑推荐
- 24H热文
- 一周话题
- 本月最赞
- 面试大杀器:为什么一定要用MQ中间件?十年阿里架构师教你如何阅读Java源码Lambda架构已死,基于IOTA模型的“秒算平台”架构实践杂谈篇之我是怎么读源码的,授之以渔程序员是吃青春饭的?一张图道尽程序员的发展方向10个Java开发人员的顶级测试工具、库和框架介绍2019国内主流和热门的10款前端开发框架微服务架构,多“微”才合适?
- 程序员是吃青春饭的?一张图道尽程序员的发展方向太厉害了:居然有人将各大编程语言绘成了一部编年史坐在马桶上看算法:快速排序LeCun:Python当死,深度学习新语言当立面试大杀器:为什么一定要用MQ中间件?再见,Python!你好,Go语言从百度春晚不宕机聊聊高并发下的秒杀Go语言的9大优势和3大缺点
- 再见,Python!你好,Go语言太厉害了:居然有人将各大编程语言绘成了一部编年史坐在马桶上看算法:快速排序成人网站YouPorn使用Redis之经验谈傻瓜都能看懂,30张图彻底理解红黑树!面试必备指南:你的系统如何支撑高并发?普通码农如何“C位出道”冲进BAT?面试大杀器:为什么一定要用MQ中间件?
视频课程+更多
-
2017软考信息系统项目管理师-案例分析真题解
讲师:小任老师31182人学习过
-
Windows Server 2008 活动目录视频课程
讲师:韩立刚305586人学习过
-
JSP零基础入门系列视频课程【范昌明】
讲师:范昌明218786人学习过
最新专题+更多
- 精选博文
- 论坛热帖
- 下载排行
读 书 +更多
C#高级编程(第4版)
C#经典名著!2006年最受读者喜爱的十大技术开发类图书!也是Wrox红皮书中最畅销的品种之一,从第一版开始就名满天下;其第3版被中华读书报...
-
订阅51CTO邮刊
点击这里查看样刊