In the next few sections, we'll take a look at the top references you'll need for jQuery development within WordPress. Let's get started with staying in noConflict mode and looking at the most useful selector filters.
The simplest is to just use the jQuery variable in all your selection statements:
jQuery('.selector').function();
You can also set up your own variable:
<script type="text/javascript"> var $jq = jQuery.noConflict(); $jq(document).ready(function() { $jq("p").click(function() { alert("Hello world!"); }); }); </script>
You can even safely use the $ variable if you set it up correctly:
jQuery(function ($) { /* jQuery only code using $ can safely go here */ $("p").css('border','#ff6600'); });
Remember: Sometimes it's easier to exclude what you don't want in a selection set, rather than select for everything you do want.
Here's the basic syntax for working with selector filters:
jQuery('.selector:filter(params if any)').function();
Here are the top selector filters that you'll find most useful with WordPress (:not is my personal favorite):
|
Example |
Syntax |
Description |
|---|---|---|
|
:not(selector) |
|
Filters out all elements matching the given selector. |
|
:header |
|
Filters down to all elements that are headers, such as h1, h2, h3, and so on. |
|
:first |
|
Filters down to the first selected element only. |
|
:last |
|
Filters down to the last selected element only. |
|
:even |
|
Filters down to even elements only. Note: Arrays are zero-indexed! Zero is considered an even number, so your first item will be selected! |
|
:odd |
|
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) |
|
Filters down to a single element by its index, which again is zero-indexed. |
|
:gt(number) |
|
Filters down to all elements with an index above the given one, again this is zero-indexed. |
|
:lt(number) |
|
Filters all elements with an index below the given one. |
|
:animated |
|
Filters down to all elements that are currently being animated (we'll get to animation later in this chapter). |
After the regular selector filters, you'll find these content filters very useful (especially :has()).
jQuery(".selector:content-filter(params if any)").function();
Pretty much all the content filters come in handy with WordPress. They help you work with what the Page and Post WYSIWYG editor's output very well.
|
Example |
Syntax |
Description |
|---|---|---|
|
:has(selector) |
|
Filters down to elements that have at least one of the matching elements inside it. |
|
:contains(text) |
|
Filters down to elements that contain the specific text. Note: This is case sensitive! |
|
:empty |
|
Filters down to elements that have no children. This includes text nodes. |
|
:parent |
|
Filters down to elements that are the parent of another element. This includes text nodes. |
Here's the basic syntax for using child filer syntax:
jQuery(".selector:child-filter(params if any)").function();
You'll find child filters will come in most handy when working with the various list tags that WordPress puts out. Categories, pages, gallery pages, you'll be able to control them and select specifics using these filters.
|
Example |
Syntax |
Description |
|---|---|---|
|
:nth-child(number/even/odd) |
|
Filters down to the elements that are the "nth" child of it's selector. Note, this is not zero-indexed! 1 and odd selects the first element. |
|
:first-child |
|
Filters down to the elements that are the first child of their parent. |
|
:last-child |
|
Filters down to the elements that are the last child of their parent. |
|
:only-child |
|
Filters down to the elements that are only-children of their parent. If a parent has more than one child, no elements are selected. |
WordPress natively has a simple content form and a single input field. However, the WordPress Cforms II plugin is quite invaluable for most projects, and if you're using that plugin, you'll find most of these filters helpful:
|
Example |
Syntax |
Description |
|---|---|---|
|
:input |
|
Filters to all input, textarea, select and button elements. |
|
:text |
|
Filters to all input elements that are type text. |
|
:password |
|
Filters to all input elements that are type password. |
|
:radio |
|
Filters to all input elements that are type radio. |
|
:checkbox |
|
Filters to all input elements that are type checkbox. |
|
:submit |
|
Filters to all input elements that are type submit. |
|
:image |
|
Filters to all image elements (classified as a form filter, but useful for regular images). |
|
:reset |
|
Filters to all input elements that are type reset. |
|
:button |
|
Filters to all input elements that are type button. |
|
:file |
|
Filters to all input elements that are type file. |
While I've recapped most of the selector filters as they're just that useful, in this next section I'll go over the syntax and usage for the top functions that you'll find you use the most in your WordPress projects.
Never fear, you can skim through Chapter 2, Working with jQuery in WordPress for a complete listing as well as usage of functions not covered here.
One of the most simple yet powerful things you can do quickly with jQuery is transform objects by changing their CSS properties.
|
Example |
Syntax |
Description |
|---|---|---|
|
.css('property', 'value') |
|
Adds or changes the CSS properties of the selected elements. |
|
.addClass('className') |
|
Adds listed class(es) to each of the selected elements. |
|
.removeClass('className') |
|
Removes listed class(es) from each of the selected elements. |
|
.toggleClass('className', switch-optional) |
|
Toggles listed class(es) from each of the selected elements based on their current state. If the class is there, it's removed; if it's not, it's added. |
|
.hasClass('className') |
|
Returns true or false if listed class(es) from each of the selected elements exist. |
|
.attr |
|
Retrieves the attribute's value for the first element of the selected elements. |
.append and .prepend are going to be your most used DOM functions. However, you'll find .wrapAll invaluable for helping contain any new elements you create.
|
Example |
Syntax |
Description |
|---|---|---|
|
.append(html & text) |
|
Inserts content in the parameter, to the end of each selected element. |
|
.appendTo(selector) |
|
Does the same thing as append, just reverses the element selection and content parameter. |
|
.prepend(html & text) |
|
Inserts content in the parameter, to the beginning of each selected element. |
|
.prependTo(selector) |
|
Does the same thing as prepend, just reverses the element selection and content parameter. |
|
.after(string) |
|
Inserts content in the parameter, after and outside of each selected element. |
|
.insertAfter(selector) |
|
Does the same thing as after, just reverses the element selection and content parameter. |
|
.before(html & text) |
|
Inserts content in the parameter, before and outside of each selected element. |
|
.insertBefore(selector) |
|
Does the same thing as before, just reverses the element selection and content parameter. |
|
.wrap(html or functionName) |
|
Wraps an HTML structure around each selected element. You can also construct a function that will wrap each element in HTML. |
|
.wrapAll(html) |
|
Similar to wrap, but places the HTML structure around all of the elements together, not each individual element. |
|
.wrapInner(selector) |
|
Similar to wrap, but it places the HTML structure inside each of the selected elements around any text or child elements of each selected element. |
|
.html(html & text) |
|
Replaces any content and child elements of selected items with the content in the parameter. |
|
.text(text only html chars will be escaped) |
|
Similar to HTML, but text only. Any HTML characters will be escaped as ascii codes. |
Most of the time in WordPress, it's all about .click and .hover but .toggle and .dbclick will come in handy as well.
|
Example |
Syntax |
Description |
|---|---|---|
|
.click(functionName) |
|
Binds a function to the click event type, executed on a single click. |
|
.dbclick(functionName) |
|
Binds a function to the click event type, executed on a double click. |
|
.hover(functionName1, functionName2) |
|
Works with the mouseenter/mouseleave event types and binds just two functions to the selected elements, to be executed on mouseenter and mouseleave. |
|
.toggle(functionName1, functionName2, functionName3, ...) |
|
Works with the click event type and binds two or more functions to the selected elements, to be executed on alternate clicks. |
Anything that animates is going to look cool. Make sure that you know how to handle these functions for some top-notch jQuery enhancements.
|
Example |
Syntax |
Description |
|---|---|---|
|
.slideUp(speed, functionName) |
|
Slides the selected element up from bottom to top until it is hidden. Speed can be "fast" or "slow" or in milliseconds. A function can be called when the animation is finished. |
|
.slideDown(speed, functionName) |
|
Slides a hidden selected element down from top to bottom until it is defined size. Speed can be "fast" or "slow" or in milliseconds. A function can be called when the animation is finished. |
|
.slideToggle() |
|
Toggles the visibility of the selected element using the slide animation. Speed can be "fast" or "slow" or in milliseconds. A function can be called when the animation is finished. |
|
.fadeOut(speed, functionName) |
|
Fades a selected element that's visible or alpha is 1 to 0. |
|
.fadeIn(speed, functionName) |
|
Fades a selected element who's visibility is hidden or alpha is set as 0 to 1. |
|
.fadeTo(speed, alpha, functionName) |
|
Fades a selected element to a specific alpha from 0 to 1. |
|
.animate(css properties, duration, easing, functionName) |
|
Creates a custom transition of CSS properties on the selected elements. |
|
.stop() |
|
Stops an animation on a selected element. |