ASP.NET开发者使用jQuery应该了解的几件事情

下面这几点希望能够帮你加快你的学习。

1.把selectors当作asp.net中的sets。

在asp.net的世界,通过一个查询找到一系列控件是非常少见的.相反我们比较习惯于通过一个唯一的ID来找到一个控件。当然,在jQuery中这个也是没有问题的,但是jQuery的选择功能相对更加神奇。

使用jQuery的selectors能够很容易定位到一个set的元素,相对来说比在asp.net中使用迭代的规则来找到一个set的元素更加清晰和易于表达。

2.使用CSS类来代替styling。

另外一个不直观的技术是把CSS类作为一个flag。与'selector engin'一样,'flag'类也是个令人惊喜的东西。

举个例子来说吧,最近有个活动是做一个在线的能够与客户端互动的纸牌游戏。一个需求是纸牌需要有个onclick haddler在某个特定时间,不过这些事件只针对那些face down(脸朝下)的。作为一个.net的开发者我立刻能够想到的办法是让这些纸牌在客户端通过一个collection来编号.然后我可以在需要的时候给这个数据一个onclick handlers。这个固然可以,不过难以维护且有点凌乱。

现在如果我使用CSS类来实现,face up的纸牌我通过addclass方法为它们加上一个'flipped'类,然后可以通过一个简单的 '$(".card:not(.flipped)")'选择那些face down的纸牌。使用jQuery的click(fn)功能能够让我使用几行代码就实现这个功能。更重要的是它更容易理解和读取。

下面附上几点英文原版的:

3。Understand unobtrusive JavaScript. 
 In the ASP.NET world, we use a lot of what's sometimes termed obtrusive JavaScript.  This means that client-side event handlers are defined as attributes on elements.  For example, several ASP.NET WebControls render an OnClick=”javascript:__doPostBack()”attribute as part of their markup.  This is considered obtrusive JavaScript.

When ASP.NET was initially being developed, this inline JavaScript was the norm.  However, as browsers began providing more sophisticated faculties for imperatively adding event handlers, this declarative technique quickly lost favor with client-side developers. As a consequence, the preferred approach has shifted toward what's called unobtrusive JavaScript.

