Abstract: This article is a guide for getting started with jQuery using ASP.NET and Visual Studio 2008/2010. The article also shows you how to use Visual Studio intellisense feature to develop jQuery and ASP.NET applications.
Jquery is an awesome javascipt library, it’s help you for developing dazing web projects.
In this tutorial I want to discuss very basic level jquery and working with Click() event.
How to add jQuery to your website
Installing
You can download jquery.js file form jquery.com.
Recommended
Jquery Code
Generally used script run this when the HTML is all ready. Live Demo
Similar as previous script. Take a look at Live Demo
Run this when the whole page has been downloaded. Take a look at Live Demo
jQuery Stucture
Here $ = jquery, selector is a DOM element and function execute a jquery fuction.
DOM - Document Object Model Wiki
Selectors
-> Select DOM elements eg: $('h1') ,$('div'), $('li')..
-> Select ID : $('#id_name')
-> Select Class : $('.class_name')
Hide and Show With Click Event
Hiding and Showing the div tag. Take a look at Live Demo
<script type="text/javascript">
$(function()
{
$('.hide_box').click(function()
{
$('#box').hide();
});
$('.show_box').click(function()
{
$('#box').show();
});
});
</script>
Jquery is an awesome javascipt library, it’s help you for developing dazing web projects.
In this tutorial I want to discuss very basic level jquery and working with Click() event.
How to add jQuery to your website
Installing
You can download jquery.js file form jquery.com.
<script type="text/javascript" src="jquery.js"></script>
OR Recommended
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
libs/jquery/1.3.0/jquery.min.js"></script>
Jquery Code
Generally used script run this when the HTML is all ready. Live Demo
<script type="text/javascript">
$(document).ready(function()
{
alert('Welcome dotnethubs Jquery Basic Series');
});
</script>
$(document).ready(function()
{
alert('Welcome dotnethubs Jquery Basic Series');
});
</script>
Similar as previous script. Take a look at Live Demo
<script type="text/javascript">
$(function()
{
alert('Welcome dotnethubsJquery Basic Series');
});
</script>
$(function()
{
alert('Welcome dotnethubsJquery Basic Series');
});
</script>
Run this when the whole page has been downloaded. Take a look at Live Demo
<script type="text/javascript">
$(window).load(function()
{
alert('Loaded Whole Page including images)');
});
</script>
$(window).load(function()
{
alert('Loaded Whole Page including images)');
});
</script>
jQuery Stucture
Here $ = jquery, selector is a DOM element and function execute a jquery fuction.
$(selector).function(parameters);
DOM - Document Object Model Wiki
Selectors
-> Select DOM elements eg: $('h1') ,$('div'), $('li')..
-> Select ID : $('#id_name')
-> Select Class : $('.class_name')
Working with Click() Event
Structure $(selector).click(). Take a look at Live Demo <script type="text/javascript">
$(function()
{
$('#button_action').click(function()
{
alert('Hey Button');
});
$('.link_action').click(function()
{
alert('Hey Link');
});
});
</script>
$(function()
{
$('#button_action').click(function()
{
alert('Hey Button');
});
$('.link_action').click(function()
{
alert('Hey Link');
});
});
</script>
<body>
<include type='button' value='BUTTON' id='button_action'/>
<a href='#' class='link_action'>LINK</a>
</body>
Hide and Show With Click Event
Hiding and Showing the div tag. Take a look at Live Demo
<script type="text/javascript">
$(function()
{
$('.hide_box').click(function()
{
$('#box').hide();
});
$('.show_box').click(function()
{
$('#box').show();
});
});
</script>
<body>
<a href="#" class="hide_box">HIDE</a>
<a href="#" class="show_box">SHOW</a>
<div id="box"></div>
</body>
No comments:
Post a Comment