Jquery interview questions advance: Lets quickly go through these top 20 Important Jquery interview questions for experienced.
I with a goal to keep you at the top of jquery have brought a summed up top 20 Important Jquery interview questions.
1. What is jQuery and how is it different from javascript?
If you know what exactly is Javascript then in quite simple words You can define jQuery is just a JavaScript library. And if you do not have knowledge about Javascript then you can define jQuery as a list of methods made in javascript which is then bundled into a library, from where you can extract its function and use them. So with the use of jQuery, the code burdened is reduced and you achieve the functionality in a much ease way.
So with the above said it must be cleared that jQuery is built on javascript to facilitate the use of code and achieve the desired functionality.
2. Why do we need to learn jquery for building a website?
Jquery is quite playful, if you start using it, then you get to know its relaxing and suitable features. It’s advisable for a developer to learn jQuery as it is easier, reliable, and much faster as it gets handled at the client-side.
Let’s dive into an example where you see how to disable a button click in javascript and :
<input id="btnSubmit" type="button" value="+" style="background-color:grey" onclick="Me();"/>With Javascript :
document.getElementById(“btnSubmit”).disabled = true;
With Jquery:
$(“#btnSubmit’).prop(‘disabled’, true)
3. What is conflict in jQuery?How we achieve it?
jQuery uses $ as a shortcut for jQuery.So there are more libraries which do use $, with the inclusion of two such libraries the application gets muffled and a conflict occurs. This is called conflict in jQuery.
To stop such behavior in our application, we can use jQuery.noConflict(). Let’s take a look over the code.
<script src="/content/first.js"></script>
<script src="/content/jquery.min.js"></script><script>
var $jC = jQuery.noConflict();
$jC(document).ready(function() {
$jC("#btnSubmit").hide();
});3.Difference between $ and $()?Explain difference between $.each() and $().each()?
When we talk about $, then we go after the dealt namespace,which acts as like jQuery object methods , whereas $() acts as a method inside that namespace.This can be utterly puzzling but with the right approach it can be well understood.
$.each(): It explicitly acts as a method in the jQuery namespace , where its not called on a particular selection.
$().each(): it points with the particular elements selection and then loop it for the entire number of times it gets repeated.
$.each([ "foo", "bar", "baz" ], function( idx, val ) {
console.log( "element " + idx + " is " + val );
});
$('.divSub').each(function( i,j ) {
alert(i);
});4.What do you understand by $( document ).ready() ?
A certain html page with the enabled javascript can only be operated or controlled until and unless the document is “ready.” jQuery which automatically detects this state of readiness whenever the code is included inside $( document ).ready() or $.function()
5.Differentiate between $( document ) and $( window )?
The javascript code included inside
$( window ).on( “load”, function()
{
//statement
})
will run once the entire page (images or iframes), not just the DOM, is ready.
The javascript code included inside
$( document ).ready(function() {
{
//statement
})
will run once the DOM, is ready.
** This means $( document ) get loaded faster and will produce the output quicker than $( window )
$( window ).on( "load", function()
{
console.log('window');
})
$( document ).ready(function() {
{
console.log('document ');
})
** Here output ius:
document
window6. What is traversing in jQuery?
This is quite a handy and interesting feature of jQuery.With the help of different jQuery methods, you can dive deeper into any element by just using any of the id used in HTML elements.
You get the
siblings,
parents,
children
for any of the DOM Elements.
7.Explain traversing with a suitable example.
Let’s dive into some of the examples..
<div class="gparent">
<div class="parent">
<div class="child">
<span class="subchild1"></span>
<span class="subchild2"></span>
<span class="subchild3"></span>
</div>
</div>
<div class="Parent1"></div>
</div>- $(‘.subchild2’).next().html(); // Calling subchild3
- $(‘.subchild2’).prev().html(); //calling subchild1
- $(‘.subchild2’).parent().html(); //calling child
- $( “div.parent” ).siblings();
- $( “div.parent” ).nextAll().last();
- $(‘.subchild2’).parent().children().each(function(){});//looping subchild1 , subcjild2 , subchild3
8.Talk about CSS Styling?Where it can be more helpful?
jQuery offers a handy way to get and set CSS properties of elements.Its so classy and easy to use .
Sometimes you need to rely on CSS styling with jQuery i.e For iPhone, iPad we get CSS disturbance with certain elements of DOM Element whose size needs to be varied and adjusted as with the user’s choice of screen.let’s see an example
$( "subchild2" ).css( "color", "red" ); // Setting an individual property.
// Setting multiple properties.
if(navigator.platform.match(/i(Phone|Pod))/i))
{
$( "subchild2" ).css({
padding-left: "10px",
margin-right: "10px"
});
}9. Describe CDN.
CDN: Content Delivery Network or Content Distribution Network. So when you want to load a particular javascript library unto your machine, then either you need to download the library or you can contact a large distributed system of servers deployed in multiple data centers across the internet which is called CDN. With the use of it, the files from servers get loaded at a higher bandwidth that leads to faster loading time.
Advantages of using CDN are-
- Library(jQuery) download time will be reduced.
- The library will be cached in the user’s browser and will get stored throughout the use of server or till the cache is not cleared, and now if the user visited another website that references the same jQuery library then, the user need not download the jQuery library.
10. What is Ajax in jQuery ?
Perform an asynchronous HTTP (Ajax) request.
Coming to detail, Ajax is a way to collect the data from different API or the website database from where its called. It calls the particular method of the website and then collects or posts the data. It has got a strong dominance while collecting the data. It facilitates the users to collect the data either in JSON or in XML. With great speed it can load the desired data and can display them on the website.
11.Explain the use of Ajax.
$.ajax({
type: 'POST',
url: '/JSonService/ServicePage.asmx/GetAllData',
dataType: 'json',
data: {
ActivityType: activity,
Year: Year,
Month: Month,
},
success: function (result) {
console.log('success')
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr);
},
complete: function () {
console.log('completed')
}
});12. Explain the difference between grep() and filter() function used.
They both function quite similarly however they differ in their usage.
The filter function is intended to be used with HTML elements, part of jQuery.fn so it’s aim is to be used with selector. You can’t do that with the grep function, which is the jQuery tool method and is intended to be a utility function for arrays.
$('#level-filter').find('button').filter('[val=1]').removeClass('active'); str = jQuery.grep(str, function (n, i) {
return (n !== sFilter + "," + val);
});13. Difference between Detach() , Empty(), and Remove() in jQuery.
The Detach() method removes the selected elements, including all text and child nodes. However, it keeps data and events.
Remove(): remove the elements and its data and events
Empty(): To remove only the content from the selected elements
14. What are the storages available for jquery to store across the pages?
There are different types of storage that are available in jQuery.
- localStorage
- cookies
- sessionStorage
With the help of the above storages, you can save the value across the webpage and can retrieve them anywhere.
15. What is local storage and session storage in jQuery?
localStorage
you can set the value just like a variable and can retiree across the pages
localStorage.setItem(key,value);
localStorage.getItem(key);
cookies
You can set the value till the time it rests on your system.
$.cookie(“sample”, “1”);
$.removeCookie(“sample”);
sessionStorage
It remains with a certain limit of time.Here by default, it stays in the memory for 20 min. But you can extend the time with your choice
sessionStorage.setItem(“username”, “1”);
16.Difference betwen click() and on (event , function())?
$(“#btnSubmit”).click(function(){
$(this).addClass(‘popout’)
}
$(“#btnSubmit”).on(‘click’,function(){
$(this).addClass(‘popout’)
}
Both give the same output but the difference occurs when but submit gets loaded after the certain method of jquery fires and Domis loaded. So after loading of certain DOM after the page gets executed then we popout class can be added only with .on() event, not with .click()
17.Write a query to validate a mail.
11.$("#Email").change(function () {
debugger;
var emailFreeReg = /^\b[A-Z0-9._%-]+@@[A-Z0-9.-]+\.[A-Z]{2,4}\b$/i
email = emailFreeReg.test($("#Email").val().trim().toLowerCase());
if (!email) {
alert("pleasse enter a valid Email");
}
});18.Different below methods used for .
Split():Split the values with the delimiter assigned
var default_text =”tenoclocks, lets shine”
var s = [];
s = default_text.split(” ,”);
trim():
var s= “hello world “;
s= s.Trim()
toLowercase():
s= s.toLowercase()
toUpperCase():
s= s.toLowercase()
Other important methods
- hasClass()
- removeClass()
- Show()
- Hide()
- Remove()
- addClass()
- animate()
19.Differnet Events
- Load
- bind
- blurr
- keypress
- key-up
- key-down
- change
- blur
- submit
- hover
20.Can you explain the differences between “attr” And “prop” In jQuery?
Attr() is used to extract the value of the attribute used in for selected DOM.
Prop() method is used in order to obtain the value for selected DOM property.
$('#Month').next().find('.selected ').attr('data-value')
$("btn").prop("disabled" , true)Also Read:
20 Important C# interview questions for experienced
20 Important SQL Server interview questions for experienced.