Jquery interview question set 1/Jquery Interview Questions and Answers for Freshers & Experienced

Explain what the following code will do:

$( "div#first, div.first, ol#items > [name$='first']" )

This code performs a query to retrieve any <div> element with the id first. It also includes all <div> elements with the class first and all elements which are children of the <ol id=”items”> element whose name attribute ends with the string “first”. This shows how to use multiple selectors at once. The function will return a jQuery object containing the results of the query.

What are the selectors in jQuery, and what are the types of Selectors?

If you would like to work with an element on the web page, first you need to find or select it. Selectors find the HTML elements using jQuery.

There are many types of selectors in the jQuery library. Some basic selectors are:

Name: It is used to select all elements which match with the given element Name.
#ID: It is used to select a single element which matches with the given ID
.Class: It is used to select all elements which match with the given Class.
Universal (*): It is used to select all elements available in a DOM.
Multiple Elements E, F, G: It is used to select the combined results of all the specified selectors E, F, or G.
Attribute Selector: It is used to select elements based on its attribute value.

What are Events in jQuery?

Responding to user actions on a webpage is called events. jQuery provides simple methods for attaching event handlers to selections. When an event occurs, the provided function is executed.

What is $.each() function in jQuery?

The "jQuery.each()" function is a general function that will loop through a collection (object type or array type). Array-like objects with a length property are iterated by their index position and value. Other objects are iterated on their key-value properties. The "jQuery.each()" function however works differently from the $(selector).each() function that works on the DOM element using the selector. But both iterate over a jQuery object.

How can you find browser and browser version in jQuery?

Using $.browser property of jQuery returns the browser information.

Using $.browser is not recommended by jQuery itself, so this feature has been moved to the jQuery.migrate plugin which is available for downloading if the user want. It is a vulnerable practice to use the same. Use it only if needed. It is always better to not use browser specific codes.

What is the jQuery Animation?

In short, the .animate method is used to perform a custom animation of a set of CSS properties. The .animate() method comes in two flavours. The first takes four arguments and the second takes two arguments.

What is the jQuery Unbind() method?

The jQuery bind() method attaches an event handler to elements, whereas unbind() detaches an existing event handler from elements. Use basic HTML code to create the HTML elements.

What are the features of jQuery used in web applications?

jQuery has some important features such as event handling, Ajax support and animation effects functions. Here is the list of important features supported by jQuery.

1. HTML/DOM Manipulation: JavaScript do not have any features related to the DOM, but JavaScript in the browser does include some intelligence about the DOM.

Example: GetElementById() function

DOM is an important feature of jQuery. It defines the logical structure of documents and the way a document is accessed and manipulated. jQuery has the extra intelligence regarding DOM.

2. Event Handling: jQuery introduced a feature called Event handling. Before starting event handling you need to understand event. Events are actions. This means that you can write code that runs when a user clicks on a certain part of the page, or when mouse is moved over a form element. jQuery contains many events, such as a user clicking on a button, moving a mouse over an element and so on.

3. Ajax Support: For example, when you select an item from a DropDownList or other control on the same page then that can cause loss of data. Ajax is used to update the part of the web page without reloading the page. For example, if you create a search functionality in your website like Google Search. When you enter text into the Search TextBox then without reloading the page you see the related text. You can do it easily using Ajax Methods.

4. Animations in jQuery: The jQuery comes with plenty of built-in animation effects that you can use in your websites. For example, animation, show, hide and so on. In jQuery the animate() method is very useful. By using this method we can change the size of elements.
Animation method
Show method
Hide method

How to remove a DOM Element using jQuery?

Sometimes we get a requirement to delete all child nodes and remove DOM elements using jQuery to make a dynamic web page. In this scenario jQuery provides a couple of methods to remove DOM elements. Here are the options:

<> empty()
<> remove()
<> html()

What does the jQuery ajax event method ajaxStart() do?

Whenever an Ajax request is about to be sent, jQuery checks whether there are any other outstanding Ajax requests. If none are in progress, jQuery triggers the ajaxStart event. Any and all handlers that have been registered with the .ajaxStart() method are executed at this time.

Define bind() and unbind elements in jQuery?

The jQuery bind() method attaches an event handler to elements, whereas unbind() detaches an existing event handler from elements. Use basic HTML code to create the HTML elements.

