ASP.NET jQuery

jQuery简介

选择引用jQuery的位置

因为jQuery库很小，所以一般要在母版页面中包含它。

包含jQuery库的不同方式

第一个jQuery页面

1. 新建一个Web空网站。
2. 添加现有项，将jquery-1.7.2.js文件添加到网站。
3. 新建一个Web窗体。并删除form内的div元素。
4. 在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>
   
   

5. 在ScriptManager下方添加一个按钮和一个测试块。

   <input id="Button1" type="button" value="button" />
   
       <div id="MainContent">
   
           <p>MainContent</p>
   
       </div>
   
   

6. 最后在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>
   
   

7. 保存所有更改，在浏览器内测试。

jQuery语法

jQuery核心

因为jQuery代码通常是专门针对每个页面编写的，所以应该只在需要jQuery代码的页面的结尾添加代码。为了简化这项任务，可以在母版页中添加一个ContentPlaceHolder，使其主要用于这个目的。使用这个母版页的页面就有了一个方便的地方来编写jQuery代码。

使用jQuery进行选择

使用基本选择器

1. 打开母版页
2. 在页面底部附近，结束标记</form>之前，添加一个ContentPlaceHolder控件。代码如下所示。

   </div>
   
       <asp:ContentPlaceHolder ID="cpClientScript" runat="server">
   
       </asp:ContentPlaceHolder>
   
       </form>
   
   

3. 保存并关闭母版页。
4. 创建一个新的Web窗体，命名为BasicSelectors.aspx，并基于母版页。
5. 在cpMainContent占位符中添加如下内容：

   <h1>Basic Selectors</h1>
   
       <div class="SampleClass">I am a div.</div>
   
   

6. 在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>
   
   

7. 保存全部改动并在浏览器中请求页面。

建立一个jQuery演示页面

 

1. 基于定制模板创建一个新页面，命名为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" />
   
   

2. 为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>
   
   

3. 保存修改，测试页面。 可以注释掉代码的其余部分，依次测试每一行选择器。

使用jQuery修改DOM

CSS方法

处理事件

jQuery各种功能

使用jQuery时常犯的错误

结合使用

1. 新建一个Web窗体，用于测试文本框的水印。
2. 在<style/>元素中，添加如下声明：

   .Watermark
   
   {
   
       font-style: italic;
   
       color: Gray;
   
   }
   
   

3. 在<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>
   
   

4. 在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>
   
   

5. 在<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>
   
   

6. 保存修改，在浏览器内查看效果。

 

使用jQuery的效果

动画显示联系表单

1. 添加一个段落。这个段落将在表单提交后显示。

扩展jQuery

使用插件扩展jQuery