Top Interview Questions and Answers

Top Interview Questions and Answers
Interview Sortout

Browsing "Older Posts"

Browsing Category "jQuery"

Jquery noConflict()

By Dhananjay → September 21, 2018
What is noConflict() method in jQuery?
This is very important to differentiate scripts when we are using many JavaScript framework in our project.As we know jQuery uses dollar symbol ($) as shortcut. There are many other popular frameworks are there as Angular JS,Knockout JS,Kendo JS,Backbone JS,Ember ,Vue etc.
Suppose i one of these frameworks is using the $ symbol as shortcut then one of the scripts either jQuery or othe framework implemented parallel may stop working. noConflict is a method to avoid such situation in script.

We can create our self defined symbol or string as shortcut for jQuery. noConflict() return a reference and we can store this reference in a variable.

Example of noConflict() and self defined shortcut:



var jq = $.noConflict();
jq(document).ready(function(){
    jq("button").click(function(){
        jq("p").text("Hi there,Conflict resolved");
    });
});


Most Common Jquery Functions in various Interviews

By Dhananjay →
jQuery is a rich library and a very lightweight framework to provide javascript enhanced and modified functionality to our web page.
This is so popular because it has number of functions events, chaining properties and they make it convenient as well as easy to use.
Find some beautiful functions and their explanations in one line.

show(): display a hidden dom , set a style property display as Block.
hide(): Hide the selector from dom tree, visible on browser.
animate(): Apply animation effetcs with selectors.
empty(): Empty the the dom and also removes the child elements.
remove(): remove selector dom from tree
removeClass():remove class or classes from selectors
addClass():add class or classes to the selectors
toggleClass():add and remove simultaneously
stop():stop the propagation of event.
fadeIn():hide dom with a fading down effect.
fadeOut():display dom with a fadind out effect.
val():get the value of form elements.
text():get the text in dom.
html():get the HTML in dom.
child():find the child elements in dom.
parent():find the immediate parent elelment of the dom.
parents():find the parents of parent of selector in the dome tree .
siblings():find the parellel elements in the dom tree.
slideDown():display the dom with a sliding to downwards effect.
slideUp():hisde the dome with a sliding to up effect.
attr():get the attribute of DOM.
append():add the given object to the selector one after one, in a stack style. Object is added as last child always.
prepend():add the given object to the selector , but the object is added as the first child always.
after():add an object just after the selector.
before():add and object just before the selector.
css():add some inline css properties to the selector.
first():get the first element in the childs.
last():get the last element in the child.
eq():find the object of equal index passed to it.
noConflict():avoid conflicts with other javascript framework using $ as shortcut symbol.

jQuery Events Frequently asked in various Interviews

By Dhananjay →
jquery-interview-questions-answers
Jquery events are attached with some function and function called when event triggers. On a web page actions taken by visitors are events. They can be responded accordingly as click,change,blur,focus,keypress etc. Some common events as categorised as :
Mouse Events : click,dblclick,hover
Keyboard Events : keypress,keydown,keyup
Form Events : change,select,focus,blur
Window : load,scroll,resize

Most Common events and their explanation in one line:

click(): event is triggered when an element is clicked.
change(): event is triggered when the value of a form field is changed.
focus(): event is triggered when a form field is focused.
blur(): event is triggered when a form field is blured.
hover(): event is triggered when moue pointer hover the element.
focusin(): event is triggered when the chield of and element is focused.
focusout(): event is triggered when the chiled of an element is blured.
keydown(): event is triggered when a key from keyboard is pressed down.
keypress(): event is triggered when a key is pressed .keypress event is not fired for ALT, CTRL, SHIFT, ESC.
keyup(): event is triggered when a pressed key is released.
load(): event is triggered when a dom is loaded.
unload(): event is triggered when a dom is unloaded.
mouseenter(): event is triggered when mouse pointer enters the area.
mousedown(): event is triggered when left mouse button is clicked.
mouseout(): event is triggered when mouse pointer leaves the area.
on(): on event is used to add additional handler to dom element.
submit(): event is triggered when form is submitted.
scroll(): event is triggered when the window is scrolled.
select(): event is triggered when the a form element is selected, in combobox or dropdown list.
ready(): event is triggered when the dom is ready and loaded in tree.
resize(): event is triggered when window dimensions are resized.

