JQuery questions for Computer Science students.

What is JQuery?

• JQuery is a fast, small and feature-rich JavaScript library.
• It is created by John Resig in 2006 with a nice motto - “ Write less, Do more”.
• JQuery is a cross-platform JavaScript library which is designed to simplify the client-side scripting of HTML.
• It is the most popular JavaScript library in use today.
• It provides capabilities for developers to create plug-ins on top of the JavaScript library.

Why is JQuery the most popular JavaScript library?

JQuery is the most popular JavaScript library, following are the reasons,

1. Lightweight

• JQuery is a lightweight library because of high performance.
• It’s a very well written code which is about 32 kb in size.

2. Cross browser support

• JQuery supports cross browser which means while working with JavaScript the most important factor we have to consider is that a browser, whereas while working with a JQuery we are not at all required to worry about a browser because JQuery functions are completely browser independent.

3. Easy Dom traversing

• We can find parent or child of any HTML element with the help of JQuery at any time without writing much code.

4. Easy Plugins

• JQuery is highly extensible.
• It lets you extend the existing behavior and even you can easily add new behaviors.
• You can easily find huge plugins over the Internet.

5. Tested and documented

• Huge popularity not only can get the answers for most of the JQuery questions easily in the forums but also there is a huge availability of documents which helps in learning JQuery very easily.

Why JQuery works well?

• It has leverage knowledge of CSS.
• It supports extensions.
• The method for creating new plugins is simple and well documented.
• It always work with sets.
• It allows multiple actions in one line.

Advantages of JQuery.

• JavaScript enhancement without the overhead of learning new syntax.
• It has an ability to keep the code simple, clear, readable and reusable.
• Elimination of the requirement of writing repetitive, complex loops and DOM scripting library calls.
• Ease of use: It is more easy to use than the standard JavaScript and other libraries.
• Large library: It has a lot of functions compared to JavaScript.
• Strong open source community: There are a lot of plugins available for the faster development of the applications.
• Great documentation and tutorials: The JQuery website has plenty of tutorials that are required for the beginners.
• Ajax support: Templates can be developed easily.

Explain the features of JQuery.

• JQuery is a write less and do more JavaScript library.
• It helps us to make the use of JavaScript much easier.
• It simplifies the complicated things from JavaScript like the AJAX calls and the DOM manipulation.
• Effects and animations.
• Ajax support.
• Extensibility.
• DOM element selections functions.
• Events and CSS manipulation.
• Utilities: Such as browser version and the each function.
• JavaScript Plugins.
• DOM traversal and modification.

What is JQuery Selectors? Give some examples.

• JQuery Selector is a function which uses the expressions to find out the matching elements.
• JQuery Selectors are used to select one or a group of HTML elements from the web page.
• JQuery supports all the CSS selectors as well as many additional custom selectors.
• JQuery selectors always start with dollar sign and parentheses: $().

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.

Explain each() function.

The each() function specify the function to be called for every matched element.

Syntax:
$(selector).each(function (index, element))

1. The “index” is the index position of the selector.
2. The “selector” specifies the current selector where we can use “this” selector also.
3. In the case when we need to stop each loop early then we can use “return false;”

For example:

The above code will write the text for each “li” element.

What is .siblings() method in JQuery?

• When we want to fetch siblings of every elements in the set of matched elements then we can use siblings() method.
• We filter the elements fetched by an optional selector.

Syntax: .siblings([selector])


• “selector” is the selector expression which specify the matched elements.

For example

<ul>
<li> item 1 </li>
<li id=”second_item”> item 2 </li>
<li class=”myitem”> item 3 </li>
<li class=”myitem”> item 4 </li>
</ul>


• To find the siblings of the element of id “second_item” and change the text color to Blue:

$(‘li.second_item’).siblings().css(‘color’,’blue’);


• If we want specific sibling elements for example the elements having class “myitem” then we can pass a optional selector:

$(‘li.second_item’).siblings(‘.myitem’).css(‘color’,’blue’);

How can we give face effect in JQuery?

• In JQuery we have three methods to give the fade effect to elements: fadeIn, fadeOut and fadeTo.
• This method changes the opacity of element with animation.

Syntax:

$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)


• The “speed” can be one of following values : “slow”, “fast”, “normal” or milliseconds.
• The “opacity” specifies the value that allow the fading to the given opacity.
• The “callback” is the function which we want to run once the fading effect is complete.

For example

$("clickme").click(function()
{
     $("mydiv").fadeTo("slow",0.50);
});

$("clickme").click(function()
{
     $("mydiv").fadeOut(3000);
});

Explain the animate function.

The animate function is used to apply the custom animation effect to elements.

Syntax:

$(selector).animate({params}, [duration], [easing], [callback])

1. The “param” defines the CSS properties on which you want to apply the animation.
2. The “duration” specifies how long the animation will run. It can be one of following values : “slow”, “fast”, “normal” or milliseconds.
3. The “easing” is the string which specify the function for the transition.
4. The “callback” is the function which we want to run once the animation effect is completed.

For example:

Following is the JQuery to animate opacity, left offset, and height of the mydiv element.

Explain slideToggle() effect.

The slideToggle() effect is used to give animated sliding effect to an element.

Syntax:
slideToggle([ duration] [, easing] [, callback])

1. The “duration” is the number specifying how long the animation will run.
2. The “easing” is the string which specify the function for the transition.
3. The “callback” is the function which we want to run once the animation is complete.
4. If the element is visible, then this effect will slide the element up side and make it completely hidden. If the element is hidden, then slideToggle() effect will slide it down side and make it visible.
5. We can specify the toggle speed with slideToggle() effect.

For example:

Explain the concepts of "$ function" in JQuery with an example.

• The syntax of “$ function” is tailor made.
• It is used for selecting the HTML elements.
• It performs some action on the elements.

Syntax:
$(selector).action()


• The $ sign is used to define/access jQuery.
• The (selector) is used to query or find the HTML elements.
• The action() is performed on the elements.
• There are a lot of anonymous functions in JQuery.

Example:

$(document).ready(function() {});
$("a").click(function() {});
$.ajax(
{
     url: "someurl.php",
     success: function() {}
});

Why is JQuery better than JavaScript?

• JQuery is a great library for developing AJAX based applications.
• It helps the programmers to keep a code simple, concise and reusable.
• JQuery library simplifies the process of traversal of HTML DOM tree.
• JQuery can also handle events, perform animation, and add the AJAX support in the web applications.

What is JQuery UI?

• JQuery UI is a organized set of user interface interactions, effects, widgets and themes built on top of the JQuery JavaScript Library.
• JQuery UI is the perfect choice for designers and developers.
• It is a widget and interaction library built on top of the JQuery JavaScript Library that can be used for building the highly interactive web applications.
• It is used to design the speed on how JQuery UI works.
• The JQuery UI API is designed to be as simple and intuitive as the jQuery API.

What kind of effects are used in JQuery UI?

JQuery UI Effects	Description
.addClass()	It adds the specified classes to each of the set of matched elements while animating all style changes.
Blind Effect	It hides or shows an element by wrapping the element in a container and pulling the blinds.
Bounce Effect	It bounces an element by clipping the element vertically or horizontally.
Color Animation	It animates the colors using .animate().
Drop Effects	It hides or shows an element fading in / out and sliding in a direction.
Clip Effect	It hides or shows an element by clipping the element vertically or horizontally.
Easings	It specifies the speed at which an animation progresses at different points within the animation.
.effect()	It applies an animation effect to an element.
Explode Effect	It hides or shows an element by splitting it into pieces.
Fade Effect	It hides or shows an element by fading it.
Fold Effect	It hides or shows an element by folding it.
.hide()	It hides the matched elements, using custom effects.
Highlight Effect	It hides or shows an element by animating its background color first.
Puff Effect	It creates a puff effect by scaling the element up and hiding it at the same time.
Pulsate Effect	It hides or shows an element by pulsing it in or out.
.removeClass()	It removes the specified class(es) from each of the set of matched elements while animating all style changes.
Scale Effect	It shrinks or grows an element by a percentage factor.
Shake Effect	It shakes the element multiple times, vertically or horizontally.
.show()	It displays the matched elements, using custom effects.
Size Effect	It resizes an element to a specified width and height.
Slide Effect	It slides the element out of the viewport.
.switchClass()	It adds and removes the specified class(es) to each of the set of matched elements while animating all style changes.
.toggle()	It displays or hides the matched elements, using custom effects.
.toggleClass()	It adds or removes one or more classes from each element in the set of matched elements, depending on either the class’s presence or the value of the switch argument, while animating all style changes.
Transfer Effect	Transfers the outline of an element to another element.

What is meant by Easing functions?

Easing function is a way to specify the speed at which an animation progresses at different points within the animation.

JQuery core has two easings:
1. Linear
2. Swing

• Linear, which progresses at a constant pace throughout the animation.
• Swing, which progresses slightly slower at the beginning and end of the animation than it does in the middle of the animation.
• JQuery UI provides several additional easing functions, ranging from variations on the swing behavior to customized effects such as bouncing.

Explain the list of Methods in JQuery UI.

