JQUERY INTERVIEW QUESTION AND ANSWERS

jQuery
JavaScript code, which do document traversing, event handling, Ajax interactions and Animations.

jQuery HTML work for both HTML and XML documents

No, only HTML

difference between JavaScript and jQuery

JAVASCRIPT JQUERY
is a language is a built-in library built for JavaScript

advantage of using minimized version of jQuery

makes the web page faster

Is jQuery is a JavaScript or JSON library file

jQuery is a library of JavaScript file and it consists of DOM, event effects and the Ajax functions. jQuery is
said to be a single JavaScript file

check version of jQuery

$.ui.version

difference between find and children methods

Find Children
used to find all levels down the DOM tree find single level down the DOM tree.

jQuery connect
plugin used to connect or bind a function with another function

use connect
Use $.connect function to connect a function to another function.

features of jQuery, has been used in web applications

Sliding, File uploading and accordian in web applications

browser related issues for jQuery

Browser compatibility of jQuery plugin is an issue and needs lot of time to fix it

Whether we need to add jQuery file in both Master and Content page
jQuery file should be added to the Master page and can use access from the content page directly without
having any reference to it

basic selectors in jQuery

Element ID
CSS Name
Tag Name
DOM hierarchy

jQuery.data method
used to associate the data with the DOM nodes and the objects

use of each function

to iterate each and every element of an object.

difference between size and length of jQuery

Size and length both returns the number of element in an object. But length is faster than the size because
length is a property and size is a method.

add more than one ‘document.ready’ function in a page

Yes, but body.onload can be added once in a page.

use of jQuery load method

is used to load the data from a server and assign the data into the element without loading the page.
own specific characters are used in place of $ in jQuery
Yes, with no Conflict () method.
var sample = $.noConflict()

four parameters used for jQuery Ajax method

URL – Need to specify the URL to send the request
type – Specifies type of request(Get or Post)
data – Specifies data to be sent to server
Cache – Whether the browser should cache the requested page

Use of jQuery filter

to filter the certain values from the object list based on the criteria. Example is to filter certain products from
the master list of products in a cart website

testing jQuery
QUnit

What is CDN
Distribution network ,a group of companies in different location with network containing copies of data files
to maximize bandwidth in accessing the data.

two types of CDNs

Microsoft – Load jQuery from Ajax CDN
Google – Load jQuery from Google libraries API

sign is used as a shortcut for jQuery

Dollar ($) sign

client or server scripting

client scripting

script build up
single javascript file that contains common DOM, event effects and Ajax functions.

debug jQuery
There are two ways to debug jQuery:
Debugger keyword
Add the debugger to the line from where we have to start debugging and then run Visual Studio in Debug
mode with F5 function key.
Insert a break point after attaching the process

ways to include jQuery in a page

Local copy inside script tag
Remote copy of jQuery.com
Remote copy of Ajax API
Local copy of script manager control
Embedded script using client script object

use of jQuery.ajax method ()

For asynchronous HTTP requests.

download JQuery
from jQuery official website – www.jquery.com

is a replacement of JavaScript
No

chaining
used to connect multiple events and functions in a selector.

advantages of jQuery
Just a JavaScript enhancement
Coding is simple, clear, reusable
Removal of writing more complex conditions and loops

use of jQuery.data() method

used to associate data with DOM nodes and JavaScript objects

difference between onload() and document.ready()

onload() document.ready()
can have only one can have more than one
is called when DOM and images are loaded on the is called when DOM is load
page.

each function
each and every element of the target jQuery object.

How method can be called inside code behind using jQuery

$.ajax can be called and by declaring WebMethod inside code behind using jQuery.

fastest selector in jQuery

ID and Element

slowest selector in jQuery

Class selectors

Where jQuery code is getting executed

on a client browser.

Why jQuery is better than JavaScript

handles events, animation and Ajax support applications.

types of selectors in jQuery

CSS Selector
XPath Selector
Custom Selector

use of html() method

to change the entire content of the selected elements
$("p").html("Hello <b>Javatpoint.com</b>");

use of css() method

to get one or more style properties
$("p").css("background-color", "violet");

starting point of code execution

$(document).ready()

use any other name in place of $ (dollar sign)

jQuery(document).ready(function() {
jQuery("p").css("background-color", "pink");
});

selectors in jQuery
Name,#ID,Class,Universal (*),Multiple Elements E, F, G,Attribute Selector

use of serialize() metho

to create a text string in standard URL-encoded notation

use of val()
get the current value

add and remove CSS classes

$("#para").addClass("change"); $("p").removeClass("change");
Select all links inside the paragraph
$("p a")

difference between prop and attr

attr(): It gets the value of an attribute for the first element in the set of matched element.
prop(): it gets the value of a property for the first element in the set of matched elements.

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

disable jQuery animation

jQuery.fx.off

optimize the performance of your web pages

put css at top.
put javascript at bottom.
cache everything.
set far future expire header.
return 304 when appropriate.
use unique url for css and js for propagating the change.
apart from that use ajax wherever required.

