1.How to add an html/element inside other element.
2.How to get 5th div element of N div elements.
3.Jquery Interface.
4.How to pass event as a paramter in jquery method.
5.Propagation,event Propagation,event bubbling & event capturing.
6.Event preventdefault, eventStopPropagation, eventStopImmediate propagation.
7.Search Engine Optimization -- Meta Tag
8.W3C - Web Languages (HTML5, CSS3)
9.CSS3 Elements lower version compatibility
10.HTML 4 and HTML 5 DOCTYPE
11.Get range of div elements from a collection and apply background color.
12.Sibling,descendant & Ancestor elements.
13.Jquery plugins.
14.Trigger and TriggerHandler
15.When and Then
16.complete& Success
17.Browser specific css alignment vary based on specific browser
18.How to apply background color background image with right bottom on single line

What is JQuery ?

jQuery is a fast and concise JavaScript Library created by John Resig in 2006 with a nice motto: Write less, do more.
jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
jQuery is a JavaScript toolkit designed to simplify various tasks by writing less code. Here is the list of important core features supported by jQuery:

DOM manipulation: The jQuery made it easy to select DOM elements, traverse them and modifying their content by using cross-browser open source selector engine called Sizzle.
Event handling: The jQuery offers an elegant way to capture a wide variety of events, such as a user clicking on a link, without the need to clutter the HTML code itself with event handlers.
AJAX Support: The jQuery helps you a lot to develop a responsive and feature-rich site using AJAX technology.
Animations: The jQuery comes with plenty of built-in animation effects which you can use in your websites.
Lightweight: The jQuery is very lightweight library - about 19KB in size ( Minified and gzipped ).
Cross Browser Support: The jQuery has cross-browser support, and works well in IE 6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+
Latest Technology: The jQuery supports CSS3 selectors and basic XPath syntax.

jQuery - Selectors

Following table lists down few basic selectors and explains them with examples.

Selector	Description
Name	Selects all elements which match with the given element Name.
#ID	Selects a single element which matches with the given ID
.Class	Selects all elements which match with the given Class.
Universal (*)	Selects all elements available in a DOM.
Multiple Elements E, F, G	Selects the combined results of all the specified selectors E, F or G.

$('*'): This selector selects all elements in the document.
$("p > *"): This selector selects all elements that are children of a paragraph element.
$("#specialID"): This selector function gets the element with id="specialID".
$(".specialClass"): This selector gets all the elements that have the class of specialClass.
$("li:not(.myclass)"): Selects all elements matched by <li> that do not have class="myclass".
$("a#specialID.specialClass"): This selector matches links with an id of specialID and a class of specialClass.
$("p a.specialClass"): This selector matches links with a class of specialClass declared within <p> elements.
$("ul li:first"): This selector gets only the first <li> element of the <ul>.
$("#container p"): Selects all elements matched by <p> that are descendants of an element that has an id of container.
$("li > ul"): Selects all elements matched by <ul> that are children of an element matched by <li>
$("strong + em"): Selects all elements matched by <em> that immediately follow a sibling element matched by <strong>.
$("p ~ ul"): Selects all elements matched by <ul> that follow a sibling element matched by <p>.
$("code, em, strong"): Selects all elements matched by <code> or <em> or <strong>.
$("p strong, .myclass"): Selects all elements matched by <strong> that are descendants of an element matched by <p> as well as all elements that have a class of myclass.
$(":empty"): Selects all elements that have no children.
$("p:empty"): Selects all elements matched by <p> that have no children.
$("div[p]"): Selects all elements matched by <div> that contain an element matched by <p>.
$("p[.myclass]"): Selects all elements matched by <p> that contain an element with a class of myclass.
$("a[@rel]"): Selects all elements matched by <a> that have a rel attribute.
$("input[@name=myname]"): Selects all elements matched by <input> that have a name value exactly equal to myname.
$("input[@name^=myname]"): Selects all elements matched by <input> that have a name value beginning with myname.
$("a[@rel$=self]"): Selects all elements matched by <a> that have rel attribute value ending with self
$("a[@href*=domain.com]"): Selects all elements matched by <a> that have an href value containing domain.com.
$("li:even"): Selects all elements matched by <li> that have an even index value.
$("tr:odd"): Selects all elements matched by <tr> that have an odd index value.
$("li:first"): Selects the first <li> element.
$("li:last"): Selects the last <li> element.
$("li:visible"): Selects all elements matched by <li> that are visible.
$("li:hidden"): Selects all elements matched by <li> that are hidden.
$(":radio"): Selects all radio buttons in the form.
$(":checked"): Selects all checked boxex in the form.
$(":input"): Selects only form elements (input, select, textarea, button).
$(":text"): Selects only text elements (input[type=text]).
$("li:eq(2)"): Selects the third <li> element
$("li:eq(4)"): Selects the fifth <li> element
$("li:lt(2)"): Selects all elements matched by <li> element before the third one; in other words, the first two <li> elements.
$("p:lt(3)"): selects all elements matched by <p> elements before the fourth one; in other words the first three <p> elements.
$("li:gt(1)"): Selects all elements matched by <li> after the second one.
$("p:gt(2)"): Selects all elements matched by <p> after the third one.
$("div/p"): Selects all elements matched by <p> that are children of an element matched by <div>.
$("div//code"): Selects all elements matched by <code>that are descendants of an element matched by <div>.
$("//p//a"): Selects all elements matched by <a> that are descendants of an element matched by <p>
$("li:first-child"): Selects all elements matched by <li> that are the first child of their parent.
$("li:last-child"): Selects all elements matched by <li> that are the last child of their parent.
$(":parent"): Selects all elements that are the parent of another element, including text.
$("li:contains(second)"): Selects all elements matched by <li> that contain the text second.

