Thursday, 11 April 2013

Jquery Tutorial Part 1

JQUERY METHODS
 
In these section we compared all Javascript and Jquery functions to get the better idea about Jquery.

html() and innerHTML:

If you want to GET or PUT some content dynamically into HTML then we use html() method in Jquery.

Eg:
<body>
<script>
$(document).ready(function(){
$("#firstdiv").html("Hello world");
alert ($("#firstdiv").html());
});
</script>
<div id="firstdiv"></div>
</body>

Wana Compare this function with Javscript See live Example click here.

text() and textContent:

If you want to get the content of the HTML without having the HTML tags then you can use .text() function in Jquery and textContent in Javascript. Click here for live example and comparison.

Eg:

<body>
<script>
$(document).ready(function(){
alert($("#firstdiv").text());
});
</script>
<div id="firstdiv">
<div id="secondiv">
Hello world
</div>
</div>
</body>

attr() and getAttribute():

We can get the attribute of the HTML element using the attr() method in Jquery.
Eg:
<body>
<script>
$(document).ready(function(){
alert($("#firstdiv").attr('id'));
});
</script>
<div id="firstdiv">
<div id="secondiv">
Hello world
</div>
</div>
</body>


Note: <div id=”hai” class=”hello” value=”world” />. In these div id, class, value are all attributes for the element.

attr() and setAttribute()
We can set the attribute of the HTML element using the attr() method in Jquery.

Eg:
<body>
<script>
$(document).ready(function(){
$("#firstdiv").attr('class',"hello");
});
</script>
<div id="firstdiv" class="sample">
Hello Jquery
</div>
</body>


Note: Try live examples to get the better understanding.

css() and style:

We can set the CSS styles for the particular HTML element using css() method in Jquery and style in Javascript

Eg:
<body>
<script>
$(document).ready(function(){
$("#firstdiv").css({"color":"red","font-size":"30px"});
});
</script>
<div id="firstdiv" class="sample">
Hello Jquery
</div>
</body>


Get Styles of Element using Jquery:

We can use the same .css function for getting the styles of the element in Jquery.

Eg:
<body>
<script>
$(document).ready(function(){
alert($("#firstdiv").css({"color"}));
});
</script>
<div id="firstdiv" class="sample">
Hello Jquery
</div>
</body>


hide() and show() and toggle()

We can hide and show a elements easily in Jquery using these function. Toggle function is used to toggle the display of the element.

Eg:
<body>
<script>
$(document).ready(function(){
$("#firstdiv").toggle(); //To Toggle a element hide or show
$("#firstdiv").show(); //To show a element
$("#firstdiv").hide(); //To hide a element
});
</script>
<div id="firstdiv" class="sample">
Hello Jquery
</div>
</body>

Live Example click here. Try live example to compare those functions with Javascript.

fadeIn, fadeOut, fadeTo, fadeToggle :

Using the fadeIn and fadeOut function we can hide a element as animation view.

Syntax:
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);

In the above Syntax,
Speed specified the time taken for the effect we can give it as in milliseconds or slow,fast.
Calback specifies the action takes when the effects finished.
Opacity specifies the effect fadeOut opacity.

Eg:
<body>
<script>
$(document).ready(function(){
$("#firstdiv").fadeIn(1000); //fadeIn
$("#firstdiv").fadeOut(“slow”); //fadeOut
$("#firstdiv").fadeOut(500); //fadeToggle
$("#firstdiv").fadeOut(60,0.4); //fadeTo
$("#firstdiv").fadeOut(60,0.4,function(){alert(“finished”)}); //with callback
});
</script>
<div id="firstdiv" class="sample">
Hello Jquery
</div>
</body>

Live Example click here. Try live example for custom toggle function for fadeIn and fadeOut

slideUp, slideDown and slideToggle:

Using these jquery functions you can give a animation like sliding for the elements.

Syntax:
$(selector).slideUp(speed, callback);
$(selector).slideDown(speed, callback);
$(selector).slideToggle(speed, callback);

Eg:
<body>
<script>
$(document).ready(function(){
$("#firstdiv").slideDown(1000);
$("#firstdiv").slideUp("slow");
$("#firstdiv").slideToggle("slow");
$("#firstdiv").slideToggle("slow",function(){alert("finished")}); //with callback
});
</script>
<div id="firstdiv" class="sample">
Hello Jquery
</div>
</body>


