自从jQuery面世以来,它以其快速、简洁,能够很轻易地处理HTML文档、控制事件、给页面添加动画和Ajax效果等打动着所有关注它的人的心。本人是在某跨国企业的一次面试中得知找个库的,在面试当时对jQuery还是一无所知,后来在面试后查阅了大量的资料才逐步了解jQuery。
在VS2008中也可以很方便地使用jQuery,不过需要安装SP补丁,这个补丁可以从微软官方网站下载,也可以在搜索引擎中以“VS2008SP1CHSX1512981.iso”为关键字来搜索这个补丁,这个补丁体积比较庞大,本人下载到的文件大小为898 MB (941,703,168 字节),并且在安装这个补丁时请确认系统分区必须有大于3.4G的硬盘空间。下载到VS2008SP1CHSX1512981.iso文件之后用虚拟光驱加载之后就可以安装,一路next没有太多话说。
要在VS2008SP1中使用VS2008SP1中使用jQuery有以下注意事项:
1、需要有jQuery的类库,在本示例中使用的是1.2.6,本人所知的最新版本为1.3.1。
2、需要有jQuery的API文档,这个文档其实也是一个js文件,在VS2008SP1中配置以后,编码时VS2008会自动从这个文档中读取方法说明,这样编写js方法时就会像编写C#中的方法一样具有智能感知和智能提示的作用(在本示例中使用1.2.6版本的原因是本人手头有1.2.6版本的API文档的中文版,这对于Englishi不好的朋友来说比较方便,呵呵)。
3、在使用时确保jQuery类库和jQuery的API文档库在同一个目录下,并且API文档库的名称和jQuery类库名称有一定要求,比如jQuery类库文件名为“jquery-1.2.6-cn.js”,那么jQuery的API文档库的名称应为“jquery-1.2.6-cn-vsdoc.js”,因为当jQuery类库被引用时会检查在该类库所在的文件夹下是否存在一个可选的“-vsdoc.js”文件,如果存在就会驱动智能感知引擎。
下面看一个例子,在这个例子里演示了三种效果,发送Ajax请求、隐藏和显示HTML元素。
这个页面的代码设计部分代码如下:
在VS2008中也可以很方便地使用jQuery,不过需要安装SP补丁,这个补丁可以从微软官方网站下载,也可以在搜索引擎中以“VS2008SP1CHSX1512981.iso”为关键字来搜索这个补丁,这个补丁体积比较庞大,本人下载到的文件大小为898 MB (941,703,168 字节),并且在安装这个补丁时请确认系统分区必须有大于3.4G的硬盘空间。下载到VS2008SP1CHSX1512981.iso文件之后用虚拟光驱加载之后就可以安装,一路next没有太多话说。
要在VS2008SP1中使用VS2008SP1中使用jQuery有以下注意事项:
1、需要有jQuery的类库,在本示例中使用的是1.2.6,本人所知的最新版本为1.3.1。
2、需要有jQuery的API文档,这个文档其实也是一个js文件,在VS2008SP1中配置以后,编码时VS2008会自动从这个文档中读取方法说明,这样编写js方法时就会像编写C#中的方法一样具有智能感知和智能提示的作用(在本示例中使用1.2.6版本的原因是本人手头有1.2.6版本的API文档的中文版,这对于Englishi不好的朋友来说比较方便,呵呵)。
3、在使用时确保jQuery类库和jQuery的API文档库在同一个目录下,并且API文档库的名称和jQuery类库名称有一定要求,比如jQuery类库文件名为“jquery-1.2.6-cn.js”,那么jQuery的API文档库的名称应为“jquery-1.2.6-cn-vsdoc.js”,因为当jQuery类库被引用时会检查在该类库所在的文件夹下是否存在一个可选的“-vsdoc.js”文件,如果存在就会驱动智能感知引擎。
下面看一个例子,在这个例子里演示了三种效果,发送Ajax请求、隐藏和显示HTML元素。
这个页面的代码设计部分代码如下:
说明:在这个页面里引入了jQuery类库和jQuery的API文档库,为了启用VS2008SP1的智能感知效果,可能需要更新一下Visual Studio的智能感知,步骤如下:“编辑”-“IntelliSence”-“更新JScriptIntelliSence”,如下图所示:
因为在这个页面中有一处地方存在这Ajax请求,所以还需要编写一个页面接收客户端的Ajax请求,这个页面的名称是GetTime.aspx,注意请删除掉该页面设计代码中的页面元素部分,仅保留如下代码:
如果不删除页面的HTML元素,有可能会影响最终的显示效果。
GetTime.aspx页面的服务器端逻辑代码如下:
GetTime.aspx页面的服务器端逻辑代码如下:
最终这个页面的初始运行效果如下:
点击“获取服务器时间”按钮后的效果如下:
点击“隐藏文本”按钮后的效果如下:
如果点击“显示文本”按钮之后,效果如下:
如果实地运行这个例子,你就会发现文本的隐藏和显示会有一个动画效果,这个从VS的js智能感知提示中可以看到,如下图:
从上图可以看到show方法有两个可选参数,第一个是动画时长的参数,可以用毫秒值来设定,这个值如果比较大的话会看到比较明显的动画效果。
通过jQuery可以减少很多脚本代码在浏览器兼容性方面的考虑,对于喜欢用纯js来开发Ajax应用程序或者操作HTML元素的开发人员来说,确实是一大福音。当然本文仅仅是演示了简单的应用,更多更好更灵活的应用有待于你我在开发中去发现。
本文所涉及到的源代码除了不提供VS2008SP1CHSX1512981.iso这个VS2008的补丁之外,其它在本文涉及到的文件均提供下载,在本文源代码的项目中js文件下包含有三个文件:
jquery-1.2.6-cn.js:jQuery类库。
jquery-1.2.6-cn-vsdoc.js:jQuery中文API文档,这个用于在VS下提供智能提示。
jQueryAPI_CHM.CHM:jQuery中文API帮助。
本文源代码下载地址:
点击“获取服务器时间”按钮后的效果如下:
点击“隐藏文本”按钮后的效果如下:
如果点击“显示文本”按钮之后,效果如下:
如果实地运行这个例子,你就会发现文本的隐藏和显示会有一个动画效果,这个从VS的js智能感知提示中可以看到,如下图:
从上图可以看到show方法有两个可选参数,第一个是动画时长的参数,可以用毫秒值来设定,这个值如果比较大的话会看到比较明显的动画效果。
通过jQuery可以减少很多脚本代码在浏览器兼容性方面的考虑,对于喜欢用纯js来开发Ajax应用程序或者操作HTML元素的开发人员来说,确实是一大福音。当然本文仅仅是演示了简单的应用,更多更好更灵活的应用有待于你我在开发中去发现。
本文所涉及到的源代码除了不提供VS2008SP1CHSX1512981.iso这个VS2008的补丁之外,其它在本文涉及到的文件均提供下载,在本文源代码的项目中js文件下包含有三个文件:
jquery-1.2.6-cn.js:jQuery类库。
jquery-1.2.6-cn-vsdoc.js:jQuery中文API文档,这个用于在VS下提供智能提示。
jQueryAPI_CHM.CHM:jQuery中文API帮助。
本文源代码下载地址:
附件:http://down.51cto.com/data/2353200
本文转自周金桥51CTO博客,原文链接:http://blog.51cto.com/zhoufoxcn/170723 ,如需转载请自行联系原作者