jQuery

What is jQuery?

jQuery is a JavaScript library designed to help web developers work with JavaScript. It bridges technical differences between different browsers and provides comfortable and compact code, which is often much shorter in direct comparison to JavaScript.

JavaScript has historically been a problem in web development, in that different browsers sometimes yield very different results with the same code.

For example, certain native JavaScript functions simply do not work in older browsers. Consequently, anyone who wants to support all browsers with a web application often has to set special course points in their scripts, which, depending on the browser and version, lead to the desired result in different ways – or risk that certain users may not be able to use the website.

Frameworks like jQuery are an approach for the developer to accept this tedious and error-prone workload. The differences between different browsers are handled internally, while developers write only one, universal script.

More compact and more comfortable than JavaScript

jQuery not only offers browser independence. The framework simplifies many JavaScript functions that are particularly needed on the Web. The work becomes more comfortable and the code shorter and thus much easier to maintain. A special feature of jQuery, for example, is that it makes access to DOM elements very simple and convenient.

Developers can target elements from the DOM and manipulate them in various ways. For example, elements can be subsequently assigned to new CSS classes to underline changes visually. Today, DOM manipulations have also become more comfortable in “normal” JavaScript and can therefore be conveniently implemented in modern browsers even without the framework.

jQuery and Ajax

jQuery also established itself as a convenient tool for developers who need to dynamically design websites via Ajax. Ajax uses JavaScript to asynchronously reload small parts of a website. Here, too, jQuery helps to realize the desired functionality independently of the browser reliably, comfortably and with little effort.

jQuery UI: dynamic user interfaces based on jQuery

Uniform user interfaces for different browsers are also often inconvenient and cumbersome. jQuery UI is a framework that should provide design and functionality for interactive interfaces independent of the browser. It builds on jQuery and adds many practical elements and effects that are common on the Web, such as:

– Draggable: The user can move content within a container.
Sortable: Users can rearrange content, such as: For example, a list or      pictures in an album.
– Autocomplete: While the user writes in a text field, he gets appropriate suggestions from a ready-made list.
– Datepicker: Clicking on the date field will bring up a calendar from which a date can be selected.
– Themes: Existing surfaces can be quickly adapted through interchangeable themes.

Some jQuery Events, Effects, etc.

Common Selectors

Selector Usage Description
element $(“p”).hide(); The jQuery element selector selects elements based on the element name.
#id $(“#test”).hide(); The #id selector – Jquery id selector uses the id attribute of an HTML tag to find the specific element.
.class $(“.test”).hide(); The .class selector -JQuery class selector finds elements with a specific class.
:first $(“p:first”).hide();; The first p element.
:last $(“p:last”).hide();; The last p element.
:even $(“tr:even) All even tr elements
:odd $(“tr:odd”) All odd tr elements.
:first-child $(“p:first-child”) All p elements that are the first child of their parents.
:last-child $(“p:last-child”) All p elements that are the last child of their parents.
:nth-child(n) $(“p:nth-child(2)”) All p elements that are the nth child of their parents.
:input $(“:input”) All input elements.
:text $(“:text”) All input elements with type=”text”.
:radio $(“:radio”) All input elements with type=”radio”.
:checkbox $(“:checkbox”) All input elements with type=”checkbox”.
:submit $(“:submit”) All input elements with type=”submit”.
:button $(“:button”) All input elements with type=”button”.

Events

Event Usage Description
$(document).ready() $(document).ready(function(){
&nbsp&nbsp…
});
Allows us to execute a function when the document is fully loaded. This is to prevent any jQuery code from running before the document is finished loading (is ready).
click() $(“p”).click(function(){
&nbsp &nbsp $(this).hide();
});
The click() method attaches an event handler function to an HTML element. The function is executed when the user clicks on the HTML element.
dblclick() $(“p”).dblclick(function(){
&nbsp&nbsp$(this).hide();
});
The dblclick() method attaches an event handler function to an HTML element. The function is executed when the user double-clicks on the HTML element.
mouseover() $(“p”).mouseover(function(){
$(“p”).css(“background-color”, “yellow”);
});
The mouseover event occurs when the mouse pointer is over the selected element.
mouseout() $(“p”).mouseout(function(){
$(“p”).css(“background-color”, “gray”);
});
The mouseout event occurs when the mouse pointer leaves the selected element.
mouseenter() $(“#p1”).mouseenter(function(){
alert(“You entered p1!”);
});
The mouseenter event occurs when the mouse pointer is over (enters) the selected element. Note: Unlike the mouseover event, the mouseenter event only triggers when the mouse pointer enters the selected element. The mouseover event is triggered if a mouse pointer enters any child elements as well.
mouseleave() $(“#p1”).mouseleave(function(){
alert(“Bye! You now leave p1!”);
});
The mouseleave event occurs when the mouse pointer leaves the selected element.Note: Unlike the mouseout event, the mouseleave event only triggers when the mouse pointer leaves the selected elements. The mouseout event is triggered if a mouse pointer leaves any child elements as well as the selected element.

Effects

Method Usage Description
hide()
show()
$(“#id”).click(function(){
&nbsp&nbsp$(“p”).hide();
});
$(selector).hide(speed,callback);
hide and show HTML elements
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.
toggle() $(“p”).toggle();
$(selector).fadeIn(speed,callback);
toggle between hide and show, shown elements are hidden and hidden are shown.
fadeIn(), fadeOut(), fadeToggle(), fadeTo() $(“#div1”).fadeIn();

$(“#div2”).fadeIn(“slow”);

methods to fade in a hidden element, fade out a visible element, toggle between fadein and fadeout, or fadeto a given opacitiy.
callback $(“button”).click(function(){
&nbsp&nbsp$(“p”).hide(“slow”,function(){
&nbsp&nbsp&nbsp&nbsp alert(“The paragraph is now hidden”);
&nbsp&nbsp});
});
A callback function is executed after the current effect is 100% finished.

Manipulating Elements and Content

Method Usage Description
html() $(“p”).html(“Hello &ltb&gtworld&lt/b&gt!”); Can both read the current HTML inside an element and replace the current contents with some other HTML.
text() $(“p”).text(“Hello world!”); like .html but does not accept html tags. Useful for replacing text within a tag.

Modify HTML and CSS

Method Usage Description
addClass() $(“p”).addClass(“intro”); Adds classname to the selected elements
removeClass() $(“p”).removeClass(“intro”); Remove the class name from selected elements.
toggleClass() $(“p”).toggleClass(“intro”); Add the class if it doesn’t exist, remove the class if it does.
css() var bgcolor=$(“#main”).css(“background-color”)
$(“#body”).css(“font-size”, “200%”)
Sets or returns one or more style properties for the selected elements..
val() Var amount=$(“#quantity”).val(); Set and get the value of the field:.

Modify HTML

Method Usage Description
attr() $(“#banner” img).attr(“src”, “images/newImage.png”); Adds an attribute
removeAttr() $(“body”).removeAttr(“bgcolor”); Removes an attribute.

Traversing the DOM

Method Usage Description
next() $(this).next(‘.someclass’).fadeIn(); Finds the next sibling of the current selection. Has an optional selector parameter to limit it to the next sibling of a particular type.

Miscellaneous

Method Usage Description
each() $(“button”).click(function(){
$(“li”).each(function(){
alert($(this).text())
});
});
The each() method specifies a function to run for each matched element.
Show Button if element is not empty if(!$(‘input’).val()){
$(‘#button’).hide();
}
else {
$(‘#button’).show();
}
It shows and hides an element if the input is empty or not.

Some of the above taken from w3schools. For more go to: http://www.w3schools.com/Jquery/