jQuery
Technical Interview Questions Answers
What is jQuery?
jQuery is a fast and concise JavaScript Library created by John Resig in 2006 with a nice motto - Write less, do more. jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is a JavaScript toolkit designed to simplify various tasks by writing less code.
What are the core features of jQuery?
DOM manipulation − JQuery made it easy to select DOM elements, traverse them and modify their content by using a cross-browser open source selector engine called Sizzle.
Event handling − JQuery offers an elegant way to capture a wide variety of events, such as a user clicking on a link, without the need to clutter the HTML code itself with event handlers.
AJAX Support − JQuery helps you a lot to develop a responsive and feature-rich site using AJAX technology.
Animations − JQuery comes with plenty of built-in animation effects which you can use in your websites.
Lightweight − JQuery is a very lightweight library - about 19KB in size ( Minified and gzipped ).
Cross-Browser Support − JQuery has cross-browser support and works well in IE 6.0+, FF 2.0+, Safari 3.0+, Chrome, and Opera 9.0+.
Latest Technology − JQuery supports CSS3 selectors and basic XPath syntax.
How will you make sure that DOM is ready using jQuery?
Use $(document).ready() function. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded.
How can you create an Object in JavaScript?
JavaScript supports Object concepts very well. You can create an object using the object literal as follows − var emp = { name: "Zara", age: 10 };
How can you read the properties of an Object in JavaScript?
You can write and read properties of an object using the dot notation as follows − // Getting object properties emp.name // ==> Zara emp.age // ==> 10 // Setting object properties emp.name = "Daisy" // <== Daisy emp.age = 20 // <== 20
How can you create an Array in JavaScript?
You can define arrays using the array literal as follows − var x = []; var y = [1, 2, 3, 4, 5];
How to read elements of an array in JavaScript?
An array has a length property that is useful for iteration. We can read elements of an array as follows − var x = [1, 2, 3, 4, 5]; for (var i = 0; i < x.length; i++) { // Do something with x[i] }
What is a named function in JavaScript? How to define a named function?
A named function has a name when it is defined. A named function can be defined using function keyword as follows − function named(){ // do some stuff here }
How many types of functions does JavaScript support?
A function in JavaScript can be either named or anonymous.
How to define an anonymous function?
An anonymous function can be defined in a similar way as a normal function but it would not have any name.
Can you assign an anonymous function to a variable?
Yes! An anonymous function can be assigned to a variable.
Can you pass an anonymous function as an argument to another function?
Yes! An anonymous function can be passed as an argument to another function.
What is an argument object in JavaScript?
JavaScript variable arguments represent the arguments passed to a function.
How can you get the type of arguments passed to a function?
Using typeof operator, we can get the type of arguments passed to a function. For example − function func(x){ console.log(typeof x, arguments.length); } func(); //==> "undefined", 0 func(1); //==> "number", 1 func("1", "2", "3"); //==> "string", 3
How can you get the total number of arguments passed to a function?
Using arguments.length property, we can get the total number of arguments passed to a function. For example − function func(x){ console.log(typeof x, arguments.length); } func(); //==> "undefined", 0 func(1); //==> "number", 1 func("1", "2", "3"); //==> "string", 3
How can you get the reference of a caller function inside a function?
The arguments object has a callee property, which refers to the function you're inside of. For example − function func() { return arguments.callee; } func(); // ==> func
What is the purpose of the 'this' operator in JavaScript?
JavaScript's famous keyword always refers to the current context.
What are the valid scopes of a variable in JavaScript?
The scope of a variable is the region of your program in which it is defined. JavaScript variable will have only two scopes.
Global Variables − A global variable has a global scope which means it is visible everywhere in your JavaScript code.
Local Variables − A local variable will be visible only within a function where it is defined. Function parameters are always local to that function.
Which type of variable global and local, takes precedence over other if the names are the same?
A local variable takes precedence over a global variable with the same name.
What is a callback?
A callback is a plain JavaScript function passed to some method as an argument or option. Some callbacks are just events, called to give the user a chance to react when a certain state is triggered.
What is a closure?
Closures are created whenever a variable that is defined outside the current scope is accessed from within some inner scope.
Give an example of closure?
Following example shows how the variable counter is visible within the create, increment, and print functions, but not outside of them − function create() { var counter = 0; return { increment: function() { counter++; }, print: function() { console.log(counter); } } } var c = create(); c.increment(); c.print(); // ==> 1
Which built-in method returns the character at the specified index?
charAt() method returns the character at the specified index.
Which built-in method combines the text of two strings and returns a new string?
concat() method returns the character at the specified index.
Which built-in method calls a function for each element in the array?
forEach() method calls a function for each element in the array.
Which built-in method returns the index within the calling String object of the first occurrence of the specified value?
indexOf() method returns the index within the calling String object of the first occurrence of the specified value, or −1 if not found.
Which built-in method returns the length of the string?
length() method returns the length of the string.
Which built-in method removes the last element from an array and returns that element?
pop() method removes the last element from an array and returns that element.
Which built-in method adds one or more elements to the end of an array and returns the new length of the array?
push() method adds one or more elements to the end of an array and returns the new length of the array.
Which built-in method reverses the order of the elements of an array?
reverse() method reverses the order of the elements of an array -- the first becomes the last, and the last becomes the first.
Which built-in method sorts the elements of an array?
sort() method sorts the elements of an array.
Which built-in method returns the characters in a string beginning at the specified location?
substr() method returns the characters in a string beginning at the specified location through the specified number of characters.
Which built-in method returns the calling string value converted to lowercase?
toLowerCase() method returns the calling string value converted to lowercase.
Which built-in method returns the calling string value converted to upper case?
toUpperCase() method returns the calling string value converted to upper case.
Which built-in method returns the string representation of the number's value?
toString() method returns the string representation of the number's value.
What is a jQuery selector?
A jQuery Selector is a function that makes use of expressions to find out matching elements from a DOM based on the given criteria. Simply you can say, selectors, are used to selecting one or more HTML elements using jQuery. Once an element is selected then we can perform various operations on that selected element. jQuery selectors start with the dollar sign and parentheses - $().
How to resolve conflict with another JavaScript library if $ is already in use?
The factory function $() is a synonym of jQuery() function. So in case you are using any other JavaScript library where $ sign is conflicting with something else then you can replace $ sign by jQuery name and you can use function jQuery() instead of $().
How to select elements using jQuery with the given element tag-name?
$('tag-name') selects all elements of type tag-name in the document. For example, $('p') selects all paragraphs <p> in the document.
How to select a single element using jQuery with the given element id some-id?
$('#some-id') selects the single element in the document that has an ID of some-id.
How to select elements using jQuery whose CSS class is some-class?
$('.some-class') selects all elements in the document that have a class of some class.
How to select all elements using jQuery?
$('*') selects all elements available in a DOM.
How to select multiple elements using jQuery?
$('E, F, G') selects the combined results of all the specified selectors E, F or G where selectors can be any valid jQuery selector.
How to get attributes of an element using jQuery?
The attr() method can be used to fetch the value of an attribute from the first element in the matched set.
How to set attributes of an element using jQuery?
The attr(name, value) method can be used to set the named attribute onto all elements in the wrapped set using the passed value.
How can you apply a style on an element using jQuery?
The addClass( classes ) method can be used to apply defined style sheets onto all the matched elements. You can specify multiple classes separated by space.
How to remove an attribute from each of the matched elements using jQuery?
The removeAttr( name ) method can be used to remove an attribute from each of the matched elements.
How to know if a specified class is present on at least one of the set of matched elements using jQuery?
The hasClass( class ) method returns true if the specified class is present on at least one of the set of matched elements.
How to remove all or the specified class(es) from the set of matched elements using jQuery?
The removeClass(class) method remove all or the specified class(es) from the set of matched elements.
How to add the specified class if it is not present, remove the specified class if it is present using jQuery?
The toggleClass(class) method adds the specified class if it is not present, removes the specified class if it is present.
How to get the html contents (innerHTML) of an element using jQuery?
The html() method gets the html contents (innerHTML) of the first matched element.
How to set the html contents of an element using jQuery?
The html( val ) method sets the html contents of every matched element.
How to get the text contents of an element using jQuery?
The text( ) method gets the combined text contents of all matched elements.
How to set the text contents of an element using jQuery?
The text( val ) sets the text contents of all matched elements.
How to get the input value of an element using jQuery?
The val( ) method gets the input value of the first matched element.
How to set the value of an element using jQuery?
The val(val) method sets the value attribute of every matched element if it is called on <input> but if it is called on <select> with the passed <option> value then the passed option would be selected, if it is called on the check box or radio box then all the matching check box and radio box would be checked.
How to filter out elements from a set of matched elements using jQuery?
The filter( selector ) method can be used to filter out all elements from the set of matched elements that do not match the specified selector(s). The selector can be written using any selector syntax.
How to reduce the set of matched elements to a single element using jQuery?
The eq( index ) method reduces the set of matched elements to a single element.
How to check the current selection against an expression using jQuery?
The is( selector ) method checks the current selection against an expression and returns true if at least one element of the selection fits the given selector.
How to remove elements matching the specified selector from the set of matched elements using jQuery?
The not(selector) method removes elements matching the specified selector from the set of matched elements.
How to select a subset of the matched elements using jQuery?
The slice(selector) method selects a subset of the matched elements.
How to add more elements, matched by the given selector, to the set of matched elements using jQuery?
The add( selector ) method adds more elements, matched by the given selector, to the set of matched elements.
How to add the previous selection to the current selection using jQuery?
The andSelf( ) method adds the previous selection to the current selection.
How to get a set of elements containing all of the unique immediate children of each of the matched set of elements using jQuery?
The children( [selector]) method gets a set of elements containing all of the unique immediate children of each of the matched set of elements.
How to get a set of elements containing the closest parent element that matches the specified selector, the starting element included using jQuery?
The closest( selector ) method gets a set of elements containing the closest parent element that matches the specified selector, the starting element included.
How to find all the child nodes inside the matched elements (including text nodes), or the content document, if the element is an iframe using jQuery?
The contents( ) method finds all the child nodes inside the matched elements (including text nodes), or the content document if the element is an iframe.
How to revert the most recent 'destructive' operation, changing the set of matched elements to its previous state using jQuery?
The end( ) method reverts the most recent 'destructive' operation, changing the set of matched elements to its previous state.
How to search for descendent elements that match the specified selectors using jQuery?
The find( selector ) method searches for descendent elements that match the specified selectors.
How to get a set of elements containing the unique next siblings of each of the given set of elements using jQuery?
The next( [selector] ) gets a set of elements containing the unique next siblings of each of the given set of elements.
How to find all sibling elements after the current element using jQuery?
The nextAll( [selector] ) finds all sibling elements after the current element.
How to get a jQuery collection with the positioned parent of the first matched element?
The offsetParent( ) method returns a jQuery collection with the positioned parent of the first matched element.
How to get the direct parent of an element using jQuery?
The parent( [selector] ) method gets the direct parent of an element. If called on a set of elements, the parent returns a set of their unique direct parent elements.
How to get a set of elements containing the unique ancestors of the matched set of elements using jQuery?
The parents( [selector] ) method gets a set of elements containing the unique ancestors of the matched set of elements (except for the root element).
How to get a set of elements containing the unique previous siblings of each of the matched set of elements using jQuery?
The prev( [selector] ) method gets a set of elements containing the unique previous siblings of each of the matched set of elements.
How to find all sibling elements in front of the current element using jQuery?
The prevAll( [selector] ) method finds all sibling elements in front of the current element.
How to get a set of elements containing all of the unique siblings of each of the matched set of elements using jQuery?
The siblings( [selector] ) method gets a set of elements containing all of the unique siblings of each of the matched set of elements.
How to get the style property of an element using jQuery?
The css( name ) method returns a style property on the first matched element.
How to set the style property of an element using jQuery?
The css( name, value ) method sets a single style property to a value on all matched elements.
How to set the height of an element using jQuery?
The height( val ) method sets the CSS height of every matched element.
How to get the height of an element using jQuery?
The height( ) method gets the current computed, pixel, the height of the first matched element.
How to get the inner height (excluding the border) of an element using jQuery?
The innerHeight( ) method gets the inner height (excludes the border and includes the padding) for the first matched element.
How to get the inner width (excluding the border) of an element using jQuery?
The innerWidth( ) method gets the inner width (excludes the border and includes the padding) for the first matched element.
How to get the current offset of the first matched element, in pixels, relative to the document using jQuery?
The offset( ) method gets the current offset of the first matched element, in pixels, relative to the document.
How to get a jQuery collection with the positioned parent of the first matched element?
The offsetParent( ) method returns a jQuery collection with the positioned parent of the first matched element.
How to get the outer height (including the border) of an element using jQuery?
The outerHeight( [margin] ) method gets the outer height (includes the border and padding by default) for the first matched element.
How to get the outer width (including the border) of an element using jQuery?
The outerWidth( [margin] ) method gets the outer width (includes the border and padding by default) for the first matched element.
How to get the top and left position of an element relative to its offset parent using jQuery?
The position( ) method gets the top and left positions of an element relative to its offset parent.
How to set the width of an element using jQuery?
The width( val ) method sets the CSS width of every matched element.
How to get the width of an element using jQuery?
The width( ) method gets the current computed, pixel, width of the first matched element.
How to remove all child nodes from the set of matched elements using jQuery?
The empty( ) method removes all child nodes from the set of matched elements.
How to remove set of matched elements using jQuery?
The remove( expr ) method removes all matched elements from the DOM.
How to prevent the browser from executing the default action using jQuery?
The preventDefault() method of the Event object prevents the browser from executing the default action.
How to check if event.preventDefault() was ever called on this event object using jQuery?
The isDefaultPrevented() method of Event object returns whether event.preventDefault() was ever called on this event object.
How to stop the bubbling of an event to parent elements using jQuery?
The stopPropagation() method of Event object stops the bubbling of an event to parent elements, preventing any parent handlers from being notified of the event.
How to check if event.stopPropagation() was ever called on this event object?
The isPropagationStopped() method of Event object returns whether event.stopPropagation() was ever called on this event object.
How to stop the rest of the event handlers from being executed in jQuery?
The stopImmediatePropagation() method of Event object stops the rest of the handlers from being executed.
How to check if event.stopImmediatePropagation() was ever called on this event object?
The isImmediatePropagationStopped() method of Event object returns whether event.stopImmediatePropagation() was ever called on this event object.
How to bind a handler to one or more events (like click) for an element using jQuery?
The bind( type, [data], fn ) function binds a handler to one or more events (like click) for each matched element. Can also bind custom events.
How to binds a function to be executed whenever the DOM is ready to be traversed and manipulated using jQuery?
The ready(fn) function binds a function to be executed whenever the DOM is ready to be traversed and manipulated.
How to make a ajax call using jQuery?
The load( url, [data], [callback] ) method load HTML from a remote file and inject it into the DOM.
How to attach a function to be executed whenever an AJAX request completes using jQuery?
The ajaxComplete( callback ) method can be used to register a callback to be executed whenever an AJAX request completes.
