Explore topic-wise InterviewSolutions in .

This section includes InterviewSolutions, each offering curated multiple-choice questions to sharpen your knowledge and support exam preparation. Choose a topic below to get started.

101.

What Are The Fastest Selectors In Jquery?

Answer»

ID and ELEMENT SELECTORS are the FASTEST selectors

ID and element selectors are the fastest selectors
Discussion
102.

Jquery Uses Css Selectors And Xpath Expressions To Select Elements True Or False?

Answer»

True

True
Discussion
103.

What $("div.tutoriz") Will Select?

Answer»

All the DIV ELEMENT with tutoriz CLASS.

All the div element with tutoriz class.
Discussion
104.

Write A Basic Code For Add Jquery Library To Pages?

Answer»

Answer : <html> <head>
<script type="text/javascript" src="jquery.js"> </script>
<script type="text/javascript">
// You can write the code here
</script>
</head>
<body>
<a href="HTTP://www.tutoriz.com/"> Jquery INTERVIEW Questions and Answers</a>
</body>
</html>
Discussion
105.

What Scripting Language Is Jquery Written In?

Answer»

JavaScript

JavaScript
Discussion
106.

When J Query Founded And By Whom?

Answer»

It was RELEASED in JANUARY 2006 at BarCamp NYC by John Resig(JQUERY FOUNDER).

It was released in January 2006 at BarCamp NYC by John Resig(Jquery founder).
Discussion
107.

What Is The Struts2 Jquery Plugin And Its Advantages?

Answer»

The struts2 jquery plugin is used to:

  • It provides the user with an easy integration of ajax and widgets.
  • It reduces the number of code to be written by a coder.

For example: 

<div id="result">Result Div</div>
<s:url id="ajax" value="/ajax1.action"/>
<sj:a id="ajaxlink" href="%{ajax}" indicator="indicator" targets="result" effect="highlight">
Run AJAX Action
</sj:a>
<img id="indicator" src="images/indicator.gif" alt="LOADING..." style="DISPLAY:none"/>

The advantages of USING it are:

  • It reduces the number of code to be written dramatically.
  • It also supports ajax form validation.
  • The code becomes much easier to READ and HENCE prevents errors from occurring and is easy to debug.

 

The struts2 jquery plugin is used to:

For example: 

<div id="result">Result Div</div>
<s:url id="ajax" value="/ajax1.action"/>
<sj:a id="ajaxlink" href="%{ajax}" indicator="indicator" targets="result" effect="highlight">
Run AJAX Action
</sj:a>
<img id="indicator" src="images/indicator.gif" alt="Loading..." style="display:none"/>

The advantages of using it are:

 
Discussion
108.

Explain The Use Of The $.fn.bind And $.fn.trigger?

Answer»

Both the $.fn.bind and $.fn.triggers are two important jquery METHODS. They are primarily used with CUSTOM events.

  • $.fn.bind: This method accepts an event type and an event handling FUNCTION as an argument for itself. This method can also accept event-related data as a second argument.
  • $.fn.trigger: This method can accept an event type as an argument. It can also take an array of values.

Example: depicting the usage of $.fn.bind and $.fn.triggers using custom data in both the cases:

