What is jQuery?
jQuery can simply be interpreted as most advanced JavaScript framework which is used for performing high-level applications which include feature-rich, fast, and lightweight framework which assists in to through the HTML DOM, add Ajax interaction, build animations, manipulation of the page content, modify the alignment and render cool UI effect. This is a client-side scripting language.
Can a jQuery library be used for server scripting?
jQuery can be interpreted as an internally built library which is being used in the JavaScript. And jQuery is strictly been designed with the functionality of client-side scripting. jQuery is not compatible with server-side scripting.
Why exactly is the need for the use of jQuery?
” jQuery is a highly programmed internal library for the better functioning of JavaScript. It handles a number of applications and its prominence can never be ignored. The following list will be depicting the reasons for why is the need to use jQuery?
jQuery comes very handily for the purpose of designing user-friendly web applications.
By making effective use of jQuery the performance of an application can be greatly enhanced.
Very fast and extensible.
Only minimal lines of codes will be sufficient for writing UI related functions. “
jQuery Interview Questions
State different jQuery methods that are used to provide effects?
” jQuery has a set of methods implying which we can expect to provide different effects within the system. Some of the jQuery methods include
Fadeout()
Toggle()
Hide()
Show()
Fade IN() “
Describe the minimized version of the jQuery and its benefits.
“With the minimized version of the jQuery, the efficiency of the webpage can be greatly improved. The effectiveness of the webpage which is having a minimized version of jQuery will be a lot better than the effectiveness of the webpage which is having a normal js file.
This is the reason why most of the web pages are nowadays are found to have a minimized version of the jQuery. “
Explain about different scenarios where jQuery can be effectively implemented?
” jQuery is a highly advanced library application which extensively is used in the following scenarios:
Apply CSS static or dynamic functions.
Calling functions on events.
For the purpose of manipulation.
For creating different animation effects.
Having the presence of all the advanced library applications jQuery is best at maintaining different applications with a higher degree of effectiveness. “
Advance jQuery Interview Questions
Explain about the jQuery connect?
jQuery connect can simply be interpreted as a plug-in which is used to connect or bind one function to the another. This will be helpful for executing the from any other function or the plug-in is executed.
Which parameters are being used for the jQuery Ajax method?
“jQuery Ajax method makes use of four different parameters which include
URL: The URL must be clearly specified in order to send the request.
Type: Specifies the type of request(Get or Post)
Data: Specifies data to be sent to the server”
Explain the ways through which we can include jQuery on a page?
“Including jQuery in a page can be done with the help of the following ways.
Local copy inside the script tag
Remote copy of jQuery.com
By keeping a remote copy of Ajax API
Making a local copy of script manager control
Embedded script using client script object”
jQuery Interview Questions
Differentiate the concepts of ID selector and class selector in jQuery?
“Just like they are used in the CSS, both ID selector and Class selector are used for the same functioning.
In order to explain the functioning of both the concepts in simpler words, the ID selector uses ID while the class selector makes use of a class to select the different elements.
In the case where you are needed to select only one element then we have to go with the ID selector. And if you want to select a group of elements, then we have to go with the class selector.”
Explain the exact purpose of the animate function in jQuery?
“The animate function is extensively being used in the jQuery. It is an advanced concept which is well received by the audience. Well, the main feature of the animation function in jQuery is to apply the custom animation effect to different elements.
The syntax for this function is as follows
Syntax:
$(selector).animate({params}, [duration], [easing], [callback])
Here,
“”param”” defines the CSS properties where are intended to apply the animation.
“”duration”” it simply depicts for what exact period of time the animation will run. Its values are: “”slow””, “”fast””, “”normal”” or it can even be milliseconds.
“”easing”” is the string which specifies the function for the transition.
“”callback”” it is the function with the help of which we can call an action upon the completion of the animation. “
What is JQuery.noConflict?
In order to help the system to overcome the conflicts between the different libraries and frameworks the jQuery no-conflict option given by the jQuery. This concept is really advanced which has been developed over recent times. In the case of any conflicts which arise between the libraries and frameworks using this jQuery.noConflict function will help in overcoming all the conflicts.
Advance jQuery Interview Questions
Explain the concept of fade effect in jQuery?
“1. In jQuery, there are three different applications applying which we can avail the fade effect.
The fade effect can be availed by using the functions which are fade In, fadeout and fade To.
- The opacity of elements gets changed with animation through the effect of these methods.
The syntax for the fading effect includes
Syntax:
$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)
“speed” this can be one among the following values: “slow”, “fast”, “normal” or milliseconds.
“opacity” this is used to specify the capacity of fading to give opacity.
“callback” it is the function with the help of which we can call an action upon the completion of fading. “
Explain the Struts2 jQuery plug-in and its advantages.
“The struts2 jQuery plug-in is used to:
Easy integration of Ajax and widgets will be provided to the user.
The extent of coding needed to be done will be reduced.
For example:
Result Div.
The advantages of using truts2 jQuery are:
- It greatly reduces the extent of coding needed to be done for a particular action.
- It also supports ajax form validation.
- The readability levels of the code will be very high and so it will become much easier to perform the debugging. “
Explain how the jQuery stores data related to an element?
“Information of an element can be stored in the simple JavaScript by simply adding a domain object model property to the element. This results in the rising of issues such as leakage of memory in the browsers.
But in the case of jQuery, the user does not need to be bothered by the memory management issues.
For example: Storing and retrieving data related to an element:
$(‘#myDiv’).data(‘keyName’, { foo : ‘bar’ });
$(‘#myDiv’).data(‘keyName’); // { foo : ‘bar’ }”
jQuery Interview Questions
Describe the procedure of extracting a query string with regular expressions?
“The procedure of extracting a query string with regular expressions can be done in two ways.
- The approach of String-based:
It is considered to be the simplest way in use for extracting a query string with regular expressions. This method is carried ahead by making the utilization of the .replace() method to function.
For example :
var data = string.replace(“”http://localhost/view.php?””, “”””);
The above procedure will be fine but it has some flexible issues.
- Regular expression approach:
This is the most powerful method for extracting a query string and the pattern must be used that seeks about the question mark among the string. When done, the JS regular expressions are delimited “
Differentiate the concepts of .js and .min.js?
“The jQuery library has two different versions Development and Production. The other name for the deployment version is minified version.
Considering the functionality, both the files are much similar to each other. Being smaller in size, the .min.js gets loaded quickly saving the bandwidth.”
Why is jQuery better than JavaScript?
“In general, jQuery is considered to be far better than JavaScript. jQuery can be interpreted as an application for developing Ajax application and helps in simplifying the code & the code readability will also be good.
jQuery also supports the creation of animations and delivers such high-level functionalities. “
Advance jQuery Interview Questions
Explain the types of selectors in jQuery?
“There are three types of selectors in jQuery:
CSS Selector
XPath Selector
Custom Selector”
Explain the concept of Grouping?
” The concept of grouping can simply be explained as whenever the same declaration gets shared by more than one selector they get separated by a common separated list.
This helps in greatly reducing the size of the CSS and helps it in making it become more readable. “
Explain the concept of finish method in jQuery?
In order to stop all the queued animations and to help them place in their final state the .finish() method is used. This method was introduced in jQuery 1.9.
jQuery Interview Questions
Differentiate between calling stop (true, true) and finish method?
The .finish() method will be quite similar to .stop(true, true). It helps in clearing the queue & thereby helps the animations to enter into their end state. In .finish() it also causes the CSS property of all queued animations to jump to their end values, as well.
Which is the latest version of the jQuery library?
The latest version (when this post is written) of jQuery is 1.10.2 or 2.0.3. jQuery 2.x has the same API as jQuery 1.x but does not support Internet Explorer 6, 7, or 8.
Explain the concept of writing the browser-specific code using jQuery?
“We can write browser-specific code by simply making use of the jQuery. Browser property. This property contains flags for the user agent, read from navigator.userAgent.
This property was excluded from jQuery 1.9.”
Advance jQuery Interview Questions
What is jQuery Connect?
“The jQuery connect is a plugin that is used to bind or connect a function to another function. It executes a function when a function from another object is executed. It is similar to assigning a handler for another function. Connect also lets you connect a function to a DOM object. With connect, you bind more than one function.
Example
$.connect(obj1, ‘fun1’, onj1, fun2);
Here we are binding fun2 function of object 2 to the fun1 function of object 1. So, when fun2 is executed, fun1 will also be executed.”
Is jQuery a W3C standard?
No. jQuery is not a W3C standard. It is just a JavaScript library that provides an abstraction to the functions executed in JavaScript.
What is the use of jQuery filter?
“The filter method in the jQuery returns certain elements that match the specified criteria. You can specify a criterion with the filter method and apply it to DOM elements. It removes the elements that do not match the specified criteria and allows only that matches. It works like a search function.
Syntax
$(selector).filter(criteria,function(index))
Here the criteria specify an expression that you want to apply to the DOM elements for filtering. You can specify multiple criteria separated by a comma. The function is optional that runs on each specified element. It returns true if the element matches the criteria or false otherwise.”
jQuery Interview Questions
What are deferred and promise object in jQuery?
“The deferred object in jQuery is used to create a promise. After creating a promise, jQuery changes its state to resolved or rejected. Deferred is used to provide a promise to the calling code in your own function.
The promise is set on a deferred object that will be executed when the deferred collection is complete. The state of the promise cannot be changed. The deferred object is used to create a promise.”
Why jQuery is used?
“jQuery is very compact and well-written JavaScript code that increases the productivity of the developer by enabling them to achieve critical UI functionality by writing very less amount of code.
It helps to
Improve the performance of the application
Develop most browser compatible web page
Implement UI related critical functionality without writing hundreds of lines of codes
Fast
Extensible – jQuery can be extended to implement customized behavior
Other advantages of jQuery are
No need to learn fresh new syntax’s to use jQuery, knowing simple JavaScript syntax is enough
Simple and Cleaner code, no need to write several lines of codes to achieve complex functionality.”
What is chaining in jQuery?
“Chaining in jQuery lets you run multiple statements one after another on the same element. To chain multiple commands, append each jQuery command to the previous one using dot(.). Chaining allows you not to use one selector more than once for performing an action as all the actions are performed at once. It speeds up the time taken to execute the code as the compiler need not call a selector more than one time.
Example
$(“#h1”).css(“color”, “”blue”).slideUp(200).slideDown(100);
In the above statement, the color, slideup, and slidedown action are applied on the heading selector in the same line using chaining.”
Advance jQuery Interview Questions
How to attach a function to be executed whenever an AJAX request completes using jQuery?
The Ajax Complete( callback ) method can be used to register a callback to be executed whenever an AJAX request completes.
How to make a ajax call using jQuery?
The load( URL, [data], [callback] ) method load HTML from a remote file and inject it into the DOM.
How to binds a function to be executed whenever the DOM is ready to be traversed and manipulated using jQuery?
The ready(fn) function binds a function to be executed whenever the DOM is ready to be traversed and manipulated.
jQuery Interview Questions
How to bind a handler to one or more events (like click) for an element using jQuery?
The bind( type, [data], fn ) function binds a handler to one or more events (like click) for each matched element. Can also bind custom events.
How to check if event. stop Immediate Propagation() was ever called on this event object?
The IsImmediatePropagationStopped() method of Event object returns whether event. stop Immediate Propagation() was ever called on this event object.
Can you tell the difference between prop() and attr()s?
“Both prop() and attr() can be used to get or set the value of the specified property of an element attribute.
The attr() gives the default value of a property whereas prop() returns its current value.”
Advance jQuery Interview Questions
Consider the below code snippet and assume that there are 5 elements on the page. What is the difference between the start and end times displayed?
“function getMinsSeconds() {
var dt = new Date();
return dt.getMinutes()+””:””+dt.getSeconds();
}
$( “”input”” ).on( “”click””, function() {
$( “”p”” ).append( “”Start: “” + getMinsSeconds() + “”
“” );
$( “”div”” ).each(function( i ) {
$( this ).fadeout( 1000 * ( i * 2 ) );
});
$( “”div”” ).promise().done(function() {
$( “”p”” ).append( “”End: “” + getMinsSeconds() + “”
“” );
});
});
For the above code, the difference between the start and end times will be 10 seconds.
This is because .promise() will wait for all animations (here, all fadeout() calls) to complete, the last one will complete 10 seconds (i.e. 5 * 2 = 10 seconds) after the fadeout() starts.”
Explain the .promise() method in jQuery.
“The .promise() method returns a dynamically generated promise that is resolved when all actions of a certain type bound to the collection, queued or not, have ended.
The method takes two optional arguments:
type – The default type is “fx” which indicates that the returned promise is resolved only when all animations of the selected elements have been completed.
target – If a target object is specified, .promise() will attach to promise to that specified object and then return it rather than creating a new one.”
Explain how CSS classes can be manipulated in HTML using jQuery.
“Query provides several methods to manipulate the CSS classes assigned to HTML elements. The most important methods are addClass(), removeClass() and toggleClass().
addClass(): This method adds one or more classes to the selected elements.
Syntax: $(selector).addClass(className);
You can also add multiple classes to the selector. Syntax:$(selector).addClass(class1, class2);
removeClass(): Similar to adding class, you can also remove the classes from the elements by using this method.
The removeClass() method can remove a single class, multiple classes, or all classes at once from the selected elements.
Syntax:
For removing one class: $(selector).removeClass(class1);
For removing multiple class: $(selector).removeClass(class1, class2, class 3);
For removing all classes at once: $(selector).removeClass()
toggleClass(): This method is used for adding or removing one or more classes from the selected elements in such a way that if the selected element already has the class, then it is removed. Else if an element does not have the specified class, then it is added i.e. it toggles the application of classes.
Syntax: $(selector).toggleClass(className);”
jQuery Interview Questions
How to perform jQuery AJAX requests?
“jQuery provides the ajax() method to perform an AJAX (asynchronous HTTP) request.
Syntax: $.ajax({name:value, name:value, … }). The parameters specify one or more value of name-value pairs.
url : this name specifies the URL to send the request to. Default is the current page.
success(result,status,xhr) : success callback function which runs when the request succeeds
error(xhr,status,error) : A function to run if the request fails.
async : Boolean value that indicates whether the request should be handled asynchronous or not. Default value is true.
complete(xhr,status) : A function to run when the request is completed (after success and error functions are handled)
xhr : A function used for creating the XMLHttpRequest object
Example:
$.ajax({
url: “”resourceURL””,
async: false,
success: function(result){
$(“”div””).html(result);
},
error: function(xhr){
alert(“”An error occured: “” + xhr.status + “” “” + xhr.statusText);
}
});”
What are the selectors in jQuery? How many types of selectors in jQuery?
“In order to work with any element on the web page, we would first need to find it. Selectors find the HTML elements in jQuery. Some of the most commonly used and basic selectors are:
Name: Used to select all elements which matches the given element Name.
ID: Used to select a single element which matches with the given ID
.Class: Used to select all elements which match with the given Class.
Universal (*): Used to select all elements available in a DOM.
Multiple Elements E, F, G: Used to selects the combined results of all the specified selectors E, F or G.
Attribute Selector: Used to select elements based on its attribute value.”
What is the difference between JavaScript and jQuery?
“JavaScript is an interpreted language written in C and is combination of ECMAScript and DOM where jQuery is a JavaScript library developed to run things faster and make things simplified for JavaScript. jQuery doesn’t have the ECMAScript.
JavaScript requires long lines of code to code a functionality where in case of jQuery, just import the library and call the functions which would reduce the programmer’s effort of coding.
JavaScript doesn’t have the cross browser compatible functionality which is why a developer has to write code manually to implement the functionality. Whereas the cross browser code compatibility is inbuilt in jQuery.”
Advance jQuery Interview Questions
Can you tell something about jQuery each() method?
“The each() method in jQuery allows us to loop through different datasets such as arrays or objects (even DOM objects).
It can be used to loop through a number of DOM objects from the same selectors.
For example, if you want to add a width=“600” to all the images in a page then we select all images and loop through each of them and add width = “”600″” to each tag. We can write the code as below:
$(“”img””).each(function(im){
$(this).attr(“”width””,””600″”)
});
$ is a jQuery object definer. In the above syntax, “this” is a DOM object and we can apply jQuery functions to only jQuery objects which is why we convert the DOM object to jQuery object by wrapping it inside the $ definer.
We can also use each() to loop through the arrays of data and get the index and the value of the position of data inside the array.
For example,
var list = [“”InterviewBit””, “”jQuery””, “”Questions””];
$.each(list, function(index, value){
console.log(index + “” “”+ value);
})
The above code prints
0 InterviewBit
1 jQuery
2 Questions
You can also use each() to loop through objects.
For example:
var obj = {“”name””:””InterviewBit””,””type””: “”jQuery””};
$.each(obj, function(key,value){
console.log(key + “” – “” + value);
})
The above code prints:
name – Interview Bit
type – jQuery”
What is jQuery click event?
“jQuery click event happens when we click on an HTML element.
jQuery provides a method click() method that aids to trigger the click event.
For example $(“p”).click() will trigger the click event whenever the elements with paragraph tag is clicked on a browser page.
Syntax:
$(selector).click(function(){
//code that runs when the click event is triggered
});”
What is the significance of jQuery.length?
jQuery.length property is used to count number of the elements of the jQuery object.
jQuery Interview Questions
What are events in jQuery?
User actions on a webpage are called events and handling responses to those is called event handling. jQuery provides simple methods for attaching event handlers to selected elements. When an event occurs, the provided function is executed.
What is the use of CSS() method in jQuery?
The CSS() method is used to change style property of the selected element.
Does jQuery work for both HTML and XML documents?
No. jQuery works only for HTML documents.
Advance jQuery Interview Questions
Is jQuery a JavaScript or JSON library file?
jQuery is said to be a library of single JavaScript file which consists of DOM/CSS manipulations, event effects or animations, AJAX functions and various commonly used plugins.
What are the advantages of jQuery?
“Most popular and open source
Very fast and easily extensible
Used to develop cross browser compatible web applications as jQuery works in almost the same manner for different kinds of browsers.
Improves the performance of an application when using the minimised version of the jQuery library. The size of the minimized js file is almost 50% less than the normal js file. Reduction in the file size makes the web page load and work faster.
Commonly implemented UI related functionalities are written using minimal lines of codes”
