ADVANCED JQUERY INTERVIEW QUESTIONS

Most Important Frequently Asked Advanced Jquery Interview Questions

1. Question 1. What Is Jquery?

   Answer :

   Jquery is javascript library and it is used for HTML DOM access (manipulating and traversing of HTML DOM elements). It provides most powerful feature of event handling as well.

2. Question 2. Explain We Can Use Jquery?

   Answer :

   Jquery can be used along with other libraries. It works with simple and complex javascript and AJAX.

HTML Interview Questions

3. Question 3. How We Can Use Jquery In Asp.net?

   Answer :

   We can use Jquery by downloading the jquery and use it in our project or can use CDNs available from Google, Microsoft and give the CDN URL in ASPX page.

4. Question 4. Explain Difference Between Jquery And Javascript?

   Answer :

   query is a library and Javascript is a language and Jquery provides full-fledged support for javascript language.

HTML Tutorial

5. Question 5. What Is The Significance Of ‘$’ Sign In Jquery?

   Answer :

   ‘$’ is used as an alias for jquery.

   Below are the examples of how we can use it:

   Eg: $(‘#MyControl’)

Java Script Interview Questions

6. Question 6. What Are The Differences Between “body.onload” And “document.ready” Methods?

   Answer :

   • “body.onload” method will be used only once in a page where as “document.ready” method can be used multiple times in a same page. “body.onload” method will be called once all the resources of the page are loaded. (images, css and DOM).
   • But “document.ready” method called once DOM is ready and it does not wait till other resources are loaded.

7. Question 7. Why We Can Use Jquery In Our Application?

   Answer :

   Below are the main reasons where we can use Jquery:

   • To apply the css for the controls.
   • To give special effects for the controls.
   • Event Handling.
   • To provide the AJAX support.

Java Script Tutorial Core Java Interview Questions

8. Question 8. How We Can Hide And Show The Controls In Jquery?

   Answer :

   Access the control using ‘$’ and use the methods “Hide()” and “Show()” like below.

   For example:

   $(‘#MyControl’).Hide()

   $(‘#MyControl’).Show()

9. Question 9. How To Show The Alert Message On Button Click In Jquery?

   Answer :

   Jquery is one of the most powerful libraries what we have and it provides event handling. This scenario can be handled by “OnClick” of the button. Below is the code snippet –

   <input type=”button” id=”myButton” onclick=”alert(‘Hi’)” />

Zend Interview Questions

10. Question 10. What Is The Meaning Of Selectors In Jquery?

    Answer :

    In javascript we have several methods to find the controls like – “getElementByName” and “getElementByID”, which is used to find the control based on Name of the control and ID of the control respectively. Similarly in Jquery we have find the controls using selectors. Below are some of the selectors -

    • “*” - To Find all the elements of the page.
    • “#” – Used to find the control by ID.
    • “.” - Used to find the control by Class.

Core Java Tutorial

11. Question 11. In Asp.net, Jquery Will Be Added In Content And Master Pages Both?

    Answer :

    No. If the Jquery file added in master page then content pages will going to use that.

CodeIgniter Interview Questions

12. Question 12. What Is The Advantage Of Using Minified Version Of Jquery?

    Answer :

    Advantage of using minified verison of Jquery will mainly be performance. Size of the minified jquery file will be around 76KB where as the normal Jquery file size will be around 180KB.

HTML Interview Questions

13. Question 13. Can You Give An Example Of Selecting An Element Based On Its Class Name ?

    Answer :

    Below is the sample code snippet:

    $(‘.MyControl’).Hide()

Zend Tutorial

14. Question 14. What Are The Difference Between “length” And “size” In Jquery?

    Answer :

    Both are used to find number of elements in an object. “Length” will be used commonly because it’s faster compared to “size” because “length” is a property and “size” is a method.

15. Question 15. How Can We Set The Page Title In Jquery?

    Answer :

    Below is the code snippet used to set the page title:

    $(function(){

    $(document).attr(“title”, “A4 Academics”);

    });

JqueryUI Interview Questions

16. Question 16. What Is The Use Of Jquery Connect?

    Answer :

    Connect method is used to bind one function to another and it’s used to execute the function when a function is executed from another object.

CodeIgniter Tutorial

17. Question 17. How To Use Ajax In Jquery?

    Answer :

    Jquery supports AJAX calls, below is the code snippet of AJAX in Jquery –

    $.ajax({

    url: ‘MyURL',

    success: function(response) {

    //My Code goes here

    },

    error: function(err) {

    //My Code goes here }

    });

jQuery Mobile Interview Questions

18. Question 18. What Is “noconflict” Method In Jquery?

    Answer :

    Jquery.Conflict method is used in case other client side libraries used along with Jquery then we will use this method.

    Eg: Prototype.js can be used with Jquery and this Prototype.js also uses “$” symbol for accessing the element. So for this purpose we are using Jquery.Conflict method.

Java Script Interview Questions

19. Question 19. What You Mean By Cdn?

    Answer :

    CDN is known as – “Content Distribution Network”, which is a network of servers which is deployed in large data center and can be accessed using internet.

JqueryUI Tutorial

20. Question 20. Explain The Advantages Of Using Cdns?

    Answer :

    Below are the advantages of using CDNs:

    • Performance will be improved as there would not be much load on server.
    • Jquery libraries will be loaded faster.
    • Caching for the Jquery libraries will be enabled on use of CDNs.

JSON (JavaScript Object Notation) Interview Questions

21. Question 21. Which Providers Will Give Jquery Cdns?

    Answer :

    Following are the list of providers gives CDNs for Jquery library:

    • Microsoft
    • Google
    • Jquery

22. Question 22. Explain The Difference Between “this” And “$(this)” In Jquery?

    Answer :

    “this” refers to the current element in the scope. “this” will be used in traditional javascript and “$(“this”)” if used then we will get the benefits of Jquery methods.

    For example:

    Using “$(this)” -

    $(document).ready(function(){

    $('#mycontrolid').change(function(){

    alert($(this).text());

    });

    });

    Using “this” -

    $(document).ready(function(){

    $('# mycontrolid'').change(function(){

    alert(this.innerText);

    });

    });

JSON (JavaScript Object Notation) Tutorial

23. Question 23. How We Can Check Element Empty In Jquery?

    Answer :

    $(document).ready(function(){

    if ($('#mycontrolid’).is(':empty')){

    //Code here for Empty element

    }

    });

Java J2EE Technical Support Engineer Interview Questions

24. Question 24. How We Can Check Element Exists Or Not In Jquery?

    Answer :

    $(document).ready(function(){

    if ($('# mycontrolid’).length > 0){

    //Code Here if element exists.

    });

    });

Core Java Interview Questions

25. Question 25. How We Can Use “each” Function In Jquery?

    Answer :

    For iterating over objects we will be using this method. Each function uses “length” property of the object internally. Index and Text of each object can be fetched during iteration.

26. Question 26. What Are The Differences Between “parents” And “parent” Methods?

    Answer :

    In DOM structure “parents” method is used to traverse all along the DOM tree, whereas “parent” method is used to traverse only one level.

Asp Dot Net Mvc Interview Questions

27. Question 27. Explain “empty” Method In Jquery?

    Answer :

    Empty method is generally used to remove the child elements and the text associated to the elements.

    For example:

    Hi, A4 Academics. 

    In the above scenario nothing will be shown in UI as all the child controls and text will be removed.

Zend Interview Questions

28. Question 28. How We Can Check/uncheck Radio Buttons In Jquery?

    Answer :

    Below is the code snippet to check/uncheck radio buttons:

    // Check #mycontrolid

    $('#mycontrolid').attr('checked', true);

    // Uncheck #mycontrolid

    $('#mycontrolid').attr('checked', false);

29. Question 29. Explain The Difference Between “live” And “bind” Methods In Jquery?

    Answer :

    • “bind” and “live” methods are used to attach the events for the controls but there are pros and cons for each. 
    • “bind” – This method is used to attach the events for the elements which are static. We can not attach the events for the dynamic elements.
    • “live” – “live” method supports dynamic element event handling. But it has performance issues if you used all along the page.

30. Question 30. What Is The Use Of “clone” Method In Jquery?

    Answer :

    “clone” method is used to copy the matched elements. So all its childrens are also being copied along with the parent element.

    For example:

    $(document).ready(function(){

    $('#mycontrolid').click(function(){

    $('#mySpan').clone().prependTo("div");;

    return false;

    });

    });

31. Question 31. What Is The Use Of “event.preventdefault” In Jquery?

    Answer :

    This method is used to prevent the default action from happening.

    For example:

    $("#mycontrolid").click(function(event){

    event.preventDefault();

    });

32. Question 32. What Is The Use Of “event.stoppropagation” In Jquery?

    Answer :

    This method is used to stop the event bubbling from the child elements. It prevents parent being notified to the child events.

    Method – “event.isPropagationStopped()” can be used to check whether method – “stopPropagation” was called or not.

33. Question 33. What Does $("div.parent") Will Select?

    Answer :

    It means select all the div elements with class – “parent”.

CodeIgniter Interview Questions

34. Question 34. Which Methods Are Used To Provide Effects?

    Answer :

    Below are some of the methods used:

    • Toggle()
    • FadeIn()
    • FadeOut()
    • Hide()
    • Show()

35. Question 35. Explain Methods “childrens” And “find” In Jquery?

    Answer :

    “Childrens” method is used to find the child controls of the element but its limited to only one level where as “find” method can be used to find the controls in any level in DOM tree.

36. Question 36. Why To Use “data” Method In Jquery?

    Answer :

    “data” method is used to attach the data to the elements in DOM. When the element is removed data also will be removed.

    For example:

    jQuery.data( document.body, "a4academics", 40 );

JqueryUI Interview Questions

37. Question 37. What Is The Use Of Validation Jquery Plugins?

    Answer :

    In MVC we can use these Jquery Plugins in the form of rules like below -

    $('#MyControlId').rules("add", {

    required: true

    });

38. Question 38. How We Can Implement Animation Effects In Jquery?

    Answer :

    “Animate” method is used for animation in Jquery. This method is used to change the element look and feel and give extra effects to the elements.

    For example:

    $("#MyControlID").animate({height:"45px"});

39. Question 39. Which Method To Be Used To Stop The Animation?

    Answer :

    In Jquery, we have to use the method called – “stop()” to stop the animation.

40. Question 40. How Can We Disable The Animation?

    Answer :

    We can use the property – “fx.off” to disable the Jquery animation. Set the property value to true then it will disable the animation in Jquery.

jQuery Mobile Interview Questions

41. Question 41. What Is The Use Of Clone Method And Give An Example To Create It In Jquery?

    Answer :

    “Clone” method is used to clone the set of controls, which basically means to copy the set of elements which are matched on selectors. It copies the descendant elements along with the parent element.

    For example:

    $(document).ready(function(){

    $('#mycontrolid').click(function(){

    $('#mycontrolid').clone().appendTo('body');

    return false;

    });

    });

42. Question 42. Will Events Are Also Copied On Clone In Jquery?

    Answer :

    By Default “clone” method does not clone the events unless it is being instructed to copy. When “clone” method is being instructed to clone the events also then along with elements, events are also being copied. “Clone”method takes a Boolean parameter, pass true in clone method to copy the events like below -

    $('#mycontrolid').clone(true).appendTo('body');

JSON (JavaScript Object Notation) Interview Questions

43. Question 43. Explain The Difference Between “attr” And “prop” In Jquery?

    Answer :

    • Attr() – This method is used to get the value of attribute of first element.
    • Prop() – This method is used to get the value of first element property.

44. Question 44. Can We Include Different Versions Of Jquery In Web Page?

    Answer :

    Yes. We can include different versions of Jquery in same page.

45. Question 45. How We Can Delay The Execution Of Document.ready Method In Jquery?

    Answer :

    We can use method – “holdReady” for this purpose. Below is the sample code snippet –

    $.holdReady(true);

46. Question 46. Explain Chaining?

    Answer :

    This is one of the powerful or robust feature of Jquery. Chaining means connecting multiple events/ selectors/ functions. Advantage of this would be – code will be easy to manage and good performance. Chain starts from left.

47. Question 47. Can You Give An Example For Chaining Along With Code Snippet?

    Answer :

    Below is the sample code snippet:

    Old Code:

    $(document).ready(function(){

    $('#MyControlID').addClass('test');

    $('#MyControlID').css('color', 'yellow');

    $('#MyControlID').fadeIn('fast');

    });

    New Code after chaining:

    $(document).ready(function(){

    $('#MyControlID').addClass('test')

    .css('color', 'yellow')

    .fadeIn('fast'); 

    });

48. Question 48. Explain Caching In Jquery?

    Answer :

    Caching is temporary memory to store the data, which increases the performance of the application. So in Jquery we can use the similar concept to store the data instead of repeating as shown below:

    Old Code:

    $('#MyControlID').addClass('test');

    $('#MyControlID').css('color', 'yellow');

    New Code for caching:

    var $mycontrol = $("#MyControlID").css("color", "red");

    //Do somre stuffs here

    $mycontrol.text("Error occurred!");

49. Question 49. How We Can Write Code Specific To Browser In Jquery?

    Answer :

    By using the property – “Jquery.Browser” we can write the browser specific code.

50. Question 50. Will Jquery Support Ajax ? Mention Some Ajax Methods Which Can Be Used In Jquery?

    Answer :

    Yes. Jquery supports AJAX.

    Below are some of the methods of AJAX:

    • Get()
    • Post()
    • GetJSON()
    • Ajax()

51. Question 51. How We Can Get The Value Of Multiple Css In Single Statement Of Jquery?

    Answer :

    Below is the sample code to explain:

    var Mypropertiescollection = $("#MyControlID").css([ "height", "width", "backgroundColor" ]);

    In the above code snippet variable – “Mypropertiescollection” will have array like below –

    {

    height: "100px",

    width: "200px", 

    backgroundColor: "#FF01EF"

    }

52. Question 52. Explain Finish Method In Jquery?

    Answer :

    “finish” method is used to stop the animations of the elements and bring the elements to its final state.

53. Question 53. What Are The Parameters Which Are Being Used In Ajax Jquery?

    Answer :

    Below are the list of 4 parameters which are used in AJAX calls –

    • Type
    • Cache
    • Data
    • URL

54. Question 54. Can We Debug Jquery? If Yes, How Can We Do That?

    Answer :

    Yes. We can debug Jquery file by using “debugger” keyword. We can add the “debugger” keyword to the line of Jquery file where we have to debug.

55. Question 55. Write A Code Snippet To Sort String Array In Jquery?

    Answer :

    Below is the code snippet which is used to sort the string array –

    $(document).ready(function(){

    var a4acarray = [ “Apple”,”Orange”,”Banana”];

    sortedarray = a4acarray.sort();

    $(“#mycontrolID”).html(sortedarray.join(“”));

    });

56. Question 56. Explain “resize” Method In Jquery?

    Answer :

    “Resize” method used with window object. This method will be fired when the size of the browser window changes. For example

    $( window ).resize(function() {

    $( "#myControlID" ).append( "<div>Test Content</div>" );

    });

    As per above snippet when browser window’s size changes, content will be appended to the control – “myControlID”.

57. Question 57. How To Get The Selected Value Of Dropdown In Jquery?

    Answer :

    Below is the sample code to bind to dropdown (selected) –

    <select id="myControlID">

    <option value="1">AA</option>

    <option value="2">BB</option>

    <option value="3">CC</option>

    <option value="4">DD</option>

    </select>

    Get the selected value –

    $("#myControlID option:selected").text();

58. Question 58. How To Disable Elements Using “attr” In Jquery?

    Answer :

    $('#myControlID').attr('disabled', true);

    $('#myControlID').attr('disabled', false);

59. Question 59. How To Check/uncheck Radio Button Using Attr In Jquery?

    Answer :

    $('#myControlID').attr('checked', true);

    $('#myControlID').attr('checked', false);

60. Question 60. Why To Use “siblings” Method? Give Sample Code To Demonstrate The Same?

    Answer :

    When we need to get the list of sibling elements then “sibling” method is used on parent element. Selectors can be used to filter the siblings. For example

    <ul>

    <li> itemA </li>

    <li id=”mycontrolID”> itemB </li>

    <li class=”mycontrolclass”> itemC </li>

    <li class=”mycontrolclass”> itemD </li>

    </ul>

    $(‘li#mycontrolID’).siblings().css(‘color’,’yellow’);

61. Question 61. What Is The Difference Between Methods - “css(‘width’)” And “width()” In Jquery?

    Answer :

    Both methods are used to change the widths of the elements.

    For example:

    $(‘#myControlID’).css(‘width’,’150px’);

    $(‘#myControlID’).width(150);

    Above is the code to change the width of the element to 150px. As you can see “css(width)” method takes the width in pixels whereas for “width” method no need to explicitly mention the width in pixels.

62. Question 62. Explain “slidetoggle” Method In Jquery?

    Answer :

    This method is used to give the animation effects to the elements in Jquery. SlideToggle method uses following parameters:

    • Speed – This is an optional parameter and it specifies the speed of animation effect.
    • Easing - This is an optional parameter and this specifies the speed of animation effect at different interval of time.
    • Callback – This parameter is optional and it accepts the callback function which will be executed once the execution of “slideToggle” method is completed.

63. Question 63. Explain “param” Method In Jquery?

    Answer :

    “param” method is used for object or array in the manner of serialization. While making AJAX calls, param method can be used to serialize the querystrings.

64. Question 64. Give An Example With Code Snippet For “param” Method?

    Answer :

    customerObj=new Object();

    customerObj.name="A4Academics";

    customerObj.Designation=”IT”;

    $("#myControlID").click(function(){

    $("span").text($.param(customerObj));

    });

    Now the span element will have value like - “name=A4Academics&Designation=IT”

65. Question 65. What Is “unbind” In Jquery?

    Answer :

    “unbind” method is used to remove the event handlers associated to the element. This method can be used with selectors to remove the event handlers of the selected elements.

66. Question 66. Why To Use Jquery Dialog?

    Answer :

    Jquery Dialog is used like a pop up and if Jquery used in MVC then we can render the cshtml contents in Jquery Dialog and its used like a confirm box (as javascript) too.

67. Question 67. How Can We Select Elements In Two Different Classes In Jquery?

    Answer :

    Below is the sample code for showing how we can do it –

    $(".MyClass1.MyClass2").css('color','green');

68. Question 68. How To Select All The <span> Elements Which Has Text ‘a4academics’?

    Answer :

    We can select all <span> elements using below code –

    $("span:contains('a4academics’')")

69. Question 69. How We Can Select The Specified <li> Element From The List Of <li> Elements In <ul>?

    Answer :

    If we want to get the 4th <li> from the list of elements in <ul> then we can write code as below –

    $("ul li:eq(3)") // Index will start from 0.

70. Question 70. In <table> Design Change The Color Of Even <tr> Elements To “green” And Change The Color Of Odd <tr> Elements To “blue” Color? Give An Example Code?

    Answer :

    Below is the sample code snippet for this scenario –

    $("tr:even").css('color','green')

    $("tr:odd").css('color','blue')

71. Question 71. Write A Code Snippet To Select <li> Elements Which Are In Index Greater Than 5 And Less Than 10 In Jquery?

    Answer :

    Below is the code snippet for this scenario:

    • $("ul li:gt(5)").css('color','green')
    • $("ul li:lt(10)").css('color','blue')

72. Question 72. Write A Code Snippet To Select All <p> Elements Which Are In All Pages Except First Page?

    Answer :

    Below is the code snippet for this scenario:

    $("p :not(:first)")

73. Question 73. What Is Jquery In The Context Of Web Applications?

    Answer :

    jQuery is nothing but a collection of well written javascript code.

    In other words Jquery is ready made concise and fast JavaScript Library to be used.

74. Question 74. What Are The Advantages Of Using Jquery Over Javascript In Asp.net Web Application?

    Answer :

    Below are the advatages of using jQery over JavaScript:

    1. Jquery is well written optimised javascript code so it will be faster in execution unless we write same standard optimised javascript code.
    2. Jquery is concise java script code ,means minimal ammount of code is to be written for the same functionality than the javascript.
    3. Javascript related Development is fast using Jquery because most of the functionality is already written in the library and we just need to use that.
    4. Jquery has cross browser support ,so we save time for supporting all the browsers.

75. Question 75. How To Use Jquery In Asp.net Web Application?

    Answer :

    To use jQuery in ASP.NET web application follow the below steps:

    1. Go to http://jquery.com/(The official jQuery WebSite)
    2. Download latest .js jQuery file from the website. 
    3. Put it the script(or other folder) in the root of your web application 
    4. Add the below tag on the page where you want to use Jquery script type="text/javascript" src="script/jQueryDownLoadedFileName.js" /script

76. Question 76. What Is The Use Of Jquery Min Js File In Asp.net Web Application?

    Answer :

    JQuery min .js file is actully a minified version of Actual JQuery .js. The min files have less size but same content so this improves the performance.so You should prefer to use min files.

77. Question 77. What Is The Advantages Of Use Of Document.ready Functions In Jquery?

    Answer :

    Advantage of using $(document).ready(function () in jQuery is that the code inside this function will excecute only when the full page has been loaded so that there will be no error like the DOM object on which the Jquery has to execute is not loaded.

78. Question 78. Can We Write More Than One Document.ready Jquery Functions In One Page?

    Answer :

    Yes we can write more than one jquery $(document).ready(function ()

    in one page.This is helpful when you have large Jquery code and you want to split it in multiple files.

79. Question 79. How To Select An Element With Id In Jquery?

    Answer :

    To select an element with Id write as below:

    var divValue = $(''#sampleDivId'').val();

80. Question 80. How To Select An Element With Class In Jquery?

    Answer :

    To select an element with class write as below:

    $(".sampleClass").css("border","2px solid blue");

81. Question 81. What Is The Difference Between Jquery Find And Children Methods?

    Answer :

    • The difference between find() and children() methods
    • are that the children only travels a single level down the DOM tree
    • while the find travels at all level down the DOM tree.

82. Question 82. How To Use Length Function In Jquery To Text Existance Of An Element By Id?

    Answer :

    To test if an element exists we can use length method in jQuery as below:

    if $(''#mySampleDiv'').length )//Tests wheter the div with id mySampleDiv exists or not

    $(mySampleDiv).find(''div'');

Topic: Advanced Jquery Interview Questions