Unobtrusive JavaScript is now considered a best practice when wiring up client-side event handlers.  This is primarily because it facilitates separation of concerns between behavioral JavaScript and structural HTML markup.  Unobtrusive JavaScript also helps you to write cleaner, more semantic markup, which improves accessibility and often has SEO benefits.

  • Use the console to learn interactively.
    Coming from the save-compile-reload paradigm of statically typed server-side development, it's natural to approach client-side development in a similar fashion.  While you certainly can write client-side code that way, it's akin to working blindfolded when you consider the alternatives.

    Since JavaScript is usually interpreted by a browser, the browser is one of the best debugging environments available.  In particular, a JavaScript “console” is terrific for interactively interrogating the DOM, testing jQuery selectors against actual markup, and refining JavaScript code in real-time.

    My preferred browser-based tool is the Firebug addon to Firefox.  I cannot praise this Firebug highly enough.  It has revolutionized how I approach client-side development, both of JavaScript and of CSS.  If you prefer Internet Explorer, IE8's updated developer tools are also very capable in this department.
    Whatever your browser of choice, I urge you to give these utilities a try when debugging client-side functionality.  Once you become proficient with one of these tools, you'll be amazed that you ever developed client-side code without it.


  • Get the VSDOC.
    Even though browser-based tools are great for debugging, an ASP.NET developer's primary editor is still going to be Visual Studio.  When writing jQuery code in Visual Studio, having proper Intellisense can make a tremendous difference in productivity.  The discoverability that Intellisense provides is especially beneficial when you're unfamiliar with jQuery's API.

    As part of the official support for jQuery, Microsoft provides a documentation file to provide jQuery Intellisense inside Visual Studio 2008.  This is provided through what's called a vsdoc file, and is available on the jQuery download page (via the “Documentation: Visual Studio” links).
    Jeff King has assembled an excellent FAQ to help you get Visual Studio 2008's JavaScript Intellisense working:  http://blogs.msdn.com/webdevtools/archive/2008/11/18/jscript-intellisense-faq.aspx

  • (0)

    相关推荐

    • ASP.NET开发者使用jQuery应该了解的几件事情

      下面这几点希望能够帮你加快你的学习. 1.把selectors当作asp.net中的sets. 在asp.net的世界,通过一个查询找到一系列控件是非常少见的.相反我们比较习惯于通过一个唯一的ID来找到一个控件.当然,在jQuery中这个也是没有问题的,但是jQuery的选择功能相对更加神奇. 使用jQuery的selectors能够很容易定位到一个set的元素,相对来说比在asp.net中使用迭代的规则来找到一个set的元素更加清晰和易于表达. 2.使用CSS类来代替styling. 另外一个

    • ASP.NET MVC中jQuery与angularjs混合应用传参并绑定数据

      要求是这样子的,在一个列表页中,用户点击详细铵钮,带记录的主键值至另一页. 在另一外页中,获取记录数据,然后显示此记录数据在网页上. 先用动图演示: 昨天有分享为ng-click传递参数 <angularjs为ng-click事件传递参数>http://www.cnblogs.com/insus/p/7017737.html 上面仅仅是在ng-click传入一个值,但是在ASP.NET MVC中,还需要把这个值传至另外一个视图中<ASP.NET MVC传递参数(model)>htt

    • ASP.NET jQuery 实例9 通过控件hyperlink实现返回顶部效果

      要实现该效果,首先要先了解以下几点基础知识: 窗体滚动事件:$(window).scroll(function(){...}); 获取窗体滚动距离:$(window).scrollTop(); 获取窗体高度:$(window).height(); 了解以上内容就可以实现通过hyperlink控件实现返回顶部的效果了. 1.准备界面结构代码: 复制代码 代码如下: <form id="form1" runat="server"> <div> &

    • ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果

      要实现该效果,首先要先了解以下几点基础知识: 窗体滚动事件:$(window).scroll(function(){...}); 获取窗体滚动距离:$(window).scrollTop(); 获取窗体高度:$(window).height(); 了解以上内容就可以实现通过hyperlink控件实现返回顶部的效果了. 1.准备界面结构代码: 复制代码 代码如下: <form id="form1" runat="server"> <div> &

    • ASP.NET MVC使用jQuery Template实现批量更新

      思路 引用jQuery Template所需要的js文件:jquery.tmpl.min.js 在<script type="text/x-jquery-tmpl" id="movieTemplate"></script>中生成模版内容,里面包含占位符 点击添加按钮的时候,把模版内容追加到界面上,并给占位符赋值 jQuery Template的内容大致是这样: <script type="text/x-jquery-tmpl&

    • jquery UI Datepicker时间控件的使用及问题解决

      本文实例为大家分享了jqueryUI中datepicker的使用,解决与asp.net中的UpdatePanel联合使用时的失效问题. 1.jqueryUI的datepicker的使用 -->首先在jqueryUI官网上根据你的需要下载适合你系统主题的样式,jqueryUI主题:下载地址: -->下载后的文件 jquery-ui-1.10.3.custom文件夹:不同的主题的区别在于它们引用的css不同 默认下载的样式如下: 其它样式比如我下载的样式: 下载的jqueryUI中除了css文件夹

    • jQuery密码强度验证控件使用详解

      本文实例为大家分享了jQuery密码强度验证控件,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="jquery-1.12.1.js"></script>

    • jQuery操作表单常用控件方法小结

      本文实例总结了jQuery操作表单常用控件方法.分享给大家供大家参考.具体如下: 下面的JS代码列出了jQuery操作表单常用控件(包括select,radiobox,checkbox)的常用方法,相信一定有你需要的 操作radio的html代码 Radion <input type="radio" name="rd" id="rd1" checked="checked" value="rd1" /&

    • jquery UI Datepicker时间控件的使用方法(终结版)

      近期项目中用到日期控件,感觉不错,写出来分享给大家看看,我限制的开始时间和结束时间跨度不超过三天,并配置有清空时间,重选时间等功能,分享给大家: 先给大家看两张效果图 在例子中我控制的开始时间和结束时间为三天,也就是开始时间和结束时间的跨度不能超过三天. 具体是怎么实现的,代码中会附有很详细的解释,请大家继续往下看: 第一步,引入控件js,这里有两个,一个是jquery.js,一个是jquery-ui-datepicker.js,当然还有引入样式文件: <script type="text

    • jquery UI Datepicker时间控件的使用方法(加强版)

      先来看看Datepicker插件的属性表: 第一个日历插件的使用实例 首先导入需要的类库文件: <</SPAN>scripttype="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.7.1.min.js"></</SPAN>script> <</SPAN>scripttype="text/javas

    随机推荐