Pages

Ads 468x60px

For New Update Use this Link http://dotnethubs.blogspot.in/ Offer for you

.

Showing posts with label jquery basics-1. Show all posts
Showing posts with label jquery basics-1. Show all posts

Wednesday 13 March 2013

jquery basics

jquery basics
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.

<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>

Jquery Code
Generally used script run this when the HTML is all ready.  Live Demo
<script type="text/javascript">
$(document).ready(function()
{
alert('Welcome dotnetnukes Jquery Basic Series');
});
</script>

Similar as previous script. Take a look at Live Demo
<script type="text/javascript">
$(function()
{
alert('Welcome dotnetnukes Jquery 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>



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>
<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>
 

..




New Updates

Related Posts Plugin for WordPress, Blogger...

Related Result