Download the jQuery-1.11.0.js file form http://jquery.com/download/
Add the jQuery-1.11.0.js to the Solution Explorer and drag and drop the jquery-1.11.0.js file from the Solution Explorer onto your default.aspx page as shown below.
![]()
To display an alert on a Button click using jQuery, add a Button element to the page as shown below:
<asp:Button ID="Button1" runat="server" Text="Button" />
Now add a
script tag to add some
jQuery function as in the following block:
<script type="text/javascript">
$(document).ready(function() {
// add code here
});
</script>
Add your code to the function block:
<script type="text/javascript">
$(document).ready(function() {
$("#Button1").click(function() {
alert("Hello world!");
});
});
</script>
On clicking the button, you get an alert code similar to the following:
![]()
To do some animation on button click using
jQuery, add
a HTML button and
a <asp
:Panel> to the page as shown below:
<form id="form1" runat="server">
<input id="btnAnimate" type="button" value="Animate" />
<asp:Panel ID="Panel1" runat="server">
Some sample text in this panel
</asp:Panel>
</form>
Also add some
CSS to design the
div. The <style> tag has been kept
in the <head> of the default.aspx page.
<style type="text/css">
div {
background-color:#D5EDEF;
color:#4f6b72;
width:50px;
border: 1px solid #C1DAD7;
}
</style>
Finally add the
jQuery code to animate the panel on button click as in the following:
<script type="text/javascript">
$(document).ready(function() {
$("#btnAnimate").click(function() {
$("#Panel1").animate(
{
width: "350px",
opacity: 0.5,
fontSize: "16px"
}, 1800);
});
});
</script>
Run the sample and see the Panel being animated as shown below.
![]()