ASP.NET jQuery
选择引用jQuery的位置
因为jQuery库很小，所以一般要在母版页面中包含它。
包含jQuery库的不同方式
第一个jQuery页面
- 新建一个Web空网站。
- 添加现有项，将jquery-1.7.2.js文件添加到网站。
- 新建一个Web窗体。并删除form内的div元素。
- 在form元素内的开始添加ScriptManager控件，并添加jQuery引用。
<form runat="server"> <asp:ScriptManager runat="server"> <Scripts> <asp:ScriptReference Path="jquery-1.7.2.js" /> </Scripts> </asp:ScriptManager> </form> - 在ScriptManager下方添加一个按钮和一个测试块。
<input type="button" value="button" /> <div > <p>MainContent</p> </div> - 最后在form元素结束前，添加客户端代码。
<script type="text/javascript"> $(document).ready(function () { $('#MainContent').css('background-color', 'green') $('#Button1').click(function () { $('#MainContent').css('background-color', 'red') .animate({ width: '100px', height: '800px' }) }); }); </script> - 保存所有更改，在浏览器内测试。
jQuery语法
jQuery核心
因为jQuery代码通常是专门针对每个页面编写的，所以应该只在需要jQuery代码的页面的结尾添加代码。为了简化这项任务，可以在母版页中添加一个ContentPlaceHolder，使其主要用于这个目的。使用这个母版页的页面就有了一个方便的地方来编写jQuery代码。
使用jQuery进行选择
使用基本选择器
- 打开母版页
- 在页面底部附近，结束标记</form>之前，添加一个ContentPlaceHolder控件。代码如下所示。
</div> <asp:ContentPlaceHolder runat="server"> </asp:ContentPlaceHolder> </form> - 保存并关闭母版页。
- 创建一个新的Web窗体，命名为BasicSelectors.aspx，并基于母版页。
- 在cpMainContent占位符中添加如下内容：
<h1>Basic Selectors</h1> <div class="SampleClass">I am a div.</div> - 在cpClientScript占位符中添加如下内容：
<script type="text/javascript"> $(function () { $('*').css('color', 'Green'); // Universal $('#Footer').css('border-bottom', '2px solid black'); // ID $('h1').bind('click', function () { alert('Hello World') }); // Element $('.SampleClass').addClass('PleaseWait').hide(5000); // Class $('#Footer, #Header').slideUp('slow').slideDown('slow'); // Grouped $('#Sidebar img').fadeTo(5000, 0.1); // Combined }); </script> - 保存全部改动并在浏览器中请求页面。
建立一个jQuery演示页面
- 基于定制模板创建一个新页面，命名为jQueryDemos.aspx。然后，在cpMainContent占位符中添加下面的内容：
<h1 title="First Header">First Header</h1> <table > <tr> <td>Row 1 Cell 1</td> <td>Row 1 Cell 2</td> </tr> <tr> <td>Row 2 Cell 1</td> <td>Row 2 Cell 2</td> </tr> <tr> <td>Row 3 Cell 1</td> <td>Row 3 Cell 2</td> </tr> <tr> <td>Row 4 Cell 1</td> <td>Row 4 Cell 2</td> </tr> <tr> <td>Row 5 Cell 1</td> <td>Row 5 Cell 2</td> </tr> </table> <h2>Second <span >Header</span></h2> <input type="button" value="button" /> <input type="text" /> <input type="checkbox" /> <input type="checkbox" /> - 为cpClientScript添加如下内容：
<script type="text/javascript"> $(function () { $('#DemoTable').css('background-color', 'green') $('#DemoTable tr:first').css('background-color', 'red') $('#DemoTable tr:last').css('background-color', 'red') $('#DemoTable tr:odd').css('background-color', 'red') // Changes the color in the first row (with an index of 0) $('#DemoTable tr:eq(0)').css('color', 'green') // Changes the last two rows (rows 1, 2 and 3, // with an index of 0, 1 and 2 respectively, are skipped.) $('#DemoTable tr:gt(2)').css('color', 'green') // Changes the text color of the first two rows to green. $('#DemoTable tr:lt(2)').css('color', 'green') $(':header').css('color', 'green') $('td:contains("Row 3")').css('color', 'green'); $(':header:has("span")').css('color', 'green'); // Matches the button and the text box as both // have a type attribute $('[type]').css('color', 'green'); // Matches just the text box $('[type=text]').css('color', 'green'); $(':button, :text').css('color', 'green'); $(':checkbox').attr('checked', true); }); </script> - 保存修改，测试页面。 可以注释掉代码的其余部分，依次测试每一行选择器。
使用jQuery修改DOM
CSS方法
处理事件
jQuery各种功能
使用jQuery时常犯的错误
结合使用
- 新建一个Web窗体，用于测试文本框的水印。
- 在<style/>元素中，添加如下声明：
.Watermark { font-style: italic; color: Gray; } - 在<form>元素开始，添加ScriptManager，并增加对jQuery库的引用。
<form runat="server"> <asp:ScriptManager runat="server"> <Scripts> <asp:ScriptReference Path="../Scripts/jquery-1.4.1-vsdoc.js" /> </Scripts> </asp:ScriptManager> - 在ScriptMananger下面，添加如下内容
<table class="style1" runat="server" > <tr> <td class="auto-style1">Name </td> <td class="auto-style2"> <asp:TextBox runat="server" CssClass="InputBox" ToolTip="Enter your name" Width="250px" Height="17px"></asp:TextBox> </td> <td></td> </tr> <tr> <td class="auto-style1">E-mail address </td> <td class="auto-style2"> <asp:TextBox runat="server" CssClass="InputBox" ToolTip="Enter your e-mail address" Width="250px"></asp:TextBox> </td> <td></td> </tr> <tr> <td class="auto-style1">Home phone number </td> <td class="auto-style2"> <asp:TextBox runat="server" CssClass="InputBox" ToolTip="Enter your home phone number" Width="250px"></asp:TextBox> </td> <td></td> </tr> <tr> <td class="auto-style1">Comments </td> <td class="auto-style2"> <asp:TextBox runat="server" Height="78px" TextMode="MultiLine" CssClass="InputBox" ToolTip="Enter your comments" Width="250px"></asp:TextBox> </td> <td></td> </tr> </table> - 在<form>元素的最后，添加javascript代码
<script type="text/javascript"> $(function () { $(':input[type=text], textarea').each( function () { var newText = 'Please enter your ' + $(this).parent().prev().text().toLowerCase().trim(); $(this).attr('value', newText); }).one('focus', function () { this.value = '', this.className = '' }).addClass('Watermark').css('width', '300px'); }); </script> - 保存修改，在浏览器内查看效果。
使用jQuery的效果
动画显示联系表单
- 添加一个段落。这个段落将在表单提交后显示。