Prasad daily dotnet tricks: JQuery Interview Questions

Are you preparing a Jquery interview? Then read this blog to know more about JQuery, here I have given some frequently asked JQuery Interview Questions and answers, which will surely help you to crack your interview

1. What is JQuery?
- Most simple but frequently asked question, JQuery is a library designed by javascript, it is light weight, it is simple than JavaScript, it has many inbuilt methods and it can handle events, Html DOM and Ajax

2. What is $ in JQuery?
- Simple it is a function selector or a JQuery object, some says $ is a shortcut to the jQuery function

3. Can i use Javascript and JQuery on same page?
- Yes, we can use Javascript and JQuery on same page, for the use of JQuery we need to add .JS library reference to the page, where as for JavaScript for separate library reference is needed.

4. How to use JQuery?
- JQuery can be easily called with the help of its referenced libraries, first we need to give JQuery library reference to page and then call it using '$' sign
see below snippet, we can write JQuery in HEAD section

<head>
//here is JQuery reference
//JQuery 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
 alert("Message on on page load")
});
</script>
</head>

above snippet shows, we can write JQuery in HEAD section and above code will call on Page load
5. What are the features of JQuery?
- JQuery is highly intractable, it has following features

Rich Inbuilt methods that easily interact with controls
Events handling
Special widgets
Animation and effect supports
Good alternative to flash
Strong AJAX support
HTML DOM Manipulation
Can Bind Multiple Event Handlers in single method

6. What is JQuery UI?
- JQuery UI is also a JavaScript library, as name suggest it is a user interface portal that is built using JavaScript and can be easily added in new and existing applications
it contains interactions, widgets and effects, we can build UI rich and highly interactive applications using it.

7. Which are the performance responsive selector?
- The elements which are selected using ID are the performance responsive selector as the ID is unique throughout the rendered page

8. JQuery or JavaScript which is quicker in execution?
- Native JavaScript is always faster in operation than JQuery cause JQuery is a JavaScript library,
e.g. Through we call '$(#EmpName)' in JQuery, it internally convert the syntax to javascript's 'getElementById("EmpName")' method and then execute in browser

9. What is has() in JQuery? - has() is selection filter, it checks Check if an Element 'Has Something', means if i want to traverse my HTML file and check if DIV has list tag (OL) then we can check with has(), see below snippet

JQuery('div').has('ol');

above code will select all element with 'ol'
10. Can JQuery parse XML?
- No, currently JQuery supports only HTML DOM parser

11. Can JQuery Run on MAC or Linux instead of Windows?
- JQuery support cross browser and cross platform compatibility hence it fluidly runs on Windows/MAC/Linux with all major browser compatibility (IE/Chrome/FF/NN/Safari)

12. When to use JQuery?
- Basically JQuery can be use more than validation part, Alone JavaScript can be able to handle validation part, you can us JQuery when you want rich user interface with client side events, when you want to remove flash plug inns and put some animations

13. Which effects has inbuilt supported by JQuery?
- Hide, Show, Toggle, SlideDown, SlideToggle, SlideUp, FadeIn, FadeOut, Animate, FadeTo, FadeToggle, has inbuilt support by JQuery

14. Can we replace any character or variable instead of $ in JQuery?
- Yes,
we can replace $ by using no Conflict () method, see below snippet to replace $

var szDoll = $.noConflict()

15. Tell me something about JQuery debugging? JQuery can be debugged easily using following ways

using debugger; keyword : Add debugger; keyword just before the line where you want to debug
using Breakpoint : If you have visual studio then you can place breakpoint on line where you want to start debugging
Placing a Alert box : It is traditional way, if you don't have visual studio, you need to place a alert boxes in lines from where you want start debugging

16. What is Method chaining in JQuery?
- As name suggest it is the chain of methods executed in sequence, it is executed in single statement, see following snippet

$("#div1").text("DIV 1");
$("#div1").css("color", "red");
$("#div1").removeClass("cls");

//instead we can write
$("#div1").text("DIV 1");
          .css("color", "red");
          .removeClass("cls");

17. How to redirect a page using JQuery?
- There is no specific JQuery syntax to redirect a page, you can use Javascript syntax instead, see below snippet

window.location.replace("http://test/default.aspx");
OR
window.location.href = http://test/default.aspx;

18. How to refresh a page using JQuery?
- you can use location.reload() method, to refresh page, see below snippet

$('#div1').click(function() 
{
location.reload();
});

19. How to check if element is hidden or visible using JQuery?
- You can use 'is()' method for 'display' or 'hidden' property, it returns boolean variable, see below snippet

$("#txtEmpName").is(":visible");

20. What is difference in return false and preventDefault in JQuery?
- when we call return false, it first call e.preventDefault and then call e.stopPropagation which stop execution, where as e.preventDefault will prevent event to be bubbling up.

21. What is difference between "#" and "." selector in JQuery? - Basically JQuery uses following notation as selector

$("div") : It is global selector which Selects all DIV element in page
$("#btnSubmit") : # is a specific ID selector which select element having ID as 'btnSubmit'
$(".classBold") : . is a specific Class selector which select element having class as 'classBold'

22. Which are the most common JQuery evens?

click () : Raise when any element is clicked
dblclick() : Raise when any element is double clicked
mouseenter() : Raise when mouse pointer enter in element
mouseleave() : Raise when mouse pointer leave an element
mousedown() : Raise when mouse pointer clicked down on element
mouseup() : Raise when mouse pointer clicked and release on element
focus() : Raise when element got focus

Rome was not built in a day, still more to come, i will cover some more complex Q&A in Next version of this article, till then you can enjoy this most commonly asked question

Suggestion and queries are most welcome

Thanking you
-Prasad

Prasad daily dotnet tricks

Monday, April 18, 2016

JQuery Interview Questions

20 comments:

Popular Posts