jQuery Linkedin Assessment Test Question Answers
What is jQuery?
jQuery is a fast, small, and feature-rich JavaScript library. It was created to make it easier to use JavaScript on websites. With a combination of flexibility and extensibility, jQuery has changed the way that millions of people write JavaScript.
Some of the features that make jQuery popular include:
HTML document traversal and manipulation
Event handling
Animations
Ajax
jQuery is designed to simplify the process of writing JavaScript code and to make it easier to use JavaScript across multiple browsers. It is widely used in web development and is supported by a large and active community of developers.
An
important tool for a front end developer is JavaScript, which helps to
implement interactive features in your website such as audio and video, games,
scrolling abilities, page animations. jQuery makes it much easier to use
JavaScript on your website.
With jQuery, you can accomplish many common tasks that use a lot of JavaScript code with just one line of code.
The use of jQuery simplifies many of the complicated aspects of JavaScript, such as AJAX calls and DOM manipulation.
1. What is the END STATE STYLE of the paragraph element in the code $('p').hide(); ?
visibility: hidden;
display: none;
height: 0;
opacity: 0;
2. What does this
code do: $('#id1').animate({width:'250px'}, 'slow').animate({height:'250px'},
'fast');
First the height
animates, then the width animates.
First the width animates, then the height animates.
Both the width and
height animates at the same time.
3. What is the
equivalent of the following code? $('div').click(function {alert(1);});
$('div').handler('click',function
{alert(1);});
$('div').bind('click',function
{alert(1);});✔
$('div').call('click',function
{alert(1);});
$('div').event('click',function
{alert(1);});
4. $(function(){
//executable code }); The executable code will be run:
after everything has
loaded
after everything
except other scripts are loaded
after all other
javascript has been read and executed
before anything has
loaded
after the DOM has loaded, but prior to anything else
loading
5. The selector
:disabled will perform the following:
Select only elements in a disabled state
Create a new element
with the state set to disabled
None of the above
Disable any elements
currently set to an enabled state
6. What is a
particular performance concern when dealing with event handlers, and how can
you cope with it?
Finding which element
an event occurred on is expensive. Assign most events to document.body and use
.is() to act on the element of interest.
Some events, such as mousemove and scroll, happen a lot on
a typical page. Debounce or throttle their handlers to make sure the handlers
are not called more than you actually need.
Listening for an
event that does not exist can create serious memory leaks. Be careful to spell
event names correctly to avoid consuming too much memory.
DOM elements with an
ID wil fire events more efficiently than with classes. Always use IDs instead
of classes where possible.
7. What is the
purpose of the jQuery.fx.off global property?
It turns off
animations that are used to provide motion effect, but appearance effects
remain enabled.
It causes animation
effects that are triggered via functions to instead be executed using CSS.
It globally disables all animations. When animations are
run, all animation will immediately set elements to their final state when
called, rather than displaying an effect.
It globally disables
animations that are triggered by CSS class changes.
8. When you use
custom Jquery selection extensions, such as :animated, on a page with lots of
DOM elements, you can run into performance issues. What is the best practice
for managing those issues?
Select
$(document.body) first, then use .filter with the custom extension.
Use the custom
extension with .has().
Start with the custom
extension, then use .find with a selector that exists in CSS to limit the
selection.
Start with a
selection that exists in CSS, then refine the selection using .filter() with
the custom extension.
9. What is the main
difference between the ajaxStop and ajaxComplete global handlers?
ajaxStop fires when all open requests have completed, while
ajaxComplete fires when an individual request completes.
There is no
difference. They are aliases of each other.
ajaxStop fires when
an error has been encountered, while ajaxComplete fires when a successful
request completes.
ajaxComplete fires
when all open requests have completed, while ajaxStop fires when an individual
request completes.
10. The :only-child
selector selects _.
all elements that are
child elements.
elements that have no
siblings.
elements that have only
one child element.
only the child elements of a given element.
11. Because
querySelectorAll and querySelector are in the native DOM API of modern
browsers, you don't need jQuery to do many kinds of DOM selections. But the
jQuery selector engine does provide extensions that browsers do not support
natively. Which extension is supported only by jQuery and not by querySelector
or querySelectorAll?
:parent, which can
select elements that have children
:visible, which can select elements that jQuery considers
to be visible
:contains, which can
select elements by the text they contain
:nth-of-type, which
can select elements that are the nth element of their type within their parent
12. What is the
difference between these two snippets?
$('button').on('click',
function () {
alert('you clicked the button!');
});
$('button').click(function
() {
alert('you clicked the button!');
});
Only the second one
will work; jQuery does not have a function called .on.
The second snippet
will not function.
Nothing .click(function) is shorter way to write
.on('click', function).
The first snippet
will execute for every button on the page, the second will only apply to the
first button.
13. What does the
following line of code do?
jQuery('p')
Loads a paragraph tag
from a remote server using AJAX
Aliases jQuery to a
variable p
Selects all paragraphs on the page
Creates a new
paragraph tag and inserts it into the body tag
14. Given the
following HTML, how could we use one line to hide or show the button?
<button
class="btn btn-primary" type="submit">Continue to
checkout</button>
$('.btn-primary').toggle();
$('.btn-primary').showHide();
$('.btn-primary').not(':visible').show();
$('.btn-primary').css({
display: 'block'});
15. Working with
AJAX, we may run into situations where a piece of code should not be run until
after multiple AJAX calls have completed successfully. Say we need to call two
external services for JSON data (a list of students, and a list of classes).
And only after retrieving those data will we perform some manipulations on a
page. What is the preferred way for dealing with this scenario?
https://example.com/json-api/students
https://example.com/json-api/classes
A
$.get(
['https://example.com/json-api/students',
'https://example.com/json-api/classes'],
function (studentRequest, classRequest) {
// the rest of the code goes here
},
);
B
$.when(
$.get('https://example.com/json-api/students'),
$.get('https://example.com/json-api/classes'),
).done(function
(studentRequest, classRequest) {
// the rest of the code goes here
});
C
$.bind(
$.get('https://example.com/json-api/students'),
$.get('https://example.com/json-api/classes'),
).done(function
(studentRequest, classRequest) {
// the rest of the code goes here
});
D
$.ajax('https://example.com/json-api/students', {
success: function
(studentRequest) {
$.ajax('https://example.com/json-api/classes', {
success:
function (classRequest) {
// the rest
of the code goes here
},
});
},
});
16. Given the snippet
of HTML below, what is the difference between the two lines that follow it?
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
$('ul').find('li').get(2);
$('ul').find('li').eq(2);
.get() retrieves a DOM element, and can't be chained, eq()
retrieves a jQuery object, and can be chained.
.get() retrieves a
jQuery object, and can't be chained, eq() retrieves a DOM element, and can be
chained.
.get() retrieves a
jQuery object, and is zero-indexed, eq() retrieves a DOM element, and is 1-indexed.
.get() retrieves a
DOM element, and is zero-indexed, eq() retrieves a jQuery object, and is
1-indexed.
17. What is the main
difference between the contents() and children() functions?
They both return the
content of selected nodes, but children() also includes text and comment nodes.
The contents()
function only includes text nodes of the selected elements.
The children()
function only includes text nodes of the selected elements.
They both return the content of selected nodes, but
contents() also includes text and comment nodes.
18. If your
JavaScript project involves a lot of DOM manipulation, but no AJAX or
animation, which version of jQuery should you use?
jQuery 3 compressed
jQuery 3 slim
jQuery 2
None of these - jQuery requires AJAX
19. The .ready()
function is one of the most basic parts of jQuery, but jQuery also provides a
mechanism for executing code when both one or more Promises have resolved and
the DOM is ready. Which code snippet accomplishes this?
A
$(function({
getData : $.get('http://httpbin.org/get'),
delayedData :
$.get('http://httpbin.org/delay/3')
}) {
//DOM is ready, getData and delayedData are
available
});
B
$($.get('http://httpbin.org/get'),
$.get('http://httpbin.org/delay/3')).then(function (
getData,
delayedData,
) {
//DOM is ready, getData and delayedData are
available
});
C
$.when($.get('http://httpbin.org/get'),
$.get('http://httpbin.org/delay/3')).then(function (
getData,
delayedData,
) {
//DOM is ready, getData and delayedData are
available
});
D
$.ready($.get('http://httpbin.org/get'),
$.get('http://httpbin.org/delay/3')).then(function (
getData,
delayedData,
) {
//DOM is ready,
getData and delayedData are available
});
20. You want to take
an element and any event handlers that go with it out of the DOM to do some
work—without the changes affecting the rest of the page—and then move it
somewhere else in the DOM, like right after the opening tag. What should go on
the first line of this code snippet?
// what goes here?
// ... do some other
hidden work on $example
$example.prependTo(document.body);
var $example =
$('#example').remove();
var $example =
$('#example').clone();
var $example = $('#example').detach();
var $example =
$('#example').addBack().empty();
21. Review the HTML
below. You want to select the first item in the list and fade it out, then
select the subsequent items up to (but not including) the active item, and fade
them out halfway. How can you set up a single chain to do this?
<ul
class="items">
<li>Item
1</li>
<li>Item
2</li>
<li>Item
3</li>
<li class="active">Item
4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
A
$('.items >
li').first().fadeOut().nextUntil('.active').fadeTo('fast', 0.5);
B
$('.items').children(':first-child').fadeOut().filter('.active').fadeTo('fast',
0.5);
C
$('.items >
li').first().fadeOut().nextAll('.active').fadeOut(50);
D
$('.items').find('li:first-child').fadeOut().next('.active').fadeTo('fast',
0.5);
22. Suppose we want
to have a ball created from an HTML element (id=ball) move down and to the
right from its original location when clicked, and move back into its original
place when finished. Given a starting point of this, which of these snippets
would accomplish that goal?
$('#ball').click(function
() {
// Our code goes here
});
A
$(this).animate(
{ top: '+=100',
left: '+=100' },
{
duration: 600,
complete:
function () {
$(this).animate({ top: '-=100', left: '-=100' }, 600);
},
},
);
B
$(this).animate({
top: '-=100', left: '-=100' }, 600, function () {
$(this).animate({ top: '+=100', left: '+=100'
}, 600);
});
C
$(this).animate(
{ top: '=100', left: '=100' },
{
duration: 600,
complete: function () {
$(this).animate({ top: 0, left: 0 },
600);
},
},
);
D
$(this).animate({
top: '100', left: '100' }, 600, function () {
$(this).animate({ top: 0, left: 0 }, 600);
});
23. Given the
following CSS and HTML codes below, how could you apply the success class to
the feedback div?
.success {
color: green;
background: #ddffdd;
}
<div
class="feedback">Thank you for answering this survey.</div>
$('.feedback').hasClass('.success');
$.css('.feedback',
'.success');
$('.feedback').addClass('success');
$('.feedback').css('.success');
24. The following
page snippet includes a couple of messages in a list, and a code snippet that
retrieves a few hundred messages from an API endpoint using AJAX. How can you
add these new items to the .message-area--list element in the most performant
way?
<div
class="message-area">
<ul
class="message-area--list">
<li>Existing message 1</li>
<li>Existing message 2</li>
</ul>
</div>
$.get('//example.com/api/v1/message').done(function
(data) { var tonsOfItems = data.messages; // add
all these messages to
a large page });
A
tonsOfItems.map(function
(item) {
$('.message-area--list').append('<li>'
+ item + '</li>');
});
B
var tonsOfListItems = tonsOfItems.map(function (item) {
return '<li>'
+ item + '</li>';
});
$('.message-area--list').append(tonsOfListItems.join(''));
C
CSS.$messageList =
$('.message-area--list');
$.each(tonsOfItems,
function (idx, item) {
$('<li>' + item +
'</li>').appendTo($messageList);
});
D
$.each(tonsOfItems,
function (idx, item) {
$('.message-area--list').append('<li>'
+ item + '</li>');
});
25. What is jQuery?
jQuery is a bridge between
Java and Javascript that makes native apps easier to write.
jQuery is a plugin
for JavaScript that makes database queries easier to write.
jQuery is a collection of JavaScript functions that makes
finding and manipulating elements on a page, AJAX, and other things easier.
jQuery is a Chrome
extension that allows users to create their own extensions with just a few
lines of JavaScript.
26. We want to create
a new jQuery plugin called linkUpdater that can be chained onto other jQuery
selector like a normal plugin. It should update all the links in the referenced
collection so they open in new windows or tabs. Below is the first cut. What is
one problem with this plugin?
'user strict';
($.linkUpdater =
function () {
this.find('a').attr('target', '_blank');
})(jQuery);
this needs to be
wrapped, like $(this), in order to be chained in a plugin.
jQuery plugins can't
be safely authored in strict mode.
In order to be used
by other code, plugins need to be added to the global namespace, not wrapped in
a function expression.
Our plugin should extend jQuery.fn, not jQuery itself.
27. Given this
checkbox, how can you determine whether a user has selected or cleared the
checkbox?
<input
type="checkbox" id="same-address" checked>
by checking the value
of $('#same-address').val()
by checking the value of $('#same-address').prop('checked')
by checking the value
of $('#same-address').attr('checked')
by checking the value
of $('#same-address').checked
28. In some projects,
jQuery is not included as a file with an obvious version number (if it has been
run through a minifier or other code bundler, for example). How can you detect
programmatically what version of jQuery is active?
jQuery.version()
jQuery.jquery
jQuery.prototype.version
jQuery.fn.jquery
29. Given this
snippet of HTML, how can you get the value of the text field using jQuery?
<input
type="text" class="form-control" id="firstName"
placeholder="" value="" required="">
$('input[type=text]').val()
$('.form-control').val()
all of these answers
$('#firstName').val()
29. Which property of
the jQuery event object references the DOM object that dispatched an event?
target
self
source
object
30. You want to write
a plugin that creates a new traversal function—such as parent() and
children()—and behaves like the ones jQuery includes out of the box. It needs
to correctly modify the list of selections jQuery tracks internally, build up a
list of additional items, and return the merged collection. What do you need to
return on the last line of the function in order for this plugin to work
correctly?
$.fn.myTraverse =
function() {
// ... setup
var additionalItems = [ /* some additional
items for jQuery */ ];
return // return what?
}
return this.append(additionalItems);
return additionalItems.appendTo(this);
return
this.pushStack(additionalItems);
return this.add(additionalItems);
31. Given this
snippet of HTML and jQuery code, what will the result look like?
<ul
class="items">
<li class="active">Item
1</li>
<li>Item 2</li>
<li>
Item 3
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
</li>
</ul>
$('.items').find('.active').nextAll().addClass('after-active');
A
<ul class="items">
<li
class="active">Item 1</li>
<li
class="after-active">Item 2</li>
<li
class="after-active">
Item 3
<ul>
<li>Sub
Item 1</li>
<li>Sub
Item 2</li>
</ul>
</li>
</ul>
B
<ul
class="items">
<li class="active">Item
1</li>
<li class="after-active">Item
2</li>
<li class="after-active">
Item 3
<ul class="after-active">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
</li>
</ul>
C
<ul
class="items">
<li class="active">Item
1</li>
<li class="after-active">Item
2</li>
<li class="after-active">
Item 3
<ul>
<li class="after-active">Sub
Item 1</li>
<li
class="after-active">Sub Item 2</li>
</ul>
</li>
</ul>
D
<ul
class="items">
<li class="active">Item
1</li>
<li class="after-active">Item
2</li>
<li class="after-active">
Item 3
<ul class="after-active">
<li class="after-active">Sub
Item 1</li>
<li
class="after-active">Sub Item 2</li>
</ul>
</li>
</ul>
32. You have an
element with a series of code (not CSS) animations applied to it that could be
triggered by code you control, or other code elsewhere (such as plugins). How
can you fire some code when all those animations have completed?
A
$('#element').on('animationend', function () {
console.log('Finally, everything is done!');
});
B
$('#element')
.on('promise')
.then(function () {
console.log('Finally, everything is done!');
});
C
$('#element')
.promise()
.catch(function () {
console.log('Finally, everything is
done!');
});
D
$('#element')
.promise()
.then(function () {
console.log('Finally, everything is done!');
});
33. HTML5 data
attributes allow you to create valid custom attributes to store arbitrary data
within DOM elements. jQuery has an API to interface with custom data such as
the series of quotes below. How can you mark the second quote as your favorite?
<div
class="quotes">
<blockquote
data-favorite="false">A quote</blockquote>
<blockquote
data-favorite="false">A favorite quote</blockquote>
<blockquote
data-favorite="false">A quote</blockquote>
<blockquote data-favorite="false">A quote</blockquote>
</div>
$('blockquote'):second().attr('favorite',
true);
$('blockquote:nth-child(2)').data('favorite', true);
$('blockquote').second().data('favorite',
true);
$('blockquote:nth-child(2)').attr('favorite',
true);
34. jQuery can create
event handlers that execute exactly once. How is this done?
$('button').click(function()
{ console.log('this will only happen once'); }, false);
$('button').on('click',
function() { console.log('this will only happen once'); }).off('click');
$('button').once('click',
function() { console.log('this will only happen once'); });
$('button').one('click', function() { console.log('this
will only happen once'); });
35. You want to
implement the behavior of an effect like slideDown() manually using animate().
What is one critical point you need to remember?
slideDown() requires
animating the background color; doing so with animate() requires the jQuery
Color plugin.
slideDown() includes toggling visibility automatically.
animate() does not automatically set any properties.
slideDown() requires
the element to have a height set in pixels. animate() does not.
Effects created with
animate() must be run over at least 100 milliseconds, where slideDown() can run
as quickly as 50ms.
36. Generally
speaking, when used on a web page, how should jQuery be installed, and why?
Just before the closing body tag, because we want to avoid
blocking other resources from loading, and we use the ready method to make sure
our code fires after the DOM is ready
Using the highest
version number possible because only jQuery 3 and up are compatible with
Internet Explorer 7
In the head tag
because we want jQuery available as soon as possible
From a CDN because we
want to be able to use jQuery online or offline
38. Given the
following HTML, how could we make this button disappear from the page using
jQuery?
<button
class="btn btn-primary" type="submit">Continue to
checkout</button>
$('.btn-primary').hide();
$('.btn-primary:visible').not();
$('.btn-primary').visibility(false);
$('.btn-primary').show(false);
39. What is the
difference between $('header').html() and $('header').text()?
$('header').html() returns the inner HTML of the header.
$('header').text() returns only the text
$('header').html()
returns only the HTML tags used, without the text. $('header').text() returns
only the text
$('header').html()
strips all HTML from the header. $('header').text() always returns an empty
string.
$('header').html()
returns all headers in an HTML document. $('header').text() the first line of a
text file.
40. When writing
jQuery plugins, we often provide default options that may be overridden by the
end user. What jQuery function is most useful for this purpose?
$.extend
$.clone
$.fn.extend
$.merge
41. There are times
when you might want to programmatically trigger an event, instead of simply
reacting to user input directly. Given this markup, Which choice will NOT cause
a click event to the select box when the button is clicked?
<article>
<div>Here's a button you can click:
<button class="btn">Click Me</button></div>
<form>
<p>Further down the page, there's a
select box.</p>
<select>
<option
value="1">One</option>
<option
value="2">One</option>
<option
value="3">One</option>
<option
value="4">One</option>
</select>
</form>
</article>
$('button').on('click.myApp', (function() {
$('input[type=select]').trigger('click'); });
$('button').on('click',
(function() { $('input[type=select]').click()); });
$('button').trigger(function()
{ $('input[type=select]').click(); });
$('button').click(function()
{ $('input[type=select]').click(); });
42. You have an
absolutely positioned element inside a relatively positioned parent element,
and you want to animate that element within its parent element. What jQuery
function is most useful for finding the initial coordinates of the .animate-me?
<style>
.parent {
position: relative;
top: 3em;
width: 50%;
min-height: 50vh;
margin: 0 auto;
}
.animate-me {
position: absolute;
top: 40px;
right: 30px;
}
</style>
<div
class="parent">
<div class="animate-me">This
box will move!</div>
</div>
$('.animate-me').offset();
$('.animate-me').each();
$('.animate-me').position();
$('.animate-me').offsetParent();
43. You want to work
with AJAX using a Promise-like interface instead of nested callback functions.
What jQuery API should you use?
jQuery.sub
jQuery.ajaxTransport
jQuery.Deferred
jQuery.proxy
44. What is tricky
about jQuery's nth- filters (:nth-child, :nth-of-type, etc.) relative to other
filters?
Referring to lists of items, they are 1-indexed (like CSS),
not 0-indexed (like JavaScript).
They don't return the
jQuery object, and cannot be chained.
They can return the
wrong items if the DOM was recently manipulated.
They are not part of
CSS, so they don't get the performance benefits of passing through the
document.querySelectorAll.
45. jQuery's AJAX
functions return objects that implement the Promise API. As a result, you can
chain promises and avoid nested callbacks. What does that look like?
A
$.get('http://httpbin.org/delay/2')
.then(function
(response) {
// Data from
first GET is here as 'response'
return
$.get('http://httpbin.org/delay/2');
})
.then(function
(response) {
// Data from
second GET is here as 'response'
});
B
$.get('http://httpbin.org/delay/2')
.catch(function (response) {
// Data from first GET is here as
'response'
return $.get('http://httpbin.org/delay/2');
})
.done(function (response) {
// Data from second GET is here as
'response'
});
C
$.get('http://httpbin.org/delay/2',
function (response1) {
// Data from first GET is here as 'response1'
$.get('http://httpbin.org/delay/2',
function (response2) {
// Data from second GET is here as
'response2'
});
});
D
$.get('http://httpbin.org/delay/2')
.then(function (response) {
// Data from first GET is here as
'response'
return response;
})
.get('http://httpbin.org/delay/2', function
(response) {
// Data from second GET is here as
'response'
});
46. You want to have
a ball that is created from an HTML element (id=ball) move down and to the
right of its original location when clicked, and move back to its original
place when finished. What snippet, added to the code below, would do this?
$('#ball').click(function
() {
// Our code goes here
});
A
$(this).animate(
{
top: '-=100',
left: '-=100',
},
600,
function () {
$(this).animate(
{
top: '+=100',
left: '+=100',
},
600,
);
},
);
B
$(this).animate(
{
top: '+=100',
left: '+=100',
},
{
duration: 600,
complete:
function () {
$(this).animate(
{
top:
'-=100',
left:
'-=100',
},
600,
);
},
},
);
C
$(this).animate(
{
top: 100,
left: 100,
},
600,
function () {
$(this).animate(
{
top: 0,
left: 0,
},
600,
);
},
);
D
$(this).animate(
{
top: 100,
left: 100,
},
{
duration: 600,
complete: function () {
$(this).animate(
{
top: 0,
left: 0,
},
600,
);
},
},
);
49. Which choice is
an example of statement chaining?
var $p = $('p');
console.log($p.length);
$('p').find('a').children('li');
$('p > a > li');
$('p'); $('a'); $('li');
50. How can you
ensure that some code executes only when a class active appears on an element?
$('.element').attr('class',
'active')
$('.element').with('.active')
$('.element').hasClass('active')
$('.active').then()
51. jQuery has a main
function for handling AJAX, and several shorthand function including load()
that make calling that main function easier. Given this HTML snippet, how can
you insert only the second snippet from the source.html file (div#one) into the
#load-me div on-demand via AJAX?
<div
id="load-me">This area will be replaced with AJAX loaded
content.</div>
<div
id="one">
<h1>First Piece</h1>
<p>Lorem ipsum duis maximus quam
condimentum dolor eleifend scelerisque.</p>
</div>
<div
id="two">
<h1>Second Piece</h1>
<p>Lorem ipsum proin facilisis augue in
risus interdum ornare.</p>
</div>
$('#load-me').get('source.html#one');
$('#load-me').get('source.html
#one');
$('#load-me').load('source.html #one');
$('#load-me').load('source.html',
'#one');
Q52. Given this HTML
list and subsequent two lines of jQuery, what is the difference in the behavior
of .closest() and .parents()?
<ul
class="items" id="main-menu">
<li>
Item 1
<ul id="sub-menu">
<li class="leaf">Sub Item
1</li>
<li>Sub Item 2</li>
</ul>
</li>
</ul>
$('.leaf').closest('.items');
$('.leaf').parents('.items');
.closest() returns
.leaf and #main-menu; .parents() returns #main-menu and #sub-menu.
.closest() returns
.leaf and #sub-menu; .parents() returns #main-menu and #sub-menu.
.closest() returns
only #main-menu; .parents() returns #main-menu and #sub-menu.
.closest() returns
only #sub-menu; .parents() returns #main-menu and #sub-menu.
53. What does this
line of code do?
$('ul >
li:first-child');
selects the first list item inside all unordered lists on
the page
selects the first
list item inside the first unordered list on the page
selects the first
element inside any list items on the page
creates a predefined
CSS selector that can be reused later
54. Below is a list
of items that you want to be clickable and an event handler function. How can
you assign the event handler to every item in the list in a way that is most
performant, and also that ensures that the handler is called even if more items
are added to the list programmatically?
<ul
class="clickable-list">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Fourth Item</li>
<li>Fifth Item</li>
</ul>
function
listResponder(evt) {
console.log('You clicked a list item that
says', evt.target.innerText);
}
$('.clickable-list').click(listResponder);
$('.clickable-list').on('click', 'li', listResponder);
$('.clickable-list').on('click,
append', listResponder);
$('.clickable-list').each(function()
{ $(this).click(listResponder); });
55. What is the
difference between ('p').children('a')?
find() traverses only
one level down, whereas children() selects anything inside the original element
$('p').find('a')
finds all paragraphs inside links, whereas $('p').children('a') finds links
within paragraph tags
.find() always
searches the entire DOM tree, regardless of the original selection .children()
searches only the immediate childern of an element
children() traverses only one level down, whereas find()
selects anything inside the original element
56. Consider the following
markup, used to lay out three balls on the page, all hidden. How can you select
the green ball, make it faded in over the course of three seconds, and log a
console message when the animation has finished?
<div
class="balls">
<div class="ball ball--red"
style="display: none"></div>
<div class="ball ball--green"
style="display: none"></div>
<div class="ball ball--blue"
style="display: none"></div>
</div>
A
$('.ball--green').fadeIn(3000, function(){
console.log("Animation is done!");
});
B
$('.ball--green').fade('in',3000).done(function(){
console.log("Animation is
done!");
});
C
$('.ball--green').fadeIn(3).console().log("Animation
is done!");
D
$('.ball--green').fadeIn("3s",
function(){
console.log("Animation is
done!");
});
57. Why might you use
custom events instead of shared helper functions? For example
$(document).on('myCustomEvent',
function(){
// act on my custom event
});
//and later...
$(document).trigger('myCustomEvent');
Custom events are at
least an order of magnitude faster than helper functions
Custom events can be listened for and acted upon across one
or more scripts without needing to keep helper functions in scope
Handler functions for
custom events are less likely to be mangled by minification and obfuscation
build tools
It is easier to write
documentation for custom events than it is for helper functions
58. In the HTML and
JavaScript below, the animations will all fire at once. How can you make them
fire in sequence instead?
<div
id="element-1" class="animel"></div>
<div
id="element-2" class="animel"></div>
<div
id="element-3" class="animel"></div>
$('#element-1').animate({
top: '+=100' }); $('#element-2').animate({ top: '+=100' });
$('#element-3').animate({
top: '+=100' });
A
$('#element-1').animate({
top: '+=100' })
.pushStack('#element-2')
.animate({ top: '+=100' })
.pushStack('#element-3').animate({ top:
'+=100' })
B
$('#element-1').animate({ top: '+=100' }, function() {
$('#element-2').animate({ top: '+=100' }, function() {
$('#element-3').animate({
top: '+=100' });
})
});
C
$('#element-1').animate({
top: '+=100' })
.add('#element-2').animate({ top: '+=100'
})
.add('#element-3').animate({ top: '+=100'
})
D
$('#element-1').animate({
top: '+=100' }, {queue: 'custom'});
$('#element-2').animate({
top: '+=100' }, {queue: 'custom'});
$('#element-3').animate({
top: '+=100' }, {queue: 'custom'});
$('custom').dequeue();
59. The way .wrap()
works is sometimes misunderstood. Given the DOM and jQuery snippets below, what
does the modified DOM snippet look like?
<div
id="container">
<div class="item">Here's an
item</div>
</div>
$('#container').wrap('<div
class="wrapper"></div>').css('border', '2px solid red');
A
<div
class="wrapper" style="border: 2px solid red;">
<div id="container">
<div class="item">Here's an
item</div>
</div>
</div>
B
<div class="wrapper">
<div
id="container" style="border: 2px solid red;">
<div
class="item">Here's an item</div>
</div>
</div>
C
<div
id="container" style="border: 2px solid red;">
<div class="wrapper">
<div class="item">Here's an
item</div>
</div>
</div>
D
<div
id="container">
<div class="wrapper"
style="border: 2px solid red;">
<div class="item">Here's an
item</div>
</div>
</div>
60. How can you
select the following blockquote AND the list in a single call to jQuery()
without chaining?
<div
class="quotes">
<blockquote
data-favorite="false">A quote</blockquote>
<blockquote
data-favorite="true">A favorite quote</blockquote>
<blockquote
data-favorite="false">A quote</blockquote>
<blockquote
data-favorite="false">A quote</blockquote>
</div>
<ul
class="menu-first">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
$('.quotes +
.menu-first')
$('.quotes
.menu-first')
$('.quotes, .menu-first')
$('.quotes' +
'.menu-first')
61. Effects like
show, hide, fadIn, and fadeOut can be called with no arguments, but can also
take arguments for how long they should last. Which is NOT a duration argument
supported by these functions?
"fast"
"extreme"
2000
"slow"
62. Though jQuery
offers visual effects, it is considered a best practice to use CSS to set up
different states triggered by classes, where it makes sense. What's the easiest
way to enable and disable a class bounce on an element with the ID dialog?
$('#dialog').classToggle('bounce')
$('#dialog.bounce').removeClass().addClass()
$('#dialog').addOrRemoveClass('bounce')
$('#dialog').toggleClass('bounce')
63. What is the main
difference between selectors and filters?
Selectors are used to
refine the content that filters have been applied to.
Selectors are used to find and select content in a page.
Filters are used to refine the results of selectors.
Filters are used to
remove content from the page. Selectors are used to add content to the page
There is no real
difference. They are both used to build up lists of page content.
64. You want to
create a custom right-click menu. How might you start the code?
$('#canvas').on('click.right',
function(){ console.log('Handled a right-click') });
$('#canvas').on('contextual',
function(){ console.log('Handled a right-click') });
$('#canvas').on('contextmenu', function(){
console.log('Handled a right-click') });
$('#canvas').on('rightclick',
function(){ console.log('Handled a right-click') });
65. What is the
correct way to check how many paragraphs exist on a page using jQuery?
$('p').count()
$('p').length
$('*').find('p')
$('p').length()
66. As with many
areas of JavaScript, keeping track of the meaning of this is important and
sometimes tricky. What does this mean at each of the two points in this custom
plugin snippet?
$.fn.customPlugin =
function () {
// Point 1
return this.each(function () {
// Point 2
});
};
$(document).customPlugin();
At Point 1, this
means a jQuery object. At Point 2, it means a DOM element.
In this case, they
mean the same thing: a jQuery object.
In this case, they
mean the same thing: a DOM element.
At Point 1, this means a DOM element. At Point 2, it means
a jQuery object.
67. How can you make
the first list item bold and the next item oblique, in a single statement
chain?
<ul
class="menu-first">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
A
$('.menu-first >
li').eq(0).css('font-weight', 'bold').eq(1).css('font-style', 'oblique');
B
$('.menu-first >
li').first().css('font-weight', 'bold').after().css('font-style', 'oblique');
C
$('.menu-first >
li').first().css('font-weight', 'bold').second().css('font-style', 'oblique');
D
$('.menu-first > li').eq(0).css('font-weight',
'bold').next().css('font-style', 'oblique');
68. How do you change
the current value of a text field with the class .form-item to
"555-1212"?
$.val('.form-item',
'555-1212');
$('.form-item').val('555-1212');
$('.form-item').data('value',
'555-1212');
$('.form-item').set('value',
'555-1212');
69. How would you
fire a callback when any AJAX request on a page has completed?
$('body').ajaxComplete(function()
{ console.count('An AJAX request completed'); });
$(document).on('ajax-complete',
function() { console.count('An AJAX request completed'); });
$('body').on('ajaxComplete',
function() { console.count('An AJAX request completed'); });
$(document).ajaxComplete(function() { console.count('An
AJAX request completed'); });
70. Given this set of
checkboxes, how can you select the one with the value "blimp"?
<input
type="checkbox" name="songs[]"
value="satisfaction" />
<input
type="checkbox" name="songs[]" value="respect"
/>
<input
type="checkbox" name="songs[]" value="blimp"
/>
<input
type="checkbox" name="songs[]" value="saturn"
/>
<input
type="checkbox" name="songs[]" value="penguins"
/>
$('input[value="blimp"]');
$('input[value!="blimp"]');
$('checkbox').val('blimp');
$('input:checkbox').attr('value',
'blimp');
71. Given this
snippet of HTML and jQuery code, what does the jQuery do?
<ul
class="menu">
<li><a href="#"
class="active">Home</a></li>
<li><a href="#">Page
2</a></li>
</ul>
<ul
class="active submenu">
<li><a href="#">Subpage
1</a></li>
<li><a href="#">Subpage
2</a></li>
</ul>
var m = $('.menu'),
sm = $('.submenu');
m.add(sm);
m.css('font-weight',
'bold');
It makes all the menu
items bold.
It throws an
exception on line 3.
It makes the first set of menu items, not the second, bold.
It makes the second
set of menu items, not the first, bold.
72. You want to take
a block of type and animate it to a larger size with jQuery. The following HTML
and JavaScript behaves strangely. What is the issue?
<div
id="type" style="font: 1em/1.5 helvetica, arial, sans-serif;
background: #ffc; padding: 0">
Animate me!
</div>
$('#type').animate(
{
fontSize: '+=1em',
},
3000,
);
jQuery does not
support ems and will make the type 1 pixel larger instead of 1 em larger.
jQuery cannot
override CSS in a style attribute, so the font size will not change.
The font size was set
with a shorthand property, so jQuery will not animate the font size at all.
The font size was set with a shorthand property, so jQuery
will start the animation from 0 instead of from 1 em.
73. When using the
clone() function to duplicate an element, what is one of the main concerns your
code needs to watch out for?
The clone() function
may ignore data attributes on the original elements.
The clone() function may result in elements with duplicate
ID attributes.
The clone() function
may remove CSS classes from the cloned elements.
The clone() function
may not respect the attribute order of the original elements.
74. When
incorporating a plugin into a project, what are the important steps for basic
installation and usage?
The jQuery script tag must come first, followed by the
plugin, followed by your custom scripts, all preferably at or near the bottom
of the page.
Your custom scripts
must appear first in the document <head>, followed by jQuery, followed by
the plugin.
The jQuery script tag
and the plugin script tag must appear in the document <head>, and your
custom scripts can follow anywhere on the page.
The jQuery script tag
must appear in the document <head>, but the plugin and your custom
scripts can appear anywhere else in any order.
75. These two script
tags show different ways of using jQuery's ready() . What is true about both
approaches?
<script>
$(function() {
// The rest of my code goes here
});
</script>
<script>
jQuery(document).ready(function($) {
// The rest of my code goes here
});
</script>
The code inside them can manipulate the DOM safely, knowing
the browser has loaded it fully.
The code inside them
can manipulate images on the page safely, knowing they have fully downloaded to
the browser.
The code inside them
will be run exactly once per user session.
The code inside them
is not aware of the DOM.
76. Which describes
how jQuery makes working with the DOM faster?
jQuery optimizes the
DOM in a background thread, making updates faster.
jQuery avoids using
the DOM at all.
jQuery uses a virtual
DOM that batches updates, making inserts and deletes faster.
jQuery code to perform DOM manipulation is shorter and
easier to write, but does not make DOM operations faster.
77. There are some
issues with this snippet of jQuery. First, it is manipulating CSS directly,
rather than manipulating classes and leaving the CSS in stylesheets. What else
in this code is best to avoid?
$('.item').css('background-color',
'red');
// some other code
here
var firstSubItem =
$('.item').find('.sub-item').get(0);
// some other code
here too
$('.item').parents('.navigation').css('font-weight',
'bold');
The .css() accepts only an object, not two separate
arguments. This will trigger an exception that should be caught.
The $('.item') selection
is being made several times. This should be cached in a variable for (however
slightly) better performance and easier maintainability.
The call to .parents() is in an inefficient place.
All the calls to
$('.item') should be chained together as a single executable line for better
performance.
78. Which CSS
selectors can you NOT use in jQuery?
You cannot use
multiple class selectors such as .class1.class2.
You cannot use
pseudo-classes such as :not or :last-of-type.
You cannot use IDs
and classes together, such as #element.class.
None. All CSS selectors are compatible in jQuery.
79. Starting with
some DOM elements in the nested structure below, you assign listeners for the
same event to a child element and one of the parents using the JavaScript that
follows. You want to ensure that when .leaf is clicked, only its event handler
will be fired, instead of the click bubbling up and also firing the parent's
click handler. What do you need to add to its handler function?
<ul
class="items" id="main-menu">
<li>
Item 1
<ul>
<li class="leaf">Sub Item
1</li>
<li>Sub Item 2</li>
</ul>
</li>
</ul>
$('.leaf').click(function
(event) {
console.log('Sub Item 1 got a click');
});
$('#main-menu').click(function
(event) {
console.log('Main menu got a click');
});
event.capture();
event.stopPropagation();
event.preventDefault();
event.stop();
80. Using event
delegation, you can listen for events on a lot of different items without
having to attach separate listeners to each one. But there are times when you
may want to check the type of item receiving the event before doing anything,
such as checking if an image was clicked versus a text field. Given the starter
code below, which choice shows what jQuery provides to help with that process?
<div
id="sidebar">
<img src="fancy-button.png"
alt="Pick Me" />
<input type="text"
placeholder="Fill in something" />
</div>
$('#sidebar').click(function
(evt) {
var $target = $(evt.target);
// What goes here?
});
$($target.get(0) +
':image')
$('img').is($target)
$target.filter('img')
$target.is('img')
81. How would you
change this code to make Vanilla selected by default?
<input
type="radio" value="strawberry">Strawberry
<input
type="radio" value="vanilla">Vanilla
<input
type="radio" value="chocolate">Chocolate
<input
type="radio" value="vanilla" checked>
<input type="radio"
value="vanilla" check>
<input type="radio"
value="vanilla" selected>
<input type="radio"
value="vanilla" on>
82. Which of the
following jQuery selector selects all elements available in a DOM?
$('*')
$('?')
$('#')
None of the above.
83. Which of the
following jQuery gets the style property of an element?
getClass( name )
getStyle( name)
css( name )
None of the above.
84. Which of the
following jQuery prevents the browser from executing the default action?
preventDefault( )
stopImmediatePropagation(
)
stopPropagation( )
None of the above.
85. CDN stands for -
Content development
network
Content delivery network / Content distribution network
Communication development
network
None of the above
86. The jQuery used
to find all previous sibling elements of the current element is -
nextAll()
prevAll()
siblings()
None of the above
87. Given this set of
checkboxes, how can you select the ones that have the phrase "sun" as
part of the value?
<input
type="checkbox" name="artists[]" value="sun-ra"
/>
<input
type="checkbox" name="artists[]"
value="otis-redding" />
<input
type="checkbox" name="artists[]"
value="captain-beefheart" />
<input
type="checkbox" name="artists[]"
value="king-sunny-ade" />
<input
type="checkbox" name="artists[]"
value="weather-report" />
$('checkbox').val(/sun/);
$('input[value*="sun"]');
$('input[value|="sun"]');
$('input:checkbox').attr('value',
'*sun*');
88. How can you get
an AJAX request to go through without triggering any of jQuery's AJAX events?
Set the type option
to "none".
Set the processData
option to false.
Set a success
callback that returns false.
Set the option "global" to false.
89. The jQuery used to return the direct parent element of
the selected element is -
parents()
parent()
offsetParent()
None of the above
90. The jQuery used to load data using HTTP get is -
get(URL, data, callback, dataType)
post(URL, data,
callback, dataType)
ajax()
ajaxSend()
91. Can we use
multiple document.ready() function on the same page?
Yes
No
Can't say
Not possible
92. The code
$("p").css("background-color","yellow") is
equivalent to _________
jQuery("p").css("background-color","yellow")
document("p").css("background-color","yellow")
jq("p").css("background-color","yellow")
None of the above
93. Which of the
following jQuery is used to add/remove one or more classes from the selected
elements?
toggleClass()
fadeToggle()
toggle()
slideToggle()
94. What does the
syntax $("p") will select?
All paragraph elements
Only first paragraph
element
Only last paragraph
element
None of the above
95. What does the
syntax $("p span") will select?
All span elements inside the paragraph element
Only first span
element inside the paragraph element
Only last span
element inside the paragraph element
None of the above
96. The selector
$(":disabled") will select -
The elements with the
text ":disabled"
The elements that do
not include the text ":disabled"
The hidden elements
All disabled input
elements
97. Which of the
following selector in jQuery is used to select the elements with lesser index
value than the value of its index parameter?
jQuery :lt() selector
jQuery :gt() selector
jQuery :lang()
selector
jQuery :nth-child
selector
98. Using ________ function,
we can hold or release the execution of jQuery's ready event.
jQuery.holdready()
jQuery.ready()
jQuery.holdReady()
jQuery.hold()
99. Is jQuery a library for client scripting
or server scripting?
Client scripting
Server scripting
Both above
None of these
100. Which of the
following jQuery checks the current
selection against an expression?
getIs(selector)
is(selector)
checkIs(selector)
None of the above
Linkedin jQuery Assessment Test Question Answers
101. What is the
correct jQuery code for making all div elements 100 pixels high?
$("div").height(100)
$("div").height="100
$(div").yPos(100)
None
102. Is jQuery a
library for client scripting or server scripting?
Server scripting
Client scripting
Both of these
None
103. jQuery is used to perform an asynchronous HTTP
request?
jQuery.ajaxAsync()
jQuery.ajaxSetup()
jQuery.ajax()
None
104. What does the
following selector: $("div.intro) select?
All div elements with class="intro"
All div elements with
id="intro"
The first div element
with class="intro"
The first div element
with id="intro"
105. Which of the
following is/are the sources of Content Distribution Network(CDN) for jQuery.
jQuery CDN
Microsoft CDN
Google CDN
All of the above
106. Which of the
following in jQuery is used to make
copies of the set of matched elements?
jQuery detach()
jQuery delegate()
jQuery clone()
jQuery serialize()
107. The jQuery which is used to remove the tabs, space and
the line breaks from the beginning and end of the specified string is -
jQuery empty()
jQuery trim()
jQuery remove()
jQuery serialize()
108. Which of the
following jQuery returns the direct
children of the selected element?
jQuery ancestors()
jQuery next()
jQuery children()
None of the above
109. Which of the
following jQuery returns all siblings of
the selected element?
jQuery ancestors()
jQuery siblings()
jQuery parents()
None of the above
110. The jQuery
selector used to select the elements containing the specified string is -
jQuery :contains selector
jQuery :lang()
selector
jQuery :nth-child
selector
None of the above
111. The jQuery
selector used to select the elements with the specified language code is -
jQuery :
jQuery :lang()
jQuery :
None of the above
112. Which of the
following jQuery is used to replace all
selected elements with new HTML elements?
jQuery replaceWith()
jQuery replaceAll()
jQuery load()
jQuery delegate()
113. The jQuery used
to trigger a specified event handler for the selected element is -
jQuery trigger()
jQuery toggle()
jQuery eq()
jQuery next()
114. Which of the
following is used to remove the
specified attribute from the selected element?
jQuery remove()
jQuery empty()
jQuery removeAttr()
jQuery error()
115. Which of the
following jQuery is used to merge the
content of two or more objects into the first object?
jQuery extend()
jQuery eq()
jQuery data()
jQuery param()
116. There are many
ways to create elements that can be added to the page. Which answer is NOT one
of those ways, assuming you have the following on the page?
<div
id="elements"></div>
A
$('#elements').append($('<p
class="appended">As an HTML string</p>'));
B
var p =
document.createElement('p');
var text =
document.createTextNode('As a DOM element');
p.appendChild(text);
$('#elements').append(p);
C
$('#elements').append(<p
class="appended">As a JSX object</p>);
D
$('#elements').append(
$('<p>', {
class: 'appended',
text: 'As an attribute object',
}),
);
117. The .addClass()
and .removeClass() can accept functions as arguments. What does this function
do?
$('#menu').addClass(function
() {
return $('body').attr('class');
});
It adds the first
class found on the body element to the #menu element.
It adds all classes
found on the #menu element to the body tag.
It replaces any classes
on the #menu element with all classes from the body tag.
It adds all classes found on the body element to the #menu
element.
119. You're working
on a site that uses an old version of jQuery, and you want to update to a newer
version. What's the most efficient way to do so?
Install the newer
version of jQuery, go through each script one by one, and fix what looks
broken.
Read the change notes
for the newer version of jQuery, fix all scripts, install the newer version,
and fix anything that remains broken.
Install the newer version of jQuery as well as its Migrate
plugin, fix all warnings, and uninstall the Migrate plugin.
Install the newer
version of jQuery at the same time, and use jQuery.noConflict() on pages that
need the older version.
120. Let's say you
have a page with just one link on it. How can you change the anchor tag so it
links to example.com?
$('a').attribute('href',
'http://www.example.com')
$('a').attr('href', 'http://www.example.com')
$('a').data('href',
'http://www.example.com')
$('a').href('http://www.example.com')
121. What does $()
mean in jQuery?
It is an alias to the main core of jQuery itself—the same as writing jQuery().
It is a utility
function that selects the first element from the document.
It is a shorter way
to write document.getElementById().
It is a utility
function that selects the last element from the document.
122. Along with DOM
traversal and manipulation, jQuery offers several general-purpose helper
functions that fill in some JavaScript gaps, especially before ES2015. Which is
NOT a jQuery utility function?
jQuery.each, a
general purpose iterator for looping over arrays or objects
jQuery.isNumeric,
which can check whether its argument is, or looks like, a number
jQuery.extend, which
can merge objects and make complete deep copies of objects
jQuery.isMobile, which can tell whether the user is using a
mobile browser
123. You want to
implement the behavior of an effect like slideDown() manually using animate().
What is one critical point you need to remember?
SlideDown() requires
animating the background color; doing so with animate() requires the jQuery
Color plugin.
SlideDown() includes toggling visibility automatically.
animate() does not automatically set any properties.
SlideDown() requires
the element to have a height set in pixels. animate() does not.
Effects created with
animate() must be run over at least 100 milliseconds, where slideDown() can run
as quickly as 50ms.
124. How is jQuery
licensed?
Public
Private
Open source
Proprietary
125. Which line would
you add to this code to add "Cosmos" to the list of currencies using
JavaScript?
var currencies =
['Bitcoin', 'Ethereum'];
/* Missing line */
console.log(currencies);
currencies.push("Cosmos");
Array.append("Cosmos",
currencies);
currencies.add("Cosmos");
currencies(2) = "Cosmos";
126. ---------------
takes a selector as its argument and returns true if at least one of the
selected elements also matches the specified selector.
is()
index()
each()
map()
127. Which jQuery is
used to switch between adding/removing one or more classes from selected
elements?
toggleClass()
switch()
altClass()
switchClass()
128. What are the used
to provide effects?
Show()
Hide()
Toggle()
All of these
129. How would you
change this code to make Vanilla selected by default?
<input
type="radio" value="strawberry">Strawberry
<input
type="radio" value="vanilla">Vanilla
<input
type="radio" value="chocolate">Chocolate
130. Which of the
following is a single global function defined in the jQuery library?
jQuery()
$()
Queryanalysis()
None of the mentioned
131. What does the
following jQuery selector: $("div#intro .head) will select?
All elements with class="head" inside the first
div element with id="intro"
The first element
with id="head" inside any div element with class="intro"
All div elements with
id="intro"
None
132. Which built-in returns
the character at the specified index?
characterAt()
getCharAt()
charAt()
None of the above
133. Which of the
following is used for parsing JSON text?
jQuery.each()
jQuery.parseJSON()
jQuery.noConflict()
None above
134. The jQuery used to return the direct parent element of
the selected element is -
parents()
parent()
offsetParent()
None of the above
Mostly asked jQuery interview questions and answers
Mostly asked jQuery interview questions and answers
What is jQuery?
jQuery is a fast,
lightweight, feature-rich client-side JavaScript library. It is cross-platform
and supports different types of browsers. It boost to JavaScript. Before
jQuery, JavaScript codes were lengthy and bigger, even for smaller functions.
It makes a website more interactive and attractive.
What is the
difference between JavaScript and jQuery?
JavaScript is a
language while jQuery is a built-in library built for JavaScript. jQuery
simplifies the use of JavaScript language.
Is jQuery replacement of JavaScript?
No, jQuery is not the
replacement of JavaScript. jQuery is written on the top of JavaScript, and it
is a different library. jQuery is a lightweight JavaScript library which is
used to interact with JavaScript and HTML.
Why do we use jQuery?
It is very easy to
learn and use. improves the performance of an application used to develop
browser, compatible web applications. It is very fast and facilitates to write
minimal lines of codes for UI related functions. It provides cross-browser
support.
Is jQuery library used for server scripting or client scripting?
It is a library for
client-side Scripting.
Is jQuery a W3C
standard?
No, jQuery is not a
W3C standard.
What is the starting
point of code execution in jQuery?
$(document).ready()
function is the starting point of jQuery code. It is executed when DOM is
loaded.
Can you use any other
name in place of $ (dollar sign) in jQuery?
Yes, instead of $
(dollar sign) we can use jQuery as a function name.
Can you use multiple
document.ready() function on the same page?
Yes. Can use any number of document.ready() function on the same page.
What is the
difference between find and childrens?
Find is used to find all levels down the DOM tree while children is used to find single level down the DOM tree.
What is a CDN?
CDN stands for Content Delivery Network or Content Distribution Network. It is a large distributed system of servers deployed in multiple data centers across the internet. It provides the files from servers at a higher bandwidth that leads to faster loading time.
What are the advantages of using CDN?
It reduces the load from the server.
It saves bandwidth.
jQuery framework is loaded faster from CDN.
If a user regularly
visits a site which is using jQuery framework from any of these CDN, it will be
cached.
How can you use a
jQuery library in your project?
You can use a jQuery library in the ASP.Net project from downloading the latest jQuery library from jQuery.com and include the references to the jQuery library file in your HTML/PHP/JSP/Aspx page.
What are the
selectors in jQuery? How many types of selectors in jQuery?
Selectors find the HTML elements in jQuery. There are many types of selectors. Some basic selectors are:
[#ID: It is used to
select a single element which matches with the given ID
Name: It is used to
select all elements which match with the given element Name.
.Class: It is used to
select all elements which match with the given Class.
Universal (*): It is
used to select all elements available in a DOM.
Multiple Elements E,
F, G: It is used to selects the combined results of all the specified selectors
E, F or G.
Attribute Selector:
It is used to select elements based on its attribute value.]
What is a use of
jQuery filter?
: jQuery filter is
used to filter the specific values from the object.
What are the
different types of selectors in jQuery?
There are three types
of selectors in jQuery:
CSS Selector
Custom Selector
XPath Selector
What is $() in jQuery
library?
The $() function is
an alias of jQuery() function.
What are the effects s
used in jQuery?
show() - displays or shows the selected elements.
hide() - hides the
matched or selected elements.
toggle() - shows or
hides the matched elements. In other words, it toggles between the hide() and
shows() s.
fadeIn() - shows the
matched elements by fading it to opaque. In other words, it fades in the
selected elements.
What is the use of toggle() in JQuery?
The jQuery toggle() is a particular type of which is used to toggle between the hide() and show() . It shows the hidden elements and hides the shown element.
What is the purpose
of fadeToggle() in JQuery?
The jQuery
fadeToggle() is used to toggle between
the fadeIn() and fadeOut() s. If the elements are faded in, it makes them faded
out, and if they are faded out, it makes them faded in.
What is the use of delay() in JQuery?
The jQuery delay() is used to delay the execution of functions in
the queue.
Is it possible that jQuery HTML work for both HTML and XML document?
No, jQuery HTML only
works for HTML document. It doesn't work for XML documents.
What is the use of
html() in JQuery?
The jQuery html() is used to change the entire content of the
selected elements. It replaces the selected element content with new contents.
What is the use of
css() in JQuery?
The jQuery CSS() is used to get (return)or set style properties
or values for selected elements. It facilitates you to get one or more style
properties. The jQuery CSS() provides two ways:
Can you write a
jQuery code to select all links inside the paragraph?
Yes. You can use
<a> tag nested inside paragraph <p> tag to select all links.
What is the
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. It is introduced in jQuery 1.6.
What are the two types of CDNs?
There are two types
of CDN:
Microsoft: It loads jQuery from AJAX CDN.
Google: It loads
jQuery from Google libraries API.
What is the use of
the animate() in jQuery?
The animate function is used to apply the custom animation effect to elements.
How can you disable
jQuery animation?
By using jQuery
property "jQuery.fx.off" and setting it to true, you can disable
jQuery animation.
Why do we need to use jQuery?
JQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax.
What is jQuery mobile?
jQuery is a fast, small, cross-platform and feature-rich JavaScript library. It is designed to simplify the client-side scripting of HTML. It is a small, light-weight and fast JavaScript library.
What will the jQuery
code $( P Hide ()?
$(this). hide() – hides the current element.
How do you create hide and show in jQuery?
hide(speed,callback); $(selector). show(speed,callback); The
optional speed parameter specifies the speed of the hiding/showing, and can
take the following values: “slow”, “fast”, or milliseconds.
Which jQuery syntax hides all the paragraph elements?
jQuery hide() The hide() hides the selected elements.
How we hide the elements in jQuery give an example?
Syntax: $(selector).
Which jQuery syntax shows all the paragraph elements?
jQuery Selector Syntax For example $(‘p’) selects all paragraphs
in the document.
How do I hide a paragraph when clicking on a button?
On the click event on hide button we are hiding the paragraph
using $(“p”). hide().
How do you hide an element in HTML?
Set the style display property to “none”.
How do you hide one element and show another?
To show and hide div on mouse click using jQuery, use the
toggle() .
What is the use of jQuery toggle ()?
The toggle() method attaches two or more functions to toggle between for the click event for the selected elements
Which is the fastest selector in jQuery?
ID and Element
selector
What is the correct jQuery code to set the background color of
all P elements to blue?
$("p"). style("background-color","blue"); $("p").
Which jQuery function is used to prevent code from running
before the document is finished loading?
jQuery ready() function
How do I stop a jQuery function from running?
$(selector). stop(stopAll,goToEnd);
What is event preventDefault () in jQuery?
preventDefault() stops the default action of an element from happening.
What is the difference between stopPropagation and
preventDefault?
preventDefault() will not allow the user to
leave the page and open the URL. The event. stopPropagation() stops the propagation of an event from
occurring in the bubbling or capturing phase.
What is jQuery parsing?
The jQuery parseJSON() takes a JSON string and returns a JavaScript
object.