One of the more popular posts on this blog has been my tutorial and demo for integrating the jQuery Validate plugin with Bootstrap’s built-in “success” and “error” styles. I’ve now updated that tut in light of great recommendations given by commenters.
Category: jQuery
Comparing Scripts in jQuery and JavaScript: A Comparison by Jeffrey Way
In a recent post, From jQuery to JavaScript: A Reference, Jeffrey Way gives an excellent run-down of how to get scripty things done in three idioms: jQuery, current JavaScript, and legacy JavaScript.
It’s an outstanding read.
Item number one gives a great introduction to JavaScript’s new Selectors API, which approximates jQuery for its ability to query the DOM in CSS-selector style.
So for instance, compare these three ways of doing things:
Selecting Elements
jQuery
$('#container');
JavaScript
var container = document.querySelector('#container');
Legacy JavaScript
var container = document.getElementById('container');
Or consider this:
Add, Remove, and Toggle Classes
jQuery
$('#box').addClass('wrap'); $('#box').removeClass('wrap'); $('#box').toggleClass('wrap');
JavaScript
var container = document.querySelector('#box'); container.classList.add('wrap'); container.classList.remove('wrap'); container.classList.toggle('wrap');
Legacy JavaScript
var box = document.getElementById('box'), hasClass = function (el, cl) { var regex = new RegExp('(?:s|^)' + cl + '(?:s|$)'); return !!el.className.match(regex); }, addClass = function (el, cl) { el.className += ' ' + cl; }, removeClass = function (el, cl) { var regex = new RegExp('(?:s|^)' + cl + '(?:s|$)'); el.className = el.className.replace(regex, ' '); }, toggleClass = function (el, cl) { hasClass(el, cl) ? removeClass(el, cl) : addClass(el, cl); }; addClass(box, 'drago'); removeClass(box, 'drago'); toggleClass(box, 'drago'); // if the element does not have a class of 'drago', add one.
Credit: These examples are from the post, From jQuery to JavaScript: A Reference, by Jeffrey Way.
Which is better? — or Which is better When?
As Way points out, the question is not necessarily “Which is better?” but “Which is better when?” JavaScript’s new Selector API goes a long way toward making vanilla JavaScript nearly as easy to work with as jQuery. In cases where we can get things done without loading the jQuery library, our sites will travel lighter and perform a bit snappier.
They take-away: The jQuery library is fantastic when you need it, but in each case, we should pause to ask: “Do I really need jQuery in this case? — Or can I get it done in straight JavaScript?”
Links
Learn jQuery Faster with Firebug, jQuerify, and SelectorGadget
Use Firebug for learning, coding, and testing JavaScript and jQuery right in your browser. Then add the handy plugins, jQuerify and SelectorGadget.
Many thanks to Dave Ward and the folks at Polymorphic Podcast for putting together this handy tutorial video.
JavaScript News Briefs 9-9-2011
Highlights from today’s JavaScript Weekly Newsletter
-
FitVids.js
A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
-
CoffeeScript: JavaScript without the Fail
a fun, informative HTML5 presentation on the advantages of CoffeeScript
-
jQuery Tooltip Plugins Roundup
a roundup from Zoomzum.com
-
jQuery Mobile Beta 3 has been released
jQuery Plugins for Your WordPress Site: Roundup from WPMU.org
An excellent roundup of some great jQuery plugins, for things like:
- selecting and embedding Flickr photos
- building a wall of sponsor logos
- implementing full-screen backgrounds
- turning a gallery into a slideshow
- adding an announcement bar to the top of your site
- creating forms using a drag and drop interface
- allowing users to schedule appointments online
21 New jQuery Plugins to Add Cool Effects to Your WordPress Site — WPMU.org
Excellent Examples of Parallax Scrolling
These are some very inspiring examples — some of the best of which combine scrolling with parallax. Check them out:
21 Examples of Parallax Scrolling in Web Design | Inspiration
The Parallax effect or parallax scrolling in web design is the technique that features layered images that move around the website in different speeds/perspectives creating a nice and interesting 3D illusion. We gathered some examples of websites using the parallax effect to inspire you. This effect certainly makes scrolling around websites an interesting experience.