$('button').on('click', function () {
alert('you clicked the button!');
});
$('button').click(function () {
alert('you clicked the button!');
});
.on
..click(function)
is a shorter way to write .on('click', function)
.jQuery('p')
<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'});
https://example.com/json-api/students
https://example.com/json-api/classes
$.get(
['https://example.com/json-api/students', 'https://example.com/json-api/classes'],
function (studentRequest, classRequest) {
// the rest of the code goes here
},
);
$.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
});
$.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
});
$.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
},
});
},
});
<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);
$('#ball').click(function () {
// Our code goes here
});
$(this).animate(
{ top: '+=100', left: '+=100' },
{
duration: 600,
complete: function () {
$(this).animate({ top: '-=100', left: '-=100' }, 600);
},
},
);
$(this).animate({ top: '-=100', left: '-=100' }, 600, function () {
$(this).animate({ top: '+=100', left: '+=100' }, 600);
});
$(this).animate(
{ top: '=100', left: '=100' },
{
duration: 600,
complete: function () {
$(this).animate({ top: 0, left: 0 }, 600);
},
},
);
$(this).animate({ top: '100', left: '100' }, 600, function () {
$(this).animate({ top: 0, left: 0 }, 600);
});
.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');
<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 });
tonsOfItems.map(function (item) {
$('.message-area--list').append('<li>' + item + '</li>');
});
var tonsOfListItems = tonsOfItems.map(function (item) {
return '<li>' + item + '</li>';
});
$('.message-area--list').append(tonsOfListItems.join(''));
CSS.$messageList = $('.message-area--list');
$.each(tonsOfItems, function (idx, item) {
$('<li>' + item + '</li>').appendTo($messageList);
});
$.each(tonsOfItems, function (idx, item) {
$('.message-area--list').append('<li>' + item + '</li>');
});
'user strict';
($.linkUpdater = function () {
this.find('a').attr('target', '_blank');
})(jQuery);
$(this)
, in order to be chained in a plugin.<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);
$('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.<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(); });
.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();
jQuery.sub
jQuery.ajaxTransport
jQuery.Deferred
jQuery.proxy
document.querySelectorAll
.$.get('hhttp://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'
});
$.get('hhttp://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'
});
$.get('hhttp://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'
});
});
$.get('hhttp://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'
});
$('#ball').click(function () {
// Our code goes here
});
$(this).animate(
{
top: '-=100',
left: '-=100',
},
600,
function () {
$(this).animate(
{
top: '+=100',
left: '+=100',
},
600,
);
},
);
$(this).animate(
{
top: '+=100',
left: '+=100',
},
{
duration: 600,
complete: function () {
$(this).animate(
{
top: '-=100',
left: '-=100',
},
600,
);
},
},
);
$(this).animate(
{
top: 100,
left: 100,
},
600,
function () {
$(this).animate(
{
top: 0,
left: 0,
},
600,
);
},
);
$(this).animate(
{
top: 100,
left: 100,
},
{
duration: 600,
complete: function () {
$(this).animate(
{
top: 0,
left: 0,
},
600,
);
},
},
);
.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');
<div class="wrapper" style="border: 2px solid red;">
<div id="container">
<div class="item">Here's an item</div>
</div>
</div>
<div class="wrapper">
<div id="container" style="border: 2px solid red;">
<div class="item">Here's an item</div>
</div>
</div>
<div id="container" style="border: 2px solid red;">
<div class="wrapper">
<div class="item">Here's an item</div>
</div>
</div>
<div id="container">
<div class="wrapper" style="border: 2px solid red;">
<div class="item">Here's an item</div>
</div>
</div>
<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')
$('#dialog').classToggle('bounce')
$('#dialog.bounce').removeClass().addClass()
$('#dialog').addOrRemoveClass('bounce')
$('#dialog').toggleClass('bounce')
$('#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') });
$('p').count()
$('p').length
$('*').find('p')
$('p').length()
$.fn.customPlugin = function () {
// Point 1
return this.each(function () {
// Point 2
});
};
$(document).customPlugin();
this
means a jQuery object. At Point 2, it means a DOM element.this
means a DOM element. At Point 2, it means a jQuery object.<ul class="menu-first">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
$('.menu-first > li').eq(0).css('font-weight', 'bold').eq(1).css('font-style', 'oblique');
$('.menu-first > li').first().css('font-weight', 'bold').after().css('font-style', 'oblique');
$('.menu-first > li').first().css('font-weight', 'bold').second().css('font-style', 'oblique');
$('.menu-first > li').eq(0).css('font-weight', 'bold').next().css('font-style', 'oblique');
.class1.class2
.:not
or :last-of-type
.#element.class
..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();
<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')
<div id="elements"></div>
$('#elements').append($('<p class="appended">As an HTML string</p>'));
var p = document.createElement('p');
var text = document.createTextNode('As a DOM element');
p.appendChild(text);
$('#elements').append(p);
$('#elements').append(<p class="appended">As a JSX object</p>);
$('#elements').append(
$('<p>', {
class: 'appended',
text: 'As an attribute object',
}),
);
.addClass()
and .removeClass()
methods can accept functions as arguments. What does this function do?$('#menu').addClass(function () {
return $('body').attr('class');
});
jQuery.noConflict()
on pages that need the older version.$('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')
$()
mean in jQuery?document.getElementById()
.jQuery.each
, a general purpose iterator for looping over arrays or objectsjQuery.isNumeric
, which can check whether its argument is, or looks like, a numberjQuery.extend
, which can merge objects and make complete deep copies of objectsjQuery.isMobile
, which can tell whether the user is using a mobile browser<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*');
.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');
$('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'); });
<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');
<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');
<div id="type" style="font: 1em/1.5 helvetica, arial, sans-serif; background: #ffc; padding: 0">
Animate me!
</div>
$('#type').animate(
{
fontSize: '+=1em',
},
3000,
);
clone()
function to duplicate an element, what is one of the main concerns your code needs to watch out for?clone()
function may ignore data attributes on the original elements.clone()
function may result in elements with duplicate ID attributes.clone()
function may remove CSS classes from the cloned elements.clone()
function may not respect the attribute order of the original elements.<head>
, followed by jQuery, followed by the plugin.<head>
, and your custom scripts can follow anywhere on the page.<head>
, but the plugin and your custom scripts can appear anywhere else in any order.ready()
method. 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>
$('.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');
.css()
method accepts only an object, not two separate arguments. This will trigger an exception that should be caught.$('.item')
selection is being made several times. This should be cached in a variable for (however slightly) better performance and easier maintainability..parents()
is in an inefficient place.$('.item')
should be chained together as a single executable line for better performance.var $p = $('p'); console.log($p.length);
$('p').find('a').children('li');
$('p > a > li');
$('p'); $('a'); $('li');
active
appears on an element?$('.element').attr('class', 'active')
$('.element').with('.active')
$('.element').hasClass('active')
$('.active').then()
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');
.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
.$('ul > li:first-child');
<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); });
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
Source: https://api.jquery.com/find/
Explanation:Given a jQuery object that represents a set of DOM elements, the .find() method allows us to search through the descendants of these elements in the DOM tree and construct a new jQuery object from the matching elements. The .find() and .children() methods are similar, except that the latter only travels a single level down the DOM tree.
<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>
$('.ball--green').fadeIn(3000, function(){
console.log("Animation is done!");
});
$('.ball--green').fade('in',3000).done(function(){
console.log("Animation is done!");
});
$('.ball--green').fadeIn(3).console().log("Animation is done!");
$('.ball--green').fadeIn("3s", function(){
console.log("Animation is done!");
});
$(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 funtions 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
<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' });
$('element-1').animate({ top: '+=100' })
.pushStack('#element-2')
.animate({ top: '+=100' })
.pushStack('#element-3').animate({ top: '+=100' })
$('element-1').animate({ top: '+=100' }, function() {
$('element-2').animate({ top: '+=100' }, function() {
$('element-3').animate({ top: '+=100' });
})
});
$('element-1').animate({ top: '+=100' })
.add('element-2').animate({ top: '+=100' })
.add('element-3').animate({ top: '+=100' })
$('element-1').animate({ top: '+=100' }, {queue: 'custom'});
$('element-2').animate({ top: '+=100' }, {queue: 'custom'});
$('element-3').animate({ top: '+=100' }, {queue: 'custom'});
$('custom').dequeue();
<input type="checkbox" id="same-address" checked>
$('#same-address').val()
$('#same-address').prop('checked')
$('#same-address').attr('checked')
$('#same-address').checked
jQuery.version()
jQuery.jquery
jQuery.prototype.version
jQuery.fn.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()
$.fn.myTraverse = function() {
// ... setup
var additionalItems = [ /* some additional items for jQuery */ ];
return // return what?
}
return this.append(additionalItems);return this.append(additionalItems);
return additionalItems.appendTo(this);return additionalItems.appendTo(this);
return this.pushStack(additionalItems);return this.pushStack(additionalItems);
return this.add(additionalItems);return this.add(additionalItems);
<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');
<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>
<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>
<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>
<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>
LinkedIn excel quiz answers, LinkedIn Microsoft excel assessment answers, LinkedIn Microsoft word quiz answers, LinkedIn HTML quiz answers, LinkedIn autocad quiz answers, LinkedIn java assessment answers, Microsoft excel LinkedIn quiz answers, LinkedIn Microsoft excel quiz answers, Microsoft outlook LinkedIn quiz answers, autocad assessment LinkedIn answers, LinkedIn skill quiz answers excel, Microsoft word LinkedIn quiz answers, LinkedIn git assessment answers, autocad LinkedIn quiz answers, LinkedIn Microsoft excel quiz, Microsoft excel LinkedIn quiz, LinkedIn autocad assessment answers,
Answers to LinkedIn quizzes, LinkedIn quiz answers excel, LinkedIn java quiz answers, LinkedIn c# assessment answers, LinkedIn skill assessment answers Github, LinkedIn c quiz answers, LinkedIn excel assessment quiz answers, LinkedIn c programming quiz answers, LinkedIn skill assessment excel answers, LinkedIn adobe illustrator quiz answers, LinkedIn assessment test answers, LinkedIn skill assessments answers, Html LinkedIn quiz, LinkedIn Microsoft excel assessment test answers, LinkedIn Html test answers, adobe illustrator assessment LinkedIn answers, LinkedIn adobe acrobat quiz answers, LinkedIn aws assessment quiz answers, LinkedIn python skill assessment answers, LinkedIn ms excel quiz answers, LinkedIn skill assessment answers Reddit, Microsoft project assessment LinkedIn answers, Microsoft excel LinkedIn assessment answers, LinkedIn Microsoft project assessment answers, LinkedIn python quiz answers, python LinkedIn assessment answers