jQuery不仅支持所有现代浏览器，包括IE、Firefox、Safari、Opera和Chrome等，还可以在编写代码和浏览器API冲突时隐藏不一致性（和错误）。
1. jQuery
jQuery擅长在HTML文档中查找、遍历和操纵HTML元素。一旦找到元素，jQuery就可以方便的在其上进行操作，如连接事件处理程序、使其具有动画效果以及围绕它的Ajax交互等。
1.1 jQuery函数
jQuery函数对象可以用来访问jQuery特性。
$(function (){
$("#album-list img").mouseover(function(){
$(this).animate({ height: '+=25', width: '+=25'})
.animate({ height: '-=25', width: '-=25'});
});
});
- 第一行代码调用了jQuery函数($)，并向其中传递了一个匿名的JavaScript函数作为第一个参数：
$(function (){
当传递一个函数作为第一个参数时，jQuery就会假定这个函数是要在浏览器完成构建（由服务器提供的）HTML页面中的文档对象模型（Document Object Model， DOM）后立即执行，换句话说，这个函数在从服务器端加载完HTML页面之后执行。这样就可以安全的执行函数中与DOM冲突的脚本，这种情况称为“DOM准备”事件。
- 第二行代码向jQuery函数传递一个字符串“#album-list img”：
$("#album-list img").mouseover(function(){
jQuery把这个字符串解释为选择器。选择器会告知jQuery需要在DOM中查找的元素。我们可以使用像类名和相对位置这样的特性值来查找元素。这一行代码的意图是告知jQuery查找id值为“album-list”的元素中的所有图像。
当执行选择器时，它会返回一个包含零个或多个匹配元素的封装集（wrapped set）。我们可以调用其他任何jQuery方法来操作封装集中的元素。例如，上面的代码调用mouseover方法为与选择器匹配的每个图像元素的onmouseover事件连接处理程序。
- jQuery利用JavaScript的函数式编程特性，经常把创建的或传递的函数作为jQuery方法的参数。为了表达事件触发时想进行的处理，就向mouseover方法传递了一个包含事件处理代码的函数参数：
$(this).animate({ height: '+=25', width: '+=25'})
.animate({ height: '-=25', width: '-=25'});
上面的例子实现了在触发mouseover事件时，匹配选择器的img元素会产生动画效果。在上面的代码中，之所以使用this关键字来引用要做动画效果的元素，是因为this是指向的是触发事件的元素。
注意代码第一次将元素传递给jQuery函数的方法($(this))。jQuery将该参数看成一个元素的引用参数，并返回一个包含有该元素的封装集。
一旦将某个元素包含在jQuery封装集中，就可以调用jQuery方法（如animate）来操纵这个元素。示例中的代码首先将图像放大，然后在缩小的效果。
1.2 jQuery选择器
选择器是指传递给jQuery函数的，用来在DOM中选择元素的字符串。
| 例子 | 意义 |
| $("#header") | 查找id值为“header”的元素 |
| $(".editor-label") | 查找class名为“.editor-label的所有元素” |
| $("div") | 查找所有<div>元素 |
| $("#header div") | 查找id值为“header”元素的所有后代<div>元素 |
| $("#header>div") | 查找id值为“header”元素的所有子<div>元素 |
| $("a:even") | 查找编号为偶数的锚标签 |
“#album-list img”用来选择id为album-list的<img>标签。
作为选择器的字符串看起来像层叠样式表（Cascading Style Sheet，CSS）中的项，是因为jQuery选择器的语法派生自CSS3.0选择器的语法，并在其基础上做了一些补充。
1.3 jQuery事件
jQuery的另一个优势在于，它提供了用来订阅DOM中事件的API。尽管使用一个通用的on方法可以捕获指定名称的任何事件，但jQuery也为一般的事件提供了专门的方法，比如click、blur和submit。
可以通过传进一个函数来告知jQuery在事件触发时进行的处理。传递进的函数可以是匿名的，也可以是一个作为事件处理程序的命名函数，如下所示：
$("#album-list img").mouseover(function(){
animateElement($(this));
});
function animateElement(element){
element.animate({ height: '+=25', width: '+=25'})
.animate({ height: '-=25', width: '-=25'});
});
}
一旦选择了一些DOM元素或是在一个事件处理程序内，jQuery就可以很容易的操纵页面上的元素，读取或设置他们的特性值，添加或移除他们的CSS类等。下面的代码演示了当用户的鼠标移过元素时，如何向一个页面上的锚标签添加或从中删除highlight类。当用户在标签上移动鼠标时，锚标签就会改变外观（假如有一个合适的highlight样式设置）：
$("a").mouseover(function(){
$(this).addClass("highlight");
}).mouseout(function(){
$(this).removeClass("highlight");
})
注意：
- 代码中用到的所有依赖于封装集的jQuery方法，像mouseover方法，都返回同样的jQuery封装集。这就是说可以继续在选择的元素上调用jQuery方法，而不用再重新选择这些元素。这称为方法链。
- 许多常用操作在jQuery中都有与其对应的捷径方法（shortcut）。设置mouseover和mouseout效果是一种常见的操作，切换样式类型也是一种常见的操作。可以使用jQuery捷径方法重写上面的代码：
$("a").hover(function(){
$(this).toggleClass("highlight");
})
jQuery包含了向Web服务器回发异步请求所需要的所有功能。可以利用jQuery来生成POST请求或GET请求，并且当请求完成（或出现错误）时jQuery会发出通知。
非侵入式JavaScript：
在Web早期阶段，jQuery出现以前，在同一个文件中混杂JavaScript代码和HTML标记是非常流行的做法。将JavaScript代码作为某个特性的值放入HTML元素中是很常见的，如以下代码：
<div onclick="javascript:alert('click');">Testing, testing</div>
当时在标记中嵌入JavaScript代码，是因为没有更简单的方法可以用来捕获单击事件，尽管嵌入的JavaScript代码可以实现事件捕获，但是这样的代码不够简洁。jQuery改变了这种情况，因为jQuery提供了查找元素和捕获单击事件更好的方法。现在可以从HTML特性中移除JavaScript代码了。事实上，可以将javascript代码与HTML完全分离。
非侵入式javascript很好的实践了javascript代码和标记的分离，可将所有需要的脚本代码打包到js文件中。如果查看视图的源代码，将不会看到有javascript代码嵌入在标记中。即使查看视图渲染的HTML标记，也看不到任何的javascript代码，脚本留下的唯一的痕迹是一个或多个引用javascript文件的<script>标签。
1.4 jQuery的用法
因为jQuery非常常用，站点布局（/Views/Shared/_Layout.cshtml）的footer部分包含了一个jQuery脚本引用。因此，默认情况下，站点的任何视图中都可以使用jQuery。在没有使用默认布局的任何视图中，或者如果我们在站点布局中删除了jQuery脚本引用，添加jQuery脚本引用和删除jQuery脚本引用是很容易的，只需要直接脚本引用或者使用预配置的jQuery捆绑。
要添加脚本引用，可包含如下的代码：
<script src="~Scripts/jquery-1.10.2.js"></script>
注意：ASP,NET MVC的Razor视图引擎会把这里的~操作符解析为当前网站的根目录，即便它出现了src特性。另外，HTML5不需要指定类型特性为text/javascript。
但这种方法依赖于版本，更好的在驶入中包含jQuery引用的方法是使用内置的、版本无关的jQuery脚本捆绑。
@Scripts.Render(~/bundles/jquery)
上面的调用将渲染/App_Start/BundleConfig.cs中预定义的“jquery”脚本捆绑，这种捆绑利用了ASP.NET中的捆绑和微小特性，该特性利用版本号中包含的通配符匹配，自动优先使用jQuery的轻量版本。
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
//......
}
2.1 自定义脚本
自定义的JavaScript代码，一般放置在“Scripts/App”目录下。
此处创建一个新的MusicScripts.js文件，并添加以下代码：
$(function () {
$("#album-list img").mouseover(function () {
$(this).animate({ height: '+=25', width: '+=25' })
.animate({ height: '-=25', width: '-=25' });
});
});
2.2 在节中放置脚本
@section Scripts{
<script src="~/Scripts/App/MusicScripts.js"></script>
}
2.3 Scripts目录下的其他文件
- Bootstrap.js：
包含一组基于jQuery的插件，他们通过添加额外的交互行为来增强Bootstrap。例如，Modals插件可显示简单的、使用Bootstrap样式的模态化界面，他使用jQuuery管理事件和动态页面显示。
- Respond.js：
是一个很小的JavaScript库，包含的原因是因为Bootstrap要用到。
- Modernizr.js：
通过改造老版本浏览器来帮助我们构建富有现代气息的应用程序。其中一个重要工作就是在老版本浏览器中启动新的HTML5元素（比如header、nav和menu），也可以检测特定浏览器是否支持一些高级功能，像定位位置（geolocation）和绘画画布（drawing canvas）。
3 Ajax
3.1 Ajax辅助方法
ASP.NET MVC框架中包含一组Ajax辅助方法，他们可以用来创建表单和指向控制器操作的链接，但不同的是它们是异步进行的。当然使用这些辅助方法时，不需要编写任何脚本代码来实现程序的异步性。
这些Ajax辅助方法依赖于非侵入式MVC的jQuery扩展，如果使用这些辅助方法，需要引入脚本文件jquery.unobtrusive-ajax.js，并在视图中添加此脚本引用。
3.2 在项目中添加非侵入式Ajax脚本
Nuget --> Microsoft jQuery Unobtrusive Ajax --> 安装
脚本引用可以添加到程序的_Layout视图中，也可以仅添加到使用Ajax辅助方法的视图中。除非在网站中发出大量的Ajax请求，否则建议添加到单独的视图中。
脚本的添加可以拖拽。
3.3 Ajax的ActionLink方法
与HTML辅助方法类似，Ajax属性上的大部分Ajax辅助方法都是扩展方法（出了AjaxHelper类型之外）。
Ajax属性的ActionLink方法可创建一个具有异步行为的锚标签，代码实现：
1 <div id="dailydeal">
2 @Ajax.ActionLink("Click here to see today's special!",
3 "DailyDeal",
4 null,
5 new AjaxOptions
6 {
7 UpdateTargetId = "dailydeal",
8 InsertionMode = InsertionMode.Replace,
9 HttpMethod = "GET"
10 },
11 new {@class = "btn btn-primary"})
12 </div>
ActionLink
- 第一个参数指定了链接文本；
- 第二个参数是要异步调用的操作的名称，类似于同名的HTML辅助方法，Ajax辅助方法ActionLink也提供了各种重载版本，用来传递控制器的名称、路由值和HTML特性。
- AjaxOptions参数指定了发送请求和处理服务器返回的结果的方式。参数中还包括用来处理错误、显示加载元素、显示确认对话框等的选项。
在这个示例中，AjaxOptions参数的选项指定了要使用来自服务器的响应元素来替换id值为“dailydeal”的元素
- 最后的htmlAttributes参数指定了为链接使用的HTML类，以应用一个基本的Bootstrap按钮样式。
为得到服务器的响应，需要在控制器的HomeController上添加一个DailyDeal操作：
public ActionResult DailyDeal()
{
var album = GetDailyDeal();
return PartialView("_DailyDeal",album);
}
private Album GetDailyDeal()
{
var album = storeDB.Albums
.OrderBy(a => System.Guid.NewGuid())
.First();
album.Price *= 0.5m;
return album;
}
Html5特性
非侵入式JavaScript的显著特点是在HTML中不包含任何JavaScript代码，也就是在HTML中看不到脚本代码。Ajax代码中指定的所有设置被编码成了HTML元素的特性，并且大多数的编码特性都有data-前缀，通常称为data-特性。
HTML5规范为私有应用程序状态保留了data-特性。换句话说，Web浏览器不会尝试解释data-特性的内容。因此可放心的把数据交给它，这些数据不会影响页面的显示或渲染。
向应用程序中添加jquery.unobtrusive-ajax文件的目的是查找特定的data-特性，然后操纵元素使其表现出不同行为。如果知道使用jQuery可以很容易地查找元素，那么非侵入式JavaScript文件中出现如下所示的代码也就很容易理解了
$(function)(){
$("a[data-ajax]=true"). //do something
});
这段代码将使用jQuery查找data-ajax特性值为true的所有锚元素。元素上的data-ajax特性用来标识该元素需要实现异步行为。一旦非侵入式脚本识别了异步元素，它就可以读取该元素的其他设置（像替换模式、更新目标以及HTTP方法），还可以通过使用jQuery连接事件和发送请求来修改该元素的行为。
所有ASP.NET MVC Ajax特性都使用data-特性。
3.4 Ajax表单
使用Ajax在页面上放置一个异步表单
1 <div class="panel panel-default">
2 <div class="panel-heading">Artist search</div>
3 <div class="panel-body">
4 @using (Ajax.BeginForm("ArtistSearch", "Home",
5 new AjaxOptions
6 {
7 InsertionMode = InsertionMode.Replace,
8 HttpMethod = "GET",
9 OnFailure = "searchFailed",
10 LoadingElementId = "ajax-loader",
11 UpdateTargetId = "searchresults",
12 }))
13 {
14 <input type="text" name="q" />
15 <input type="submit" value="search" />
16 <img id="ajax-loader"
17 src="@Url.Content("~/Images/ajax-loader.gif")"
18 style="display:none" />
19 }
20 <div id="searchresults"></div>
21 </div>
22 </div>
- 当用户单击提交按钮时，浏览器就会向控制器HomeController的ArtistSearch操作发送异步的GET请求
- LoadingElementId作为其中的一个选项。当执行异步请求时，客户端框架会自动的显示这个元素。此处为一个等待的动画。
- OnFailure选项包括许多参数，可以设置这些参数以捕获来自Ajax请求的各种客户端事件，如OnBegin、OnComplete、OnSuccess和OnFailure等。可以给这些参数赋予一个JavaScript函数的名称，当事件触发时，调用该函数
上面的代码为OnFailure事件指定了一个名为searchFailed的函数，因此需要使用运行时能够访问到这个函数。此处将函数存放在MusicScript.js文件中。
function searchFailed() {
$("#searchresults").html("Sorry, there was a problem with the search.");
}
如果服务器返回一个错误，就意味着Ajax辅助方法执行失败，此时可以捕获OnFailure事件。
- 最后，当用户单击提交按钮提交表单时，服务器会收到一个Ajax请求，并可能以任意格式的内容做出响应。当客户端收到来自服务器端的响应时，非侵入式脚本就会将相应内容放入DOM中。
此处，新内容要替换的是一个id值为searchresults的元素。
控制器中的代码为：
public ActionResult ArtistSearch(string q)
{
var artists = GetArtists(q);
return PartialView("_ArtistSearch", artists);
}
private List<Artist> GetArtists(string searchString)
{
return storeDB.Artists
.Where(a => a.Name.Contains(searchString))
.ToList();
}
渲染的部分视图利用模型构建列表。该部分视图的名称是ArtistSearch.cshtml，位于项目的Views/Home文件夹下。
@model IEnumerable<MvcMusicStore.Models.Artist>
<div id="searchresults">
<ul>
@foreach (var item in Model)
{
<li>@item.Name</li>
}
</ul>
</div>
4客户端验证
对于数据注解特性来说，ASP.NET MVC框架的客户端验证是默认开启的，下面介绍Album类的Title和Price属性：
[Required]
[StringLength(, MinimumLength = )]
public string Title { get; set; }
[Required]
[Range(0.01, 100.00)]
[DataType(DataType.Currency)]
public decimal Price { get; set; }
数据注解特性使得这两个属性值必须键入，并且还对Title属性值限定了长度，对Price属性值范围限定了范围。ASP.NET MVC的模型绑定器在设置这些属性时会执行服务器端验证。这些内置的特性也触发客户端验证。客户端验证依赖于jQuery验证插件。
4.1 jQuery验证
jQuery验证插件（jquery.validate）默认情况下在MVC5应用程序项目的Scripts文件夹下。如果想实现客户端验证，那么在相应的视图中就需要包含jqueryval捆绑的引用。如果引用放到_Layout中，所有的视图上都会加载脚本，而不是仅在需要jQuery验证的视图上加载脚本，性能会受到影响。
4.2 自定义验证
编写的MaxWordsAttribute验证特性代码如下：
public clsaa MaxWordsAttribute : ValidationAttribute
{
public MaxWordsAttribute(int maxWords) : base("{0} has too many words.")
{
_maxWords = maxWords;
}
protected override ValidationResult IsValid(object value,
ValidationContext validationContext)
{
var valueAsString = value.ToString();
if( valueAsString.Split(' ').Length > _maxWords)
{
var errorMessage = FormatErrorMessage(validationContext.DisplayName);
return new ValidationResult(errorMessage);
}
return ValidationResult.Success;
}
private readonly int _maxWords;
}
该特性只支持服务器端的验证，使用方法如下：
[MaxWords()]
public string Title { get; set; }
4.2.1 IClientValidatable
IClientValidatable接口定义了单个方法：GetIClientValidationRules。当ASP.NET MVC框架使用这个接口查找验证对象时，它会调用GetClientValidationRules方法来检索ModelClientValidationRule对象序列。这些对象携带有框架发送给客户端的元数据和规则。
可使用下面的代码为自定义验证器实现该接口：
public clsaa MaxWordsAttribute : ValidationAttribute,IClientValidatable
{
public MaxWordsAttribute(int maxWords) : base("{0} has too many words.")
{
_maxWords = maxWords;
}
public int WowrdCount { get; set; }
protected override ValidationResult IsValid(object value, ValidationContext validationContext)
{
var valueAsString = value.ToString();
if( valueAsString.Split(' ').Length > _maxWords)
{
var errorMessage = FormatErrorMessage(validationContext.DisplayName);
return new ValidationResult(errorMessage);
}
return ValidationResult.Success;
}
public IEnumerable<ModelClientValidationRule> GetClientValidationRules(MdelMetadata metadata,ControllerContext context)
{
var rule = new ModelClientValidationRule();
rule.ErrorMessage = FormatErrorMessage(metadata.GetDisplayName());
rule.ValidationParameters.Add("wordcount", WordCount);
rule.ValidationType = "maxwords";
yield return rule;
}
}
要实现客户端验证，需要提供如下几点信息：
- 如果验证失败，要显示的提示消息
- 允许的单词数的范围
- 一段用来计算单词数量的JavaScript代码标识。
这些信息就是嗲吗放进返回规则中的内容。请注意，如果需要在客户端触发多种类型的验证，代码可以返回多个规则。
ASP.NET MVC框架在客户端上利用GetClientValidationRules方法返回的规则将信息序列化为data-特性。