jQuery - DOM Attributes

Following table lists down few useful methods which you can use to manipulate attributes and properties:

Methods	Description
attr( properties )	Set a key/value object as properties to all matched elements.
attr( key, fn )	Set a single property to a computed value, on all matched elements.
removeAttr( name )	Remove an attribute from each of the matched elements.
hasClass( class )	Returns true if the specified class is present on at least one of the set of matched elements.
removeClass( class )	Removes all or the specified class(es) from the set of matched elements.
toggleClass( class )	Adds the specified class if it is not present, removes the specified class if it is present.
html( )	Get the html contents (innerHTML) of the first matched element.
html( val )	Set the html contents of every matched element.
text( )	Get the combined text contents of all matched elements.
text( val )	Set the text contents of all matched elements.
val( )	Get the input value of the first matched element.
val( val )	Set the value attribute of every matched element if it is called on <input> but if it is called on <select> with the passed <option> value then passed option would be selected, if it is called on check box or radio box then all the matching check box and radiobox would be checked.

Similar to above syntax and examples, following examples would give you understanding on using various attribute methods in different situation:

$("#myID").attr("custom") : This would return value of attribute custom for the first element matching with ID myID.
$("img").attr("alt", "Sample Image"): This sets the alt attribute of all the images to a new value "Sample Image".
$("input").attr({ value: "", title: "Please enter a value" }); : Sets the value of all <input> elements to the empty string, as well as sets the title to the string Please enter a value.
$("a[href^=http://]").attr("target","_blank"): Selects all links with an href attribute starting with http:// and set its target attribute to _blank
$("a").removeAttr("target") : This would remove target attribute of all the links.
$("form").submit(function() {$(":submit",this).attr("disabled", "disabled");}); : This would modify the disabled attribute to the value "disabled" while clicking Submit button.
$("p:last").hasClass("selected"): This return true if last <p> tag has associated classselected.
$("p").text(): Returns string that contains the combined text contents of all matched <p> elements.
$("p").text("<i>Hello World</i>"): This would set "<I>Hello World</I>" as text content of the matching <p> elements
$("p").html() : This returns the HTML content of the all matching paragraphs.
$("div").html("Hello World") : This would set the HTML content of all matching <div> to Hello World.
$("input:checkbox:checked").val() : Get the first value from a checked checkbox
$("input:radio[name=bar]:checked").val(): Get the first value from a set of radio buttons
$("button").val("Hello") : Sets the value attribute of every matched element <button>.
$("input").val("on") : This would check all the radio or check box button whose value is "on".
$("select").val("Orange") : This would select Orange option in a dropdown box with options Orange, Mango and Banana.

$("select").val("Orange", "Mango") : This would select Orange and Mango options in a dropdown box with options Orange, Mango and Banana.

jQuery - DOM Traversing

Following table lists down useful methods which you can use to filter out various elements from a list of DOM elements:

