In this article we will go through different common questions that arise during job interviews for front end developers. Make sure you ace your next interview.
What is JQuery?
JQuery is a JavaScript library. It provides lots of built-in functions to make the developer life much easier as complex features like animation can be implemented with only a few lines of code, also spending less time to develop. It makes event-handling and AJAX much easier to use because of an API that works on many different browsers.
JQuery’s main purpose is to make JavaScript better to use and provide an interactive user interface to a website.
What is the difference between JavaScript and JQuery?
JavaScript is a dynamic programming language commonly used to make a web page come to life by making all the functions working. Therefore buttons, submitting for forms, search and shopping carts can work. JQuery on the other hand is not a programming language but it is a JavaScript library used to make programming easier with less code.
As JQuery is not a programming language as JavaScript we cannot compare directly but we can try to understand the advantages that both have and try to use them together for a better programming result. An important advantage of JavaScript is without a doubt it’s speed. JavaScript is run using the client’s browser without the need for completion before running it and it reduces the need for a server with simple applications. While when using JQuery it helps developers to make advanced features using less code.
Provide a list of features of JQuery
Here is a list of the features that JQuery provides:
- DOM selection and manipulation: DOM elements can be selected and manipulated for example a developer can add or remove elements and also use tag name, id or css name to select needed elements.
- Effects: a developer can apply special effects to DOM elements like for example fading in or fading out an element, showing and hiding or applying animation to it.
- Events: functions in the JQuery library are ‘click’, ‘mouseleave’, ‘mouseenter’, ‘keyup’, ‘blur’ etc these functions handle cross-browser compatibility issues.
- Cross-browser support: JQuery supports IE 6.0+, Safari 3.0+, Chrome 9.0+, Opera 9+ and Firefox 2.0+.
- Ajax: JQuery includes AJAX functions. This is required to load data from servers without having to refresh the entire page.
What are the advantages of JQuery?
Let’s take a look to some of the most important advantages of JQuery:
- For sure the most important advantage is the implementation of an animation for example. With the use of JQuery library animation can be implemented with only a few lines of code thus decreasing the efforts, complications and reducing the amount of time for the implementation.
- With the implementation of features that take less lines of code and less time consuming it makes JQuery much more easy to read and therefore more user friendly.
- Event handling and Ajax calls can be done much easier using JQuery as the functions are already pre-defined in the library, it only requires the developer a few lines of code.
- Being a library a minified version of it’s code exists, JQuery is considered to be lightweight.
- With few lines of code and pre-defined function, JQuery is maintainable as it can be reused in different places in the code.
- JQuery is supported in every modern browser.
- JQuery is very straightforward and easy to learn and use.
What is the $ in JQuery and what is it used for?
The dollar sign $ is a synonym used all the time in JQuery syntax. It is used for all the types of selectors used in JQuery for example selecting an element like: $(‘p’) which selects all the paragraphs in a particular context. Another example where the dollar sign selector can be used is when selecting by a class or id like: $(‘.classname). We will go through all the types of selectors in much more detail in the next section.
It is important to note that $ can be replaced where necessary with ‘jQuery()’ which works the same way as $ sign
What are the selectors in JQuery?
Selectors are fundamental in JQuery library . As already explained the dollar sign $ is used in JQuery as a selector. Selectors allow you to manipulate HTML elements therefore it can be used to select or search for elements using their id, class, type or even attributes.
Here is a list and example of some of JQuery selectors that can be used:
The Id Selectors:
The Id being unique in a page is particularly used to find a single element. This is how JQuery selector is used to search for an Id element:
$(“#myForm”)
The Class Selector:
This is how JQuery selector is used to search for HTML elements containing the same class name:
$(“.age”)
The Element Selector
Used to select all elements that are the same for example selecting all the buttons in a page:
$(“button”)
There are other types of elements for example:
$(“:button”) which selects all buttons and input elements of type “button”.
$(“[href]”) selects all href attributes.
$(“p:first”) selects first <p> element.
What is the difference between prop and attr?
To understand the difference between prop and attr, let’s go a step before and make sure that we know exactly the definition of property and attribute.
Property represents the attribute in an HTML DOM tree, while attribute is the extra information that is added to an element usually set to enhance better searching and also easy recognition of the element.
prop() in JQuery sets or gets properties and values of selected items. When prop() is used to get the value it returns the first element of the matched list. On the other hand when used to set the property values, it sets value for all the items matched. prop() method is generally used to get a property value like nodeName, tagName or a custom made property.
While attr() also gets the value of an attribute of the first element in a list of searched items. When attr() is used to get the attribute value, the value of the first element found is returned. Attributes are set to the matched elements when attr() is used to set attributes.
What is the difference between event.preventDefault() and event.stopPropagation() ?
It is very common that these two methods may be confused with one another.
event.stopPropagation() method prevents the further propagation of an event through the parent elements or DOM therefore preventing the parent’s event handler from being executed.
preventDefault() method eliminated the default event therefore it will not happen. This can only be done if the default event can be cancelled. An example when preventDefault() method can be used is:
- To prevent a link from navigating to a URL
- When you need to eliminate the default menu that pops up when right-clicking on a button. A practical example could be to add a personalized menu instead of the default menu.
After going through the explanation of both methods, it becomes clear that the main difference between them is preventDefault() method does prevent propagation of the event through its DOM.
What is deep copy in jQuery?
In this section we will explain the deep cloning method in JQuery. This method performs a deep copy of some particular elements and their related elements including text nodes. This cloning method does not only mean ‘making a copy’ but it allows the original and the copied objects to exist separately without affecting each other.
Here is an example how to perform cloning in JQuery by using the $.extend():
Var object = $.extend( {}, object1, object2 )
Describe the difference between document.ready() and window.onload()
document.ready() this event is triggered when the DOM has been loaded and all elements are accessible and can be used, however this does not mean that all content is loaded images, frames and objects may take a bit more time to load.
It is important that all JQuery code is placed inside this event like the following example:
$(document).ready(function() {
$(“button”).click(function() {
$(“p”).hide();
})
)
window.onload() is triggered later and therefore it provides time for images and frames to load.
Here is an example how window.onload() should be used:
$(window).load(function() {
});
In what circumstances should you use the .promise() method in JQuery
A promise as the name suggests is a promise about a future value. promise() method is executed when all other actions have ended. The returned value of a resolved promise is ‘fx’ which is the default type.
The promise() method should be used when you have a set of animation and you need to execute them all together.
What are JQuery Ajax Events?
JQuery Ajax events are events that are ready to be called and can perform many tasks easily. The ajax() method is used to perform all of these events. There are two types of ajax events;
- Local events: Are callbacks that can be called within the ajax() method. The following are examples of local events:
beforeSend() This event is triggered before the request is sent.
success() This event is triggered when a request succeeds
error() This event is triggered when a request fails
complete() This event is triggered when a request is finished. This is usually run after success or error events.
This is an example how local events are used within the ajax method:
$.ajax({
beforeSend: function(){
}
success: function(){
}
});
- Global events: are triggered on the document. Global events calls to handlers that may be listening. The following are examples of global events:
ajaxSend() This event is triggered before the request is run.
ajaxSuccess() This is triggered only if request is successful
ajaxError() This is triggered when requests fails
ajaxComplete() This is triggered when the request is finished and whenever the ajax request ends.
ajaxStop() This is triggered when all ajax requests have ended.
The following is an example of global events and how they are being used:
$(document).bind(“ajaxSend”, function(){
}).bind(“ajaxError”, function(){
});
What is method chaining in jQuery and what are the advantages ?
The method chaining in JQuery allows the developer to run multiple jQuery commands on the same element using only a single line of code. This is done when chaining actions and methods together. Following there is an example of using method chaining on a title where is width is set and slide up and down is done in a single statement:
$(“#title”).css(“width”, “100px”).slideUp(5000).slideDown(5000);
The advantages of this technique are:
- Fast performance as browsers do not need to find the same elements for every command.
- Code is short therefore can be easily maintained.
- Easy to read
What are effects methods and what are they used for ?
The effects methods in JQuery are methods provided by the JQuery library to add animation on elements particularly in web pages. There are lots of different types of animation we will take a look at some of these interesting animations in the following list:
- fadeIn() fades in the selected element
- fadeOut() fades out the selected element
- fadeToggle() show or hide the element with the use of opacity
- animate() performs animation on css properties
- slideDown() element is slided down
- slideUp() element is slided up
What is the difference between the ID selector and class selector in jQuery?
In JQuery id selectors or class selectors are constantly used to refer to an element. Id is unique therefore when an id selector is used means that it is referring to only one element in the whole web page. The following is an example of an Id selector in JQuery:
$(“#login”)
More than one element in a web page can have the same class, therefore when using the class selector you may be referring to one or more elements. This class selector, selects all the elements with class ‘form’
$(“.form”)
What is the use of the css() method in JQuery?
The css() method in JQuery is very important as it is used to set a style to elements in an easy way. The css() is also used to return style properties of specified elements. Let’s take a look how this can be done using JQuery
When css() method is used to set a property (in this case height) to ‘#login’ element
$(“#login”).css(“height”, “100px”);
When css() method is used to return a css property in this case ‘height’
$(“#login”).css(“height”);
What is Jquery UI ?
JQuery UI is a library built with JQuery, JavaScript, CSS and HTML which contains GUI widget, animated effects and themes to build animated web pages.
As useful as it is, its popularity has decreased nowadays with the modern JavaScript frameworks like Angular, Vue and React which can do much of the work JQuery UI does.
How do you check the data type of an object in JQuery?
To check the data type of an object it is very simple and straightforward. In JQuery it exists a function called ‘.type()’ which returns not only objects but also arrays, strings and numbers. The following is an example that will return the data type of object (obj):
JQuery.type(obj)
What is the difference between .detach() and remove()?
.detach() method eliminates all elements together with its text and child nodes but it still keeps the element’s events and data. A copy of the deleted elements is also stored and it can be used whenever the developer needs.
On the contrary of the .detach() method, .remove() method removes all the elements including all text and child notes and it’s events. It completely eliminates the element forever and the developer cannot retrieve the elements or its data.
How do you disable the back button in jquery?
Something very useful and also secure when developing a website is the need to disable the back button of the browser. This is how it can be done using JQuery:
history.pushState(state, title [, url]);
The state is an object which stores the history entry created by the ‘pushState()’. The state object is added with a new history every time the user navigates to another website.
Most of the time the ‘title is ignored by the browsers this is usually left empty.
It is very important that in the URL variable the current page URL is entered, otherwise the pushState() method will throw an exception. This is done so when the browser is restarted it will use the link in the URL.
A practical example how to disable the back button is here:
window.history.pushState(null, “”, window.location.href);
