In this, the last post in my series on jQuery, I mention an odd lot of interesting things about jQuery that are worth knowing. Some involve specific code; others aid understanding of jQuery’s philosophy. You may or may not want to also read these earlier posts on jQuery:
- [intlink id=”110″ type=”post”]Incorporating jQuery into an HTML page[/intlink]
- [intlink id=”248″ type=”post”]Selecting page elements[/intlink]
- [intlink id=”261″ type=”post”]Adding event handlers[/intlink]
- [intlink id=”298″ type=”post”]Applying effects[/intlink]
- [intlink id=”300″ type=”post”]Manipulating elements[/intlink]
- [intlink id=”302″ type=”post”]Ajax[/intlink]
- [intlink id=”312″ type=”post”]Plug-ins[/intlink]
I think I noted this in an earlier post, but an interesting feature of jQuery is that it ignores attempted actions that cannot be done. For example, if you attempt to hide an already hidden element, nothing happens. Specifically no error is thrown. While full-fledged programming in any language mandates that you avoid and watch for errors, jQuery is intended for quick and easy use, so this design means you don’t, in this example, need to test an element’s visibility before you attempt to hide it, greatly minimizing the amount of code you need to write.
Similarly, if you attempt to select something and no elements match the criteria, no objects are returned. Attempting to apply methods to a non-selection still doesn’t throw an error:
$('#thisDoesNotExist').addClass('varmit');
If you want to confirm that a selection was made, you can apply the length() method to test for that:
var set = $('p');
if (set.length()) {...
That code also shows how you can assign the results of the jQuery function call to another variable, making that result set available elsewhere in your code.
Going along the testing lines, for when you need to, you can see if an element has a particular class by using the is() method:
if ($('#x').is('.className') {...
This method tests an expression and returns a Boolean value. Note the period before the CSS classname in this particular use of it.
To see if something is hidden, use the custom :hidden criteria:
if ($('#x').is(':hidden')) {...
The :visible keyword is its corollary.
A variation on this is if you only want to select hidden or visible elements in the first place: $(‘p:visible’) selects every visible paragraph.
Moving on randomly…a common need for a form is to disable the submit button after the user has clicked it, thereby preventing multiple submissions. To do so using jQuery, use $(‘#submitButtonId’).attr(‘disabled’, ‘disabled’). That code selects the element with an ID value of submitButtonId, then applies the disabled attribute to it (in full XHTML compliance, the corresponding code would be disabled=”disabled”). You would obviously need to execute this code in a function that’s called upon the form’s submission (through an event handler).
Still quite randomly…in the first post I discussed how this code—
$(function() {
// Do whatever.
});
—is used to identify code to be executed once the document is ready (somewhat similar to the onload event). Interestingly, jQuery allows you to define many of these document ready functions. This means you could put separate pieces of code into separate document ready functions or, more commonly, multiple included JavaScript files could each make use of this approach without overlapping or conflicting with each other.
Moving on more randomly and in conclusion…Firefox users, which I hope is everyone that develops Web pages, may also appreciate the jQuery Plugin for Firefox. It creates a menu that lets you more quickly access jQuery documentation. Speaking of which, when you’re looking at the jQuery manual, you may click on a link under API Reference to find methods within a specific subcategory, like Effects. The resulting page will list the methods in that category, with a brief description of each and its signature (i.e., what arguments it takes and what it returns). If you click on a method’s name on this page, you’ll be taken to another page that has a demo, with visible source code, for how that method can be used.
So that’s it! For now anyway. I’ll probably have more to say about jQuery in time. I do hope that you’ve found these posts to be useful. Of course, your best reference is the excellent yet managable jQuery documentation. There are also plenty of articles in the documentation and linked from it. As always, thanks for reading and let me know if you have any comments or questions.