animate:
Using these main feauture we can animate the element of the HTML using .animate(). The animation only works for the number representation of values. Because it increase or decrease the number you given with a time frame and looks like a animation.

Syntax:
$(selector).animate({param},speed,callback);

In here, param are the CSS elements you want to animate, speed you can give it as slow, fast, or even in milliseconds and callback are the functions that can be executed after the animation finished.

Eg:
<body>
<script>
$(document).ready(function(){
$("#firstdiv").animate({"left":"50px","height":"300px","width":"300px"},700,function(){
alert("finished");
});
});
</script>
<div id="firstdiv" class="sample">
Hello Jquery
</div>
</body>


Stop:

We can stop the animation by using .stop() function in jquery.

Syntax:
$(selector).stop(stopAll, gotoEnd)

In here, stopAll means stops all the queued animation asign to the specific selectors, default is false, gotoEnd means at the time of stop function triggers the animation cannot fully complete for the specific selectors the complete that it also had default value as false.

Eg:
<body>
<script>
$(document).ready(function(){
$("#firstdiv").animate({"left":"50px","height":"300px","width":"300px"},700,function(){
alert("finished");
});
$("#firstdiv").stop();
$("#firstdiv").stop(true,true);
});
</script>
<div id="firstdiv" class="sample">
Hello Jquery
</div>
</body>

Live Example click here. Try online Example for better understanding.

Val:
Using these function we can get the value of the input element using Jquery.

Syntax:
$(inputselector).val();
Eg:
<body>
<script>
$(document).ready(function(){
alert($('#firstdiv').val());
});
</script>
<input type='text' id="firstdiv" class="sample" value='hello' />
</body>


append and prepend, after and before:
Using append function we can append the HTML element dynamically into the pages or the text it append the element at the End of the selected element, prepend means same functionality but the difference is it adds the element at the Begining of the selected element.

After() and before() are same as the append and prepend the main difference is it adds the element after and before of the selected element.

Note:

For eg: If you append or prepend the <h5> tag or any text in to the element it adds like this
<div>
<h5>prepended element</h5>
<h5>appended element</h5>
</div>
But, Incase you use after and before function then the HTML look like this.
<h5>Before element</h5>
<div></div>
<h5>After element</h5>

Syntax:
$(selector) .append('text or HTML',''text or HTML'',...);
$(selector) .prepend('text or HTML',''text or HTML'',...);
$(selector) .after('text or HTML',''text or HTML'',...);
$(selector) .before('text or HTML',''text or HTML'',...);
Eg:
<body>
<script>
$(document).ready(function(){
$("#firstdiv").append("<h5>I am append content</h5>");
$("#firstdiv").prepend("<h5>I am prepend content</h5>");
$("#firstdiv").after("<h5>I am append content</h5>");
$("#firstdiv").before("<h5>I am prepend content</h5>");
});
</script>
<div id="firstdiv" class="sample">Hello Jquery</div>
</body>

Live Example click here. Try live example for compare this function with Javascript.

remove:
Using this Jquery function we can remove the particular element in the HTML Dom.

Syntax: $(selector).remove().

Eg:
<body>
<script>
$(document).ready(function(){
$("#firstdiv").remove();
});
</script>
<div id="firstdiv" class="sample">Hello Jquery</div>
<div id="secondiv" class="sample">Hello Jquery</div>
</body>

Live Example click here. Try live example for compare this function with Javascript.

addClass, removeClass, toggleClass:
Using Jquery we can add or remove a class of the CSS at run time using these functions.
Syntax: $(selector).addClass('//classname');
$(selector).removeClass('//classname');
$(selector).toggleClass('//classname');

Eg:
<body>
<script>
$(document).ready(function(){
$("#firstdiv").addClass('fontblue');
$("#firstdiv").removeClass('fontblue');
$("#firstdiv").toggleClass('fontblue');
});
</script>
<div id="firstdiv" class="sample">Hello Jquery</div>
</body>

Live Example click here. Try live example for compare this function with Javascript.
Continue in Part 2.
Posted by at
Labels: , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)