JQuery UI Methods	Description
.disableSelection()	It disables selection of text content within the set of matched elements.
.effect()	It applies an animation effect to an element.
.enableSelection()	It enables selection of text content within the set of matched elements.
.focus()	Asynchronously set focus to an element.
.hide()	It hides the matched elements, using custom effects.
.position()	Position an element relative to another.
.removeUniqueId()	It removes id that were set by .uniqueId() for the set of matched elements.
.scrollParent()	It gets the closest ancestor element that is scrollable.
.show()	It displays the matched elements, using custom effects.
.toggle()	It displays or hides the matched elements, using custom effects.
.uniqueId()	It generates a unique id for the set of matched elements.
.zIndex()	It gets the z-index for an element.

What is the role of method overrides in JQuery UI?

• JQuery UI overrides several built-in JQuery methods in order to provide additional functionality.
• When using these overrides, it is important to make sure that JQuery UI is loaded.
• If JQuery UI is not loaded, the methods will still exist, but the expected functionality will not be available.

Method Overrides	Description
.addClass()	It adds the specified class(es) to each of the set of matched elements while animating all style changes.
.focus()	Asynchronously set focus to an element.
.hide()	It hide the matched elements, using custom effects.
.position()	Position an element relative to another.
.removeClass()	It removes the specified class(es) from each of the set of matched elements while animating all style changes.
.show()	It displays the matched elements, using custom effects.
.toggle()	It displays or hides the matched elements, using custom effects.
.toggleClass()	It adds or removes one or more classes from each element in the set of matched elements, depending on either the class is presence or the value of the switch argument, while animating all style changes.

Explain the list of Selectors in JQuery UI.

Selectors	Description
:data() Selector	It selects element which have data stored under the specified key.
:focusable Selector	It selects element which can be focused.
:tabbable Selector	It selects element which the user can focus via tabbing.

What is the use of ThemeRoller in Jquery UI?

• Themeroller tool is the easiest way to create a custom themes.
• These tools allow to build a theme, and then download a custom CSS file.
• It includes a robust CSS framework designed for building custom JQuery widgets.
• The framework includes classes that cover a wide array of common user interface needs and can be manipulated using JQuery UI.
• It includes a pattern for handling z-index and stacking elements.

What is the role of widgets?

• Widget is a simple and easy-to-use component.
• Widgets are feature-rich, stateful plugins that have a full life-cycle, along with methods and events.
• It is a generic term for a bit of self-contained code that displays a program, or a piece of a program.

Following are the widgets and their use:

Widget	Description
Accordion Widget	It converts a pair of headers and content panels into an accordion.
Autocomplete Widget	Autocomplete enables user to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.
Button Widget	Themeable buttons.
Buttonset Widget	Themeable button sets.
Datepicker Widget	It selects a date from a popup or inline calendar.
Dialog Widget	It opens the content in an interactive overlay.
Widget Factory	It creates stateful JQuery plugins using the same abstraction as all JQuery UI widgets.
Widget Plugin Bridge	Part of the JQuery Widget Factory is the jQuery.widget.bridge() method. This acts as the middleman between the object created by $.widget() and the JQuery API.
Menu Widget	Themeable menu with mouse and keyboard interactions for navigation.
Progressbar Widget	It displays status of a determinate or indeterminate process.
Selectmenu Widget	It duplicates and extends the functionality of a native HTML select element to overcome the limitations of the native control.
Slider Widget	It drags a handle to select a numeric value.
Spinner Widget	It enhances a text input for entering numeric values, with up/down buttons and arrow key handling.
Tabs Widget	A single content area with multiple panels, each associated with a header in a list.
Tooltip Widget	Customizable, themeable tooltips, replacing native tooltips.

What is JQuery Mobile?

• JQuery mobile is a cross platform mobile framework.
• It is designed to simplify and enhance the development of mobile web applications by integrating HTML5, CSS3 etc.
• This framework is compatible with all major mobile and desktop applications including iOS, Andriod, Blackberry, Windows Mobile and all desktop browsers.
• It is not only touch events, but also the usual mouse events associated with the JQuery.

List the various events of JQuery mobile.

JQuery Mobile offers several custom events that build upon native events to create useful hooks for development.

Following are the JQuery mobile events:

Events	Description
hashchange	It enables bookmarkable #hash history.
mobileinit	Event indicating that JQuery Mobile has finished loading.
navigate	A wrapper event for both hashchange and popstate
orientationchange event	Device portrait / landscape orientation event
scrollstart	It triggers when a scroll begins.
scrollstop	It triggers when a scroll finishes.
swipe	Triggered when a horizontal drag of 30px or more (and less than 30px vertically) occurs within 1 second duration.
tap	Triggered after a quick, complete touch event.
taphold	Triggered after a sustained, complete touch event.
vclick	Virtualized click event handler.

