JQuery is a library of routines, written independently of javascript, but that only work in the "javascript" environment. It mainly provides easy-to-use client-side scripting capabilities.
What are the differences between Jquery and Javascript?
Before jQuery writing JavaScript was really long winded, as you had to write the same script in different ways to please all browsers. JQuery works in all browsers, and makes light work of almost everything you need to do in JavaScript.
The only downside is that you have to include the jQuery library in you web page, so writing in pure JavaScript will improve page loading time. If this is a concern then you may want to consider CoffeeScript.
Difference between Hand-note and Book or More Book and library.
In simple JavaScript is like A,B,C,D,E,F------Z. and JQuery is like ready library. where you can easily grab some awesome sentence and pattern can write your own book.
An Example : [i made a fiddle for better understanding :)]
View my Fiddle Or you can read bellow ,
In jQuery you can use a object fadeIn or fadeOut just writing :
$("#hello").fadeIn();
where in html :
<div id="hello">World</div>
if you try to write your own java-script function you have to write :
<code>(function() {
var FX = {
easing: {
linear: function(progress) {
return progress;
},
quadratic: function(progress) {
return Math.pow(progress, 2);
},
swing: function(progress) {
return 0.5 - Math.cos(progress * Math.PI) / 2;
},
circ: function(progress) {
return 1 - Math.sin(Math.acos(progress));
},
back: function(progress, x) {
return Math.pow(progress, 2) * ((x + 1) * progress - x);
},
bounce: function(progress) {
for (var a = 0, b = 1, result; 1; a += b, b /= 2) {
if (progress >= (7 - 4 * a) / 11) {
return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
}
}
},
elastic: function(progress, x) {
return Math.pow(2, 10 * (progress - 1)) * Math.cos(20 * Math.PI * x / 3 * progress);
}
},
animate: function(options) {
var start = new Date;
var id = setInterval(function() {
var timePassed = new Date - start;
var progress = timePassed / options.duration;
if (progress > 1) {
progress = 1;
}
options.progress = progress;
var delta = options.delta(progress);
options.step(delta);
if (progress == 1) {
clearInterval(id);
options.complete();
}
}, options.delay || 10);
},
fadeOut: function(element, options) {
var to = 1;
this.animate({
duration: options.duration,
delta: function(progress) {
progress = this.progress;
return FX.easing.swing(progress);
},
complete: options.complete,
step: function(delta) {
element.style.opacity = to - delta;
}
});
},
fadeIn: function(element, options) {
var to = 0;
this.animate({
duration: options.duration,
delta: function(progress) {
progress = this.progress;
return FX.easing.swing(progress);
},
complete: options.complete,
step: function(delta) {
element.style.opacity = to + delta;
}
});
}
};
window.FX = FX;
})()
</code>