Selector	Description
eq( index )	Reduce the set of matched elements to a single element.
filter( selector )	Removes all elements from the set of matched elements that do not match the specified selector(s).
filter( fn )	Removes all elements from the set of matched elements that do not match the specified function.
is( selector )	Checks the current selection against an expression and returns true, if at least one element of the selection fits the given selector.
map( callback )	Translate a set of elements in the jQuery object into another set of values in a jQuery array (which may, or may not contain elements).
not( selector )	Removes elements matching the specified selector from the set of matched elements.
slice( start, [end] )	Selects a subset of the matched elements.

Following table lists down other useful methods which you can use to locate various elements in a DOM:

Selector	Description
add( selector )	Adds more elements, matched by the given selector, to the set of matched elements.
andSelf( )	Add the previous selection to the current selection.
children( [selector])	Get a set of elements containing all of the unique immediate children of each of the matched set of elements.
closest( selector )	Get a set of elements containing the closest parent element that matches the specified selector, the starting element included.
contents( )	Find all the child nodes inside the matched elements (including text nodes), or the content document, if the element is an iframe.
end( )	Revert the most recent 'destructive' operation, changing the set of matched elements to its previous state .
find( selector )	Searches for descendent elements that match the specified selectors.
next( [selector] )	Get a set of elements containing the unique next siblings of each of the given set of elements.
nextAll( [selector] )	Find all sibling elements after the current element.
offsetParent( )	Returns a jQuery collection with the positioned parent of the first matched element.
parent( [selector] )	Get the direct parent of an element. If called on a set of elements, parent returns a set of their unique direct parent elements.
parents( [selector] )	Get a set of elements containing the unique ancestors of the matched set of elements (except for the root element).
prev( [selector] )	Get a set of elements containing the unique previous siblings of each of the matched set of elements.
prevAll( [selector] )	Find all sibling elements in front of the current element.
siblings( [selector] )	Get a set of elements containing all of the unique siblings of each of the matched set of elements.

jQuery - CSS Methods

Following table lists down all the methods which you can use to play with CSS properties:

Method	Description
css( name )	Return a style property on the first matched element.
css( name, value )	Set a single style property to a value on all matched elements.
css( properties )	Set a key/value object as style properties to all matched elements.
height( val )	Set the CSS height of every matched element.
height( )	Get the current computed, pixel, height of the first matched element.
innerHeight( )	Gets the inner height (excludes the border and includes the padding) for the first matched element.
innerWidth( )	Gets the inner width (excludes the border and includes the padding) for the first matched element.
offset( )	Get the current offset of the first matched element, in pixels, relative to the document
offsetParent( )	Returns a jQuery collection with the positioned parent of the first matched element.
outerHeight( [margin] )	Gets the outer height (includes the border and padding by default) for the first matched element.
outerWidth( [margin] )	Get the outer width (includes the border and padding by default) for the first matched element.
position( )	Gets the top and left position of an element relative to its offset parent.
scrollLeft( val )	When a value is passed in, the scroll left offset is set to that value on all matched elements.
scrollLeft( )	Gets the scroll left offset of the first matched element.
scrollTop( val )	When a value is passed in, the scroll top offset is set to that value on all matched elements.
scrollTop( )	Gets the scroll top offset of the first matched element.
width( val )	Set the CSS width of every matched element.
width( )	Get the current computed, pixel, width of the first matched element.

jQuery - DOM Manipulation Methods

Following table lists down all the methods which you can use to manipulate DOM elements:

Method	Description
after( content )	Insert content after each of the matched elements.
append( content )	Append content to the inside of every matched element.
appendTo( selector )	Append all of the matched elements to another, specified, set of elements.
before( content )	Insert content before each of the matched elements.
clone( bool )	Clone matched DOM Elements, and all their event handlers, and select the clones.
clone( )	Clone matched DOM Elements and select the clones.
empty( )	Remove all child nodes from the set of matched elements.
html( val )	Set the html contents of every matched element.
html( )	Get the html contents (innerHTML) of the first matched element.
insertAfter( selector )	Insert all of the matched elements after another, specified, set of elements.
insertBefore( selector )	Insert all of the matched elements before another, specified, set of elements.
prepend( content )	Prepend content to the inside of every matched element.
prependTo( selector )	Prepend all of the matched elements to another, specified, set of elements.
remove( expr )	Removes all matched elements from the DOM.
replaceAll( selector )	Replaces the elements matched by the specified selector with the matched elements.
replaceWith( content )	Replaces all matched elements with the specified HTML or DOM elements.
text( val )	Set the text contents of all matched elements.
text( )	Get the combined text contents of all matched elements.
wrap( elem )	Wrap each matched element with the specified element.
wrap( html )	Wrap each matched element with the specified HTML content.
wrapAll( elem )	Wrap all the elements in the matched set into a single wrapper element.
wrapAll( html )	Wrap all the elements in the matched set into a single wrapper element.
wrapInner( elem )	Wrap the inner child contents of each matched element (including text nodes) with a DOM element.
wrapInner( html )	Wrap the inner child contents of each matched element (including text nodes) with an HTML structure.

