JQuery
1.what is the jQuery?
* The purpose of jQuery is to make it much easier to use JavaScript on your website.
* jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.
* jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.
2.what are the jQuery libruary contains the following features?
* HTML/DOM manipulation* CSS manipulation
* HTML event methods
* Effects and animations
* AJAX
* Utilities
3.Why jQuery?
There are lots of other JavaScript frameworks out there, but jQuery seems to be the most popular, and also the most extendable.
Many of the biggest companies on the Web use jQuery, such as:
* Microsoft
* IBM
* Netflix
4.jQuery Syntax
* Basic syntax is: $(selector).action()
Examples here:
$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".
5.jQuery Selectors
* jQuery selectors allow you to select and manipulate HTML element(s).* jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and in addition, it has some own custom selectors.
* All selectors in jQuery start with the dollar sign and parentheses: $().
The element Selector
➡The jQuery element selector selects elements based on the element name.You can select all <p> elements on a page like this:
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
The #id Selector
➡The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.➡An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element.
➡To find an element with a specific id, write a hash character, followed by the id of the HTML element:
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
The .class Selector
➡The jQuery class selector finds elements with a specific class.➡To find elements with a specific class, write a period character, followed by the name of the class:
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
What are Events?
➡All the different visitor's actions that a web page can respond to are called events.➡An event represents the precise moment when something happens.
Examples:
⇒moving a mouse over an element
⇒selecting a radio button
⇒clicking on an element
jQuery Syntax For Event Methods
➡In jQuery, most DOM events have an equivalent jQuery method.➡To assign a click event to all paragraphs on a page, you can do this:
$("p").click(function(){
// action goes here!! });
Commonly Used jQuery Event Methods
$(document).ready()The $(document).ready() method allows us to execute a function when the document is fully loaded. This event is already explained in the jQuery Syntax chapter.
click()
The click() method attaches an event handler function to an HTML element.
The function is executed when the user clicks on the HTML element.
The following example says: When a click event fires on a <p> element; hide the current <p> element:
$("p").click(function(){
$(this).hide();
});
dblclick()
$("p").dblclick(function(){
$(this).hide();
});
mouseenter()
$("#p1").mouseenter(function(){alert("You entered p1!");
});
mouseleave()
$("#p1").mouseleave(function(){alert("Bye! You now leave p1!");
});
mousedown()
$("#p1").mousedown(function(){alert("Mouse down over p1!");
});
mouseup()
$("#p1").mouseup(function(){alert("Mouse up over p1!");
});
hover()
$("#p1").hover(function(){alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
focus()
$("input").focus(function(){$(this).css("background-color", "#cccccc");
});
blur()
$("input").blur(function(){$(this).css("background-color", "#ffffff");
});
The on() Method
$("p").on("click", function(){$(this).hide();
});
jQuery hide() and show()
$("#hide").click(function(){$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
The optional speed parameter specifies the speed of the hiding/showing, and can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is a function to be executed after the hide() or show() method completes (you will learn more about callback functions in a later chapter).
jQuery toggle()
$("button").click(function(){
$("p").toggle(); });
$(selector).toggle(speed,callback);
The optional speed parameter can take the following values: "slow", "fast", or milliseconds.The optional callback parameter is a function to be executed after toggle() completes.
jQuery Fading Methods
With jQuery you can fade an element in and out of visibility.jQuery has the following fade methods:fadeIn()
fadeOut()
fadeToggle()
fadeTo()
jQuery fadeIn() Method
➡The jQuery fadeIn() method is used to fade in a hidden element.➡Syntax:
$(selector).fadeIn(speed,callback);
➡The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.➡The optional callback parameter is a function to be executed after the fading completes.
➡The following example demonstrates the fadeIn() method with different parameters:
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000); });
jQuery fadeOut() Method
➡The jQuery fadeOut() method is used to fade out a visible element.➡Syntax:
$(selector).fadeOut(speed,callback);
➡The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.➡The optional callback parameter is a function to be executed after the fading completes.
➡The following example demonstrates the fadeOut() method with different parameters:
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000); });
jQuery Sliding Methods
➡With jQuery you can create a sliding effect on elements.jQuery has the following slide methods:
⇒slideDown()
⇒slideUp()
⇒slideToggle()
jQuery slideDown() Method
➡The jQuery slideDown() method is used to slide down an element.➡Syntax:
$(selector).slideDown(speed,callback);
➡The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.➡The optional callback parameter is a function to be executed after the sliding completes.
➡The following example demonstrates the slideDown() method:
$("#flip").click(function(){
$("#panel").slideDown(); });
jQuery slideUp() Method
➡The jQuery slideUp() method is used to slide up an element.➡Syntax:
$(selector).slideUp(speed,callback);
➡The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.➡The optional callback parameter is a function to be executed after the sliding completes.
➡The following example demonstrates the slideUp() method:
$("#flip").click(function(){
$("#panel").slideUp(); });
jQuery slideToggle() Method
➡The jQuery slideToggle() method toggles between the slideDown() and slideUp() methods.➡If the elements have been slid down, slideToggle() will slide them up.
If the elements have been slid up, slideToggle() will slide them down.
$(selector).slideToggle(speed,callback);
➡The optional speed parameter can take the following values: "slow", "fast", milliseconds.➡The optional callback parameter is a function to be executed after the sliding completes.
➡The following example demonstrates the slideToggle() method:
$("#flip").click(function(){
$("#panel").slideToggle();
});
jQuery Animations - The animate() Method
➡The jQuery animate() method is used to create custom animations.➡Syntax:
$(selector).animate({params},speed,callback);
➡The required params parameter defines the CSS properties to be animated.➡The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
➡The optional callback parameter is a function to be executed after the animation completes.
➡The following example demonstrates a simple use of the animate() method; it moves a <div> element to the right, until it has reached a left property of 250px:
$("button").click(function(){
$("div").animate({left: '250px'});
});
stop() Method
➡The jQuery stop() method is used to stop an animation or effect before it is finished.➡The stop() method works for all jQuery effect functions, including sliding, fading and custom animations.
➡Syntax:
$(selector).stop(stopAll,goToEnd);
jQuery Callback Functions
➡JavaScript statements are executed line by line. However, with effects, the next line of code can be run even though the effect is not finished. This can create errors.➡To prevent this, you can create a callback function.
➡A callback function is executed after the current effect is finished.
➡Typical syntax:
$(selector).hide(speed,callback);
............................THANK YOU......................
