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
Continue Reading$(‘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.
Continue Reading<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);
Continue ReadingJust 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 […]
Continue Reading“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 […]
Continue ReadingjQuery 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 […]
Continue Reading<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(”)); Removing the event handlers with JavaScript will be slower than removing them $.each(tonsOfItems, […]
Continue Reading.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’);
Continue Reading$(‘#ball’).click(function() { // Our code goes here }); [x] $(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: […]
Continue Reading<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 […]
Continue Reading