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