在ASP.NET Web窗体中集成与运用jQuery
jQuery作为一款轻量级的JavaScript库，在ASP.NET项目中能显著提升前端交互体验。本文将从引用方式、选择器操作、DOM修改到动画效果，系统讲解在Web窗体中的整合步骤。
引入jQuery库
由于jQuery文件体积较小，通常建议在母版页中统一引用。具体方式有两种：
- 直接下载并放置于项目Scripts文件夹
- 使用CDN远程链接，例如：
https://code.jquery.com/jquery-3.6.0.min.js
首个jQuery页面实现
- 创建空Web项目，将jQuery文件（如jquery-3.6.0.min.js）添加至根目录。
- 新建Web窗体，清空form内的默认div。
- 在form起始处放置ScriptManager控件并注册脚本：
<form id="form1" runat="server">
<asp:ScriptManager ID="sm1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/jquery-3.6.0.min.js" />
</Scripts>
</asp:ScriptManager>
</form>- 添加按钮和测试容器：
<input id="btnTest" type="button" value="Click Me" />
<div id="contentArea">
<p>Initial content</p>
</div>- 在form结束前插入客户端脚本：
<script>
$(document).ready(function(){
$('#contentArea').css('background','#4CAF50');
$('#btnTest').click(function(){
$('#contentArea').css('background','#f44336')
.animate({width:'200px', height:'600px'});
});
});
</script>- 保存并运行查看效果。
jQuery选择器实战
在母版页底部的</form>之前添加一个内容占位符，便于子页面编写专属jQuery代码：
</div>
<asp:ContentPlaceHolder ID="cphScript" runat="server" />
</form>基础选择器示例
创建基于母版页的BasicSelectors.aspx页面，在cphMain中放置：
<h1>选择器演示</h1>
<div class="highlight">这是一个高亮div</div>在cphScript中添加：
<script>
$(function(){
// 通配选择器
$('*').css('color','#2E7D32');
// ID选择器
$('#footer').css('border','2px solid #000');
// 元素选择器
$('h1').on('click', function(){ alert('Header clicked'); });
// 类选择器
$('.highlight').addClass('loading').hide(3000);
// 分组选择器
$('#sidebar, #header').slideUp(1000).slideDown(1000);
// 组合选择器
$('#menu img').fadeTo(3000, 0.2);
});
</script>进阶选择器演示
创建jQueryDemos.aspx页面，在cphMain中建立表格和控件：
<h1 title="主要标题">主要内容区域</h1>
<table id="dataGrid">
<tr><td>第一行第一列</td><td>第一行第二列</td></tr>
<tr><td>第二行第一列</td><td>第二行第二列</td></tr>
<tr><td>第三行第一列</td><td>第三行第二列</td></tr>
<tr><td>第四行第一列</td><td>第四行第二列</td></tr>
<tr><td>第五行第一列</td><td>第五行第二列</td></tr>
</table>
<h2>次级<span style="font-weight:bold;">标题</span></h2>
<input id="actionBtn" type="button" value="执行" />
<input id="nameInput" type="text" />
<input id="option1" type="checkbox" />
<input id="option2" type="checkbox" />在cphScript中写入：
<script>
$(function(){
$('#dataGrid').css('background','#E8F5E9');
// 首行与尾行
$('#dataGrid tr:first, #dataGrid tr:last').css('background','#FFCDD2');
// 奇数行（索引从0开始）
$('#dataGrid tr:odd').css('background','#C8E6C9');
// 指定索引行
$('#dataGrid tr:eq(0)').css('color','#1B5E20');
// 索引大于2的行
$('#dataGrid tr:gt(2)').css('color','#1B5E20');
// 索引小于2的行
$('#dataGrid tr:lt(2)').css('color','#1B5E20');
// 所有标题元素
$(':header').css('color','#2E7D32');
// 包含文本的单元格
$('td:contains("第三行")').css('background','#FFF9C4');
// 标题内包含span的元素
$(':header:has("span")').css('border','1px solid #000');
// 含有type属性的元素
$('[type]').css('border','2px solid #1565C0');
// 特定type值
$('[type=text]').css('background','#E3F2FD');
// 按钮与文本框
$(':button, :text').css('color','#37474F');
// 复选框全选
$(':checkbox').prop('checked', true);
});
</script>DOM操作与事件处理
利用jQuery的.css()、.animate()等方法可灵活修改页面样式。以下演示文本框水印功能：
- 新建页面，在
<style>中定义水印样式：
<style>
.watermark-style {
font-style: italic;
color: #9E9E9E;
}
</style>- 使用ScriptManager加载jQuery，并构建表单：
<form id="form1" runat="server">
<asp:ScriptManager ID="sm2" runat="server">
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery-3.6.0.min.js" />
</Scripts>
</asp:ScriptManager>
<table id="contactForm">
<tr><td>姓名</td><td><asp:TextBox ID="txtName" runat="server" /></td></tr>
<tr><td>邮箱</td><td><asp:TextBox ID="txtEmail" runat="server" /></td></tr>
<tr><td>电话</td><td><asp:TextBox ID="txtPhone" runat="server" /></td></tr>
<tr><td>备注</td><td><asp:TextBox ID="txtComments" TextMode="MultiLine" runat="server" /></td></tr>
</table>
<script>
$(function(){
$(':text, textarea').each(function(){
var label = $(this).parent().prev().text().toLowerCase().trim();
$(this).val('请填写' + label);
}).one('focus', function(){
this.value = '';
$(this).removeClass('watermark-style');
}).addClass('watermark-style').css('width','300px');
});
</script>
</form>动画效果应用
在表单提交后，可使用.slideDown()或.fadeIn()显示成功消息。例如：
<p id="successMsg" style="display:none;">信息已提交！</p>
<script>
$('#submitBtn').click(function(){
$('#successMsg').slideDown(800);
});
</script>通过插件扩展jQuery
利用社区插件（如jQuery Validation、jQuery UI）可快速添加表单验证、日期选择等功能。引用插件脚本后，按文档调用即可：
$("#myForm").validate({
rules: { email: { required: true, email: true } }
});
$("#datepicker").datepicker();以上步骤覆盖了jQuery在ASP.NET Web窗体中的核心用法，开发者可在此基础上构建更丰富的交互页面。
