jQuery技术

从零开始学习jQuery (一)(3)

字号+ 作者:H5之家 来源:H5之家 2016-04-08 14:00 我要评论( )

其中第一个是未压缩的jquery库. 如果启用gzip压缩并且使用min版本的jquery.js可以在传输过程中压缩到19KB. 注意,如果我们更新了脚本, 可以通过Ctrl+Shift+J快捷方式更新Visual Studio的智能感知,或者单击 编辑-IntelliSense-更新JScript Intellisense: 为了

其中第一个是未压缩的jquery库. 如果启用gzip压缩并且使用min版本的jquery.js可以在传输过程中压缩到19KB.

注意,如果我们更新了脚本, 可以通过"Ctrl+Shift+J"快捷方式更新Visual Studio的智能感知,或者单击 编辑->IntelliSense->更新JScript Intellisense:

image

为了即能在Visual Studio中增加脚本提示, 又能在上线的时候使用min版本的脚本库, 我们一般是用如下方式引入jQuery库:

1. 控制编译结果

<script type="text/javascript" src="scripts/jquery-1.2.6.min.js"></script>
<%if (false)
{ %>
<script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"> </script>
<%} %>

  这是网上推荐的方式. 编译后的页面上只有min版本的引用, 同时在开发时能够享受到智能感知.但是注意这种方式引用的min类库只能是1.2.6或者之前的版本号. 最新的1.3.2的所有非vsdoc版本的jquery库引用后都会导致JScript Intellisense更新出错. 这是1.3.2版本的一个bug, 期待后续版本中解决. 其实大家完全可以使用1.2.6版本的min库, 本教程涉及的jquery功能, 1.2.6版本基本都支持.

  我们使用了if(false)让编译后的页面不包含vsdoc版本jquery库的引用, 同样的思路还可以使用比如将脚本引用放入一个PlaceHolder并设置visible=fasle等.

2. 使用后端变量

为了能使用 1.3.2 版本的min库, 我们只能通过将脚本引用放在变量里, 通过页面输出的方式, 此种方式可以正常更新JScript Intellisense.但是可能有人和我一样不喜欢在前端使用变量:

<asp:PlaceHolder Visible="false" runat="server">
<script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>
</asp:PlaceHolder>
<% =jQueryScriptBlock %>

后台声明变量:

protected string jQueryScriptBlock = @"<script type=""text/javascript"" src=""scripts/jquery-1.3.2.
min.js""></script>";

六.在独立的.JS文件中启用脚本智能感知

上面我们解决了在页面中智能感知的问题, 其实在独立的.js文件中我们同样可以启用脚本的智能感知, 在IntellisenseDemo.js文件中,添加如下语句:

/// <reference path="jquery-1.3.2-vsdoc2.js" />

更新JScript Intellisense, 会发现在脚本中也启用了智能提示:



注意,本文中讲解的脚本智能感知不仅适用于jQuery类库, 还适用于自己编写的javascript代码.

七.总结

本文简单介绍了jQuery, 以及如何搭建脚本开发环境. 示例程序没有复杂的功能, 可能还无法让没有接触过jQuery的人认识到它的强大.但是仅凭借"多浏览器支持"这一特性, 就足以让我们学习并使用jQuery, 因为如今想编写跨浏览器的脚本真的是一件困难的事情!

在后续文章中我们将深入学习jQuery选择器, 事件, 工具函数, 动画, 以及插件等.

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • jQuery技巧之让任何组件都支持类似DOM的事件管理

    jQuery技巧之让任何组件都支持类似DOM的事件管理

    2016-04-16 10:05

  • 很容易学习的JQuery库 : (八) 杂项 noConflict() 方法

    很容易学习的JQuery库 : (八) 杂项 noConflict() 方法

    2016-04-08 13:03

  • 自学了三天的SeaJs学习,解决了前端的一些问题,与小伙伴们一起分享一下! - 李 维

    自学了三天的SeaJs学习,解决了前端的一些问题,与小伙伴们一起分享

    2016-04-06 16:02

  • jQuery常用的一些技巧汇总

    jQuery常用的一些技巧汇总

    2016-04-04 11:03

网友点评