List the various methods of JQuery mobile.

Methods	Description
.buttonMarkup()	It adds the button styling to an element.
.enhanceWithin()	It enhances all the children of all elements in the set of matched elements.
.fieldcontain()	It adds field container styling to an element.
jqmData()	It stores arbitrary data associated with the specified element. It returns the value that was set.
jQuery.mobile.degradeInputsWithin()	It alters the input type of form widgets.
jQuery.mobile.getInheritedTheme()	It retrieves the theme of the nearest parent that has a theme assigned.
jQuery.mobile.navigate()	It alters the URL and track history. It works for browsers with and without the new history API.
jQuery.mobile.path.get()	It uses utility method for determining the directory portion of an URL.
jQuery.mobile.path.parseUrl()	It uses utility method for parsing a URL and its relative variants into an object that makes accessing the components of the URL easy.
jQuery.mobile.silentScroll()	It scrolls to a particular Y position without triggering scroll event listeners.

List the various widgets of JQuery mobile?

Widget	Description
Button Widget	It creates a button widget.
Checkboxradio Widget	It creates a checkboxradio widget.
Collapsible Widget	It creates a collapsible block of content.
Collapsibleset Widget	It creates a set of collapsible blocks of content.
Controlgroup Widget	It groups the buttons together.
Dialog Widget	It opens content in an interactive overlay.
Filterable Widget	It makes the children of an element filterable.
Flipswitch Widget	It creates a flipswitch widget.
Listview Widget	It creates a listview widget.
Loader Widget	It handles the task of displaying the loading dialog when JQuery Mobile pulls in content via Ajax.

What is QUnit API?

• QUnit is a powerful, easy-to-use JavaScript unit test suite.
• It is originally developed by John Resig as a part of JQuery.
• It is used by the JQuery, JQuery UI and JQuery Mobile.
• It is capable of testing any generic JavaScript code.

List the various async control of QUnit API.

async Control	Description
async()	It instructs QUnit to wait for an asynchronous operation.
QUnit.asyncTest()	DEPRECATED: It adds an asynchronous test to run. The test must include a call to Qunit.start().
QUnit.start()	PARTIALLY DEPRECATED: It starts running tests again after the testrunner was stopped.
QUnit.stop()	DEPRECATED: It increases the number of QUnit.start() calls the testrunner should wait for before continuing.
QUnit.test()	It adds a test to run.

How to use Plugins in JQuery?

• A plugin is a piece of code written in a standard JavaScript file.
• To make plugins method available to the developer or designer, they include 'plug-in' file which is very similar to JQuery library file in the <head> of the document.
• The developers or designers ensure that the plugins appears after the main JQuery source file, and before the custom JavaScript code.

How to develop a Plugins in JQuery?

You can create your own plugins including following syntax,

jQuery.fn.methodName = methodDefinition;

The 'methodName' is the name of new method.
The 'methodDefinition' is actual method definition.

Guidelines for developing a Plugin:

• The methods must have a semicolon (;) at the end.
• The methods must return the jQuery object, unless explicitly noted.
• Use 'this.each' to iterate over the current set of matched elements – it produces clean and compatible code.
• Give prefix the filename with 'jQuery which follows the name of the plugin including with '.js'.

For example: jquery.debug.js
The 'jquery.' eliminates name collisions.


• Attach the plugin to JQuery directly instead of '$', so the users can use a custom alias via noConflict() method.

Explain the list of Plugins.

Plugins	Description
PagePilling.js	It is used for 'pilling' the layout sections over one another and accessing them by scrolling.
Flickerplate.js	It is used for creating a slider which allows to cycle through images with animated arrows and dots navigation.
Multiscroll.js	It is used for creating split pages with two vertical scrolling panels.
Slidebar.js	It is used for quickly and easily implementing app style off-canvas menus and sidebars into the website.
Rowgrid.js	It is used for showing images in a row.
Alertify.js	It is used for showing alert messages in different format.
Progressbar.js	It is used for showing progress bar.
Slideshow.js	It is used for quickly and easily implementing slide show of images or videos into the website.
Drawsvg.js	It is used for drawing svg images.
Tagsort.js	It is used for showing tags.
LogosDistort.js	It is used for quickly and easily implementing of mouse over effect on images.
Filer.js	It is used for quickly and easily implementing of uploading files.
Whatsnearby.js	It is used for quickly find the nearest places.
Checkout.js	It is used for easy to implementation of check out for e-commerce websites.
Blockrain.js	It is used for embedding the classic Tetris game on the website.
Producttour.js	It is used for quickly and easily implementing of help guide into the website.
Megadropdown.js	It is used for easy and quickly implementing of drop down menu.
Weather.js	It is used for finding the information about weather details.