Many of you can probably do most of what you need with just the basic CSS style selectors. But wait, there's more! Filters are the part of selections that I find incredibly useful, especially considering that we're working with WordPress. Again, with a WordPress theme, a lot of your HTML elements, IDs, and class names are probably being generated by a theme that you're not the author of or, for various reasons, you don't want to edit or perhaps you're just not allowed to edit the theme. (What's that? Designers get a little "testy" when developers start mucking about with their markup? I had no idea.) But that's OK. With filters, you simply don't have to.
The thing is, starting out with jQuery, it's tempting to want to go in and change the HTML markup to something that is easier to select with jQuery. But with WordPress, this is not easy. Changing the markup means you run the risk of breaking the theme or worse, having to remind content editors to manually add specific markup to posts and pages (which in some ways, defeats the purpose of using WordPress in the first place). Understanding filters will allow you to have precise control over your selections in every case and scenario, every time.
It's very easy to refine a filter, you're just going to include these items that will take your selected elements and match them to specific conditions, like their position or index relative to other elements. Again, in keeping with spirit of CSS selection syntax, some of these filters look similar to CSS pseudo classes, such as :hover and :first-child. These are not all actually CSS pseudo classes; they won't work in a CSS stylesheet, but they'll work in jQuery.
These filters are broken down in the jQuery API in the following categories (listed as I find them most useful to WordPress development): Basic filters, Content filters, Child filters, Form filters, Attribute filters, and Visibility filters.
Was this article helpful?