Top jQuery Interview Questions and Answers

By Dhananjay → March 26, 2018
What is jQuery?
jQuery is a Javascript library which uses usage of Javascript very easy.We can handle events, manage CSS properties, DOM element, animation and many more utilities using jQuery library.It is an opensource. It is used by Microsoft, Google, IBM and almost the big players in software industries.

What are selectors?
jQuery selectors are the tool to identify the HTML elements and to manipulate properties. for example:
$(".name") : Class selector
$('#logo') : ID selector
$("button") : tag selector
$(this) : current dom selector

What are the selectors that we use in jQuery?
We use the following selectors in jQuery:
-Tag
-Class
-Id
-all (*)
We can derive more selectors using these main selectors.

What is an event?
An event is a user action. When a user interacts using UI it has to make many clicks, drag, drop, mouse over, change drop down, keypress actions, these actions are recognized by jQuery.

What are the common events that user make?
Most common events make by users are :
-click
-mouseover
-keypress
-keydown
-change
-input
-drag
-drop
-blur
-dblclick (double click)
-mouseenter


What is toggle()?
toggle() is a function which provides switching functionality between two actions, functions, properties etc. Suppose we can show and hide an element using toggle function.

What is callback?
A callback is a function which is called after when execution finished. We have to specify which function we have to call after a particular execution.

What is alert()?
alert() is used as a callback to show some warning, notification or error.

$("button").click(function(){
        alert("Clicked on button");
});

What is chaining in jQuery?
Chaining is calling of multiple functions in a single statement. for example :
$(".button").css("color", "#ececec").slideUp(1000).slideDown(2000).hide();

How to get value or text of an HTML element?
Since we know jQuery can manipulate HTML DOM, we can use functions to get value, text or html block inside an HTML element. For example

$('.first_name').val();  //geting value in input box having class as first_name

$('p').html();   //getting html inside a 'p' tag

$('textarea').text();  //getting text inside a textarea


How can we set values or HTML element?
very similar to getting the value, we can set values to elements. For example:

$('.first_name').val('Interview Sortout Blogs');  //geting value in input box having class as first_name

$('p').html('My blog is based on interview');   //getting html inside a 'p' tag

$('textarea').text('This blog is awesome. You are doing a verygood job,Interview Sortout');  //getting text inside a textarea


How to add or remove class from a HTML element?
jQuery have functions to add or to remove classes from an HTML elements. Please see the following examples:

$('button').addClass('btn-danger');
$('button').removeClass('btn-danger');


How to check that an element has a class?
We can use function hasClass().If class found it returns true, other wise returns false.

if($('button').hasClass('btn-danger')){
 alert('Button class is btn-danger');
}


What append() and prepend() functions do?
append() function , adds an HTML block after(at the end) a selector. For example :
$('p').append('Interview Sortout');

prepend() method, adds a block before or at the beginning of the selector. Example:

$('p').prepend('

Interview Sortout

');

What does parent() method do?
parent() method select the direct parent or immediate ancestor that is next to selector.

What does parents() method do?
parents() select all ancestors , the elements including parent of parent.

What childre() do?
children() method select the immediate child of the selector.

What does find() method do?
find() method search for the selector passed and selects from all the children of selector.

What does siblings() method do?
sibling() method returns all the elements having parralle relationship with selector. We can call them siblings.

How to call AJAX in jQuery?
An AJAX call example in jQuery:

var $post = $.ajax({
  url: "example.php",
  type: "POST",
  data: {id : product_id, product_name:product_name},
  dataType: "json"
});

$post.done(function(msg) {
  $("#log").html( msg );
});

$post.fail(function() {
  alert( "Request failed: Request Has been failed" );
});


More Java Script Related Interview questions and answers
  1. JSON Interview Questions and Answers
  2. Basic Java Script Interview Questions and Answers