Developers Arena: Jquery Tutorials

Showing posts with label Jquery Tutorials. Show all posts

jQuery Tutorial for Beginners - Hello World Example

Below is a Jquery example of how to print "Hello World" to the Console.

<html>
<head>
<title>jQuery Example in Developersarena</title>
<script type="text/javascript" 
   src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript">
   $(document).ready(function(){
      document.write("Hello, World!");
   });
</script>   
</head>
<body>
<h1>Hello</h1>
</body>
</html>

How to Use jQuery hide() function for hiding the current HTML element

<html>

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

  $(this).hide()

});

});

</script>

</head>



<body>

<button type="button">Click me</button>

</body>



</html>

Explanation:
The jQuery syntax is tailor made for selecting HTML elements and perform some action on the element(s).

Basic syntax is: $(selector).action()

A dollar sign to define jQuery
A (selector) to "query (or find)" HTML elements
An jQuery action() to be performed upon the element(s)

Examples:
$(this).hide() - hides current element
$("p").hide() - hides all paragraphs
$("p.test").hide() - hides all paragraphs with class="test"
$("#test").hide() - hides the element with id="test"

How to Create a Easy Jquery Auto Image Rotator

Hi Friends here is a simple way of creating a Jquery Image Rotator.Before showing you how to create it lets see some basic functionalities of the Image Rotator Properties and Associated Parameters.
Usage:

jQuery(imgElement).rotate(angleValue)
jQuery(imgElement).rotate(parameters)
jQuery(imgElement).rotateAnimation(parameters)
jQuery(imgElement).rotateAnimation(parameters)

Returns:
jQueryRotateElement - !!! NOTICE !!! function return rotateElement instance to help connect events with actually created 'rotation' element.

Parameters:

({angle:angleValue,

[animateAngle:animateAngleValue],

[maxAngle:maxAngleValue],

[minAngle:minAngleValue],

[callback:callbackFunction],

[bind:[{event: function},{event:function} ] })

Use a $document.ready() function to load the JQuery Cycle rotator effects

$(document).ready(function()

{
$('#image').rotate(-25);
});

Some Other Useful Examples:

$(document).ready(function()

 {

var rot=$('#image3').rotate({maxAngle:50,minAngle:-55,

bind:

[

{"mouseover":function(){rot[0].rotateAnimation(50);}},

{"mouseout":function(){rot[0].rotateAnimation(-50);}}

]

});

});

Example 2:

$(document).ready(function()

 {

$('#image2').rotate({angle:5});

});

How to Load Content from text file to Browser Using JQuery

In this Tutorial we will show you how to Display the text data which is there in some text file say (mytext.txt) in the Browser on click of the button.
Step 1: Create a text file with name as mytext.txt
Step 2:Copy the below content in the text file
Hi!!! Welcome to the World of JQuery Programming!!
How do you Feel about JQuery?
Seems to be working Great right!!?
Keep Going!!!
Step 3: Create a HTML page say loadcontent.html and copy the below code in that file

LoadContent Example Using Jquery

<html >

<head>

<title>LoadContent Example Using Jquery</title>

<script type="text/javascript" src="jquery-1.2.6.js"></script>

<script type="text/javascript"> 

 function Displaycontent()

{

$.ajax({

url : "textContent.php",

success : function (data) {

$("#contentArea").html(data);

}

});

}

</script> 

</head>

<body>

<table width="100%" >

<tr><td> </td><td> </td></tr>

<tr><td> </td><td> </td></tr>

<tr><td width="20%" > </td><td style="color:Yellow;"



width="60%">

 see How Jquery Works</td></tr> 

<tr><td> </td><td ><input type="button" value="Load Content"



onClick="

Displaycontent();"> <span



style="color:Yellow;"></span></td></tr>

<tr><td> </td><td>

<textarea id="contentArea" rows="6" cols="100"></textarea>

</td>

</tr>

</table>

</body>

</html>

Explanation:
Code Part 1:
function Displaycontent()
{
$.ajax({
url : "textContent.php",
success : function (data) {
$("#contentArea").html(data);
}
});
}
This Part of JQuery code retrives the Data from the Server and displays it in the text area
The Remaining part of the code deals with the creation of table and text area which is related to HTML concepts so i am not explaining those things here.

Hello World Using JQuery Selector

In This Example we will Show you how to Display a alert when a link is clicked

Hello World Alert Using JQuery
<html>
<head>

<title>Hello World Alert Using JQuery</title>

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("a").click(function()

{

alert("Hello world! you have called me");

});

});
</script>
</head>
<body>
<a href=””>Click Me for Saying Hello</a>

  </body>
