KiPiPo.com blog gadget design wallpaper web programming review

12Feb/110

basic jquery tutorial


What is jquery ? jquery is one of most popular javascript library to make your live easier 😀 , you can make animation, ajax, manipulate html with only few line code. You can download jquery file from www.jquery.com . Here same sample jquery for basic usage :)  .

Hello World

//make sure you use ready state to make sure all element is loaded before execute the script inside
$(document).ready(function(){
 alert("Hello World");
});

Full code :

<html>
 <head>
    <title>Untitled Document</title>
 </head>
<body>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
  <script type="text/javascript">
     $(document).ready(function(){
        alert("Hello World");
     });
 </script>
</body>
</html>

HTML Manipulation

[ DEMO PAGE ]

html

<div id="header">JQUERY Manipulate HTML - demo page</div>
<div class="text">how to manipulate html using jquery ?</div>
<div class="text">how to using jquery</div>

<div class="text2">Orange, Apple, </div>

<div class="text3">Car,Truck, and motorcycle</div>

jquery code

$(document).ready(function(){
   //will replace the content of element which has id name "header"
   $("#header").html("Hello World Header - Manipulate using html");

   //will replace the content of element which has class name "text"
   $(".text").html("Manipulate using html");

   //will append the content of element , result :
   //     Orange, Apple, Watermelon -- Manipulate using "append"
   $(".text2").append("Watermelon -- Manipulate using &quot;append&quot;");

   //to get content inside "text3" element and store it to variable
   var get_html = $(".text3").html();
   console.debug(get_html);
});

fullcode

<html>
<head>
<title>JQUERY Manipulate HTML - demo page</title>
</head>
<body>
	<div id="header">JQUERY Manipulate HTML - demo page</div>
	<div class="text">how to manipulate html using jquery ?</div>
	<div class="text">how to using jquery</div>

	<div class="text2">Orange, Apple, </div>

	<div class="text3">Car,Truck, and motorcycle</div>

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#header").html("Hello World Header - Manipulate using html");
			$(".text").html("Manipulate using html");

			$(".text2").append("Watermelon -- Manipulate using &quot;append&quot;");

			var get_html = $(".text3").html();
			console.debug(get_html);
		});
	</script>
</body>
</html>

Animation & Event

[DEMO PAGE]

html

<div>
 <input type="button" value="Click Here to Open" name="btn1" id="btnSlideDown">
 <input type="button" value="Click Here to Close" name="btn1" id="btnSlideUp">
 <div id="sample-content" style="display:none;border:solid:1px;">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet,
  consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit
  </div>
 </div>

jquery

$(document).ready(function(){
    $("#btnSlideDown").click(function(){//do slideDown when button is clicked
      $("#sample-content").slideDown();
    });
    $("#btnSlideUp").click(function(){//do slideUp when button is clicked
      $("#sample-content").slideUp();
    });
});

For animation you can also try .fadeIn() or .fadeOut() .
For event you can also try .dblclick()  - to detect double click event , .mouseover() - to detect if mouse pointer enters the element .
For more animation effects and events function, visit jquery documentain page here and here.

AJAX

[ DEMO PAGE ]

html

<a href="javascript:void(0);" id="btnAjax">Click here to load by ajax</a>
<div id="box">
</div>

jquery

$(document).ready(function(){
 $("#btnAjax").click(function(){//do ajax when the button is clicked
   $.ajax({
     url : "html_sample.html",
     success : function(data){
         $("#box").html(data);        
     }
   });
 });
});
url => enter the url content which is want to be loaded.
success => specify your action here after content is loaded. "data" is the content which is returned by "html_sample.html".
[ DOWNLOAD ALL CODE ]

Related posts:

create simple menu navigation using CSS
Javascript UI library
check checkbox with specific value ( using jQuery )
Comments (0) Trackbacks (0)

No comments yet.


Leave a comment

 

No trackbacks yet.