UPDATE: Check out Apollo.js, the latest version of these scripts integrated with HTML APIs, the most powerful class API on the web!
jQuery makes you as a developer reliant on a framework, and (I’m going to say it!)… lazy, to some extent. I’d succumbed to being lazy, and at times have included the mighty jquery.js file for a few simple lines of code. What an idiot.
Reasons why I (and you) shouldn’t rely on jQuery:
- You didn’t write it
- You don’t understand it
- It’s a lot of code
- It’s not a standard (no governing body)
- You have no control over it’s future
- It’s not a best-practice
- Even jQuery has it’s bugs
- What if a future job doesn’t allow/use it?
- You can only do your job with a framework?
- It conflicts with other libraries/software (don’t tell me $.noConflict() is bulletproof)
- You’re probably not even using a huge % of the library
So what does this tell us? We don’t want to write our own scripts (or know how), we don’t get it if we even tried, we’d rather include a huge framework that we don’t understand to get a job done, it’s not a standard practice or web standard. It’s got its own bugs, and creating without jQuery – you’re screwed. Wasted resources as we’re including stuff we don’t need too.
Reasons to use jQuery
- It saves time
- Does the hard work for me
- Cross-browser support is pretty good
- Makes life and selectors easy
I can’t think of that many more reasons to use jQuery; it saves time, does the job for us, cross-browser support already nailed, makes selectors and my life real easy.
Checking for ‘hasClass’
We’ll start with hasClass, typically in jQuery this looks like so:
With it’s usage potentially something like this:
This uses a simple RegEx test, to ‘scan’ for our class name. Don’t know what RegEx is? It stands for RegularExpression, look it up – task 1!
Put into some practical use, we can then put it into practice, without duplicating the RegEx return each time:
You can see how it’s super simple. Things might look a little backwards here, specifying the element inside the function as opposed to hooking off the selector, but don’t worry – it’s totally cool. document.documentElement refers to the root element of the document, i.e. the tag. Voila, we did it, it wasn’t so hard. You can then reuse this function throughout your code wherever you like to test if something has a class. This also comes in handy now in our addClass function, as we’ll be using it again!
Adding a class with ‘addClass’
Potential usage again:
Again, here’s my stab at creating a nice addClass function, which passes the className directly onto the element’s className attribute:
You’ll notice we use our hasClass function again! It checks to see if the element has the class, but it reverts the expression meaning it will run if the element doesn’t have a class. The ‘ ‘ is in-fact adding a space before the class so it doesn’t join another class.
Again I used the document.documentElement, as you know this one now.
Removing a class with ‘removeClass’
Another useful jQuery gizmo, usually seen doing this:
With some potential use like this:
Now we can create a removeClass function, which is a little more complicated, using RegEx again and our earlier hasClass:
We can then use it like so:
Adding/removing (toggling) the class with ‘toggleClass’
The toggle functions tend to be my favourites, allowing you to simply add/remove things as you please. With jQuery, this looks like so:
A usage example could be as follows:
Which would toggle the class ‘active’ for one click, and toggle it back for the second click. We can then begin to take this and create our own little function that does this for us:
As you can see, we can start to move into a jQuery-free state of mind. What’s also great is that a lot of cross-browser issues that require workarounds occur more in IE7 and IE8, which even jQuery is dropping as of Version 2.0. This makes us think about whether we really need to worry as much about backfilling our code with complex polyfill/compatibility issues when moving forward with our own little functions.
The possibilities are endless for what you decide to create.