jQuery - Events Handling

The following are cross platform and recommended event types which you can bind using JQuery:

Event Type	Description
blur	Occurs when the element loses focus
change	Occurs when the element changes
click	Occurs when a mouse click
dblclick	Occurs when a mouse double-click
error	Occurs when there is an error in loading or unloading etc.
focus	Occurs when the element gets focus
keydown	Occurs when key is pressed
keypress	Occurs when key is pressed and released
keyup	Occurs when key is released
load	Occurs when document is loaded
mousedown	Occurs when mouse button is pressed
mouseenter	Occurs when mouse enters in an element region
mouseleave	Occurs when mouse leaves an element region
mousemove	Occurs when mouse pointer moves
mouseout	Occurs when mouse pointer moves out of an element
mouseover	Occurs when mouse pointer moves over an element
mouseup	Occurs when mouse button is released
resize	Occurs when window is resized
scroll	Occurs when window is scrolled
select	Occurs when a text is selected
submit	Occurs when form is submitted
unload	Occurs when documents is unloaded

jQuery - AJAX

Following is the list of useful AJAX Methods:

Methods and Description
jQuery.ajax( options ) Load a remote page using an HTTP request.
jQuery.ajaxSetup( options ) Setup global settings for AJAX requests.
jQuery.get( url, [data], [callback], [type] ) Load a remote page using an HTTP GET request.
jQuery.getJSON( url, [data], [callback] ) Load JSON data using an HTTP GET request.
jQuery.getScript( url, [callback] ) Loads and executes a JavaScript file using an HTTP GET request.
jQuery.post( url, [data], [callback], [type] ) Load a remote page using an HTTP POST request.
load( url, [data], [callback] ) Load HTML from a remote file and inject it into the DOM.
serialize( ) Serializes a set of input elements into a string of data.
serializeArray( ) Serializes all forms and form elements like the .serialize() method but returns a JSON data structure for you to work with.

Based on different events/stages following methods are available:

Methods and Description
ajaxComplete( callback ) Attach a function to be executed whenever an AJAX request completes.
ajaxStart( callback ) Attach a function to be executed whenever an AJAX request begins and there is none already active.
ajaxError( callback ) Attach a function to be executed whenever an AJAX request fails.
ajaxSend( callback ) Attach a function to be executed before an AJAX request is sent.
ajaxStop( callback ) Attach a function to be executed whenever all AJAX requests have ended.
ajaxSuccess( callback ) Attach a function to be executed whenever an AJAX request completes successfully.

jQuery - Effects

Following table lists down all the important methods to create different kind of effects:

Methods and Description
animate( params, [duration, easing, callback] ) A function for making custom animations.
animate( params, options ) A function for making custom animations.
fadeIn( speed, [callback] ) Fade in all matched elements by adjusting their opacity and firing an optional callback after completion.
fadeOut( speed, [callback] ) Fade out all matched elements by adjusting their opacity to 0, then setting display to "none" and firing an optional callback after completion.
fadeTo( speed, opacity, callback ) Fade the opacity of all matched elements to a specified opacity and firing an optional callback after completion.
hide( ) Hides each of the set of matched elements if they are shown.
hide( speed, [callback] ) Hide all matched elements using a graceful animation and firing an optional callback after completion.
show( ) Displays each of the set of matched elements if they are hidden.
show( speed, [callback] ) Show all matched elements using a graceful animation and firing an optional callback after completion.
slideDown( speed, [callback] ) Reveal all matched elements by adjusting their height and firing an optional callback after completion.
slideToggle( speed, [callback] ) Toggle the visibility of all matched elements by adjusting their height and firing an optional callback after completion.
slideUp( speed, [callback] ) Hide all matched elements by adjusting their height and firing an optional callback after completion.
stop( [clearQueue, gotoEnd ]) Stops all the currently running animations on all the specified elements.
toggle( ) Toggle displaying each of the set of matched elements.
toggle( speed, [callback] ) Toggle displaying each of the set of matched elements using a graceful animation and firing an optional callback after completion.
toggle( switch ) Toggle displaying each of the set of matched elements based upon the switch (true shows all elements, false hides all elements).
jQuery.fx.off Globally disable all animations.

