jQuery reference for WordPress

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.

noConflict mode syntax

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');
});

Useful selector filters for working within WordPress

Remember: Sometimes it's easier to exclude what you don't want in a selection set, rather than select for everything you do want.

Selection filter syntax

Here's the basic syntax for working with selector filters:

jQuery('.selector:filter(params if any)').function();

Selector filters

Here are the top selector filters that you'll find most useful with WordPress (:not is my personal favorite):

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.
:first	jQuery(".post:first").jqFn();	Filters down to the first 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 first 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).

Content filter syntax

After the regular selector filters, you'll find these content filters very useful (especially :has()).

jQuery(".selector:content-filter(params if any)").function();

Content filters

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)	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 specific 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.

Child filter syntax

Here's the basic syntax for using child filer syntax:

jQuery(".selector:child-filter(params if any)").function();

Child filters

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)	jQuery(".linkcat li:nth-child(1)").css("background", "#f60");	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	jQuery(".linkcat li:first-child").css("background", "#f60");	Filters down to the elements that are the first 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.

Form filter syntax

Here's the form filter syntax:

jQuery(":form-filter").function();

Form filters

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	jQuery("form:input").css("background", "#f60");	Filters to all input, textarea, select and button elements.
:text	jQuery("form:text").css("background", "#f60");	Filters to all input elements that are type text.
:password	jQuery("form:password").css("background", "#f60");	Filters to all input elements that are type password.
:radio	jQuery("form:radio").css("background", "#f60");	Filters to all input elements that are type radio.
:checkbox	jQuery("form:checkbox").css("background", "#f60");	Filters to all input elements that are type checkbox.
:submit	jQuery("form:submit").css("background", "#f60");	Filters to all input elements that are type submit.
:image	jQuery("form:image").css("background", "#f60");	Filters to all image elements (classified as a form filter, but useful for regular images).
:reset	jQuery("form:reset").css("background", "#f60");	Filters to all input elements that are type reset.
:button	jQuery("form:button").css("background", "#f60");	Filters to all input elements that are type button.
:file	jQuery("form:file").css("background", "#f60");	Filters to all input elements that are type file.

jQuery: Useful functions for working within WordPress

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.

Working with classes and attributes

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')	jQuery(".post") .css("background", "#f60");	Adds or changes the CSS properties of the selected elements.
.addClass('className')	jQuery(".post") .addClass("sticky");	Adds listed class(es) to each of the selected elements.
.removeClass('className')	jQuery(".post") .removeClass("sticky");	Removes listed class(es) from each of the selected elements.
.toggleClass('className', switch-optional)	jQuery(".post") .toggleClass("sticky");	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')	jQuery(".post") .hasClass("sticky");	Returns true or false if listed class(es) from each of the selected elements exist.
.attr	jQuery(".post").attr();	Retrieves the attribute's value for the first element of the selected elements.

Traversing the DOM

.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)	jQuery(".post") .append("<b>post ends here</b>");	Inserts content in the parameter, to the end of each selected element.
.appendTo(selector)	jQuery("<b>post ends here</b>").appendTo(" .post");	Does the same thing as append, just reverses the element selection and content parameter.
.prepend(html & text)	jQuery(".post") .prepend("<b>post starts here</b>");	Inserts content in the parameter, to the beginning of each selected element.
.prependTo(selector)	jQuery("<b>post starts here</b>").prependTo(" .post");	Does the same thing as prepend, just reverses the element selection and content parameter.
.after(string)	jQuery(".post") .after("<b>This goes after</b>");	Inserts content in the parameter, after and outside of each selected element.
.insertAfter(selector)	jQuery("<b>This goes after</b>").insertAfter(" .post");	Does the same thing as after, just reverses the element selection and content parameter.
.before(html & text)	jQuery(".post") .before("<b>This goes before</b>");	Inserts content in the parameter, before and outside of each selected element.
.insertBefore(selector)	jQuery("<b>This goes before</b>") .insertBefore("class");	Does the same thing as before, just reverses the element selection and content parameter.
.wrap(html or functionName)	jQuery(".post").wrap("<div class=".fun" />");	Wraps an HTML structure around each selected element. You can also construct a function that will wrap each element in HTML.
.wrapAll(html)	jQuery(".post") .wrapAll("<div class=" .fun" />");	Similar to wrap, but places the HTML structure around all of the elements together, not each individual element.
.wrapInner(selector)	jQuery(".post") .wrapInner("<div class=" .fun" />");	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)	jQuery(".post") .html("<h2>Replacement Text</h2>");	Replaces any content and child elements of selected items with the content in the parameter.
.text(text only html chars will be escaped)	jQuery(".post") .text("Replacement Text");	Similar to HTML, but text only. Any HTML characters will be escaped as ascii codes.

Important jQuery events

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)	jQuery(".post") .click(function(){//code});	Binds a function to the click event type, executed on a single click.
.dbclick(functionName)	jQuery(".post") .dbclick(function(){//code});	Binds a function to the click event type, executed on a double click.
.hover(functionName1, functionName2)	jQuery(".post") .hover(function(){//code});	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, ...)	jQuery(".post") .toggle(function(){//code});	Works with the click event type and binds two or more functions to the selected elements, to be executed on alternate clicks.

Animation at its finest

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)	jQuery(".post") .slideUp('slow', function() { // code });	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)	jQuery(".post") .slideDown('slow', function() { // code });	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()	jQuery(".post") .slideToggle('slow', function() { // code });	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)	jQuery(".post") .fadeOut("slow", function(){//code});	Fades a selected element that's visible or alpha is 1 to 0.
.fadeIn(speed, functionName)	jQuery(".post") .fadeIn("slow", function(){//code});	Fades a selected element who's visibility is hidden or alpha is set as 0 to 1.
.fadeTo(speed, alpha, functionName)	jQuery(".post") .fadeTo("slow", .3, function(){//code});	Fades a selected element to a specific alpha from 0 to 1.
.animate(css properties, duration, easing, functionName)	jQuery(".post") .animate({width: 200, opacity: .25}, 1000, function(){//code});	Creates a custom transition of CSS properties on the selected elements.
.stop()	jQuery(".post") .stop();	Stops an animation on a selected element.