jQuery Tips, Tricks, and Miscellaneous

April 18, 2009 — 11 Comments
This entry is part 7 of 7 in the series Introduction to jQuery

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:

  1. Incorporating jQuery into an HTML page
  2. Selecting page elements
  3. Adding event handlers
  4. Applying effects
  5. Manipulating elements
  6. Ajax
  7. Plug-ins

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.

Series Navigation

Adding Ajax with jQuery
If you enjoyed this post, then please consider following me using your favorite social media, the RSS feed, and/or by subscribing to my newsletter. Or go crazy, and buy one or more of my books . Thanks!

11 responses to jQuery Tips, Tricks, and Miscellaneous

  1. Larry, Thanks for the blogs on jQuery, with there being only 2 jQuery specific titled books out there I am sure there is room for a Quickstart guide authored by yourself ;)

    I own jQuery in Action (read in the comments you do too) but have not been having much luck with it to be honest. It has a lot of information but is not practical enough at all. What are your thoughts on the book?

    Personally I found the typing of small examples approach not helpful. I want real examples, the menu example in later chapters is an improvement on earlier chapters though.

    • Hey, Jason. Thanks for the comments and for your interest in my writing a jQuery book. I had actually suggested a jQuery Visual QuickStart Guide last summer but it never happened. Oh well. As for the jQuery in Action, it’s hard for me to honestly evaluate it. First, as a writer myself, what I like or don’t like about a book is often not applicable to the primary reader. Second, I’m in discussions with that same publisher for writing other books, so that affects my assessment. But, to be clear, I do like it. It’s well-written and explains things well, I feel. Particularly the appendix on JavaScript. As for the code snippets vs seeing things in a larger context, I can see what you mean about that but sometimes writers are bound by the constraints of a book’s style. Thanks again for the feedback!

  2. I find this jQuery API website to be brilliant: http://jquery.bassistance.de/api-browser/

  3. Sorry I didn’t notice it was so out of date! I’m guessing the new official one won’t be out of date: http://api.jquery.com/
    That’s a shame about the jQuery Visual QuickStart, There is such a lack of good JavaScript books, hopefully later. I agree the appendix on JavaScript for jQuery in action was good, it taught me things I’ve not seen in the other JavaScript books I own or from online articles.
    Manning? PHP Design Patterns in Action by Larry Ullman perhaps? ;)

    • No need to apologize and thanks for the input. As for the potential Manning book, I don’t know how prudent it’d be to provide details right now, considering no offer has been made yet. But I will coyly say that it won’t be on PHP but is a book that seems to be quite needed. As for the jQuery Visual QuickStart Guide, one is being written, just not by me. Thanks, as always, for your interest in my work!

  4. Very nice mate. I have also linked to yours from my blog post below where I am trying to collect the most useful and common jQuery code snippets for JavaScript over the web. Here is the title and the link to the jQuery link compilation endeavor:

    Ultimate collection of top jQuery tutorials, tips-tricks and techniques to improve performance

    http://technosiastic.wordpress.com/2009/09/24/collection-of-top-jquery-tutorials-tips-tricks-techniques-to-improve-performance/

  5. Yessss!, finally I’ve found a really valuable (and understadable) material for a jQuery noob.

    I’ve checked out there “jQuery for dummies” and some variations of the same thing and none of them trapped me reading more and more and expecting the next chapter as it happened to me in your series (even I’ve started reading Yii and kept going on with jQuery).

    QUITE clear, QUITE useful, in simple words, what to say? … PERFECT!

    Excellent job Larry

    Regards,
    Fernando

Trackbacks and Pingbacks:

  1. Ultimate collection of top jQuery tutorials, tips-tricks and techniques to improve performance « Technosiastic! - September 24, 2009

    [...] jQuery Tips, Tricks, and Miscellaneous [...]

  2. Ultimate collection of top jQuery tutorials, tips-tricks and techniques to improve performance - June 22, 2010

    [...] jQuery Tips, Tricks, and Miscellaneous [...]

Comments are great, but I'd strongly prefer any requests for assistance get made in the support forums. Thanks!