UI Library Based Effects:

To use these effects you would have to download jQuery UI Library jquery-ui-1.7.2.custom.min.js or latest version of this UI library from jQuery UI Library.
After extracting jquery-ui-1.7.2.custom.min.js file from the download, you would include this file in similar way as you include core jQuery Library file.

Methods and Description
Blind Blinds the element away or shows it by blinding it in.
Bounce Bounces the element vertically or horizontally n-times.
Clip Clips the element on or off, vertically or horizontally.
Drop Drops the element away or shows it by dropping it in.
Explode Explodes the element into multiple pieces.
Fold Folds the element like a piece of paper.
Highlight Highlights the background with a defined color.
Puff Scale and fade out animations create the puff effect.
Pulsate Pulsates the opacity of the element multiple times.
Scale Shrink or grow an element by a percentage factor.
Shake Shakes the element vertically or horizontally n-times.
Size Resize an element to a specified width and height.
Slide Slides the element out of the viewport.
Transfer Transfers the outline of an element to another.

Jquery Plugins ::

A plug-in is piece of code written in a standard JavaScript file. These files provide useful jQuery methods which can be used along with jQuery library methods.

There are plenty of jQuery plug-in available which you can download from repository link at http://jquery.com/plugins.

How to use Plugins:

To make a plug-in's methods available to us, we include plug-in file very similar to jQuery library file in the <head> of the document.
We must ensure that it appears after the main jQuery source file, and before our custom JavaScript code.
Following example shows how to include jquery.plug-in.js plugin:

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>

   <script src="jquery.plug-in.js" type="text/javascript">
   </script>

   <script src="custom.js" type="text/javascript"></script>

   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {

    .......your custom code.....

   });

   </script>
</head>
<body>

   .............................

</body>
</html>

How to develop a Plug-in

This is very simple to write your own plug-in. Following is the syntax to create a a method:

jQuery.fn.methodName = methodDefinition;

Here methodNameM is the name of new method and methodDefinition is actual method definition.
The guideline recommended by the jQuery team is as follows:

Any methods or functions you attach must have a semicolon (;) at the end.
Your method must return the jQuery object, unless explicity noted otherwise.
You should use this.each to iterate over the current set of matched elements - it produces clean and compatible code that way.
Prefix the filename with jquery, follow that with the name of the plugin and conclude with .js.
Always attach the plugin to jQuery directly instead of $, so users can use a custom alias via noConflict() method.

For example, if we write a plugin that we want to name debug, our JavaScript filename for this plugin is:

jquery.debug.js

The use of the jquery. prefix eliminates any possible name collisions with files intended for use with other libraries.

Example:

Following is a small plug-in to have warning method for debugging purpose. Keep this code in jquery.debug.js file:

jQuery.fn.warning = function() {
    return this.each(function() {
       alert('Tag Name:"' + $(this).attr("tagName") + '".');
    });
};

Here is the example showing usage of warning() method. Assuming we put jquery.debug.js file in /jquery subdirectory:

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script src="/jquery/jquery.debug.js" type="text/javascript">
   </script>

   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {
      
      $("div").warning();
      $("p").warning();

   });

   </script>
</head>
<body>

  <p>This is paragraph</p>
  <div>This is division</div>

</body>
</html>

This would produce following result:

Tag Name:"DIV"
Tag Name:"P"

Dynamically populate a select element from JSON data with jQuery

Sample JSON :::

{"person": [

  {

    "id": "1",

    "name": "Person1"

  },

  {

    "id": "2",

    "name": "Person2"

  },

  {

    "id": "3",

    "name": "Person3"

  }

]}

<html>

  <head>

    <script type="text/JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

  </head>

  <body>

    <select id="people"></select>

  </body>

  <script type="text/JavaScript">

    //get a reference to the select element

    var $select = $('#people');

    //request the JSON data and parse into the select element

    $.getJSON('person.JSON', function(data){

      //clear the current content of the select

      $select.html('');

      //iterate over the data and append a select option

      $.each(data.person, function(key, val){ 

        $select.append('<option id="' + val.id + '">' + val.name + '</option>');

      })

    });

  </script>

</html>

Web and Object Oriented Programming

Monday, 2 March 2015

Apache Url Rewrite

Wednesday, 11 February 2015

Jquery Interview Questions and answers