1. Create a plugin that would add and remove a class on hover?
The plugin can be considered to be simply a new method that can be used by a user to extend the prototype object of a jquery. A plugin performs some actions on a collection of elements. Each method that comes with the jquery core can be considered to be a plugin.
The code for creating a plugin that would add and remove a class on hover would be as follows:
(function($)
{
$.fn.hoverClass = function(c)
{
return this.hover(
function() { $(this).toggleClass(c); }
);
};
})(jQuery);
// using the plugin
$('li').hoverClass('hover');
2. Explain the common methods of sending a request to a server?
The two most common methods of sending a request to a server are :
1. GET method : The get method is mostly used for non destructive operations. These operations get data from the server and does not change the data on it. A good example of the application of the search query to a server. In most of the cases GET will send all of the data to be sent in the form of a query string.
2. POST method : The POST method is primarily used for destructive operations. These operations can change the data on a server. A good example is a user saving an entry on a site will get the POST request. These requests are not cached by the browser. A query can be a part of a url but any data that is to be sent is done separately as post data.
3. How to get the height of an element using jQuery?
The height( ) method gets the current computed, pixel, height of the first matched element.
4. How to remove set of matched elements using jQuery?
The remove( expr ) method removes all matched elements from the DOM.
5. What are jQuery Selectors? Give some examples?
1. jQuery Selectors are used to select one or a group of HTML elements from your web page.
2. jQuery support all the CSS selectors as well as many additional custom selectors.
3. jQuery selectors always start with dollar sign and parentheses: $().
4. There are three building blocks to select the elements in a web document.
1) Select elements by tag name
Example : $(div)
It will select all the div elements in the document.
2) Select elements by ID
Example : $("#xyzid")
It will select single element that has an ID of xyzid.
3) Select elements by class
Example : $(".xyzclass")
It will select all the elements having class xyzclass.
6. 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.
7. Which is the starting point of code execution in jQuery?
The starting point of jQuery code execution is $(document).ready() function which is executed when DOM is loaded.
8. How to get the style property of an element using jQuery?
The css( name ) method returns a style property on the first matched element.
9. What is the difference between .js and .min.js?
jQuery library comes in 2 different versions Development and Production/Deployment. The deployment version is also known as minified version. So .min.js is basically the minified version of jQuery library file. Both the files are same as far as functionality is concerned. but .min.js is quite small in size so it loads quickly and saves bandwidth
10. 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, parent returns a set of their unique direct parent elements.
11. What are the slow selectors in jQuery?
class selectors are the slow compare to ID and element.
12. How to add the previous selection to the current selection using jQuery?
The andSelf( ) method adds the previous selection to the current selection.
13. How to check data type of any variable in jQuery?
Using $.type(Object) which returns the built-in JavaScript type for the object.
14. How to set the html contents of an element using jQuery?
The html( val ) method sets the html contents of every matched element.
15. How to select element having a particular class (".selected")?
$('.selected'). This selector is known as class selector. We need to prefix the class name with "." (dot).
16. How to prevents the browser from executing the default action using jQuery?
The preventDefault() method of Event object prevents the browser from executing the default action.
17. What are deferred and promise object in jQuery?
Deferred and promise are part of jQuery since version 1.5 and they help in handling asynchronous functions like Ajax.
18. Is jQuery replacement of Java Script?
No. jQuery is not a replacement of JavaScript. jQuery is a different library which is written on top of JavaScript. jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML.
19. What is finish method in jQuery?
The .finish() method stops all queued animations and places the element(s) in their final state. This method was introduced in jQuery 1.9.
20. What is the difference between eq() and get() methods in jQuery?
eq() returns the element as a jQuery object. This method constructs a new jQuery object from one element within that set and returns it. That means that you can use jQuery functions on it.
get() return a DOM element. The method retrieve the DOM elements matched by the jQuery object. But as it is a DOM element and it is not a jQuery-wrapped object. So jQuery functions can't be used.
21. What are the fastest selectors in jQuery?
ID and element selectors are the fastest selectors in jQuery.
22. 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.
23. Is jQuery a library for client scripting or server scripting?
Client side scripting.
24. What is the difference between event.PreventDefault and "return false"?
e.preventDefault() will prevent the default event from occurring, e.stopPropagation() will prevent the event from bubbling up and return false will do both.
25. What is jQuery plugin and what is the advantage of using plugin?
A plug-in is piece of code written in a standard JavaScript file. These files provide useful jQuery methods which can be used along with jQuery library methods. jQuery plugins are quite useful as its piece of code which is already written by someone and re-usable, which saves your development time.
26. How to get the width of an element using jQuery?
The width( ) method gets the current computed, pixel, width of the first matched element.
27. What does $("div") will select?
This will select all the div elements on page.
28. What is the difference between jquery.size() and jquery.length?
jQuery .size() method returns number of element in the object. But it is not preferred to use the size() method as jQuery provide .length property and which does the same thing. But the .length property is preferred because it does not have the overhead of a function call.
29. Can we include multiple version of jQuery? If yes, then how they are executed?
Yes. Multiple versions of jQuery can be included in same page.
30. Does jQuery 2.0 supports IE?
No. jQuery 2.0 has no support for IE 6, IE 7 and IE 8.
31. Why is the block display style used for animations?
In html only the block level elements can have custom heights and widths. So when a user defines an animation method for usage such as show, hide, slide up etc the display css property of the block being animated is set to display block style. On completion of the animation the display style of the block would be changed to its original value. This procedure does not work properly for inline elements and the following workarounds can be applied to it:
- If the user wants the element to remain inline and only want to animate it in and out he can use the fadein and fadeout animation instead of using the show method.
- The user can also use a block level element with float to make the element appear inline with the rest of the content around it.
32. Is it possible to get value of multiple CSS properties in single statement?
Well, before jQuery 1.9 release it was not possible but one of the new feature of jQuery 1.9 was .css() multi-property getter.
var propCollection = $("#dvBox").css([ "width", "height", "backgroundColor" ]);
In this case, the propCollection will be an array and it will look something like this.
{
width: "100px",
height: "200px",
backgroundColor: "#FF00FF"
}
33. What is the difference between calling stop(true,true) and finish method?
The .finish() method is similar to .stop(true, true) in that it clears the queue and the current animation jumps to its end value. It differs, however, in that .finish() also causes the CSS property of all queued animations to jump to their end values, as well.
34. What are the approaches of extracting a query string with regular expressions?
There are two approaches of doing so:
1. String based approach : This is the simple way of extracting the information of a query string using the string-based replacement technique. This method makes use of the .replace() method to function.
For ex :
var data = string.replace("http://localhost/view.php?", "");
The above code works fine for the string based approach but has some flexibility issues. It cannot deal effectively with domain name and file name changes.
2. Regular expression approach : They are a powerful pattern matching tool available in modern programming languages. For the extraction of a query string a pattern would have to be used which looks for a question mark in the string. Once it does it returns everything after it. The regular expression in JS are delimited using the forward slashes at the end of an expression.
35. Is there any advantage of using $.ajax() for ajax call against $.get() or $.post()?
By using jQuery post()/ jQuery get(), you always trust the response from the server and you believe it is going to be successful all the time. Well, it is certainly not a good idea to trust the response. As there can be n number of reason which may lead to failure of response.
Where jQuery.ajax() is jQuery's low-level AJAX implementation. $.get and $.post are higher-level abstractions that are often easier to understand and use, but don't offer as much functionality (such as error callbacks).