Simple jQuery Manipulation In Asp.Net WebForms

I started learning jquery recently. This is a simple tutorial using asp.net website to show alert message and to change background color of label control. Add a label control, an asp.net button control, and input html button. Make sure to reference the jQuery library in your asp.net website.

jQuery Script:

1 2 3 4 5 6 7 8 9 10 11

$(document).ready(function() { $('#btnAlert').click(function() { alert('my first jquery app!'); }); $('#btnChangeBackColorLabel').click(function() { $('span').css("background-color", "blue"); }); $("span").click(function() { $(this).css("background-color", "yellow"); }); });

HTML CODE:

1 2 3 4 5 6 7

<div> <asp:Button ID="btnAlert" runat="server" Text="Show Alert" /> <br /> Click Change Me label itself to change background color to yellow<br /> <input id="btnChangeBackColorLabel" type="button" value="ChangeColorToBlue" /> <asp:Label ID="lblHi" runat="server" Text="Change Me" BorderStyle="Solid"> </ asp:Label> </div>

During page render,labels are rendered as span elements.

Cheers