jQuery简介
选择引用jQuery的位置
因为jQuery库很小，所以一般要在母版页面中包含它。
包含jQuery库的不同方式
第一个jQuery页面
- 新建一个Web空网站。
- 添加现有项，将jquery-1.7.2.js文件添加到网站。
- 新建一个Web窗体。并删除form内的div元素。
- 在form元素内的开始添加ScriptManager控件，并添加jQuery引用。
<form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> <Scripts> <asp:ScriptReference Path="jquery-1.7.2.js" /> </Scripts> </asp:ScriptManager> </form>
- 在ScriptManager下方添加一个按钮和一个测试块。
<input id="Button1" type="button" value="button" /> <div id="MainContent"> <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({ '100px', height: '800px' }) }); }); </script>
- 保存所有更改，在浏览器内测试。
jQuery语法
jQuery核心
因为jQuery代码通常是专门针对每个页面编写的，所以应该只在需要jQuery代码的页面的结尾添加代码。为了简化这项任务，可以在母版页中添加一个ContentPlaceHolder，使其主要用于这个目的。使用这个母版页的页面就有了一个方便的地方来编写jQuery代码。
使用jQuery进行选择
使用基本选择器
- 打开母版页
- 在页面底部附近，结束标记</form>之前，添加一个ContentPlaceHolder控件。代码如下所示。
</div> <asp:ContentPlaceHolder ID="cpClientScript" 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 id="DemoTable"> <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 style="font-style: italic; font-weight: bold;">Header</span></h2> <input id="Button1" type="button" value="button" /> <input id="Text1" type="text" /> <input id="Checkbox1" type="checkbox" /> <input id="Checkbox2" 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 id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> <Scripts> <asp:ScriptReference Path="../Scripts/jquery-1.4.1-vsdoc.js" /> </Scripts> </asp:ScriptManager>
- 在ScriptMananger下面，添加如下内容
<table class="style1" runat="server" id="FormTable"> <tr> <td class="auto-style1">Name </td> <td class="auto-style2"> <asp:TextBox ID="Name" 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 ID="EmailAddress" 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 ID="PhoneHome" 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 ID="Comments" 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的效果
动画显示联系表单
- 添加一个段落。这个段落将在表单提交后显示。