Question : What is jQuery.noConflict?
Answer : Usually, JS functions and variables use $ as a name. In jQuery, $ is just an alias for jQuery, so we don’t need to use $. If we have to use a JS library along with jQuery, the control of $ is given to the JS library. To give this control, we use jQuery.noConflict(). It is also used to assign a new name to a variable.
var newname = jQuery.noConflict();
Question : Explain the difference between the .detach() and remove() methods in jQuery.
Answer : The detach() and remove() methods are the same, except that .detach() retains all jQuery data associated with the removed elements and .remove() does not. detach() is therefore useful when removed elements may need to be reinserted into the DOM later.
Question : What is the advantage of hosting a jQuery using a CDN?
Answer : CDN stands for Content Delivery Network or Content Distribution Network. It is a large distributed system of servers deployed in multiple data centers across the internet. It provides the files from servers at a higher bandwidth that leads to faster loading time.
- The jQuery library download time will be reduced. For example – Users in Europe will hit the CDN in Europe, and users in the US will hit the US CDN. As a result, this will reduce the overall page load time.
- The jQuery library will already be cached in the user’s browser if the user visited another website that references the same jQuery library. In this case, the user need not download the jQuery library.
Question : What is Qunit?
Answer : QUnit is a powerful, easy-to-use JavaScript unit testing framework. It’s used by the jQuery, jQuery UI, and jQuery Mobile projects and is capable of testing any generic JavaScript code.
Question : What is a Data Table plug-in for jQuery?
Answer : DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, built upon the foundations of progressive enhancement, which adds advanced features to any HTML table.
Question : Is it possible that jQuery HTML works for both HTML and XML documents?
Answer : No, jQuery HTML only works for HTML documents. It doesn’t work for XML documents.
Question : What is the difference between jquery.min.js and jquery.js?
Answer : jquery.min.js is a compressed version of jquery.js(whitespaces and comments are removed, shorter variable names are used, and so on) to preserve bandwidth. In terms of functionality, they are absolutely the same. It is recommended to use this compressed version in the production environment. The efficiency of a web page increases when the minimized version of jQuery is used.
Question : What is jQuery connect?
Answer : A ‘ jQuery connect’ is a plug-in used to connect or bind a function with another function. Connect is used to execute a function whenever a function from another object or plug-in is executed.
Question : What is the difference between onload() and document.ready() methods?
Answer : Body.Onload() event will be called only after the DOM and associated resources like images get loaded, but jQuery’s document.the ready() event will be called once the DOM is loaded, and it does not wait for the resources such as images to be loaded.
Question : Define jQuery UI Autocomplete ?
Answer : Autocomplete is one of the best widgets ON websites and is used in nearly all websites. jQuery has a powerful widget, autocomplete, and in this article I will try to explain how to use jQuery Autocomplete in websites. All the way and all other features of autocomplete. We can make autocomplete, using AJAX, to call to build a list (server-side) and then bind that list into a text box using JavaScript. However there are other alternatives to make autocomplete rather then this in an easy way. The most robust and efficient tool of autocomplete is jQuery-ui autocomplete and this tool is free and there is no need to license it.
Points to remember
- The Autocomplete widget requires some functional CSS, otherwise it won’t work. If you build a custom theme, use the widget’s specific CSS as a starting point.
- This widget manipulates its element’s value programmatically, therefore a native change event may not be fired when the element’s value changes.
Question : What $(document).ready(function()) is and when to use it?
Answer : $(document).ready(function()) is a jQuery event that fires as soon as the DOM is fully loaded and ready to be manipulated by script. This is the earliest point in the page load process where the script can safely access elements in the page’s HTML DOM. This event is fired before all the images and CSS are fully loaded.
Question : What is the history of jQuery UI and how to use it?
Answer : jQuery UI is really very easy to learn and it provides abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets, built on top of the jQuery JavaScript Library which you can use to build highly interactive web applications. The whole jQuery UI is categorized into four groups; they are core, interactions, widgets and effects.
The components of jQuery UI are:
<> Core: It’s a perquisite for other widgets and effects to work properly.
<> Interactions: It allows us to add behavior like Draggable, Droppable, Sortable, etc on the UI elements.
<> Widgets: It provides UI controls like tabs, dialog, slider, etc.
<> Effects: It provides ready to use effects like clip, bounce, explode, etc.
Question : What is the usage of Draggable, Droppable, Resizable, Selectable in jQuery UI?
Answer : There are only 5 plugins available in the interaction section; that is Draggable, Droppable, Resizable, Selectable and Sortable. Interaction Plugins handles complex behaviors such as drag and drop, resizing, selection and sorting.
Draggable: It enables draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.
Droppable: It enables any DOM element to be droppable, a target for draggable elements.
Resizable: It enables any DOM element to be resizable. With the cursor, grab the right or bottom border and drag to the desired width or height.
Selectable: It enables a DOM element (or group of elements) to be selectable. Draw a box with your cursor to select items. Hold down the Ctrl key to make multiple non-adjacent selections.
Sortable: It enables a group of DOM elements to be sortable. Click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, sortable items share draggable properties.
Question : Define Add or Remove class in jQuery?
Answer : addclass will be used for adding a new CSS class after replacing the old class and removeClass will work for removing the selected class.
$(document).ready(function() {
$(‘.button’).click(function() {
if (this.id == “add”) {
$(‘#animTarget’).addClass(“myClass”, “fast”)
} else if (this.id == “toggle”) {
$(‘#animTarget’).toggleClass(“myClass”, 1000, “easeOutSine”)
} else if (this.id == “switch”) {
$(“#animTarget”).switchClass(“myClass”, “switchclass”, “fast”)
} else {
$(‘#animTarget’).removeClass(“myClass”, “fast”)
}
})
});
Question : What is resize() function in jQuery?
Answer : This method in jQuery is used for changing of the size of the element. You can use by .resize() function.
Question : What is the difference between bind() and live() method in jQuery ?
Answer : The binding of event handlers are the most confusing part of jQuery for many developers working on jQuery projects. Many of them unsure of which is better to use. In this article we will see the main differences between Bind and Live methods in jQuery.
Bind() Method
The bind method will only bind event handlers for currently existing items. That means this works for the current element.
Example
$(document).ready(function () {
$(‘P’).bind(‘click’, function () {
alert(“Example of Bind Method”);
e.preventDefault();
});
});
Live() Method
The Live method can bind event handlers for currently existing items or future items.
Example
$(document).ready(function() {
$(‘P’).live(‘click’, function() {
alert(“Example of live method”);
e.preventDefault();
});
$(‘body’).append(‘
Adding Future items’);
});
Question : What are jQuery plugins?
Answer : Plugins are a piece of code. In jQuery plugins it is a code written in a standard JavaScript file. These JavaScript files provide useful jQuery methods that can be used along with jQuery library methods.
Any method you use in plugins must have a semicolon (;) at the end. The method must return an object (jQuery), unless explicitly noted otherwise. Use 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. (For example, jquery.plug-in.js). Always attach the plugin to jQuery directly instead of $, so users can use a custom alias via the noConflict() method (via the jQuery Team).
Question : Explain the functionality of jQuery UI (user interface).
Answer : jQuery UI is a jQuery library, that provides building various user interface objects such as multiple record lists where the users can select, sort, drag, drop as well as resize particular DOM elements.
UI library also creates built-in widgets such as auto-complete, checkbox, radio buttons, datepicker, menu, etc. as well as adding an effect hide, show or toggle, and other animations.
Question : Differentiate between jquery.min.js and jquery.js
Answer : jquery.min.js and jquery.js have the same functionality, jquery.min.js has all empty spaces removed in order to make the file smaller in size and faster to load resulting in script execution.
Having JS files minified in a production environment means that they will load faster and give quick and better page performance.
Question : Explain the Applications for jQuery Mobile.
Answer : jQuery Mobile is an open-source cross-browser compatible framework designed to build mobile applications accessible on all smartphones, tablet and desktop devices.
jQuery Mobile is created on jQuery and User Interface of jQuery for rendering various special effects, handling Ajax request/responses, touch events, along with a variety of widgets.
Question : What are the four parameters used for the jQuery Ajax method?
Answer : The four parameters are:
- URL: URL for sending the request
- Type: GET/POST request
- Success: the callback function when the request is successful
- DataType: return data type – HTML, XML, text etc.
Question : Briefly explain the bootstrap and JavaScript plug-in.
Answer : Bootstrap is a framework or toolset that includes HTML, CSS, and JavaScript to build a webpage or web application. Many of Bootstrap components require Javascript plugins to function.
Question : Differentiate between the ID and Class selector in jQuery.
Answer : Each HTML element can have only one ID, in other words, an element can be identified with a unique ID, whereas you can use the same class on multiple elements.
Example of ID selector in jQuery in order to hide a DOM element with an ID as its attribute, say
element with an ID as “gold_coin”
$(‘#gold_coin’).hide();
If you want to hide, say all links having its class as “raw”,
$(‘a.raw’).hide();
Question : What is the difference between $(window).load and $(document).ready function in jQuery?
Answer : $(window).load is an event that fires when the DOM and other contents on the page is fully loaded. This event is fired after the ready event.
In most cases, the script can be executed as soon as the DOM is fully loaded. The ready() is usually the best place to write your JavaScript code. But there could be some scenario where you might need to write scripts in the load() function. For example, to get the actual width and height of an image.
The $(window).load event is fired once the DOM and all the CSS, images and frames are fully loaded. So, it is the best place to write the jQuery code to get the actual image size or to get the details of anything that is loaded just before the load event is raised.
Question : What is the difference between bind() vs live() vs delegate() methods in jQuery?
Answer : bind(): this method registers the event handler directly to the required DOM element. E.g.:
$(“#members a”).bind(“click”, function(f){….});
This means any matching anchors will have this event handler attached!
live(): this method attaches the event handler to the root of the document. This means one handler can be used for all events that propagated to the root. The handler is thus attached only once.
delegate(): in this method, you can choose where to attach the handler. This is the most efficient and robust method for delegation.
E.g.:
$(“#members”).delegate(“ul li a”, “click”, function(f){….});
Question : Differentiate among .empty() vs .remove() vs .detach() in jQuery.
Answer : remove(): removes the element as well as its child elements. Data from DOM can be restored; however, event handlers can’t be restored.
empty(): does not remove the element; however, remove its content, and the associated child elements
detach(): removes the element and all the associated child elements, but retains the data and event handlers of the removed element to be reused later.
Example usage:
$(“#div-element”).remove();
$(“#div-element”).empty();
$(“#div-element”).detach();
Question : Differentiate between width() vs css(‘width’) in jQuery.
Answer : There are two different methods in jQuery to change the width of an element. The first way is to use .css(property) and the other way is to use .property().
Example:
$(selector).css(property,value_change);
$(selector).property(value_change);
In .css(property) which in this case is width, we have to add px in the value_change, say 300px.
We can use .property(value_change), which in this case is width, and you need not have to add px, but direct value.
Question : What is jQuery Effects – Fading?
Answer : The fade methods define visibility of content in UI, in other words how the web page is hidden/shown. To use the fade methods of jQuery I need a jQuery library in my project, so I directly used the Google AJAX Libraries content delivery network to serve jQuery from Google. Doing so has several advantages over hosting jQuery on our server, decreased latency, increased parallelism, and better caching. We add the script to our project.
JavaScript
Our UI design is ready so now implement the fade methods. Here are the four types of jQuery fade methods:
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
Question : What is Method Chaining in jQuery? What advantages does it offer?
Answer : With jQuery method chaining, multiple actions can be applied on a single line of code, as all the methods return jQuery objects that can be utilized to call another method.
Without chaining, jQuery methods are called one after another in a separate line, whereas with chaining, jQuery methods are written in dot separated single line of code.
Without chaining multiple lines of code that need to be written, making jQuery to search entire DOM for matched element, then single methods in each line of code are applied. Whereas Chaining needs only a one-time selection of a matched element from DOM, by making better performance.
Question : What is the use of the val() method in jQuery?
Answer : .val() method helps to find the value of an attribute of HTML element. For example, form elements such as input, select and textarea. Val() is also applied to find the value of all matched elements from checkboxes and radio buttons as well as a drop-down list.
Question : How jQuery stores data related to an element?
Answer : jQuery.data() method aids in attaching any type of data to DOM elements, free from memory leaks. jQuery makes sure that data is removed along with the DOM elements removed via jQuery methods.
Code for Storing and retrieving data related to an element.
$(‘#myDiv’).data(‘keyName’, { foo : ‘bar’});
$(‘#myDiv’).data(‘keyName’); // { foo : ‘bar’}
Question : What is the difference between jQuery.get() and jQuery.ajax() ?
Answer : jQuery.ajax() method is used to send HTTP Ajax requests, whereas jQuery.get() method is used to send HTTP GET requests to load data from the server.
Question : What is the use of the serialize() method in jQuery?
Answer : It serializes the form values so that its serialized values can be used in the URL query string while making an AJAX request.
.serialize() method of jQuery returns the input values of HTML form in the form of string.
Question : Difference between prop and attr?
Answer : Both attr() and prop() can be used to set or get an element’s value, however attr() returns the original (default) value whereas prop() returns the most recent (current) value. For example, if a text input had an initial value of ‘Male,’ and later it was changed by the user to ‘female,’ attr() will return the value as ‘Male’ whereas prop() will return the value as ‘female.’
Question : What are all the ways to include jQuery on a page?
Answer : 1. You can use
- Write the code within the HTML document inside the
- Include the .js file, which has the jQuery code into the HTML document.
Question : What is the difference between Map and Grep function in jQuery?
Answer : In $.map() you need to loop over each element in an array and modify its value whilst the $.Grep() method returns the filtered array using some filter condition from an existing array. The basic structure of Map() is:
$.map ( array, callback(elementOfArray, indexInArray) )
Syntax for $.Grep():
jQuery $.grep() Method
Question : List the four parameters used for the jQuery Ajax method.
Answer : URL address where the request is sent, Type of request viz GET or POST, Data/content to be sent to the server and condition for the browser to either allow or not cache the page requested are the four parameters used for jQuery Ajax method.
Question : Can you give some situations or scenarios for using jQuery?
Answer : We can use jQuery in the following situations/scenarios:
<> We can apply a jQuery function that can change CSS static or dynamic property.
<> We can call functions on events such as Form events, Keyboard events, Mouse events, Browser events with the help of jQuery.
<> We can manipulate (add, edit or delete) DOM elements using jQuery.
<> jQuery can be used for animation effects on the HTML element by gradually changing its static position to another position.
Question : Can I use a jQuery library for server scripting?
Answer : jQuery is a client-side scripting Javascript library. It can not be used for server-side scripting.
Question : Identify any difference between .detach() and .remove() of jQuery.
Answer : detach() method of jQuery removes the selected element, however it retains data and events. .remove() method of jQuery removes elements, data as well as events.
Question : Explain any of the advantages of hosting a jQuery from CDN.
Answer : Hosting jQuery from the Content Delivery Network (CDN) helps in high availability and high performance at a lower cost and low network load, improved latency (lesser time is taken to send and receive a data packet from server), offer a device-specific version of contents.
Question : What are jQuery plugins?
Answer : Plugins are a piece of code. The jQuery plugins are a code written in a standard JavaScript file. These JavaScript files provide useful jQuery methods that can be used along with jQuery library methods.
Any method you use in plugins must have a semicolon (;) at the end. The method must return an object unless explicitly noted otherwise. It produces clean and compatible code that way. You have to prefix the filename with jQuery, follow that with the name of the plugin and conclude with .js.
Question : What is queue() in Jquery? Use of queue() in jquery?
Answer : Delay comes under the custom effect category in jQuery. Its sole use is to delay the execution of subsequent items in the execution queue.
queueName is the name of the queue in which the delay time is to be inserted. By default, it is an “fx” queue. An “fx” queue is also known as an effects queue.
delay( duration [, queueName ] )
Question : Describe the functionality of read cookies, write cookies and delete cookies in jQuery.
Answer : When websites are visited, cookies are data values such as the name of the user that gets stored in small text files on the computer. While revisiting websites, the cookies help to remember the user’s name. JavaScript and jQuery create, read and delete cookies, with the document.cookie property.
Question : What is jQuery UI Sortable and how to use it?
Answer : The jQuery UI is a library provided by jQuery for a better user interface. Using sortable we can reorder the DOM elements in the defined area. Users have to click on the item and drag that item to a new place. The other items will be automatically arranged. Accordingly, use the following procedure to enable sortable elements:
- Include the jQuery js file.
JavaScript
- Include the jQuery UI js file.
JavaScript
Question : What is chaining in jQuery?
Answer : Chaining is a powerful feature of jQuery. This 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 make the compilation a bit faster.
For example:
$(document).ready(function() {
$(“#div2”).html($(“#txtBox”).prop(“readonly”)) + ‘
‘;
$(“#div3”).html($(“#txtBox”).attr(“readonly”));
});
Question : How to add and remove CSS classes to an element using jQuery?
Answer : You can use the addClass() and removeClass() methods to do the same.
$(“h1”).addClass(“myclass”);
$(“h1”).removeClass(“myclass”);
Question : What is the use of the toggle() method in JQuery?
Answer : If there is a click event, toggle() attaches functions to toggle. So, on first click first action occurs, on second, second action and so on.
Change my color on each click
Question : What is jQuery Datepicker in jQuery?
Answer : The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily.
Question : What is the use of html() method in JQuery?
Answer : The jQuery html() method is used to change the entire content of the selected elements. It replaces the selected element content with new contents.
Syntax:
$(document).ready(function(){
$(“button”).click(function(){
$(“p”).html(“Hello edureka“);
});
});
Related Topic :
What is LibreOffice? LibreOffice Impress Features ?