85+ Advanced JQuery Interview Questions And Answers

Spread the love

Advanced JQuery Interview Questions

Question 1. What Is Jquery?

Jquery is javascript library and it’s used for HTML DOM entry (manipulating and traversing of HTML DOM parts). It gives strongest characteristic of occasion dealing with as nicely.

Question 2. Explain We Can Use Jquery?

Jquery can be utilized together with different libraries. It works with easy and sophisticated javascript and AJAX.

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

We can use Jquery by downloading the jquery and use it in our undertaking or can use CDNs out there from Google, Microsoft and provides the CDN URL in ASPX web page.

Question 4. Explain Difference Between Jquery And Javascript?

question is a library and Javascript is a language and Jquery gives full-fledged assist for javascript language.

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

‘$’ is used as an alias for jquery.

Below are the examples of how we will use it:

Eg: $(‘#MyControl’)

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

“body.onload” technique will likely be used solely as soon as in a web page the place as “document.ready” technique can be utilized a number of instances in a similar web page. “body.onload” technique will likely be known as as soon as all of the sources of the web page are loaded. (photographs, css and DOM).
But “document.ready” technique known as as soon as DOM is prepared and it doesn’t wait until different sources are loaded.
Question 7. Why We Can Use Jquery In Our Application?

Below are the principle causes the place we will use Jquery:

To apply the css for the controls.
To give particular results for the controls.
Event Handling.
To present the AJAX assist.

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

Access the management utilizing ‘$’ and use the strategies “Hide()” and “Show()” like under.

For instance:

$(‘#MyControl’).Hide()

$(‘#MyControl’).Show()

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

Jquery is likely one of the strongest libraries what now we have and it gives occasion dealing with. This state of affairs will be dealt with by “OnClick” of the button. Below is the code snippet –

<enter kind=”button” id=”myButton” onclick=”alert(‘Hi’)” />

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

In javascript now we have a number of strategies to seek out the controls like – “getElementByName” and “getElementByID”, which is used to seek out the management based mostly on Name of the management and ID of the management respectively. Similarly in Jquery now we have discover the controls utilizing selectors. Below are a number of the selectors –

“*” – To Find all the weather of the web page.
“#” – Used to seek out the management by ID.
“.” – Used to seek out the management by Class.

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

No. If the Jquery file added in grasp web page then content pages will going to make use of that.

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

Advantage of utilizing minified verison of Jquery will primarily be efficiency. Size of the minified jquery file will likely be round 76KB the place as the traditional Jquery file measurement will likely be round 180KB.

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

Below is the pattern code snippet:

$(‘.MyControl’).Hide()

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

Both are used to seek out variety of parts in an object. “Length” will likely be used generally as a result of it’s sooner in comparison with “size” as a result of “length” is a property and “size” is a technique.

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

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

$(operate()

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

);

Question 16. What Is The Use Of Jquery Connect?

Connect technique is used to bind one operate to a different and it’s used to execute the operate when a operate is executed from one other object.

Question 17. How To Use Ajax In Jquery?

Jquery helps AJAX calls, under 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 }

});

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

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.

Question 19. What You Mean By Cdn?

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.

Question 20. Explain The Advantages Of Using Cdns?

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.

Question 21. Which Providers Will Give Jquery Cdns?

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

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

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

});

});

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

