When you go for a jQuery interview, There can be many questions. These are the frequently asked core jQuery interview questions and answers with PDF. These questions are selected from many books and have a chance of being asked in most of the interviews. This is an interview guide for both jQuery freshers and experienced professionals. Moreover, prepare well and learn these questions before attending an interview.
Common jQuery Interview Questions
1. What is meant by chained method calls in jQuery?
Answer: It is an attractive feature of jQuery, where you can call one method after another by chaining method calls on the backs of one another if the API supports it.
Example:
$('<div>/')
.addClass('selected')
.attr({
id : 'body'
title : 'Welcome to jQuery'
})
.text("Hello, These are the important JQuery Interview Questions");
2. What are the main advantage of jQuery?
Answer: It is simplistic, chainable, and comprehensive. Moreover jQuery have the ability to make iterating and traversing the DOM much easier via its various built-in methods. Another advantage is, jQuery makes it easy to add your own custom methods via its simple-to-understand plug-in architecture. Also jQuery helps reduce redundancy in navigation and UI functionality, like tabs, CSS, and markup-based pop-up dialogs, animations, and transitions, and lots of other things.
3. Is jQuery the only JavaScript frame work?
Answer: No, certainly not. There are several JavaScript frameworks like Yahoo UI, Prototype, SproutCore, Dojo, and so on
4. What are the rules to be followed while creating a XHTML and CSS documents?
Answer:
1. When selecting id and class names, make sure that they are descriptive and are contained in a namespace. Because client might needed to combine one project with another in future.
2. Make your CSS more specific and avoid using generic type selectors while defining CSS. This will help to avoid conflicts.
3. Always organize your files in a coherent manner. For example group files from the project in the same folder and separate multiples projects in different folders. This will help to easily locate and associate files to your projects.
4. Avoid inaccessible markups and stay away from frames where possible. Always try to organize your markups by semantically elements like paragraphs in <p> and lists in <ul> or <ol> elements. Use <h1> to <h6> for headings and so on.
5. Have a practice of using small, modularized files organized by the components for better loading efficiency and combine and compress those modularized files for the live production site.
5. What is Name Spacing?
Answer: Namespacing is the concept of making your programs, source code, and so on tailored to a particular naming convention, in an effort to make your programs more portable and more capable of living in diverse, foreign programming environments.
6. What are some common id names that people use in style sheets?
Answer: body, header, footer, column, left, right etc
7. How can you improve the efficiency of Markup and CSS?
Answer:
1. Try server-side gzip compression. Most of the time, gzip may make files load more quickly. This will help your user to see contents as quickly as possible.
2. By using aggressive client-side caching. This will makes subsequent pages loads much faster.
3. Using automatic compression of markup content by removing excess white space and comments from the markup source.
8. What are the common JavaScript conventions followed in the programming industry?
Answer:
1. Include all script in external documents – JavaScript code should be included only in external script files. Script should not be embedded in markup documents or be included inline, directly on markup elements.
2. Write clean, consistent code – JavaScript code should be neatly formatted and organized in a consistent, predicable way.
3. Namespace JavaScript code – JavaScript variables, functions, objects, and the like should be namespaced to minimize potential namespace conflicts and collisions with other JavaScript.
4. Avoid browser detection – Browser detection should be avoided where possible. Instead, detect specific browser features
9. What are the element’s relative commonly used in jQuery API?
Answer:
1. parent() and parents() are used to select an element’s parent or ancestors.
2. children() is used to select an element’s immediate children.
3. siblings() is used to select all of an element’s surrounding sibling elements.
4. prev() is used to select an element’s immediate preceding sibling.
5. next() is used to select an element’s immediate following sibling.
6. prevAll() is used to select all siblings coming before an element.
7. nextAll() is used to select all siblings coming after an element.
8. not() is used to remove elements from a selection using a selector.
9. eq() is used to zero in on a single element in a selection by providing its offset position within the selection offset from zero.
10. What do you mean by Slicing a Selection?
Answer: The slice() method is similar to the eq() method; it selects a subset of a selection based on the off set position of elements in a selection. It does this using one or two arguments. If you provide just one argument, you provide the starting point for the slice.
Example:<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type"
content=application/xhtml+xml; charset=utf-8" />
<meta http-equiv="content-language" content="en-us" />
<title>Place in Middle-Earth</title>
</head>
<body>
<ul>
<li>The Shire</li>
<li>Fangorn Forest</li>
<li>Rohan</li>
<li>Mordor</li>
</ul>
</body>
</html>
11. What are the important JavaScript functions?
Answer: charAt() – Returns the character at the specified index.concat() – Combines the text of two strings and returns a new string.forEach() – Calls a function for each element in the array.indexOf() – Returns the index within the calling String object of the first occurrence of the specified value, or -1 if not found.length() – Returns the length of the string.pop() – Removes the last element from an array and returns that element.push() – Adds one or more elements to the end of an array and returns the new length of the array.reverse() – Reverses the order of the elements of an array the first becomes the last, and the last becomes the first.sort() – Sorts the elements of an array.substr() – Returns the characters in a string beginning at the specified location through the specified number of characters.toLowerCase() – Returns the calling string value converted to lower case.toString() – Returns the string representation of the number’s value.toUpperCase() – Returns the calling string value converted to uppercase.
12. What do you mean by Tag name, Tag ID, Tag class?
Answer:
Tag Name : Represents a tag name available in the DOM. For example $('p') selects all paragraphs <p> in the document.
Tag ID : Represents a tag available with the given ID in the DOM. For example $('#some id') selects the single element in the document that has an ID of some-id.
Tag Class : Represents a tag available with the given class in the DOM. For example $('.some-class') selects all elements in the document that have a class of some class.
Repeated jQuery Interview Questions
13. What do you mean by Selectors, brief a few selectors with examples?
Answer: selectors are very useful and would be required at every step while using jQuery. They get the exact element that you want from your HTML document.
Examples :
Name : Selects all elements which match with the given element Name.
#ID : Selects a single element which matches with the given ID.
.Class : Selects all elements which matches with the given Class.
Universal (*) : Selects all elements available in a DOM.
Multiple Elements E, F, G : Selects the combined results of all the specified selectors E, F or G.
14. What do you mean by Callback in jQuery?
Answer: 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.
Example: $("body").click(function(event) { console.log("clicked: " + event.target);});
15. What do you mean by jQuery Syntax?
Answer: jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s).
Basic syntax is: $(selector).action()
1. A $ sign to define/access jQuery
2. A (selector) to “query (or find)” HTML elements
3. A jQuery action() to be performed on the element(s)
Examples: $(this).hide() – hides the current element.$("p").hide() – hides all <p> elements.$(".test").hide() – hides all elements with class=”test”.
16. What are the common manipulation methods used in jQuery like appendTo()?
Answer:
1. append()
2. prepend()
3. prependTo()
4. after()
5. before()
6. insertAfter()
7. insertBefore()
8. wrap()
9. wrapAll()
10. wrapInner()
17. You need to select elements based on attributes and those attribute’s values. How will you do this in jQuery?
Answer:
We can use an attribute selectors to match specific attributes and corresponding values.jQuery('a[href="http://google.com"]');
The preceding selector would select all anchor elements with an href attribute equal to the value specified (http://google.com).
There are a number of ways we can make use of the attribute selector like;[attr] – Matches elements that have the specified attribute.[attr=val] – Matches elements that have the specified attribute with a certain value.[attr!=val] – Matches elements that don’t have the specified attribute or value.[attr^=val] – Matches elements with the specified attribute and that start with a certain value.[attr$=val] – Matches elements that have the specified attribute and that end with a certain value.
18. What are the methods used to find an elements position in jQuery?
Answer: jQuery offers three methods that are useful in determining an element’s positionoffset
Returns an object containing the position of the top-left corner of the element relative to the document’s top-left cornerposition
Returns an object containing the position of the top-left corner of the element relative to the top-left corner of the first positioned parent of the element (the offsetParent).offsetParent
Returns a jQuery object containing the offsetParent of the element.
19. How can we specifically select elements that are animated in jQuery?
Answer: We can use :animated filter to specifically select elements which will match only elements that are currently animatingjQuery('div:animated');
20. What you mean by scope of a variable in jQuery?
Answer:
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 global scope which means it is defined 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.
These are the core jQuery Interview Questions that are frequently asked in interviews for both freshers and experienced jobs. You can download these as PDF by clicking the below button.
Thank You for reading 🙂
Comments are Welcomed. 🙂