Reduce website's loading time

Optimize Caches improve Page Load Time.
Trim Down JavaScript Parsing to achieve Ideal Page Load Time.
Do Away with Redirects and Improve Website Speed.
Minify JavaScript

What loads first JavaScript or HTML

html (DOM) at first

best loading time for a website

3 seconds

jQuery or JavaScript
native DOM method is faster than calling a JavaScript

PHP site load faster

Combine CSS, JS scripts and HTML files together.
Use CSS instead of images whenever possible.
Reduce the number of elements on every web page.
Install a caching plugin.
Reduce redirects,

* $("*")
#id $("#lastname")
.class $(".intro")
.class,.class $(".intro,.demo")
element $("p")
el1,el2,el3 $("h1,div,p")

:first $("p:first")
:last $("p:last")
:even $("tr:even")
:odd $("tr:odd")

:first-child $("p:first-child")
:first-of-type $("p:first-of-type")
:last-child $("p:last-child")
:last-of-type $("p:last-of-type")
:nth-child(n) $("p:nth-child(2)")
:nth-last-child(n) $("p:nth-last-child(2)")
:nth-of-type(n) $("p:nth-of-type(2)")
:nth-last-of-type(n) $("p:nth-last-of-type(2)")
:only-child $("p:only-child")
:only-of-type $("p:only-of-type")

parent > child $("div > p")

parent descendant $("div p")
element + next $("div + p")
element ~ siblings $("div ~ p")

:eq(index) $("ul li:eq(3)")

:gt(no) $("ul li:gt(3)")
:lt(no) $("ul li:lt(3)")
:not(selector) $("input:not(:empty)")

:header $(":header")
:animated $(":animated")
:focus $(":focus")
:contains(text) $(":contains('Hello')")
:has(selector) $("div:has(p)")
:empty $(":empty")
:parent $(":parent")
:hidden $("p:hidden")
:visible $("table:visible")
:root $(":root")
:lang(language) $("p:lang(de)")

[attribute] $("[href]")
[attribute=value] $("[href='default.htm']")
[attribute!=value] $("[href!='default.htm']")
[attribute$=value] $("[href$='.jpg']")
[attribute|=value] $("[title|='Tomorrow']")
[attribute^=value] $("[title^='Tom']")
[attribute~=value] $("[title~='hello']")
[attribute*=value] $("[title*='hello']")

:input $(":input")
:text $(":text")
:password $(":password")
:radio $(":radio")
:checkbox $(":checkbox")
:submit $(":submit")
:reset $(":reset")
:button $(":button")
:image $(":image")
:file $(":file")
:enabled $(":enabled")
:disabled $(":disabled")
:selected $(":selected")
:checked $(":checked")
bind() event.pageY
blur() event.preventDefault()
change() event.relatedTarget
click() event.result
dblclick() event.stopImmediatePropagation()
delegate() event.stopPropagation()
die() event.target
error() event.timeStamp
event.currentTarget event.type
event.data event.which
event.delegateTarget focus()
event.isDefaultPrevented() focusin()
event.isImmediatePropagationStopped() focusout()
event.isPropagationStopped() hover()
event.namespace keydown()
event.pageX keypress()
$.proxy() keyup()
ready() live()
resize() load()
scroll() mousedown()
select() mouseenter()
submit() mouseleave()
toggle() mousemove()
trigger() mouseout()
triggerHandler() mouseover()
unbind() mouseup()
undelegate() off()
unload() on()
one()

animate() hide()
clearQueue() queue()
delay() show()
dequeue() slideDown()
fadeIn() slideToggle()
fadeOut() slideUp()
fadeTo() stop()
fadeToggle() toggle()
finish()

addClass() position()
after() prepend()
append() prependTo()
appendTo() prop()
attr() remove()
before() removeAttr()
clone() removeClass()
css() removeProp()
detach() replaceAll()
empty() replaceWith()
hasClass() scrollLeft()
height() scrollTop()
html() text()
innerHeight() toggleClass()
innerWidth() unwrap()
insertAfter() val()
insertBefore() width()
offset() wrap()
offsetParent() wrapAll()
outerHeight() wrapInner()
outerWidth()

add() next()
addBack() nextAll()
andSelf() nextUntil()
children() not()
closest() offsetParent()
contents() parent()
each() parents()
end() parentsUntil()
eq() prev()
filter() prevAll()
find() prevUntil()
first() siblings()
has() slice()
is()
last()
map()

$.ajax() ajaxComplete()
$.ajaxPrefilter() ajaxError()
$.ajaxSetup() ajaxSend()
$.ajaxTransport() ajaxStart()
$.get() ajaxStop()
$.getJSON() ajaxSuccess()
$.parseJSON() load()
$.getScript() serialize()
$.param() serializeArray()
$.post()

data() size()
each() toArray()
get() context
index() jquery
$.noConflict() jQuery.fx.interval
$.param() jQuery.fx.off
removeData() jQuery.support
length