$(document).ready(function(){

if ($(‘#mycontrolid’).is(‘:empty’))

//Code right here for Empty component

});

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

$(doc).prepared(operate(){

if ($(‘# mycontrolid’).size > 0));

});

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

For iterating over objects we will likely be utilizing this technique. Each operate makes use of “length” property of the thing internally. Index and Text of every object will be fetched throughout iteration.

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

In DOM construction “parents” technique is used to traverse all alongside the DOM tree, whereas “parent” technique is used to traverse just one stage.

Question 27. Explain “empty” Method In Jquery?

Empty technique is usually used to take away the kid parts and the textual content related to the weather.

For instance:

Hi, A4 Academics.
In the above state of affairs nothing will likely be proven in UI as all of the youngster controls and textual content will likely be eliminated.

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

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

// Check #mycontrolid

$(‘#mycontrolid’).attr(‘checked’, true);

// Uncheck #mycontrolid

$(‘#mycontrolid’).attr(‘checked’, false);

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

“bind” and “live” strategies are used to connect the occasions for the controls however there are execs and cons for every.
“bind” – This technique is used to connect the occasions for the weather that are static. We cannot connect the occasions for the dynamic parts.
“live” – “live” technique helps dynamic component occasion dealing with. But it has efficiency points in the event you used all alongside the web page.
Question 30. What Is The Use Of “clone” Method In Jquery?

“clone” technique is used to repeat the matched parts. So all its childrens are additionally being copied together with the mum or dad component.

For instance:

$(doc).prepared(operate(){

$(‘#mycontrolid’).click on(operate(){

$(‘#mySpan’).clone().prependTo(“div”);;

return false;

});

});

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

This technique is used to stop the default motion from taking place.

For instance:

$(“#mycontrolid”).click on(operate(occasion));

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

This technique is used to cease the occasion effervescent from the kid parts. It prevents mum or dad being notified to the kid occasions.

Method – “event.isPropagationStopped()” can be utilized to test whether or not technique – “stopPropagation” was known as or not.

Question 33. What Does $(“div.mum or dad”) Will Select?

It means choose all of the div parts with class – “parent”.

Question 34. Which Methods Are Used To Provide Effects?

Below are a number of the strategies used:

Toggle()
FadeIn()
FadeOut()
Hide()
Show()
Question 35. Explain Methods “childrens” And “find” In Jquery?

“Childrens” technique is used to seek out the kid controls of the component however its restricted to just one stage the place as “find” technique can be utilized to seek out the controls in any stage in DOM tree.

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

“data” technique is used to connect the info to the weather in DOM. When the component is eliminated information additionally will likely be eliminated.

For instance:

jQuery.information( doc.physique, “a4academics”, 40 );

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

In MVC we will use these Jquery Plugins within the type of guidelines like under –

$(‘#MyManagementId’).guidelines(“add”, {

required: true

});

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

“Animate” technique is used for animation in Jquery. This technique is used to alter the component feel and appear and provides further results to the weather.

For instance:

$(“#MyControlID”).animate();

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

In Jquery, now we have to make use of the strategy known as – “stop()” to cease the animation.

Question 40. How Can We Disable The Animation?

We can use the property – “fx.off” to disable the Jquery animation. Set the property worth to true then it’s going to disable the animation in Jquery.

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

“Clone” technique is used to clone the set of controls, which principally means to repeat the set of parts that are matched on selectors. It copies the descendant parts together with the mum or dad component.

For instance:

$(doc).prepared(operate(){

$(‘#mycontrolid’).click on(operate()

$(‘#mycontrolid’).clone().appendTo(‘physique’);

return false;

);

});

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

By Default “clone” technique doesn’t clone the occasions except it’s being instructed to repeat. When “clone” technique is being instructed to clone the occasions additionally then together with parts, occasions are additionally being copied. “Clone”technique takes a Boolean parameter, move true in clone technique to repeat the occasions like under –

$(‘#mycontrolid’).clone(true).appendTo(‘physique’);

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

Attr() – This technique is used to get the worth of attribute of first component.
Prop() – This technique is used to get the worth of first component property.
Question 44. Can We Include Different Versions Of Jquery In Web Page?

Yes. We can embody totally different variations of Jquery in similar web page.

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

We can use technique – “holdReady” for this goal. Below is the pattern code snippet –

$.holdReady(true);

Question 46. Explain Chaining?

This is likely one of the highly effective or strong characteristic of Jquery. Chaining means connecting a number of occasions/ selectors/ features. Advantage of this is able to be – code will likely be straightforward to handle and good efficiency. Chain begins from left.

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

Below is the pattern code snippet:

Old Code:

$(doc).prepared(operate());

New Code after chaining:

$(doc).prepared(operate()

$(‘#MyControlID’).addClass(‘take a look at’)

.css(‘colour’, ‘yellow’)

.fadeIn(‘quick’);

);

Question 48. Explain Caching In Jquery?

Caching is short-term reminiscence to retailer the info, which will increase the efficiency of the applying. So in Jquery we will use the same idea to retailer the info as an alternative of repeating as proven under:

Old Code:

$(‘#MyControlID’).addClass(‘take a look at’);

$(‘#MyControlID’).css(‘colour’, ‘yellow’);

New Code for caching:

var $mycontrol = $(“#MyControlID”).css(“colour”, “crimson”);

//Do somre stuffs right here

$mycontrol.textual content(“Error occurred!”);

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

By utilizing the property – “Jquery.Browser” we will write the browser particular code.

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

Yes. Jquery helps AJAX.

Below are a number of the strategies of AJAX:

Get()
Post()
GetJSON()
Ajax()
Question 51. How We Can Get The Value Of Multiple Css In Single Statement Of Jquery?

Below is the pattern code to elucidate:

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

In the above code snippet variable – “Mypropertiescollection” may have array like under –

peak: “100px”,

width: “200px”,

backgroundColor: “#FF01EF”

Question 52. Explain Finish Method In Jquery?

“finish” technique is used to cease the animations of the weather and produce the weather to its remaining state.

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

Below are the checklist of Four parameters that are utilized in AJAX calls –

Type
Cache
Data
URL

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

Yes. We can debug Jquery file through the use of “debugger” key phrase. We can add the “debugger” key phrase to the road of Jquery file the place now we have to debug.

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

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

$(doc).prepared(operate());

Question 56. Explain “resize” Method In Jquery?

“Resize” technique used with window object. This technique will likely be fired when the scale of the browser window adjustments. For instance

$( window ).resize(operate() {

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

});

As per above snippet when browser window’s measurement adjustments, content will likely be appended to the management – “myControlID”.

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

Below is the pattern code to bind to dropdown (chosen) –

<choose id=”myControlID”>

<choice worth=”1″>AA</choice>

<choice worth=”2″>BB</choice>

<choice worth=”3″>CC</choice>

<choice worth=”4″>DD</choice>

</choose>

Get the chosen worth –

$(“#myControlID choice:chosen”).textual content();

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

$(‘#myControlID’).attr(‘disabled’, true);

$(‘#myControlID’).attr(‘disabled’, false);

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

$(‘#myControlID’).attr(‘checked’, true);

$(‘#myControlID’).attr(‘checked’, false);

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

When we have to get the checklist of sibling parts then “sibling” technique is used on mum or dad component. Selectors can be utilized to filter the siblings. For instance

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

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

Both strategies are used to alter the widths of the weather.

For instance:

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

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

Above is the code to alter the width of the component to 150px. As you’ll be able to see “css(width)” technique takes the width in pixels whereas for “width” technique no must explicitly point out the width in pixels.

Question 62. Explain “slidetoggle” Method In Jquery?

This technique is used to offer the animation results to the weather in Jquery. SlideToggle technique makes use of following parameters:

Speed – This is an non-compulsory parameter and it specifies the pace of animation impact.
Easing – This is an non-compulsory parameter and this specifies the pace of animation impact at totally different interval of time.
Callback – This parameter is non-compulsory and it accepts the callback operate which will likely be executed as soon as the execution of “slideToggle” technique is accomplished.

Question 63. Explain “param” Method In Jquery?

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

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

customerObj=new Object();

customerObj.identify=”A4Academics”;

customerObj.Designation=”IT”;

$(“#myControlID”).click on(operate()

$(“span”).textual content($.param(customerObj));

);

Now the span component may have worth like – “name=A4Academics&Designation=IT”

Question 65. What Is “unbind” In Jquery?

“unbind” technique is used to take away the occasion handlers related to the component. This technique can be utilized with selectors to take away the occasion handlers of the chosen parts.

Question 66. Why To Use Jquery Dialog?

Jquery Dialog is used like a pop up and if Jquery utilized in MVC then we will render the cshtml contents in Jquery Dialog and its used like a verify field (as javascript) too.

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

Below is the pattern code for exhibiting how we will do it –

$(“.MyClass1.MyClass2”).css(‘colour’,’inexperienced’);

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

We can choose all <span> parts utilizing under code –

$(“span:comprises(‘a4academics’’)”)

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

If we need to get the 4th <li> from the checklist of parts in <ul> then we will write code as under –

$(“ul li:eq(3)”) // Index will begin from 0.

Question 70. In <desk> 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?

Below is the pattern code snippet for this state of affairs –

$(“tr:even”).css(‘colour’,’inexperienced’)

$(“tr:odd”).css(‘colour’,’blue’)

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

Below is the code snippet for this state of affairs:

$(“ul li:gt(5)”).css(‘colour’,’inexperienced’)
$(“ul li:lt(10)”).css(‘colour’,’blue’)

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

Below is the code snippet for this state of affairs:

$(“p :not(:first)”)

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

jQuery is nothing however a set of nicely written javascript code.

In different phrases Jquery is prepared made concise and quick JavaScript Library for use.

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

Below are the advatages of utilizing jQery over JavaScript:

Jquery is nicely written optimised javascript code so it is going to be sooner in execution except we write similar customary optimised javascript code.
Jquery is concise java script code ,means minimal ammount of code is to be written for a similar performance than the javascript.
Javascript associated Development is quick utilizing Jquery as a result of a lot of the performance is already written within the library and we simply want to make use of that.
Jquery has cross browser assist ,so we save time for supporting all of the browsers.

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

To use jQuery in ASP.NET internet utility comply with the under steps:

Go to http://jquery.com/(The official jQuery WebWeb site)
Download newest .js jQuery file from the web site.
Put it the script(or different folder) within the root of your internet utility
Add the under tag on the web page the place you need to use Jquery script kind=”textual content/javascript” src=”script/jQueryDownLoadedFileName.js” /script

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

JQuery min .js file is actully a minified model of Actual JQuery .js. The min information have much less measurement however similar content so this improves the efficiency.so You ought to favor to make use of min information.

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

Advantage of utilizing $(doc).prepared(operate () in jQuery is that the code inside this operate will excecute solely when the total web page has been loaded in order that there will likely be no error just like the DOM object on which the Jquery has to execute will not be loaded.

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

Yes we will write a couple of jquery $(doc).prepared(operate ()

in a single web page.This is useful when you may have giant Jquery code and also you need to break up it in a number of information.

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

To choose a component with Id write as under:

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

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

To choose a component with class write as under:

$(“.patternClass”).css(“border”,”2px stable blue”);

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

The distinction between discover() and kids() strategies
are that the youngsters solely travels a single stage down the DOM tree
whereas the discover travels in any respect stage down the DOM tree.

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

To take a look at if a component exists we will use size technique in jQuery as under:

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

$(mySampleDiv).discover(”div”);


Spread the love