Asp.Net - WebForms JQuery exemplo simples

Utilizando: Visual Studio 2010, C#, FrameWork 4.0 e Asp.Net Webforms

1 - Crie um novo projeto C# | Web | ASP.NET Web Application
2 - Como nome do projeto de NewWebApplicationTemplate 

3 - Abra Default.apsx e insira o código em destaque abaixo abaixo :


<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
        Welcome to ASP.NET!
    </h2>
    <p>
        To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>.
    </p>
    <p>
        You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&amp;clcid=0x409"
            title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
    </p>
    <input type="button" id="btnChangeTitleStyle" value="Change Title Style" />
</asp:Content>


4 - Para usar o jQuery, você deve adicionar uma referência à biblioteca jQuery. Para fazer isso, adicione o  seguinte elemento script, que faz referência ao arquivo de origem jQuery, dentro da tag HeaderContent.



<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
</asp:Content>



5 - Abaixo da tag script adicionada acima insira o bloco de codigo abaixo :


    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnChangeTitleStyle").click(function () {
                $("h2").css("color", "red");
            });
        });
    </script>


6 - F5 para executar o projeto e veja como ficou

Fonte : Microsoft Training Kit VS2010