$(DOCUMENT).bind('myCustomEvent',{foo:'bar'}, function(e, arg1, ARG2) { console.log(e.data.foo); // 'bar' console.log(arg1); // 'bim' console.log(arg2); // 'baz' }); $(document).trigger('myCustomEvent',['bim','baz']);

Both the $.fn.bind and $.fn.triggers are two important jquery methods. They are primarily used with custom events.

Example: depicting the usage of $.fn.bind and $.fn.triggers using custom data in both the cases:
Discussion
109.

Write The Code To Define A Requirejs Module With Its Dependencies?

Answer»

The RequireJS is a DEPENDENCY management tool that can be used by the USER to manage script modules. It can be used to load scripts once a PAGE has been loaded. This helps in EVENLY distributing the DOWNLOADS.

For example: RequireJS module with dependencies defined:

require.def("my/shirt",
["my/cart", "my/inventory"],
function(cart, inventory) {
//return an object to define the "my/shirt" module.
return {
color: "blue",
size: "large"
addToCart: function() {
inventory.decrement(this);
cart.add(this);
}
}
}
);

In the above example the my.shirt module is created. This module depends on the my/cart and my/inventory.

The RequireJS is a dependency management tool that can be used by the user to manage script modules. It can be used to load scripts once a page has been loaded. This helps in evenly distributing the downloads.

For example: RequireJS module with dependencies defined:

In the above example the my.shirt module is created. This module depends on the my/cart and my/inventory.
Discussion
110.

Write A Code For The Implementation Of A Module Pattern?

Answer»

The OBJECT literal does not provide any privacy for the methods or properties. The module PATTERN allows the user to offer privacy to functions and variables. It can be USED to SET to expose limited API.

For example: The module pattern code:

var FEATURE =(function() { var privateThing = 'secret', publicThing = 'not secret', changePrivateThing = function() { privateThing = 'super secret'; }, sayPrivateThing = function() { console.log(privateThing); changePrivateThing(); }; return { publicThing : publicThing, sayPrivateThing : sayPrivateThing } })(); feature.publicThing; // 'not secret' feature.sayPrivateThing();

The object literal does not provide any privacy for the methods or properties. The module pattern allows the user to offer privacy to functions and variables. It can be used to set to expose limited API.

For example: The module pattern code:
Discussion
111.

How Can Related Code Be Encapsulated? Give Example?

Answer»

The object literal is one of the SIMPLEST ways that the user can encapsulate related code together. It helps by removing any anonymous FUNCTIONS from the USERS code. It can also be used to CENTRALIZE CONFIGURATION options.

For example:

An object literal being implemented var myFeature={ myProperty : 'hello', myMethod : function() { console.log(myFeature.myProperty); }, init : function(settings) { m2yFeature.settings = settings; }, readSettings : function() { console.log(myFeature.settings); } }; myFeature.myProperty; // 'hello' myFeature.myMethod(); // logs 'hello' myFeature.init({ foo : 'bar' }); myFeature.readSettings(); // logs { foo :'bar' }

The object literal is one of the simplest ways that the user can encapsulate related code together. It helps by removing any anonymous functions from the users code. It can also be used to centralize configuration options.

For example:
Discussion
112.

Explain Some Of The Key Concepts Of Good Code Organization Patterns?

Answer»

Some of the KEY concepts that should be followed while

  • The codes should ALWAYS be divided into specific UNITS of functionality. They can be divided into modules , services etc. This concept is also known as encapsulation.
  • Use inheritance TECHNIQUES to avoid rewriting a code again and again.
  • The jquery is dom centric in nature but not all applications are such in nature. All funtionalities should not have a dom representation.
  • All the units of functionality should be existing in a loosely coupled state. This IMPLIES that a module can exist independently. Also the communication between the units should be possible and should be handled using a messaging system for example custom events.

Some of the key concepts that should be followed while
Discussion
113.

How Is The Deferred Method In Jquery Important In Relation To Animate Method?

Answer»

The .animate() method is used to CREATE animations with other shorthands using it. The queue() method can be used to link TOGETHER multiple animation METHODS to create an unique effect. These methods are effective when all the data is available locally and all the methods are executed on as single system only. In case the user wants to use the animation methods on a data that resides on the server and wants to handle at a single go the user can make used of the .deferred method.

For example:

var my$ = $.sub(); my$.fn.animate=function(props,SPEED,easing,callback){
var options=speed && typeof speed==="object"?
jQuery.extend({}, speed) : {
complete: callback || !callback && easing ||
jQuery.isFunction( speed ) && speed,
duration: speed,
easing: callback && easing || easing &&
!jQuery.isFunction(easing) && easing
};
var dfd = my$.Deferred(),
complete = options.complete,
count = this.length;
options.complete = function() {
complete && complete.call( this );
if ( !--count ) {
dfd.resolve();
}
};

The .animate() method is used to create animations with other shorthands using it. The queue() method can be used to link together multiple animation methods to create an unique effect. These methods are effective when all the data is available locally and all the methods are executed on as single system only. In case the user wants to use the animation methods on a data that resides on the server and wants to handle at a single go the user can make used of the .deferred method.

For example:
Discussion
114.

Explain The Use Of The .pushstack() Method?

Answer»

The pushStack() method works by ACCEPTING an array of DOM elements and pushes them into a stack. This is done so that call to methods like .end() and .andSelf are able to behave correctly. The jquery internally uses this method to keep TRACK of all the previous COLLECTIONS of jquery while using a chain traversing method. Good examples of such methods COULD be .parents() and .filter().

For example:

// select some divs
$('div.container')
// find some spans INSIDE those divs and add a class to them
.find('span').addClass('baby')
// pop those spans off the "stack",
// returning to the previous collection (div.container)
.end()
// add a class to the parent of each div.container
.parent().addClass('daddy');

The pushStack() method works by accepting an array of DOM elements and pushes them into a stack. This is done so that call to methods like .end() and .andSelf are able to behave correctly. The jquery internally uses this method to keep track of all the previous collections of jquery while using a chain traversing method. Good examples of such methods could be .parents() and .filter().

For example:

// select some divs
$('div.container')
// find some spans inside those divs and add a class to them
.find('span').addClass('baby')
// pop those spans off the "stack",
// returning to the previous collection (div.container)
.end()
// add a class to the parent of each div.container
.parent().addClass('daddy');
Discussion
115.

Create A Plugin That Would Add And Remove A Class On Hover?

Answer»

The plugin can be considered to be simply a new method that can be used by a user to extend the prototype object of a jquery. A plugin performs some ACTIONS on a COLLECTION of elements. Each method that comes with the jquery core can be considered to be a plugin.

The code for CREATING a plugin that would add and remove a CLASS on hover would be as follows:

(function($){ $.fn.hoverClass = function(c) { return this.hover( function() { $(this).toggleClass(c); } ); }; })(jQuery); // using the plugin $('li').hoverClass('hover');

The plugin can be considered to be simply a new method that can be used by a user to extend the prototype object of a jquery. A plugin performs some actions on a collection of elements. Each method that comes with the jquery core can be considered to be a plugin.

The code for creating a plugin that would add and remove a class on hover would be as follows:
Discussion
116.

Explain The Common Methods Of Sending A Request To A Server?

Answer»

The two most common methods of sending a request to a server are :

  1. GET
  2. POST

GET method: The get method is mostly used for non destructive operations. These operations get data from the server and does not change the data on it. A good example of the application of the SEARCH query to a server. In most of the cases GET will send all of the data to be sent in the form of a query string.

POST method: The POST method is primarily used for destructive operations. These operations can change the data on a server. A good example is a user saving an entry on a SITE will get the POST request. These requests are not CACHED by the browser. A query can be a part of a url but any data that is to be sent is done separately as post data.

The two most common methods of sending a request to a server are :

GET method: The get method is mostly used for non destructive operations. These operations get data from the server and does not change the data on it. A good example of the application of the search query to a server. In most of the cases GET will send all of the data to be sent in the form of a query string.

POST method: The POST method is primarily used for destructive operations. These operations can change the data on a server. A good example is a user saving an entry on a site will get the POST request. These requests are not cached by the browser. A query can be a part of a url but any data that is to be sent is done separately as post data.
Discussion
117.

How Does Jquery Store Data Related To An Element?

Answer»

In plain java scripts the information about an element can be stored by adding a domain object model property to the element. This results in memory leak PROBLEMS in certain BROWSERS. In jquery the user does not has to worry about memory management issues.

For example: storing and retrieving data related to an element:

$('#myDiv').data('keyName', { foo : 'bar' }); $('#myDiv').data('keyName'); // { foo : 'bar' }

Jquery allows the user to STORE any kind of information on an element. The $.fn.data is used the most to store data related to an element.

For ex. storing of relationship between ELEMENTS with the use of $.fn.data :

$('#myList li').each(function() { var $li = $(this), $div = $li.find('div.content'); $li.data('contentDiv', $div); }); // LATER, the user is not required to look for the div again; // the data can simply be read from the list items data; var $firstLi = $('#myList li:first'); $firstLi.data('contentDiv').html('new content');

In plain java scripts the information about an element can be stored by adding a domain object model property to the element. This results in memory leak problems in certain browsers. In jquery the user does not has to worry about memory management issues.

For example: storing and retrieving data related to an element:

Jquery allows the user to store any kind of information on an element. The $.fn.data is used the most to store data related to an element.

For ex. storing of relationship between elements with the use of $.fn.data :
Discussion
118.

What Are The Approaches Of Extracting A Query String With Regular Expressions?

Answer»

There are two approaches of doing so:

String based approach: This is the simple way of extracting the information of a query string using the string-based replacement technique. This method makes use of the .replace() method to function.

For example: var data = string.replace("http://localhost/view.php?", "");

The above code works fine for the string based approach but has some flexibility ISSUES. It cannot deal effectively with DOMAIN name and file name changes.

Regular expression approach: They are a powerful pattern matching tool available in modern PROGRAMMING LANGUAGES.

For the extraction of a query string a pattern would have to be used which LOOKS for a question mark in the string. Once it does it returns everything after it. The regular expression in JS are delimited using the forward slashes at the end of an expression.

There are two approaches of doing so:

String based approach: This is the simple way of extracting the information of a query string using the string-based replacement technique. This method makes use of the .replace() method to function.

For example: var data = string.replace("http://localhost/view.php?", "");

The above code works fine for the string based approach but has some flexibility issues. It cannot deal effectively with domain name and file name changes.

Regular expression approach: They are a powerful pattern matching tool available in modern programming languages.

For the extraction of a query string a pattern would have to be used which looks for a question mark in the string. Once it does it returns everything after it. The regular expression in JS are delimited using the forward slashes at the end of an expression.
Discussion
119.

Why Is The Block Display Style Used For Animations?

Answer»

In html only the block LEVEL elements can have custom HEIGHTS and widths. So when a user defines an animation method for usage such as show, hide, slide up etc the display css property of the block being animated is set to display block style. On completion of the animation the display style of the block would be CHANGED to its original value. This procedure does not work properly for inline elements and the following workarounds can be applied to it:

  • If the user wants the element to remain inline and only want to ANIMATE it in and out he can use the fadein and fadeout animation instead of using the show method.
  • The user can also use a block level element with float to MAKE the element appear inline with the rest of the content around it.

In html only the block level elements can have custom heights and widths. So when a user defines an animation method for usage such as show, hide, slide up etc the display css property of the block being animated is set to display block style. On completion of the animation the display style of the block would be changed to its original value. This procedure does not work properly for inline elements and the following workarounds can be applied to it:
Discussion
120.

How Can An Element Be Checked If It Contains A Specific Class?

Answer»

The hasClass method DEFINED can be used to check if an ELEMENT actually contains the specified class.

For example: usage of the hasClass:

$("div").click(function(){
if ( $(this).hasClass("PROTECTED") )
$(this)
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: 0 });
});

The is() method can also be used with a SELECTOR for a more advanced level of matching.

For example:

if ( $('#myDiv').is('.pretty.awesome') ) $('#myDiv').show();

This method can be used to test various other things, such as it could be used to detect if the specified element is hidden or not.

The hasClass method defined can be used to check if an element actually contains the specified class.

For example: usage of the hasClass:

The is() method can also be used with a selector for a more advanced level of matching.

For example:

This method can be used to test various other things, such as it could be used to detect if the specified element is hidden or not.
Discussion
121.

How Can Events Be Prevented From Stopping To Work After An Ajax Request?

Answer»

There are two ways to handle this ISSUE:

Use of event delegation: The event delegation technique works on principle by exploiting the event bubbling. It uses event bubbling to capture the events on elements which are present anywhere in the domain object model. In jquery the user can make use of the live and die methods for the events delegation which contains a subset of event types.

For example: handling event delegation, handling of CLICKS on any element:

$('#mydiv').click(function(e){ if( $(e.target).is('a') )
fn.call(e.target,e); }); $('#mydiv').load('my.html')

Event rebinding usage: When this method is USED it requires the user to call the BIND method and the added NEW elements.

For example:

$('a').click(fn); $('#mydiv').load('my.html' ,function(){
$('#mydiv a').click(fn); });

There are two ways to handle this issue:

Use of event delegation: The event delegation technique works on principle by exploiting the event bubbling. It uses event bubbling to capture the events on elements which are present anywhere in the domain object model. In jquery the user can make use of the live and die methods for the events delegation which contains a subset of event types.

For example: handling event delegation, handling of clicks on any element:

Event rebinding usage: When this method is used it requires the user to call the bind method and the added new elements.

For example:
Discussion
122.

What Are The Guidelines For An Application To Follow The Principles Of Progressive Enhancement?

Answer»

Progressive enhancement is web development technique that would allow the application to be accessible to any COMPUTER with any Internet connection. For an application to work on the PRINCIPLES of progressive enhancement the following rules / GUIDELINES must be met:

  • The basic content must be available to all browsers with any type of Internet connections.
  • The basic functionalities of an application must be working in all browsers.
  • The application will not override any of the user specified browser settings.
  • The css files are linked externally to CONTROL the look and FEEL of the page.
  • The javascripts should also be externally linked as it can enhance the user experience.

Progressive enhancement is web development technique that would allow the application to be accessible to any computer with any Internet connection. For an application to work on the principles of progressive enhancement the following rules / guidelines must be met:
Discussion
123.

What Are The Various Ajax Functions ?

Answer»

Ajax allows the user to exchange data with a server and update parts of a page without reloading the ENTIRE page. Some of the functions of ajax are as follows:

  • $.ajax(): This is considered to be the most low level and basic of functions. It is USED to SEND requests . This function can be performed without a selector.
  • $.ajaxSetup(): This function is used to define and set the options for various ajax calls.

For example:

$.ajaxSetup({
"type":"POST",
"url":"ajax.php",
"success":function(data){
$("#bar")
.CSS("background","yellow")
.html(data);
}
});
  • SHORTHAND ajax methods: They comprise of simply the wrapper function that call $.ajax() with certain parameters already set.
  • $.getJSON(): this is a special type of shorthand function which is used to accept the url to which the requests are sent. Also optional data and optional callback functions are possible in such functions.

Ajax allows the user to exchange data with a server and update parts of a page without reloading the entire page. Some of the functions of ajax are as follows:

For example:
Discussion
124.

How Can Images Be Made To Appear Scrolling One Over Another?

Answer»

Jquery provides the user with the ability to change the attributes of a property DYNAMICALLY. The jquery slide method can be used to change the height of ELEMENTS gradually. This can be used to give the scroll effect of an image over image.

The jquery comprises of the following slide METHODS:

  • $(selector).slideDown(speed,callback)
  • $(selector).slideUp(speed,callback)
  • $(selector).slideToggle(speed,callback)

The speed parameter is used to effect the speed of change of the jquery. The parameters for it can be slow, FAST , NORMAL and time in milliseconds. The parameter of callback is used to refer to the name of the function to be executed once the completion of function occurs.

Jquery provides the user with the ability to change the attributes of a property dynamically. The jquery slide method can be used to change the height of elements gradually. This can be used to give the scroll effect of an image over image.

The jquery comprises of the following slide methods:

The speed parameter is used to effect the speed of change of the jquery. The parameters for it can be slow, fast , normal and time in milliseconds. The parameter of callback is used to refer to the name of the function to be executed once the completion of function occurs.
Discussion
125.

What Are The Types Of Selectors That Are Used In Jquery? Give Examples?

Answer»

Jquery enables the user to select specifically the element that is to be effected. jquery allows the user to select in the following WAYS:

jquery element selectors: with the use of CSS selectors the users can select the elements of an HTML document.

For example:

$("p") will select all the <p> elements.
$("p.intro") will select all <p> elements with class="intro" defined in them.
$("p#demo") this will select all <p> elements with id="demo".

jquery attribute selectors: the xpath expressions are USED by jquery to select elements of an html document with defined attributes.

For example:

$("[href]") is used to select all elements which have an href attribute.
$("[href$='.jpg']") can select all elements with an href attribute which will end with ".jpg".

Jquery enables the user to select specifically the element that is to be effected. jquery allows the user to select in the following ways:

jquery element selectors: with the use of css selectors the users can select the elements of an html document.

For example:

$("p") will select all the <p> elements.
$("p.intro") will select all <p> elements with class="intro" defined in them.
$("p#demo") this will select all <p> elements with id="demo".

jquery attribute selectors: the xpath expressions are used by jquery to select elements of an html document with defined attributes.

For example:

$("[href]") is used to select all elements which have an href attribute.
$("[href$='.jpg']") can select all elements with an href attribute which will end with ".jpg".
Discussion
126.

How Can Jquery Library Be Added To Pages? Write A Basic Jquery Code?

Answer»

The JQUERY library is a COLLECTION of all the jquery methods. It is stored in the form of a single java script FILE. The format of adding a jquery file to an html PAGE is:

<head>
<script type=”text/javascript” src”jquery.js”></script>
</head>

An example of a javascript that will hide all the <p> elements in the page.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(DOCUMENT).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

The jquery library is a collection of all the jquery methods. It is stored in the form of a single java script file. The format of adding a jquery file to an html page is:

<head>
<script type=”text/javascript” src”jquery.js”></script>
</head>

An example of a javascript that will hide all the <p> elements in the page.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
Discussion
127.

When Can You Use Jquery?

Answer»

jQuery can be used to developing ajax based applications It can be used to keep the code simple, concise and reusable.

It simplifies the process of traversal of HTML DOM TREE.

It can also HANDLE events, perform animation, and add the ajax support in WEB applications.

jQuery can be used to developing ajax based applications It can be used to keep the code simple, concise and reusable.

It simplifies the process of traversal of HTML DOM tree.

It can also handle events, perform animation, and add the ajax support in web applications.
Discussion
128.

Explain How Jquery Works?

Answer»

<html&GT;

<head>
<script TYPE="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// You can write the CODE here 
</script>
</head>
<body>
<a href="HTTP://careerride.com/">CareerRide</a>
</body>
</html>

<html>

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// You can write the code here 
</script>
</head>
<body>
<a href="http://careerride.com/">CareerRide</a>
</body>
</html>
Discussion
129.

Why Is Jquery Better Than Javascript?

Answer»
  • JQUERY is great library for DEVELOPING ajax based APPLICATION.
  • It helps the programmers to KEEP code simple and concise and reusable.
  • jQuery library simplifies the process of traversal of HTML DOM tree.
  • jQuery can also handle events, perform animation, and ADD the ajax support in web applications.
Discussion
130.

Explain The Concepts Of "$ Function" In Jquery With An Example?

Answer»

The TYPE of a function is "function".

There are a lot of anonymous FUNCTIONS in jquery.

$(DOCUMENT).ready(function() {});
$("a").click(function() {});
$.ajax({
url: "someurl.php",
SUCCESS: function() {}
});

The type of a function is "function".

There are a lot of anonymous functions in jquery.
Discussion
131.

Explain The Features Of Jquery?

Answer»

Features of jQuery are :

  • Effects and animations
  • Ajax • EXTENSIBILITY
  • DOM element SELECTIONS functions
  • Events • CSS manipulation
  • Utilities - such as browser VERSION and the each function.
  • JAVASCRIPT Plugins • DOM traversal and modification.

Features of jQuery are :
Discussion
132.

Advantages Of Jquery?

Answer»

The advantages of USING jQuery are:

  • JavaScript ENHANCEMENT without the overhead of learning new syntax
  • Ability to KEEP the code SIMPLE, clear, readable and reusable
  • Eradication of the requirement of writing repetitious and complex LOOPS and DOM scripting library calls

The advantages of using jQuery are:
Discussion
133.

What Is Resize() Function In Jquery?

Answer»

The resize() FUNCTION is called WHENEVER the browser size is changed. This event can be only USED with $(window).

Syntax: .resize([event_data], handler(event_object))

  • The “event_data” is the data to be sent to the handler.
  • The “handler(event_object)” is a function to be called each time when the window is resized.

For EXAMPLE

$(window).resize(function() {
$('#message).text('window is resized to'+$(window).width()+
‘x’ + $(window).height());
});

The resize() function is called whenever the browser size is changed. This event can be only used with $(window).

Syntax: .resize([event_data], handler(event_object))

For example
Discussion
134.

How To Always Reference Latest Version Of Jquery?

Answer»

When you REFERENCE the jQuery on your web page, you have to specify the version number also.

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js”> </script>

Above code will always load the 1.5.1 version of jQuery. If you reference the latest jQuery then you don’t need to change the code EVERY TIME the new version of jQuery is RELEASED.

To ACHIEVE this you have to use following code

<script type=”text/javascript” src=”http://code.jquery.com/jquery-latest.min.js”> </script>

This code will always reference the latest version of jQuery in your page.

When you reference the jQuery on your web page, you have to specify the version number also.

Above code will always load the 1.5.1 version of jQuery. If you reference the latest jQuery then you don’t need to change the code every time the new version of jQuery is released.

To achieve this you have to use following code

This code will always reference the latest version of jQuery in your page.
Discussion
135.

What Is Difference Between Prop And Attr?

Answer»
  • In jQuery both prop() and attr() function is used to set/get the value of specified property of an ELEMENT.
  • The DIFFERENCE in both the functions is that attr() returns the DEFAULT value of the property while the prop() returns the current value of the property.

For EXAMPLE

<input value="My Value" type="text" />

$('input').prop('value', 'Changed Value');

  • .attr('value') will return 'My Value'
  • .prop('value') will return 'Changed Value'

For example

<input value="My Value" type="text" />

$('input').prop('value', 'Changed Value');
Discussion
136.

What Is Difference Between Sorting String Array And Sorting Numerical Array In Jquery?

Answer»

The sort method is used to sort any array elements. It sorts the string elements ALPHABETICALLY.

For example

$(document).READY(FUNCTION(){ var mylist = [ “APPLE”,”Orange”,”BANANA”]; mylist = mylist.sort(); $(“#mydiv”).html(list.join(“”)); });

It will give following output

Apple
Banana
Orange

Now we declare a numerical array and use sort() method to sort its elements.

$(document).ready(function(){ var mylist = [ “20”,”3””100”,”50”]; mylist = mylist.sort(); $(“#mydiv”).html(list.join(“”)); });

It will give following output

100
20
3
50

The sort method is used to sort any array elements. It sorts the string elements alphabetically.

For example

It will give following output

Apple
Banana
Orange

Now we declare a numerical array and use sort() method to sort its elements.

It will give following output

100
20
3
50
Discussion
137.

What Is Chaining In Jquery?

Answer»
  • Chaining is very POWERFUL feature of jQuery.
  • Chaining means specifying multiple FUNCTION and/or selectors to an element.
  • Examine the below example
$(DOCUMENT).ready(function(){ $('#mydiv').CSS('color', 'blue'); $('#mydiv').addClass('myclass'); $('#mydiv').fadeIn('fast'); }

By using chaining we can write above code as follows

$(document).ready(function(){ $('#mydiv').css('color','blue').addClass('myclass').fadeIn('fast'); });
  • Advantage of chaining is that it makes your code simple and simple to manage.
  • The execution becomes faster because the code search for the element only once.

 

By using chaining we can write above code as follows

 
Discussion
138.

Is Window.onload Is Different From Document.ready()?

Answer»
  • The window.onload() is Java script function and document.ready() is jQuery event which are called when page is loaded.
  • The difference is that document.ready() is called after the DOM is loaded without waiting for all the CONTENTS to GET loaded. While window.onload() function WAITS until the contents of page is loaded.
  • Suppose there is very large image on a page, at that time window.onload() will wait until that image is loaded TOTALLY.
  • So while USING the window.onlaod() function the execution will be slow, but the document.ready() will not wait until the image is loaded.
Discussion
139.

How To Read, Write And Delete Cookies In Jquery?

Answer»
  • To deal with cookies in JQUERY we have to USE the Dough cookie PLUGIN.
  • Dough is easy to use and having powerful features.
  • Create cookie
$.dough("cookie_name", "cookie_value");
Read Cookie
$.dough("cookie_name");
DELETE cookie
$.dough("cookie_name", "remove");
Discussion
140.

Explain .empty() Vs .remove() Vs .detach()?

Answer»
  • .empty() METHOD is used to remove all the child elements from MATCHED elements.
  • .remove() method is used to remove all the matched element. This method will remove all the jQuery data associated with the matched element.
  • .detach() method is same as .remove() method except that the .detach() method doesn’t remove jQuery data associated with the matched elements.
  • .remove() is FASTER than .empty() or .detach() method.

Syntax:

$(SELECTOR).empty(); $(selector).remove(); $(selector).detach();

Syntax:
Discussion
141.

What Is Jquery.holdready() Function?

Answer»
  • By using JQUERY.holdReady() function we can hold or release the execution of jQuery’s READY event.
  • This method should be call before we run ready event.
  • To delay the ready event, we have to call jQuery.holdReady(true);
  • When we want to release the ready event then we have to call jQuery.holdReady(FALSE);
  • This function is helpful when we want to load any jQuery plugins before the execution of ready event.

For EXAMPLE

$.holdReady(true);
$.getScript("xyzplugin.js", function() {
$.holdReady(false);
});

 

For example

 
Discussion
142.

What Is The Use Of Param() Method?

Answer»
  • The param() method is used to represent an ARRAY or an object in serialize manner.
  • While making an ajax request we can USE these serialize values in the QUERY STRINGS of URL.
  • SYNTAX: $.param(object | array, boolValue) • “object | array” specifies an array or an object to be serialized.
  • “boolValue” specifies whether to use the traditional style of param serialization or not.
  • For example:
personObj=new Object();
empObject.name="Arpit";
empObject.age="24";
empObject.dept=”IT”;
$("#clickme").click(function(){
$("span").text($.param(empObject));
});

It will set the text of span to “name=Arpit&age=24&dep=IT”

It will set the text of span to “name=Arpit&age=24&dep=IT”
Discussion
143.

What Is Difference Between $(this) And 'this' In Jquery?

Answer»

Refer the FOLLOWING EXAMPLE

$(document).ready(FUNCTION(){ $(‘#clickme’).CLICK(function(){ alert($(this).text()); alert(this.innerText); }); });
  • this and $(this) references the same element but the difference is that “this” is used in traditional way but when “this” is used with $() then it becomes a jQuery object on which we can use the functions of jQuery.
  • In the example given, when only “this” keyword is used then we can use the jQuery text() function to get the text of the element, because it is not jQuery object. Once the “this” keyword is wrapped in $() then we can use the jQuery function text() to get the text of the element.

Refer the following example
Discussion
144.

Explain Slidetoggle() Effect?

Answer»

slideToggle() effect is used to give animated sliding effect to an element. 

Syntax:

slideToggle([ DURATION] [, easing] [, callback])

  • “duration” is the NUMBER specifying how long the animation will run.
  • “easing” is the string which specify the FUNCTION for the transition.
  • “callback” is the function which we want to run once the animation is complete.
  • If the element is visible then this effect will slide the element up side and make it completely hidden. If the element is hidden then slideToggle() effect will slide it down side and make it visible.
  • We can specify the toggle speed with this effect.

For example

$("#clickme").CLICK(function(){
$("#mydiv").slideToggle(“slow”, function(){
//run after the animation is complete.
});
});

slideToggle() effect is used to give animated sliding effect to an element. 

Syntax:

slideToggle([ duration] [, easing] [, callback])

For example
Discussion
145.

Explain The Each() Function?

Answer»

The each() function specify the function to be called for every matched element.

SYNTAX:

$(SELECTOR).each(function (index, element))

  • “index” is the index POSITION of the selector.
  • “selector” SPECIFIES the current selector where we can use “this” selector also.
  • In the CASE when we need to stop the each loop early then we can use “return false;”

For example

$("#clickme").click(function(){
$("li").each(function(){
document.write($(this).text())
});
});

This will write the text for each “li” element.

The each() function specify the function to be called for every matched element.

Syntax:

$(selector).each(function (index, element))

For example

This will write the text for each “li” element.
Discussion
146.

Explain Bind() Vs Live() Vs Delegate() Methods?

Answer»
  • The bind() method will not attach events to those elements which are added after DOM is LOADED while live() and delegate() methods attach events to the FUTURE elements also.
  • The difference between live() and delegate() methods is live() function will not work in chaining. It will work only on an selector or an element while delegate() method can work in chaining.

For example

$(document).ready(function(){ $("#myTable").find("TR").live("click",function(){ alert($(this).text()); }); });

Above code will not work USING live() method. But using delegate() method we can accomplish this.

$(document).ready(function(){ $("#dvContainer")children("table") .delegate("tr","click",function(){ alert($(this).text()); }); });

 

For example

Above code will not work using live() method. But using delegate() method we can accomplish this.

 
Discussion
147.

What Is The Use Of Jquery.data()?

Answer»
  • jQuery.data() is used to set/return arbitrary data to/from an element.
  • SYNTAX: jQuery.data(element, key, value)
  • “element” is the DOM element to which the data is associated.
  • “key” is an arbitrary name of the piece of data.
  • “value” is value of the specified key.
  • Suppose we WANT to set the data for a span element:

jQuery.data(span, “item”, { val1: 10, val2: "myitem" });

If we want to RETRIEVE the data related to div element and set it to label’s data:

$("label:val1").TEXT(jQuery.data(div, "item").val1);
$("label:val2").text(jQuery.data(div, "item").val2);

jQuery.data(span, “item”, { val1: 10, val2: "myitem" });

If we want to retrieve the data related to div element and set it to label’s data:

$("label:val1").text(jQuery.data(div, "item").val1);
$("label:val2").text(jQuery.data(div, "item").val2);
Discussion
148.

Explain Width() Vs Css('width')?

Answer»
  • In jQuery, there are two ways to change the width of an ELEMENT.
  • One way is using .css(‘width’) and other way is using .width().

    • For example

    $(‘#mydiv’).css(‘width’,’300px’); $(‘#mydiv’).width(100);
  • The difference in .css(‘width’) and .width() is the data TYPE of value we SPECIFY or return from the both functions.
  • In .css(‘width’) we have to add “px” in the width value while in .width() we don’t have to add.
  • When you WANT to GET the width of “mydiv” element then .css(‘width’) will return ‘300px’ while .width() will return only integer value 300.

For example
Discussion
149.

What Is .siblings() Method In Jquery?

Answer»

<UL>

  • When we WANT to fetch siblings of EVERY elements in the set of matched elements then we can use siblings() method.
  • We filter the elements fetched by an optional selector. • Syntax : .siblings( [selector])
  • “selector” is the selector expression which specify the matched elements.

    • For example

     &LT;ul> 

    <li>item 1</li>

    <li id="&rdquo;second_item&rdquo;">item 2</li>

    <li CLASS="&rdquo;myitem&rdquo;">item 3</li>

    <li class="&rdquo;myitem&rdquo;">item 4</li>

    </ul>

    Now we want to find the siblings of the element of id “second_item” and change the text color to Blue :

    $(‘li.second_item’).siblings().css(‘color’,’blue’);

    If we want specific sibling elements for example the elements having class “myitem” then we can pass a optional selector:

    $(‘li.second_item’).siblings(‘.myitem’).css(‘color’,’blue’);

    For example

     <ul> 

    <li>item 1</li>

    <li id="&rdquo;second_item&rdquo;">item 2</li>

    <li class="&rdquo;myitem&rdquo;">item 3</li>

    <li class="&rdquo;myitem&rdquo;">item 4</li>

    </ul>

    Now we want to find the siblings of the element of id “second_item” and change the text color to Blue :

    $(‘li.second_item’).siblings().css(‘color’,’blue’);

    If we want specific sibling elements for example the elements having class “myitem” then we can pass a optional selector:

    $(‘li.second_item’).siblings(‘.myitem’).css(‘color’,’blue’);
    Discussion
    150.

    Explain The Animate Function?

    Answer»

    The animate function is used to apply the custom animation effect to elements.

    Syntax:

    $(selector).animate({params}, [duration], [easing], [callback])

    • “PARAM” defines the CSS properties on which you want to apply the animation.
    • “duration” SPECIFY how long the animation will run. It can be ONE of following values : “slow”, “fast”, “normal” or milliseconds
    • “easing” is the STRING which specify the function for the transition.
    • “callback” is the function which we want to run once the animation effect is complete.

    For example

    <div id id="clickToAnimate"> Click Me </div> <div id ="mydiv" style=”width:200px; height:300px; position: RELATIVE; right: 20px;"> </div>

    Following is the jQuery to animate opacity, left offset, and height of the mydiv element

    $('# clickToAnimate’).click(function() { $('#book').animate({ opacity: 0.30, left: '+=20', height: 'toggle' }, 3000, function() { // run after the animation complete. }); });

    The animate function is used to apply the custom animation effect to elements.

    Syntax:

    $(selector).animate({params}, [duration], [easing], [callback])

    For example

    Following is the jQuery to animate opacity, left offset, and height of the mydiv element
    Discussion