Using jQuery to Attach Events to Future Elements

I’m sure most jQuery users are familiar with the various methods used to attach event handlers (such as “onclick”, “onchange”, etc.) to elements that already exist on the page, but many probably aren’t aware that you can have jQuery automatically add those event handlers to any future elements, too.

Traversing the DOM Tree with jQuery

Although jQuery can be extremely simple to use once you get the hang of it, there are so many functions and methods that it can be overwhelming and confusing at times.

One issue I had over the last week or so was figuring out how to simply traverse the DOM tree. Using jQuery selectors, it’s a breeze to do so; but what do you do when you’re working on a specific jQuery object and you want to go up or down the DOM tree?

Using Javascript in WordPress Themes

If you’re planning to use javascript on your WordPress blog or website, there is one function with which you should become intimately familiar. That function is wp_enqueue_script(). It will also be helpful if you do a little bit of research into the wp_deregister_script() function, though, the only official information you’ll find about that function is in the codex information about the wp_enqueue_script() function.

Basically, this function keeps a log of all of the javascript files and libraries you want to use in your theme, makes sure you aren’t duplicating any, and then outputs them in the right order. I would recommend setting the $in_footer parameter to boolean true for all of the scripts you enqueue, as that causes WordPress to add the javascript calls to the footer of your pages rather than putting them in the header. In order to do this, though, you need to make sure that you include the wp_footer() function inside of your theme (preferably just above the closing </body> tag).

Reduce the Size of Your Javascript

Last week, while using YSlow to check the performance of one of my Web sites, I finally decided to look into the advice it gives about minifying my javascript. With me using jQuery and some of its plugins, there were a few pages on which I was including four or five separate external javascript files (the jQuery library, the jQueryUI library, one or two plugins and my own javascript functions), and only some of them were minified.

So, I took to the Web to see what resources were available in PHP that I might be able to integrate with my custom CMS. That’s when I came across Valentin Agachi’s javascript packing package.

jQuery – How to Tell if a Checkbox is Checked

Quite often, I find myself in a situation where I need to change the content of a form based on which checkboxes or radio buttons in a group are checked. I used to do this by adding an onclick and/or onchange event to each individual checkbox or radio button and then running a function to figure out whether or not the changed element was checked.

Then, I discovered how easy it is to do all of this on-the-fly with jQuery.

Retrieve a Portion of HTML with jQuery

jQuery offers some really powerful functions and methods to utilize AJAX. One that I’ve discovered recently is the .find() method. The .find() method allows you to search for a specific HTML ID within some HTML and then returns only the content found within that ID.