三、在 ASP.NET 中使用 jQuery
我们将以 jQuery 的简短介绍开始本章。jQuery 是一个 JavaScript 库，它的开发目的是提供更好的开发体验和更快的编码体验，通过编写更少的代码来完成复杂的操作，比普通 JavaScript 快得多。但是，由于特定原因，在编写自定义脚本时，JavaScript 仍然存在。因此，jQuery 可以帮助您执行 DOM 操作，根据类、元素名称等选择元素，并提供更好的事件处理模型，使开发人员能够更简单地在日常项目中使用它。
与 JavaScript 相比，另一个优势是跨浏览器问题。它提供了跨浏览器的一致行为。另一方面，每个浏览器的 JavaScript 实现方式不同。此外，为了处理 JavaScript 中的跨浏览器问题，开发人员倾向于编写一些条件逻辑来检查 JavaScript 运行的浏览器版本，并相应地进行处理；而 jQuery 处理浏览器的所有繁重工作，并提供一致的行为。
我们将在本章中讨论 jQuery 的一些强大功能，如下所示：
- 使用选择器
- 操作 DOM 元素
- 处理事件
开始使用 jQuery
jQuery 库可以从下载 http://jquery.com 。jQuery 的最新版本是 3.0.0，如果你的目标是现代浏览器，你可以使用这个库；例如，IE 9 和 Microsoft Edge 支持此版本。例如，对于旧版本，IE6-8-您可以下载 jQuery1.x。
下载 jQuery 后，您可以将其添加到项目中并引用它，如下所示：
<head>
<script src="~/scripts/jquery.js"></script>
</head>
<body>
</body>
使用内容交付网络
除了从您的服务器加载 jQuery，我们还可以从其他服务器加载它，例如 Microsoft 服务器或 Google 服务器。这些服务器被称为内容交付网络（CDN）和它们可以参照如下所示：
-
引用 Microsoft CDN:
js <script src="http://ajax.microsoft.com/ajax/jquery/jquery-2.0.js"> </script> -
参考谷歌 CDN:
js <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0/jquery.min.js"></script>
CDN 的使用
事实上，这些 CDN 非常常见，大多数网站已经在使用它们。当运行任何引用 CDN 的应用时，其他网站可能也使用了 Microsoft 或 Google 的相同 CDN，并且相同的文件可能会缓存在客户端。这将提高页面呈现性能。另外，从本地服务器再次下载 jQuery 库将使用缓存版本的 CDN。此外，微软和谷歌根据不同的地区提供不同的服务器，用户在使用 CDN 时也会获得一些速度优势。
但是，在某些情况下，CDN 可能会关闭，在这种情况下，您可能需要参考并从自己的服务器下载脚本。为了处理这种情况，我们可以指定回退 URL，它检测是否已从 CDN 下载；否则，它将从本地服务器下载。我们可以使用以下脚本指定回退：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script>if (!window.jQuery) { document.write('<script src="/path/to/your/jquery"><\/script>'); }
</script>
window.jQuery实例告诉我们是否加载了 jQuery；否则，它将在 DOM 上编写脚本，DOM 引用本地服务器。
或者，在 ASP.NET 核心中，我们可以使用asp-fallback-src属性指定回退 URL。ASP.NET Core 1.0 提供了广泛的标记帮助程序。与 HTML 帮助程序相比，这些帮助程序只需将 HTML 属性添加到页面元素中即可使用，它们为开发人员提供了与编写前端代码相同的体验。
可以用简单的方法编写相同的代码来处理 ASP.NET 中的回退方案：
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery">
</script>
在 ASP.NET Core 中，还有一个标记助手<environment>，可用于根据launchSettings.json文件中设置的当前环境加载脚本：
根据项目概要文件中设置的当前环境，我们可以加载脚本以适应调试和生产场景。例如，在生产环境中，我们最好指定 JavaScript 库的缩小版本，因为它会删除所有的白色空格，并重命名变量，使其在大小上更加压缩，以便快速加载。但是，出于调试目的，就开发经验而言，标准的非小型版本要好得多。因此，在开发应用时，我们可以使用环境标记帮助器（如以下代码所示）加载用于生产和标准的精简版本：
<environment names="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment names="Staging,Production">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
文件准备就绪事件
jQuery 库可以通过$符号访问，也可以简单地通过写入jQuery来访问。然而，开发人员最好使用美元符号访问它。它还提供了一种在 DOM 层次结构完全加载时捕获事件的方法。这意味着，一旦加载了 DOM 结构，您就可以捕获此事件以执行不同的操作，例如将 CSS 类与控件关联并操纵控件值。加载页面时，DOM 层次结构不依赖于图像或 CSS 文件，并且并行引发 document ready 事件，无论是否下载图像或 CSS 文件。
我们可以使用 document ready 事件，如下代码所示：
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function () {
console.log("Document is lo aded");
});
</script>
</head>
</html>
正如前面代码中所解释的，$是访问 jQuery 对象的方式。它接受一个作为参数传递的document对象，而ready检查document对象模型层次结构是否一次完全加载。最后，它使用了一个匿名函数，我们可以在其中编写需要执行的操作。在前面的示例中，我们只是在加载 DOM 层次结构时显示一条简单的文本消息。
jQuery 选择器
对于 DOM 操作，jQuery 选择器起着重要的作用，它提供了一种更好、更简单的单行方法，可以从 DOM 中选择任何元素并操作其值和属性，例如，使用 jQuery 选择器搜索具有特定 CSS 类的元素列表更容易。
jQuery 选择器可以用美元符号和括号书写。我们可以使用 jQuery 选择器根据元素的 ID、标记名、类、属性值和输入节点选择元素。在下一节中，我们将通过一个实际示例逐一研究这些元素。
使用 ID 选择 DOM 元素
下面的示例显示了选择 ID 为的div元素的方法：
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function () {
$('#mainDiv').html("<h1>Hello World</h1>");
});
</script>
</head>
<body>
<div id="mainDiv">
</div>
</body>
</html>
选择元素后，我们可以调用各种方法来设置值。在给定的示例中，我们称为方法html()方法，该方法采用html字符串并将Hello World设置为第一个标题。另一方面，html内容可以通过调用以下代码进行检索：
<script>
$(document).ready(function () {
var htmlString= $('#mainDiv').html();
});
</script>
使用标记名选择 DOM 元素
在 JavaScript 中，我们可以通过调用document.getElementsByTagName()来检索 DOM 元素。此元素返回与标记名匹配的元素数组。在 jQuery 中，这可以通过一种更简单的方式实现，语法也非常简单。
考虑下面的例子：
$('div') //returns all the div elements
让我们看一下以下示例，以澄清我们的理解：
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function () {
$('div').css('text-align, 'left');
});
</script>
</head>
<body>
<div id="headerDiv">
<h1>Header</h1>
</div>
<div id="mainDiv">
<p>Main</p>
</div>
<div id="footerDiv">
<footer>Footer</footer>
</div>
</body>
</html>
前面的示例将所有div子控件的对齐设置为左侧。如果您注意到这里，我们没有循环通过所有div控件来设置背景色，样式已经设置在all上。但是，在某些情况下，您可能需要根据驻留的每个元素的索引设置不同的值，这可以通过使用div上的each()函数来完成。例如，下面的脚本向您展示了使用each函数在每个div控件上分配index值作为html字符串的方法：
<script>
$(document).ready(function () {
$('div').each(function (index, element) {
$(element).html(index);
});
});
</script>
每个函数都采用一个带有索引和元素的函数作为参数。我们可以使用美元符号访问每个元素，如前面的代码所示，并通过调用html方法将索引设置为内容。输出将类似于以下屏幕截图：
让我们来看另一个例子，它在控制台窗口中显示每个div控件的内容。这里，each()函数不带参数，循环中的每一项都可以通过this关键字访问：
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function () {
$('div').each(function () {
alert($(this).html());
});
});
</script>
</head>
<body>
<div id="headerDiv">
<h1>Demo </h1>
</div>
<div id="mainDiv">
<p>This is a demo of using jQuery for selecting elements</p>
</div>
<div id="footerDiv">
<footer> Copyright - JavaScript for .Net Developers </footer>
</div>
</body>
</html>
输出将如下：
还有各种其他方法可用，您可以在 jQuery 文档中参考。因此，使用选择器，我们可以更快、更高效地搜索任何元素。
另一个示例是使用标记名选择多个元素，如下所示。
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function () {
$('div, h1, p, footer').each(function () {
console.log($(this).html());
});
});
</script>
</head>
<body>
<div id="headerDiv">
<h1>Demo </h1>
</div>
<div id="mainDiv">
<p>This is a demo of using jQuery for selecting elements</p>
</div>
<div id="footerDiv">
<footer> Copyright - JavaScript for .Net Developers </footer>
</div>
</body>
</html>
结果将如下所示。控制台将记录每个项目的内部html代码：
根据类名选择节点
类名选择器与 ID 选择器非常相似；唯一的区别在于它在类名之前使用了句点字符.。它有助于遍历所有 DOM 元素并查找具有选择器中指定的相同类名的元素。它可以按如下方式使用：
$(.classname);
让我们看一下下面的示例，它显示了基于类名选择器选择元素的方法。在下面的代码片段中，我们使用bootstrap主题并将不同的类应用于按钮。在类名选择器的帮助下，我们可以选择控件并更新类名。以下示例将根据指定的选择条件返回两个元素：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Content/bootstrap.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function () {
var lst = $('.btn-primary');
alert(lst.length);
});
</script>
</head>
<body>
<div class="container">
<p></p>
<button type="button" class="btn btn-primary active">Edit </button>
<button type="button" class="btn btn-primary disabled">Save</button>
<button type="button" class="btn btn-danger" value="Cancel">Cancel</button>
</div>
</body>
</html>
与访问类名不同，我们可以通过在句点和类名之前指定标记名来限制搜索。您可以使用$('button.active')搜索所有激活的按钮。
按属性值选择
在某些情况下，您可能需要根据属性或其值选择元素。jQuery 库提供了一种非常简洁的方法，不仅基于属性，而且基于属性值来搜索元素。
使用此选择器的语法是指定元素名称，后跟包含属性名称和值的方括号，这是可选的：
$(elementName[attributeName=value])
例如，下面的代码选择所有以type作为属性的元素：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Content/bootstrap.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function () {
var lst = $('input[type]');
console.log(lst.length);
});
</script>
</head>
<body>
<div class="container">
<p></p>
<input type="text" value="hello world" />
<input type="text" value="this is a demo" />
<input type="button" value="Save" />
</div>
</body>
</html>
在本例中，我们有三个具有type属性的输入控件。因此，结果将是3。同样，如果要搜索值等于hello world的元素，我们可以使用以下代码：
<script>
$(document).ready(function () {
var lst = $('input[value="hello world"]');
alert(lst.length);
});
</script>
需要注意的是属性值是区分大小写的，因此，用这个表达式，您应该将确切的情况视为属性值。但是，也有其他方法，即使用^搜索包含、开始或结束特定文本的值。
让我们看看下面的示例alert，它基于搜索以表达式开头的值：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Content/bootstrap.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function () {
var lst = $('input[value^="Pr"]');
alert(lst.length);
});
</script>
</head>
<body>
<div class="container">
<p></p>
<input type="text" value="Product 1" />
<input type="text" value="This is a description" />
<input type="button" value="Process" />
</div>
</body>
</html>
另一方面，我们还可以使用$符号搜索以文本结尾的值。以下是搜索以1结尾的文本的代码：
<script>
$(document).ready(function () {
var lst = $('input[value$="1"]');
alert(lst.length);
});
</script>
最后，可以使用*搜索包含一些文本的文本，下面是运行此示例的代码：
<script>
$(document).ready(function () {
var lst = $('input[value*="ro"]');
alert(lst.length);
});
</script>
选择输入元素
HTML 中的输入控件有多种不同的控件。诸如textarea、button、input、select、image和radio等控件都是输入控件。这些控件通常用于基于表单的应用中。因此，jQuery 专门提供了选择选项，可以根据不同的条件选择输入控件。
此选择器以美元和input关键字开头，后跟属性和值：
$(':input[attributeName=value]);
但是，在上一节中，我们已经看到了如何搜索具有属性名称和值的任何元素。因此，如果我们想要搜索所有类型等于 text 的输入控件，这是可以实现的。
该选择器在特定场景中的性能效率较低，它会搜索属于输入组的所有控件，并找到属性及其值；然而，此选择器将仅在输入控件中搜索。在编写程序时，如果某些东西专门针对输入控件属性，则使用此方法是更好的选择。
让我们看看 ASP.NET Core MVC 6 中的以下示例，该示例在文档完全加载后应用 CSS 属性：
@model WebApplication.ViewModels.Book.BookViewModel
@{
ViewData["Title"] = "View";
}
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function () {
$(':input').each(function () {
$(this).css({ 'color': 'darkred', 'background-color': 'ivory', 'font-weight': 'bold' }); });
});
</script>
<form asp-action="View" class="container">
<br />
<div class="form-horizontal">
<div class="form-group">
<label asp-for="Name" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger" />
</div>
</div>
<div asp-validation-summary="ValidationSummary.ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Description" class="col-md-2 control-label"></label>
<div class="col-md-10">
<textarea asp-for="Description" class="form-control" ></textarea>
<span asp-validation-for="Description" class="text-danger" />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-primary" />
</div>
</div>
</div>
</form>
<div>
<a asp-action="Index">Back to List</a>
</div>
前面代码段的输出如下所示：
选择所有元素
jQuery 库为您提供了一个特殊的选择器，它将在 DOM 中定义的所有元素的集合带入其中。除了标准控件，它还返回元素，例如<html>、<head>、<body>、<link>和<script>。
获取所有元素的语法为$("*")，下面的示例列出了浏览器控制台上 DOM 的所有元素：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Content/bootstrap.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function () {
$("*").each(function () {
console.log($(this).prop('nodeName'));
});
});
</script>
</head>
<body>
<form class="container">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control"/>
</div>
</form>
</body>
</html>
在前面的代码中，我们使用了prop方法，该方法使用属性名来显示元素名。在这里，在的prop方法中，我们可以使用tagName或nodeName来显示名称类型。最后，在浏览器控制台上，将显示一个登录页面，如下所示：
选择第一个子元素和最后一个子元素
jQuery 库提供了特殊的选择器来选择父元素的所有第一个元素或最后一个元素。
选择所有父元素的第一个子元素的语法如下：
$(elementName:first-child);
选择所有父元素的最后一个子元素的语法如下：
$(elementName:last-child);
以下示例显示了更改“选择选项”的第一个子项和最后一个子项的字体样式的方法：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Content/bootstrap.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function () {
$('option:first-child').css('font-style', 'italic');
$('option:last-child').css('font-style', 'italic');
alert(lst.length);
});
</script>
</head>
<body>
<select>
<option>--select--</option>
<option>USA</option>
<option>UK</option>
<option>Canada</option>
<option>N/A</option>
</select>
</body>
</html>
输出结果如下：
jQuery 中包含选择器
contains选择器用于查找 HTML 容器元素中的文本，如<div>和<p>。此选择器搜索特定类型的所有元素，并查找作为参数传递给函数的文本。下面的代码中显示了一个示例，显示包含文本的div元素的文本。这是区分大小写的，因此请确保在搜索时提供正确的大小写。
以下代码将显示一个值为2的警报，因为它找到两个包含文本demo的div元素：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Content/bootstrap.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function () {
var lst = $('div:contains("demo")');
alert(lst.length);
});
</script>
</head>
<body>
<div>
This is a sample demo for contains selector
</div>
<div>
Demo of the selector
</div>
<div>
Sample demo
</div>
</body>
</html>
选择奇偶行选择器
这些类型的选择器作用于表中的行，通常用于通过更改每个奇数行的颜色使其看起来更像网格，为奇数或偶数行提供特殊格式。我们可以使用以下语法使用这种类型的选择器：
$('tr:even');
$('tr:odd');
让我们看看下面的示例，将表中的所有行颜色更改为灰色：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Content/bootstrap.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function () {
$('tr:odd').css('background-color', 'grey');
});
</script>
</head>
<body>
<table>
<thead>
<tr><th>Product Name</th><th>Description</th><th>Price</th></tr>
</thead>
<tbody>
<tr><td>Product 1</td><td>This is Product 1</td><td>$100</td></tr>
<tr><td>Product 2</td><td>This is Product 2</td><td>$500</td></tr>
<tr><td>Product 3</td><td>This is Product 3</td><td>$330</td></tr>
<tr><td>Product 4</td><td>This is Product 4</td><td>$50</td></tr>
<tr><td>Product 5</td><td>This is Product 5</td><td>$1000</td></tr>
<tr><td>Product 6</td><td>This is Product 6</td><td>$110</td></tr>
<tr><td>Product 7</td><td>This is Product 7</td><td>$130</td></tr>
<tr><td>Product 8</td><td>This is Product 8</td><td>$160</td></tr>
<tr><td>Product 9</td><td>This is Product 9</td><td>$20</td></tr>
<tr><td>Product 10</td><td>This is Product 10</td><td>$200</td></tr>
</tbody>
</table>
</body>
</html>
操纵 DOM
在本节中，我们将看到一些通过 jQuery 方法操作 DOM 的示例。jQuery 库提供了对 DOM 元素执行不同操作的扩展库。我们可以轻松地修改元素属性，应用样式，并遍历不同的节点和属性。在上一节中，我们已经看到了一些示例，本节将特别关注 DOM 操作。
修改元素的属性
在使用客户端脚本语言时，修改元素的属性并读取它们是一项至关重要的任务。在纯 JavaScript 中，这可以通过编写几行代码来实现；然而，使用 jQuery，它可以以更快更好的方式实现。
可以使用上一节中列出的各种选项修改要选择的图元的任何属性。下表中列出的每个属性都提供了get和set选项，并在设置某些内容时使用参数，在读取时不使用参数。
在 jQuery 中，有一些常用的方法可以修改元素，即html、value等等。更多的方法可参考http://api.jquery.com/category/manipulation/ 。
|
get 方法
|
集合方法
|
描述
|
| --- | --- | --- |
| .val() | .val('any value') | 此方法用于读取或写入 DOM 元素的任何值。 |
| .html() | .html('any html string') | 此方法用于读取或写入 DOM 元素的任何 HTML 内容。 |
| .text() | .text('any text') | 此方法用于读取或写入文本内容。此方法中不会返回 HTML。 |
| .width() | .width('any value') | 此方法用于更新任何图元的宽度。 |
| .height() | .height('any value') | 此方法用于读取或修改任何图元的高度。 |
| .attr() | .attr('attributename', 'value') | 此方法用于读取或修改特定元素属性的值。 |
| .prop() | .prop() | 此方法与attr()相同，但在处理返回当前状态的value属性时效率更高。例如，attr()复选框提供默认值，prop()提供当前状态，即true或false。 |
| .css('style-property') | .css({'style-property1': value1, 'style-property2': value2, 'style-propertyn':valueN } | 此方法用于设置样式的任何属性，例如特定元素的字体大小、字体系列和宽度。 |
让我们看看下面的例子，它使用了html()、text()和css()修饰符，使用html、text和increaseFontSize更新p元素：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Content/bootstrap.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
function updateHtml() {
$('p').html($('#txtHtml').val());
}
function updateText() {
$('p').text($('#txtText').val());
}
function increaseFontSize() {
var fontSize = parseInt($('p').css('font-size'));
var fontSize = fontSize + 1 +"px";
$('p').css({'font-size': fontSize});
}
</script>
</head>
<body >
<form class="form-control">
<div class="form-group">
<p>this is a book for JavaScript for .Net Developers</p>
</div>
<div class="form-group">
Enter HTML: <input type="text" id="txtHtml" />
<button onclick="updateHtml()">Update Html</button>
</div>
<div class="form-group">
Update Text: <input type="text" id="txtText" />
<button onclick="updateText()">Update Text</button>
</div>
<div class="form-group">
<button onclick="increaseFontSize()">Increase Font Size</button>
</div>
</form>
</body>
</html>
前面 HTML 代码的结果如下：
点击更新 HTML按钮可以更新 HTML，点击更新文本按钮可以更新纯文本：
最后，点击增加字体大小按钮可以增加字体大小：
创造新元素
jQuery 库提供了一种创建新元素的智能方法。可以使用相同的$()方法创建元素，并将html作为参数传递。创建元素后，只有将其添加到 DOM 中才能显示该元素。有多种方法可用于帮助追加、在任何元素之后插入或在任何元素之前插入，等等。下表显示了用于向 DOM 添加新元素的所有方法的列表：
|
get 方法
|
描述
|
| --- | --- |
| .append() | 此方法用于将 HTML 内容插入到调用它的元素中 |
| .appendTo() | 此方法用于在调用它的的末尾插入每个元素 |
| .before() | 此方法用于将 HTML 内容插入已从中调用的元素之前 |
| .after() | 此方法用于在已从中调用 HTML 内容的元素之后插入 HTML 内容 |
| .insertAfter() | 此方法用于在调用 HTML 内容的每个元素之后插入 HTML 内容 |
| .insertBefore() | 此方法用于在调用的每个元素之前插入 HTML 内容 |
| .prepend() | 此方法用于将 HTML 内容插入到已从其调用的起始位置处的元素中 |
| .prepend() | 此方法用于从调用它的每个元素的起始位置插入 HTML 内容 |
下面的示例创建了一个包含两个字段Name和Description的表单，以及一个保存这些值的按钮：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Content/bootstrap.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function () {
var formControl = $("<form id='frm' class='container' ></form>");
$('body').append(formControl);
var nameDiv = $("<div class='form-group'><label id='lblName'>Enter Name: </label> <input type='text' id='txtName' class='form-control' /></div>");
var descDiv = $("<div class='form-group'><label id='lblDesc'>Enter Description: </label> <textarea class='form-control' type='text' id='txtDescription' /></div>");
var btnSave = $("<button class='btn btn-primary'>Save</button>")
formControl.append(nameDiv);
formControl.append(descDiv);
formControl.append(btnSave);
});
</script>
</head>
<body>
</body>
</html>
此代码将提供以下输出：
删除元素和属性
通过选择使用不同的方法在 DOM 中创建和呈现元素，jQuery 还提供了一些从 DOM 中移除元素的方法。下表列出了可用于删除特定元素、元素集或所有子节点的方法：
|
方法
|
描述
|
| --- | --- |
| .empty() | 此方法从元素中删除内部 HTML 代码 |
| .detach() | 此方法从 DOM 中删除匹配元素集 |
| .remove() | 此方法从 DOM 中删除匹配元素集 |
| .removeAttr() | 此方法从元素中删除特定属性 |
| .removeClass() | 此方法从元素中删除类 |
| .removeProp() | 此方法从元素中删除属性 |
remove()与detach()的区别在于remove永久性地从 DOM 中删除内容；这意味着，如果元素具有关联的特定事件或数据，这些事件或数据也将被删除。但是，detach只是将元素从 DOM 中分离出来，并返回可以保存在某个变量中的内容，供以后附件使用：
@model WebApplication.ViewModels.Book.BookViewModel
@{
ViewData["Title"] = "View";
}
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
var mainDivContent=undefined
$(document).ready(function () {
$('button').click(function () {
if (mainDivContent) {
mainDivContent.appendTo('#pageDiv');
mainDivContent = null;
} else {
mainDivContent = $('#mainDiv').detach();
}
});
});
</script>
<div id="pageDiv" class="container">
<br />
<div id="mainDiv" class="form-horizontal">
<div class="form-group">
<label asp-for="Name" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="Name" class="form-control" />
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button class="btn btn-primary"> Detach/Attach</button>
</div>
</div>
</div>
分离时，输出如下：
连接时，输出将类似于以下屏幕截图：
jQuery 中的事件处理
jQuery 事件模型提供了一种更好的方法来处理 DOM 元素上的事件。在编程上，如果开发人员想要注册用户操作的任何事件；例如，在使用普通 JavaScript 时，按钮单击事件可能是一个麻烦的过程。这是因为不同的浏览器有不同的实现，并且语法在某种程度上彼此不同。另一方面，jQuery 库提供了更清晰的语法，开发人员不必处理跨浏览器问题。
在 jQuery 中注册事件
jQuery 中有许多快捷方式可用于将事件注册到不同的元素。下表显示了所有这些事件的列表以及具体说明：
|
事件
|
描述
|
| --- | --- |
| click() | 鼠标点击时使用此事件 |
| .dblclick() | 双击时使用此事件 |
| .mousedown() | 此事件在按下任何鼠标按钮时使用 |
| .mouseup() | 当释放任何鼠标按钮时，使用此事件 |
| .mouseenter() | 鼠标进入区段时使用此事件 |
| .mouseleave() | 此事件在鼠标离开区段时使用 |
| .keydown() | 按下键盘键时使用此事件 |
| .keyup() | 释放键盘键时使用此事件 |
| .focus() | 此事件在元素聚焦时使用 |
| .blur() | 当元素失去焦点时使用此事件 |
| .change() | 项目变更时使用此事件 |
还有其他各种活动，您可以在查看 http://api.jquery.com/category/events 。
使用 jQuery 注册事件非常简单。首先，必须通过选择任何选择器来选择元素，然后通过调用特定的事件处理程序来注册事件；例如，以下代码段将注册按钮的单击事件：
$(document).ready(function({
$('#button1').click(function(){
console.log("button has been clicked");
});
)};
在前面的示例代码之后，注册asp.net按钮点击事件，并在 ASP.NET 中调用Home控制器的Contact动作：
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
var mainDivContent=undefined
$(document).ready(function () {
$('#btnSubmit').click(function () {
window.location.href = '@Url.Action("Contact", "Home")';
});
});
</script>
<div id="pageDiv" class="container">
<br />
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button id="btnSubmit" class="btn btn-primary"> Submit</button>
</div>
</div>
</div>
在前面的示例中，我们通过 Razor 语法使用 HTML 助手Url.Action，生成 URL 并将其设置为窗口当前位置的href属性。现在，单击以下屏幕截图中显示的按钮：
将显示以下联系人页面：
此处显示的另一个示例将在控件聚焦时将所有输入控件的背景色更改为aliceblue，在模糊时将背景色更改为白色：
@model WebApplication.ViewModels.Book.BookViewModel
@{
ViewData["Title"] = "View";
}
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
var mainDivContent=undefined
$(document).ready(function () {
$('#btnSubmit').click(function () {
window.location.href = '@Url.Action("Contact", "Home")';
});
$('input').each(function () {
$(this).focus(function () {
$(this).css('background-color', 'aliceblue');
})
$(this).blur(function () {
$(this).css('background-color', 'white');
});
});
});
</script>
<div id="pageDiv" class="container">
<br />
<div id="mainDiv" class="form-horizontal">
<div class="form-group">
<label asp-for="Name" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="Name" class="form-control" />
</div>
</div>
<div class="form-group">
<label asp-for="Description" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="Description" class="form-control" />
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button id="btnSubmit" class="btn btn-primary"> Submit</button>
</div>
</div>
</div>
使用 on 和 off 绑定事件
除了通过调用事件处理程序直接注册事件外，我们还可以使用on和off注册事件。这些事件注册和取消注册特定元素的事件。
下面是一个使用on将点击事件绑定到按钮的简单示例：
$(document).ready(function () {
$('#btnSubmit').on('click', function () {
window.location.href = '@Url.Action("Contact", "Home")';
});
});
这是一种非常有用的技术，可以在您想要取消注册任何事件的特定情况下使用。例如，业务应用主要与表单处理相关，可以使用将请求发布到某个服务器的按钮提交表单。在某些条件下，我们必须限制用户多次提交，直到第一个请求得到处理。为了解决这个问题，我们可以在用户第一次单击时使用on()和off()事件来注册和注销它们。以下是首次单击按钮单击事件时取消注册该事件的示例：
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function () {
$('#btnSubmit').on('click', function () {
$('#btnSubmit').off('click');
});
});
</script>
preventDefault()事件只是我们在.NET 中使用的取消事件。此事件用于取消事件的执行。它可以按如下方式使用：
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function () {
$('#btnSubmit').on('click', function (event) {
event.preventDefault();
});
});
</script>
on()方法相当于 jQuery 早期版本中使用的delegate()方法。自 jQuery 1.7 以来，delegate()已被on()取代。
还有一个重载方法on，它需要四个参数：
$(element).on(events, selector, data, handler);
这里，element是控件名称，events是要注册的事件，selector是一个新事物，可以是父控件的子元素。例如，对于表元素选择器，它可以是td；在td的每次点击事件中，我们可以做如下操作：
@model IEnumerable<WebApplication.ViewModels.Book.BookViewModel>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function () {
$('table').on('click','tr', null, function() {
$(this).css('background-color', 'aliceblue');
});
});
</script>
<p>
<a asp-action="Create">Create New</a>
</p>
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.Description)
</th>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th></th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.Description)
</td>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
<a asp-action="Edit" asp-route-id="@item.Id">Edit</a> |
<a asp-action="Details" asp-route-id="@item.Id">Details</a> |
<a asp-action="Delete" asp-route-id="@item.Id">Delete</a>
</td>
</tr>
}
</table>
前面的代码片段输出类似于下面的屏幕截图。当用户单击任何行时，背景颜色将更改为 Alice blue：
使用悬停事件
当鼠标进入或退出特定的元素时，我们可以使用悬停事件。它可以通过在 DOM 的任何元素上调用hover()方法来使用。调用此方法的语法如下所示：
$(selector).hover(mouseEnterHandler, mouseExitHandler);
以下示例在鼠标进入或退出时更改输入文本控件的边框颜色：
@{
ViewData["Title"] = "View";
}
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<02>
$(document).ready(function () {
$("input[type = 'text']").hover(function () {
$(this).css('border-color', 'red');
},
function () {
$(this).css('border-color', 'black');
}
});
</script>
<div id="pageDiv" class="container">
<br />
<div id="mainDiv" class="form-horizontal">
<div class="form-group">
<label asp-for="Name" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="Name" class="form-control" />
</div>
</div>
<div class="form-group">
<label asp-for="Description" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="Description" class="form-control" />
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button id="btnSubmit" class="btn btn-primary"> Submit</button>
</div>
</div>
</div>
下面的屏幕截图将是前面代码片段的输出。这将使输入文本控件的边框颜色在鼠标进入时变为红色，在鼠标退出时变为黑色：
总结
在本章中，您学习了 jQuery 基础知识以及如何在 web 应用中使用它们，特别是在 ASP.NET core 1.0 中。这是一个非常强大的图书馆。它消除了跨浏览器问题，并在所有浏览器中提供一致的行为。该库提供了简单易用的方法来选择元素、修改属性、附加事件，并通过以更干净、更精确的方式编写代码来执行复杂操作。在下一章中，我们将研究使用 jQuery 和纯 JavaScript 执行服务器端操作的 Ajax 请求的各种技术。
版权属于：月萌API www.moonapi.com，转载请注明出处
