Wordpress 3.0 jQuery - part 8 pot

Working with jQuery in WordPress [ 56 ] You've probably noticed just from the previous example that you can get pretty clever with lters, using them multiple times within a selection. What's that, you say? Yes, you're correct: (":headers:not(li h2)") achieves the exact same results as the previous example, and yes, it's always better to take the most direct route to your selections. I'm just trying to illustrate how these two lters can be used. Eventually, you will run into more complex situations where they'll come in very handy. For everything else, use plain selectors rst, before resorting to lters. Let's take a look at each Basic lter, what it's syntax looks like, and what it does in detail. Because most WordPress theme authors use the .post class, and most of the time you'll be targeting post elements to make the syntax have the most sense. I'll use .post class name often in my examples, but remember, your main selector can be any tag, id name, or class name used in CSS selector syntax! Example Syntax Description :not(selector) jQuery(".post img: not(.pIcon)" ).jqFn(); Filters out all elements matching the given selector. :header jQuery(".post : header" ).jqFn(); Filters down to all elements that are headers, such as h1, h2, h3, and so on. :rst jQuery(".post :first") .jqFn(); Filters down to the rst selected element only. :last jQuery(".post :last") .jqFn(); Filters down to the last selected element only. :even jQuery(".post :even") .jqFn(); Filters down to even elements only. Note: Arrays are zero-indexed! Zero is considered an even number so your rst item will be selected! :odd jQuery(".post :odd") .jqFn(); Filters down to odd elements only. Note: Arrays are zero-indexed! Zero is considered an even number so your second item will be selected! :eq(number) jQuery(".post :eq(0)") .jqFn(); Filters down to a single element by its index, which again is zero-indexed. :gt(number) jQuery(".post :gt(0)") .jqFn(); Filters down to all elements with an index above the given one, again this is zero-indexed. :lt(number) jQuery(".post :lt(2)") .jqFn(); Filters all elements with an index below the given one. :animated jQuery(".post : animated" ).jqFn(); Filters down to all elements that are currently being animated (we'll get to animation later in this chapter). Chapter 2 [ 57 ] Child filters Anything in the jQuery wrapper is an array, and these child lters will come in handy, but you'll probably nd these lters come in most handy when working with li tags or denition list elements in WordPress. By default, WordPress splits a fair amount of its link content into li tag elements and galleries that are are created by wrapping the images and descriptions in denition lists (dt dd elements). Example Syntax Description :nth- child(number/ even/odd) jQuery(".linkcat li: nth- child(1) ").css("background", "#f60"); Filters down to the elements that are the "nth" child of its selector. Note that this is not zero-indexed! 1 and odd selects the rst element. :rst-child jQuery(".linkcat li: first- child ").css("background", "#f60"); Filters down to the elements that are the rst child of their parent. :last-child jQuery(".linkcat li: last- child ").css("background", "#f60"); Filters down to the elements that are the last child of their parent. :only-child jQuery(".pagenav li: only- child ").css("background", "#f60"); Filters down to the elements that are only-children of their parent. If a parent has more than one child, no elements are selected. Here you can see the :only-child lter in action: jQuery("li:only-child").css("background", "#f60"); Working with jQuery in WordPress [ 58 ] Here's the :nth-child lter at work in the Meta list: jQuery(".widget_meta li:nth-child(odd)").css("background", "#f60"); Content filters After the basic and child lters, the next most useful lters you'll run into are content lters. Content lters allow you to make selections based on matching various types of elements and content. The most useful content lter—I often use it in WordPress—is the :has() lter. I often need to select elements that have something inside them, like anchor a tags that have img image tags inside them, or paragraph p tags that have list li tags, or other elements with a particular class name inside them. It's easy to target a specic object, but if you nd you need to target a larger, parent object, based on what kind of elements are inside it, the :has() lter will become your best friend. The next most useful item is the :contains() element which, at rst blush, might seem very similar to :has()! But this lter is very different (and really cool), in that it allows you to target specic text inside an element. Chapter 2 [ 59 ] Be careful with these two lters and make as many "preselections" as possible. You want to make sure jQuery is pointed in the right direction for the elements and text you're trying to select. Just specifying (p:contains('my text')) may be too general for a large page of content; you'll cause jQuery to lag, or worse, hang and timeout because it has to search every single little p, div, or a element on the page for your text or elements. A jQuery that species (#divIdName .className a:contains('my text')) is much better because jQuery only has to search through the text of every a element within one specic ID container's specied classes, as opposed to the entire page of content. Let's take a look at the following content lters in more detail: Example Syntax Description :has(selector) jQuery(".post:has(.entry)") .css("background", "#f60"); Filters down to elements that have at least one of the matching elements inside it. :contains(text) jQuery(".post:contains('Hello world')").css("background", "#f60"); Filters down to elements that contain the specic text. Note: This is case sensitive! :empty jQuery(":empty')") .css("background", "#f60"); Filters down to elements that have no children. This includes text nodes. :parent jQuery(":parent')") .css("background", "#f60"); Filters down to elements that are the parent of another element. This includes text nodes. For an in-depth example, let's look at the sidebar of the default theme. The sidebar has some items that are not denoted with a special id name or class. If I want to target the ul list that is only under the Meta header, I can target it using :has() and :contains(). Notice how I "direct" jQuery, by preselecting, or pointing to the .widget-area li tags rst, so that jQuery ignores the rest of the page before I tell you to look for children elements and containing text. Working with jQuery in WordPress [ 60 ] You can see the result of the following code in the next screenshot: jQuery(".widget-area li:has(h3:contains('Meta')) ul") .css("background", "#f60"); Form filters As if all the previous selectors and lters weren't cool enough, you can also explicitly lter to several types of form elements as well as types of events for those elements. Using these lters, you'll be able to take control of your WordPress generated comment forms as well as custom and WordPress plugin forms and make them even more intuitive and easier to use. Later on in this book, we'll see how jQuery can make form use and validation dead simple. Chapter 2 [ 61 ] Example Syntax Description :input jQuery("form :input").css("background", "#f60"); Filters to all input, text area, select, and button elements :text jQuery("form :text").css("background", "#f60"); Filters to all input elements that are of type text :password jQuery("form :password"). css("background", "#f60"); Filters to all input elements that are of type passwords :radio jQuery("form :radio").css("background", "#f60"); Filters to all input elements that are of type radio :checkbox jQuery("form :checkbox"). css("background", "#f60"); Filters to all input elements that are of type checkbox :submit jQuery("form :submit"). css("background", "#f60"); Filters to all input elements that are of type submit :image jQuery("form :image").css("background", "#f60"); Filters to all image elements (classied as a form lter, but useful for regular images) :reset jQuery("form :reset").css("background", "#f60"); Filters to all input elements that are of type reset :button jQuery("form :button") .css("background", "#f60"); Filters to all input elements that are of type button :le jQuery("form :file").css("background", "#f60"); Filters to all input elements that are of type le Working with jQuery in WordPress [ 62 ] Using the following code, I've highlighted only the text input and submit buttons, as shown in the next screenshot: jQuery(":text, :submit").css("background", "#f60"); Attribute filters Attributes are those additional properties found inside HTML tags that allow the tag to rene itself. You're probably most familiar with the id and class attributes as well as the src attributes for img and script tags and of course the href attribute for a tags. Chapter 2 [ 63 ] Attributes are powerful properties for dening and rening HTML elements, so you can imagine how powerful being able to lter using them can be. Powerful yes, but do keep in mind the simplest and the most direct approach to selecting items into the jQuery wrapper is often the best. My examples will show different class selections because they create nice visual examples, but in reality, you're better off using regular selectors to target class items and saving attribute lters for your more rened, tricky work. You'll note that these lters differ from the other lters. Instead of : (colon marks), these lters use [] (square brackets). This means you can easily see in your selector syntax if you're ltering for an attribute. You'll also note that for every attribute out there in HTML's DOM, you can lter for it. There's no standard set of "attribute lter names"; you simply use the square brackets to indicate whatever attribute you want to lter for. You can even structure your attribute lter in a few ways: Example Syntax Description [attribute] jQuery("div [href]") .css("background", "#f60"); Filters for an attribute, regardless of its value [attribute=value] jQuery("div [class='entry']") .css("background", "#f60"); Filters for an attribute and an exact specied value [attribute!=value] jQuery("div [class!='entry']") .css("background", "#f60"); Filters for attributes that do not have a specied value [attribute^=value] jQuery("div [href^='http://']") .css("background", "#f60"); Filters for attributes that have a value that begins with a specic string [attribute$=value] jQuery("div [href$='/']") .css("background", "#f60"); Filters for attributes that have a value that ends with a specic string [attribute*=value] jQuery("div [href*='page_ id ']").css("background", "#f60"); Filters for attributes that contain a string Here, we can take a look at targeting only the local links in our sidebar with the following jQuery code: jQuery(".widget-area [href^='http://localhost']").css("background", "#f60"); Working with jQuery in WordPress [ 64 ] The following screenshot shows the result, and only localhost links referencing the WordPress installation are highlighted: Visibility I've saved these two lters for last, mostly because I don't use them very much in most of my WordPress projects, but they are part of the selector/lter API so I'll go ahead and cover them here. Most of the time, everything you'll need to target with jQuery is by default, visible. But occasionally, you may have an item that you've previously hidden with a jQuery transformation or a form eld that is hidden and you'll want to run a transformation on it. For that, you can use the :hidden lter. This is a little tricky, as you've selected the item into your wrapper, but you won't necessarily see any transformation (unless the transformation is to make it visible). If you nd yourself with quite a few hidden elements, you can always lter for what's visible, if that's easier. Chapter 2 [ 65 ] Example Syntax Description :hidden jQuery("form:input :hidden") .css("background", "#f60"); Filters for elements that have a display value of none or type value of hidden or have an explicit width and height of 0 :visible jQuery("div .post:visible") .css("background", "#f60"); Filters for elements that are visible I've covered the main selectors and lters that I get the most use of being a WordPress developer. Be sure to look through the jQuery documentation for all the selectors and lters available listed in alphabetical order: http://api.jquery.com/category/selectors/. jQuery secret weapon #2: Manipulating CSS and elements in the DOM Now that we can reliably select any object our WordPress site displays on a page, let's start manipulating and enhancing our selections! We can manipulate our CSS styles which display our objects and as if that isn't cool enough, we can also manipulate the HTML objects themselves in the DOM. Let's get started with manipulating CSS. Manipulating CSS So far, everything that we've looked at regarding selectors and lters is essential for targeting the elements you want to affect. Now that you can select anything you want into the wrapper, let's start making stuff happen! Thanks to all of my previous examples, you're already familiar with the css() function. Mostly, you'll use this function to assign standard CSS property values, such as: background, border, padding, margins, and so on. If you can assign the property in a CSS stylesheet, you can assign it using the css() function. You can also retrieve and get CSS properties with this function. . see the :only-child lter in action: jQuery( "li:only-child").css("background", "#f 60& quot;); Working with jQuery in WordPress [ 58 ] Here's the :nth-child lter. parent. :last-child jQuery( ".linkcat li: last- child ").css("background", "#f 60& quot;); Filters down to the elements that are the last child of their parent. :only-child jQuery( ".pagenav. containing text. Working with jQuery in WordPress [ 60 ] You can see the result of the following code in the next screenshot: jQuery( ".widget-area li:has(h3:contains('Meta'))