Top 50 Advanced Jquery Interview Questions You Must Prepare 19.Mar.2024

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.

$(document).ready(function(){

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

//Code Here if element exists.

});

});

Yes. Jquery supports AJAX.

Below are some of the methods of AJAX:

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

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'');

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.

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.

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

// Check #mycontrolid

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

// Uncheck #mycontrolid

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

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 ,me 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.

Below is the sample code snippet:

$(‘.MyControl’).Hide()

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.

“Clone” method is used to clone the set of controls, which basically me 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;

});

});

To select an element with Id write as below:

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

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.

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.

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();

Below are some of the methods used:

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

Below is the code snippet for this scenario:

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

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

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

$(function(){

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

});

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.

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

For example:

$(‘#MyControl’).Hide()

$(‘#MyControl’).Show()

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.

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

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

  • Type
  • Cache
  • Data
  • URL

“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"});

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'); 

});

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.

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.

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

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.

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.

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');

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’)” />

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.

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"

}

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

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

required: true

});

To select an element with class write as below:

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

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

  • Microsoft
  • Google
  • Jquery

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!");

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

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

  • 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.

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.

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

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(“”));

});

$(document).ready(function(){

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

//Code here for Empty element

}

});

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

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

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 }

});

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

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

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