How method can be called inside code behind using jQuery?

$.ajax can be called and by declaring WebMethod inside code behind using jQuery.

What is the difference between onload() and document.ready()?

In a page, we can have only one onload function but we can have more than one document.ready function. Document.ready function is called when DOM is loaded but onload function is called when DOM and images are loaded on the page.

Where can we download JQuery?

jQuery javascript can be downloaded from jQuery official website – www.jquery.com

Is jQuery is a client or server scripting?

jQuery is a client scripting.

What are the four parameters used for jQuery Ajax method?

The four parameters are

<> URL – Need to specify the URL to send the request
<> type – Specifies type of request(Get or Post)
<> data – Specifies data to be sent to server
<> Cache – Whether the browser should cache the requested page

Whether our own specific characters are used in place of $ in jQuery?

Yes, We can use our own variable in place of $ by using the method called no Conflict () method.

var sample = $.noConflict()

var sample = $.noConflict()

How to read, write and delete cookies in jQuery?

To deal with cookies in jQuery you have to use the Dough cookie plugin. Dough is easy to use and has some powerful features.

Create cookie:

$.dough(“cookie_name”, “cookie_value”);
Read Cookie:

$.dough(“cookie_name”);
Delete cookie:

$.dough(“cookie_name”, “remove”);

What is the use of param() method in jQuery?

The param() method is used to represent an array or an object in a serialized 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.

Explain the functionality of ajaxComplete() method.

The ajaxComplete() gets called regardless of the request being successful or resulting in an error, and a complete callback is received, even for synchronous requests.

Elaborate jQuery Ajax Events.

Ajax methods trigger an event handler that results in jQuery Ajax Events. Some of the examples of jQuery Ajax Events are as listed below.

These events are categorized into local events and global events.

1. ajaxStart(): It is a Global Event, This event triggers as a result of starting of an Ajax request, provided no other Ajax request currently running.
2. beforeSend(): It is a Local Event, as the name indicates, this event gets invoked before Ajax request starts, thereby allowing to modify XMLHttpRequest objects.
3. ajaxSend(): It is a Global Event, and this event gets called before the Ajax request is run.
4. success(): It is a Local Event. This event triggers only if the Ajax request was successfully sent ( i.e. while sending Ajax request, the event does not display any error from the server or from data).
5. ajaxSuccess(): It is a Global Event, triggers only if the request sent was successful.
6. error(): It is a Local Event, that gets triggered if an error occurs while executing the request. (You can have either error or a success callback while sending Ajax request)
7. ajaxError(): It is a Global Event, which behaves the same as its local counterpart error() event.
8. complete(): It is a Local Event. This event gets called regardless of the request being successful or result in an error, and complete callbacks are received, even for synchronous requests.
9. ajaxComplete(): It is a Global Event, which behaves the same as its local counterpart complete() event, even for synchronous requests.
10. ajaxStop(): It is a Global Event, that gets triggered when no Ajax requests are still being processed/ pending for processing.

Explain the functionality of ajax load() method.

The load() method sends HTTP requests to load data in the form of HTML or text content from a server and puts the returned data into the selected DOM element(s).

Explain the functionality of the Ajax() method.

Ajax() method sends asynchronous HTTP requests to the server and receives the data from the server. Ajax() method is valuable as it offers the ability to specify both success and failure callbacks.

Give some examples of Ajax methods in jQuery.

Ajax helps to send and retrieve data as well as change the content of the web page from a server without any need for the entire page reload. jQuery Ajax methods such as load(), get(), post() facilitate Ajax calls made by the application.

What is the use of jQuery load method?

jQuery load method is a powerful AJAX method which is used to load the data from a server and assign the data into the element without loading the page.

Can we add more than one ‘document.ready’ function in a page?

Yes, we can add more than one document.ready function in a page. But, body.onload can be added once in a page.

What is the difference between size and length of jQuery?

Size and length both returns the number of element in an object. But length is faster than the size because length is a property and size is a method.

Can we call C# code behind using jQuery?

Yes, we can call C# code from jQuery as it supports .net application.

Whether we need to add jQuery file in both Master and Content page?

jQuery file should be added to the Master page and can use access from the content page directly without having any reference to it.

What are the features of jQuery, has been used in web applications?

jQuery uses features like Sliding, File uploading and accordian in web applications.

