Monday 15 April 2013

Jquery Tutorial Part2


JQUERY METHODS


.width():
These methods can set or get the width of the given element. It returns only the width of the element it does not include the padding, margin and border. To learn about the padding and margin click here.

Syntax: $(selector).width();
$(selector).width('100px');

Eg:
<body>
<script>
$(document).ready(function(){
alert($('firstdiv').width());
$('firstdiv').width('100px');
});
</script>
<div id="firstdiv" class="sample">
Hello Jquery
</div>
</body>

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

.height():
These methods can set or get the height of the given element. It returns only the height of the element it does not include the padding, margin and border. To learn about the padding and margin click here.

Syntax: $(selector).height();
$(selector).height('100px');

Eg:
<body>
<script>
$(document).ready(function(){
alert($('firstdiv').height());
$('firstdiv').height('100px');
});
</script>
<div id="firstdiv" class="sample">
Hello Jquery
</div>
</body>

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



.innerWidth():
These method are also same as the .width() method in Jquery. The only difference is .width() return the width of the element without padding, margin, border. But these methods returns the width with padding.

Syntax: $(selector).innerWidth();

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

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


.innerHeight():
These method are also same as the .height() method in Jquery. The only difference is .height() return the height of the element without padding, margin, border. But these methods returns the height with padding.

Syntax: $(selector).innerHeight();

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



.outerWidth():
outerWidth return the width of the element including the padding and border of the given element.

Syntax: $(selector).outerWidth();

Note: $(selector).outerWidth(true) returns width including padding, border and margin.

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


.outerHeight():
outerHeight return the height of the element including the padding and border of the given element.

Syntax: $(selector).outerHeight();

Note: $(selector).outerHeight(true) returns width including padding, border and margin.

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


.scrollTop()
We can scroll the top of page using these method in Jquery.
Syntax: $(selector).scrollTop();

Eg:
<body>
<script>
$(document).ready(function(){
$('#firstdiv').scrollTop();
$('#firstdiv').scrollTop(“0px”);
});
</script>
<div id="firstdiv" class="sample">
Hello Jquery
</div>
</body>


.scrollLeft()
We can scroll the left of page using these method in Jquery.
Syntax: $(selector).scrollLeft();

Eg:
<body>
<script>
$(document).ready(function(){
$('#firstdiv').scrollLeft();
$('#firstdiv').scrollLeft(“0px”);
});
</script>
<div id="firstdiv" class="sample">
Hello Jquery
</div>
</body>


.position()
These methods returns the position relative to its parent element of the first matched selector element.
Syntax: $(selector).position();

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


.offset()
These methods returns the position which is relative to the document of the given selector.

Syntax: $(selector).offset();
Eg:
<body>
<script>
$(document).ready(function(){
$('#firstdiv').offset().top;
$('#firstdiv').offset().left;
});
</script>
<div id="firstdiv" class="sample">
Hello Jquery
</div>
</body>


.removeAttr()

These methods is used to remove the attribute in the HTML element.

Syntax: $(selector).removeAttr('attrname');
Eg:
<body>
<script>
$(document).ready(function(){
$('#firstdiv').removeAttr('foo');
});
</script>
<div id="firstdiv" class="sample" value='foo'>
Hello Jquery
</div>
</body>

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

.prop(), /removeProp()

These methods is same as the .attr() methods in jquery but the only difference is attr() methods returns the string but .prop() method returns its datatype. The removeProp() is used to remove the assigned properties in the particular HTML element. Try online example to get better understanding about attr() and prop().

Syntax: $(selector).prop('propname');
Eg:
<body>
<script>
$(document).ready(function(){
$('#firstdiv').prop('foo');
$('#firstdiv').removeProp('foo');
});
</script>
<div id="firstdiv" class="sample" value='foo'>
Hello Jquery
</div>
</body>


.hasClass()

These methods used to find the selected element has the given class. It returns true if it has the given class or else false.

Syntax: $(selector).hasClass('classname');
Eg:
<body>
<script>
$(document).ready(function(){
$('#firstdiv').hasClass('sample');
});
</script>
<div id="firstdiv" class="sample" value='foo'>
Hello Jquery
</div>
</body>

Continue in part 3.

Posted by at No comments:
Labels: , , ,

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 No comments:
Labels: , , ,

Jquery Introduction

JQUERY

Jquery is a Javascript library which is mainly used to simplify the client-side scripting. Its a cross-browser library. Jquery Supports in all major browser Firefox, IE, Chrome, Opera, Safari. While writing this tutorial final update of Jquery is 1.9.1(stable release). You can download and use Jquery library for any purpose its free and opensource, licensed under MIT.
Uses of Jquery:
  1. Minimize the Javascript and easy to use when compared to Javascript.
  2. Select DOM elements, handle events, AJAX, animations are all easily possible in Jquery.
  3. Extensibility through plug-ins.
  4. Much faster compare to Javascript coding.
In this Tutorial, before study take a look at CSS (selectors) and HTML and Javascript. We study about Jquery while compare with Javascript with Real time Examples. So all them need just understand the given examples.
Jquery Syntax:
$(selector).action();
Starting With Jquery:

When you starting with Jquery You must remember the Two main points.
  1. Must include the Jquery library before using the any Jquery functions or events.
  2. You must give your Jquery code in some function or ready function.
Most of us will get a error will not follow above two points. Download the Library JS from the jquery site click link below and save it.


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>.

Eg:

<!-- This is constant for all so assume it comes automatically in all below examples -->
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<!-- This is constant for all so assume it comes automatically in all below examples -->
<body>
<script>
$(document).ready(function(){
$("#firstexample").html("My First");
});
</script>
<div id="firstexample"></div>
</body>
See how jquery difference in Javascript. Try Live Example click here.
In above example, We use CSS selectors inside the $(selectors) element. So its easy to fetch the element compared to Javascript. Learn CSS and CSS selectors tutorial.

Class as Selectors.

In javascript using class to select a DOM element is very complex, But in Jquery using CSS selectors it is easy to use.

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

Note: Use (#) for ids (unique representation). Use (.) for classes (common representation).
Continue in part 2

Posted by at 1 comment:
Labels: , ,
Subscribe to: Posts (Atom)