</html>

Explanation:
Code Part1 :
The Above piece of code tells the browser to load the JQuery library which is located in the Folder you have created
Code Part 2:
$(document).ready(function(){
$("a").click(function()
{
alert("Hello world! you have called me");
});
});
---Here We register a ready event for the document ie we will perform the things whenever the DOM(document object model ) is Ready.
---$() is a JQuery Object
---$(“a”) is jQuery selector tool or method, which selects all “a” elements
---The click() function we call next is a method of the jQuery object.

Hello World Using JQuery

Lets Start with a Simple Example as usual always the "Hello World"..

Ok, let get start to create a JQuery Hello World

1.Create a Simple HTML Page say MyfirstJqueryProgram.html like below and place it in the folder

where you have placed jquery-1.2.6.min.js file
<html>

<head>

<title>My First JQuery Program</title>

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>       

<script type="text/javascript"> 

$(document).ready(function(){

$("#myprogram").html("This is my first Jquery Program saying Hello World");

});                                   

</script>                                                               

</head>                                                                 

<body>                                                                 

Hi Welcome !!! 

<div id="myprogram">

</div>

</body>                                                                 

</html>

Explanation:

code Part 1 :

The Above piece of code tells the browser to load the JQuery library which is located in the Folder you have created

Code Part 2:

$(document).ready(function(){

$("#myprogram").html("This is my first Jquery Program saying Hello World");

});

Here we are registering a ready event ie whenever the DOM is Ready

$() is a JQuery syntax called jQuery selector

Introduction to jQuery-Part 1

1.1 About Jquery

JQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

jQuery is an exceptionally clever piece of engineering. It neatly encapsulates an extraordinary range of common functionality, and provides a clever plugin API for any functionality not included by default.

Using JQuery makes the code light weight and executes faster at the client side. JQuery separates the "behavior" characteristics from the HTML structure

1.2 Why Jquery?

Unlike most other JavaScript libraries, jQuery works in a different manner. What sets it apart is something known as “Chainablity”. This is somewhat related and like object oriented programming. For one, jQuery generated code is less heavier or smaller than prototypes. Unlike jQuery, which uses OO concepts, prototype – as a JavaScript library, only encourages them. Even if you have used other JavaScript libraries, I, as web developer would definitely suggest you guys at least trying out jQuery. Its simple, short and sweet and Its powerful, light and fun!

Google, Yahoo, Dell, Bank Of America, also have adopted and used jQuery for developing and deploying their website or website based products

1.3 Where can you get jQuery and other JavaScript libraries?

jQuery is free and is available at http://jquery.com/. Its small ~15kb and you can find a lot of tutorials and discussions too.

1.4 Features of Jquery

DOM element selections using the cross-browser open source selector engine

jQuery owns a strong and very flexible mechanism for adding in methods and functionality,bundled as plugins

CSS manipulation

Effects and animations

Ajax

Extensibility through plugins

Utilities - such as browser version and the each function.

1.5 jQuery Advantages

jQuery supports CSS 1-3 and basic XPath.

jQuery is about 19kb in size.

jQuery works in Firefox 1.0+, Internet Explorer 5.5+, Safari 1.3+, and Opera 8.5+.

jQuery and Prototype can be used together!

Developers Arena