What is the difference between find and children methods?

Find method is used to find all levels down the DOM tree but children find single level down the DOM tree.

Which operating system is more compatible with jQuery?

Mac, Windows and Linux are more compatible with the jQuery.

Is jQuery is a JavaScript or JSON library file?

jQuery is a library of JavaScript file and it consists of DOM, event effects and the Ajax functions. jQuery is said to be a single JavaScript file.

What is the advantage of using minimized version of jQuery?

Efficiency of web page increases when minimized version of jQuery is used.min.js file will be more than 50% less than the normal js file. Reduction in the file size makes the web page faster.

How to work with parent(), children() and siblings() methods in jQuery?

The parent() function returns the parent of the selected element by calling the jQuery parent() function. The siblings() function returns all the siblings of given HTML elements.

What is chaining in jQuery?

Chaining is a powerful feature of jQuery. Chaining means specifying multiple functions and/or selectors to an element.

Chaining reduces the code segment and keeps it very clean and easy to understand. Generally chaining uses the jQuery built in functions that makes compilation a bit faster.

By using chaining we can write the above code as follows:

$(document).ready(function() {
$("#div2").html($("#txtBox").prop("readonly")) + '</br>';
$("#div3").html($("#txtBox").attr("readonly"));
});

How to handle Controls attribute Using jQuery?

For handle Controls attribute using jQuery we used .addClass(), .removeClass(), .css(), .toggleClass(), etc to manage all css and html attributes of any html control.

What are the methods used to provide effects?

jQuery provides many amazing effects, we can apply these effects quickly and with simple configuration. The effect may be hiding, showing, toggling, fadeout, fadein, fadeto and so on toggle(), Show() and hide() methods. Similarly we can use other methods as in the following:

<> animate( params, [duration, easing, callback] ) This function makes custom animations for your HTML elements.
<> fadeIn( speed, [callback] ) This function fades in all the matched elements by adjusting their opacity and firing an optional callback after completion.
<> fadeOut( speed, [callback] ) This function is used to fade out all the matched elements by adjusting their opacity to 0, then setting the display to "none" and firing an optional callback after completion.
<> fadeTo( speed, opacity, callback ) This function fade the opacity of all the matched elements to a specified opacity and firing an optional callback after completion.
<> stop( [clearQueue, gotoEnd ]) This function stops all the currently running animations.

What is jQuery UI?

jQuery UI enable our applications to have a cool user interface and animation in a faster way. It is the set of plug-ins that include interface interactions, effects, animations, widgets and themes built on the JavaScript Library. jQuery is used to create cohesive and consistent APIs. It is a method that we can use to extend jQuery prototype objects. By that prototype object you can enable all jQuery objects to inherit any method that you add.

Interactions

We can use interactions for basic mouse-based behaviours to any element. Examples of Interactions are the following:

> Draggable
> Droppable
> Resizable
> Selectable
> Sortable

What Attributes actually are

Attributes carry additional information about an HTML element and come in name=”value” pairs. You can set an attribute for an HTML element and define it when writing the source code.

For example

<input id="txtBox" value="Jquery" type="text" readonly="readonly" />
Markup
As shown above, “id”, "type” and “value" are attributes of the input elements.

What is difference between prop and attr?

jQuery.attr()

Gets the value of an attribute for the first element in the set of matched elements.

Whereas:

jQuery. prop ()

Gets the value of a property for the first element in the set of matched elements.

What is the use of jQuery .each() function?

The "jQuery.each()" function is a general function that will loop through a collection (object type or array type). Array-like objects with a length property are iterated by their index position and value. Other objects are iterated on their key-value properties. The "jQuery.each()" function however works differently from the $(selector).each() function that works on the DOM element using the selector. But both iterate over a jQuery object.

Callback method

In the "jQuery.each()" method we're able to pass in an arbitrary array or object in which for each item will have the callback function executed.

The "$.each()" function loops over any type of collection, either an array or an object collection. The "jQuery..each()" function has a callback function in which we pass the indexing value and the corresponding value of each item of the array each time. We can access the value of the current index position in the loop using the "this" keyword and append it in any DOM element.

When you pass the array-like object to the .each() function, the callback can accept two arguments: index of the item, where index is the numerical zero-based index in the array of the current items and item is the value of the current array.

For example:

If we pass an array to each function, it iterates over items in the array and accesses both the current item and its index position.

Syntax

jQuery.each(collection, callback(indexInArray, valueOfElement))

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

var arr = ["Goergie", "Johnson", "Agile", "Harrison", "Gaurav"];

$.each(arr, function(index, value) {
alert('Position is : ' + index + ' And Value is : ' + value);
});

});
</script>

What is a CDN?

Content Delivery Network (CDN) in simple terms is a collection of servers spread across the globe. In other words, a CDN is a network of servers in which each request will go to the closest server.

What is JQuery.noConflict?

jQuery no-conflict is an option given by jQuery to overcome the conflicts between the different js frameworks or libraries. When we use jQuery no-conflict mode, we are replacing the $ to a new variable and assigning to jQuery some other JavaScript libraries. Also use the $ (Which is the default reference of jQuery) as a function or variable name what jQuery has. And in our development life, we are not at all strict to only jQuery.

Can you differentiate between JavaScript and jQuery?

JavaScript is an open-source scripting language that makes static web pages into dynamic pages, that are used to validate form data before submitting it to a server.

jQuery is a lightweight, fast javascript library, browser compatible, used for HTML document traversal & manipulation, event handling, adding animation effects to web pages and helps in Ajax interactions.

Differentiate between width() vs css(‘width’) in jQuery

There are two different methods in jQuery to change the width of an element. The first way is to use .css(‘width’) and other way is to use .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 both the functions. In .css(‘width’) we have to add px in the width value while in .width() we don’t have to add px.

Differentiate among .empty() vs .remove() vs .detach() in jQuery.

• .empty() – This method is used to remove all the child elements from matched elements.

Syntax-


$(selector).empty();
• .remove() – This method is used to remove all the matched element. It will remove all the jQuery data associated with the matched element.

Syntax-


$(selector).remove();
• .detach() – This method is same as .remove() method except that the .detach() method doesn’t remove jQuery data associated with the matched elements.

Syntax-


$(selector).detach();

What is jQuery.noConflict?

jQuery no-conflict is an option given by jQuery to overcome the conflicts between the different javascript frameworks or libraries. When you use jQuery no-conflict mode, you replace the $ to a new variable and assign jQuery some other JavaScript libraries. Also, the $ is used as a function or variable name that jQuery has.

What are Selectors in jQuery?

A jQuery Selector is a function that uses the expressions to find out matching elements from a DOM based on the given criteria. In a simple language, selectors are used to select one or more HTML elements using jQuery. Once an element is selected then we can perform various operations on that selected element.

What is the difference between JavaScript and jQuery?

JavaScript is an interpreted programming language, whereas jQuery is a library with APIs built for JavaScript. jQuery simplifies the use of the JavaScript language.

What is jQuery?

jQuery is a feature-rich JavaScript library that makes HTML document traversal and manipulation, event handling, animation, and Ajax much simpler and faster. jQuery has an easy-to-use API that works across many browsers. UI related functions can be written with minimal lines of code using jQuery.

Search
R4R Team
R4R provides Jquery Freshers questions and answers (Jquery Interview Questions and Answers) .The questions on R4R.in website is done by expert team! Mock Tests and Practice Papers for prepare yourself.. Mock Tests, Practice Papers,Jquery interview question set 1,Jquery Freshers & Experienced Interview Questions and Answers,Jquery Objetive choice questions and answers,Jquery Multiple choice questions and answers,Jquery objective, Jquery questions , Jquery answers,Jquery MCQs questions and answers Java, C ,C++, ASP, ASP.net C# ,Struts ,Questions & Answer, Struts2, Ajax, Hibernate, Swing ,JSP , Servlet, J2EE ,Core Java ,Stping, VC++, HTML, DHTML, JAVASCRIPT, VB ,CSS, interview ,questions, and answers, for,experienced, and fresher R4r provides Python,General knowledge(GK),Computer,PHP,SQL,Java,JSP,Android,CSS,Hibernate,Servlets,Spring etc Interview tips for Freshers and Experienced for Jquery fresher interview questions ,Jquery Experienced interview questions,Jquery fresher interview questions and answers ,Jquery Experienced interview questions and answers,tricky Jquery queries for interview pdf,complex Jquery for practice with answers,Jquery for practice with answers You can search job and get offer latters by studing r4r.in .learn in easy ways .