• Filters: Basic filters, Child filters, Content filters, Form filters, Attribute filters, Visibility
  • Manipulating elements and content
  • Events and effects
  • The basics of a jQuery plugin
  • Top WordPress template tags

Basic filters:

jQuery(function(){
//all headers are selected, h1, h2, and so on
jQuery(":header").css("background", "#f60");
 
//all headers selected, except for headers in
list items
jQuery(":header:not(li :header)").css("background", "#f60");
jQuery("(":headers:not(li h2)").css("background", "#f60");
 
//orther examples
jQuery(".post img:not(.pIcon)").jqFn();
jQuery(".post:first").jqFn();
jQuery(".post:eq(0)").jqFn();
jQuery(".post:lt(2)")
.jqFn();
});

Child filters

jQuery(".linkcat li:nth-child(1)").css("background", "#f60");
jQuery(".linkcat li:first-child").css("background", "#f60");
//Filters down to the elements that are only-children of their parent
jQuery(".pagenav li:only-child").css("background", "#f60");
jQuery(".widget_meta li:nth-child(odd)").css("background", "#f60");

Content filters

jQuery(".post:has(.entry)")
.css("background", "#f60");
jQuery(".post:contains('Hello world')").css("background", "#f60");
//Filters down to elements that have no children. This includes text nodes.
jQuery(":empty')").css("background", "#f60");
jQuery(":parent')").css("background", "#f60");
jQuery(".widget-area li:has(h3:contains('Meta')) ul")
.css("background", "#f60");

Form filters

jQuery("form:input").css("background", "#f60");
jQuery("form:text").css("background", "#f60");
jQuery("form:password").css("background", "#f60");
jQuery("form:radio").css("background", "#f60");
jQuery("form:checkbox").css("background", "#f60");
jQuery("form:submit").css("background", "#f60");
jQuery("form:image").css("background", "#f60");
jQuery("form:file").css("background", "#f60");
jQuery("form:button").css("background", "#f60");
jQuery("form:reset").css("background", "#f60");

Attribute filters

jQuery("div [href]").css("background", "#f60");
jQuery("div [class!='entry']")
.css("background", "#f60");
//Filters for attributes that have a value that begins with a specific string
jQuery("div [href^='http://']")
.css("background", "#f60");
//ends with a specific string
jQuery("div [href$='/']")
.css("background", "#f60");
//contain a string
jQuery("div [href*='page_id']").css("background", "#f60");

Visibility

jQuery("form:input:hidden")
.css("background", "#f60");
jQuery("div .post:visible")
.css("background", "#f60");

Manipulating elements and content

jQuery(".post").append("<b>post ends here</b>");
jQuery("<b>post ends here</b>").appendTo(".post");
jQuery(".post").prepend("<b>post starts here</b>");
jQuery("<b>post starts here</b>").prependTo("
.post");
jQuery(".post").after("<b>This goes fter</b>");
jQuery("<b>This goes after</b>").insertAfter(".post");
jQuery(".post").before("<b>This goes efore</b>");
jQuery("<b>This goes before</b>").insertBefore("class");
jQuery(".post").wrap("<div class=".fun" />");
jQuery(".post").wrapAll("<div class=".fun"/>");
jQuery(".post").wrapInner("<div class=".fun" />");
jQuery(".post").html("<h2>Replacement Text</h2>");
jQuery(".post").text("Replacement Text");
jQuery(".post").remove();
jQuery(".post").clone();
 
//Working with the DOM
jQuery(".post").length;
jQuery(".post").get(3);
jQuery(".post").find(".entry b");
jQuery(".post").each(function(){
alert("one alert for each .post")
});

Events and effects: Helpers

jQuery(".post").click(function(){//code});
jQuery(".post").hover(function(){//code});
jQuery(".post").toggle(function(){//code});
//same for .mouseenter, .mouseleave, .dbclick, .keydown, .keyup
jQuery(".widget-area li ul li").hover(function(){
    jQuery(this).css("background", "#f60");
},
function(){
    jQuery(this).css("background", "none");
});
 
//Attaches a function to be triggered on a type of event to the selected elements.
jQuery(".post").bind("mouseenter", function(){//code});
 
jQuery(.post a).preventDefault();
jQuery(".post").css("background", "#f60").show("slow");
jQuery(".post").css("background", "#f60").show(200);
jQuery(".post").slideToggle('slow', function() {
    // code
});
jQuery(".post").animate({width: 200, opacity: .25}, 1000, function(){//code});
jQuery(".post").css("background", "#f60").hide().fadeIn("slow");

The basics of a jQuery plugin Note the bold .fn added to the jQuery object. This is what makes function a jQuery function. jQuery.fn.yourFunctionName = function() {//code}; jQuery fade in a child div plugin - loads data about author in popup.

//sets up the new plugin function: authorHover
jQuery.fn.authorHover = function(applyTo) {
//makes sure each item in the wrapper is run
return this.each(function(){
//if/else to determine if parameter has been passed
//no param, just looks for the child div
if(applyTo){
obj = applyTo
}else{
obj = "div";
}
//hides the child div or passed selector
jQuery(this).find(obj).hide();
//sets the main wrapper selection with a hover
jQuery(this).css("cursor", "pointer").hover(function(){
//restyles the child div or passed selector
// and fades it in
jQuery(this).find(obj).css("position","absolute")
.css("margin-top","-10px").css("margin-left","-10px")
.css("width","400px")
.css("border", "1px solid #666").fadeIn("slow");
}, function(){//fades out the child selector
jQuery(this).find(obj).fadeOut("slow");
});
});
};
/*All we have to do is embed new jQuery plugin named jquery.authover.js to theme, under the wp_enque_script call, below the
wp_head hook and evoke it with a simple script:*/
<script type="text/javascript">
jQuery(function(){
jQuery(".authorName").authorHover();
});
</script>
 
//Adding new jQuery plugin to WP plugin
add_action('init', 'addjQuery');
add_action('wp_head', 'addAuthorHover');
 
function addjQuery() {
wp_enqueue_script('authover',
WP_PLUGIN_URL . '/add_author_bio-tbs/jquery.authover.js',
array('jquery'), '1.4.2' );
}
 
function addAuthorHover(){
echo '<script type="text/javascript">
jQuery(function(){
jQuery(".authorName").authorHover();
});
</script>';
}

Examples

jQuery(function(){
jQuery(".post h2").hover(function(){
jQuery(this).effect('shake', 200);
}, function(){
jQuery(this).effect('shake', 200);
});
});
 
//Color animation with jQuery UI
jQuery(".post h2").hover(function(){
jQuery(this).animate({'backgroundColor':'#ccccff'}, 2000,
'easeOutBack');
}, function(){
jQuery(this).animate({'backgroundColor': '#999999'}, 2000,
'easeOutBack');
});
 
/*Implementing tabs entirely with jQuery - instead of pages in menus*/
//add in a ul list on the About page only, before the first h3
jQuery("#post-104 h3:first").before("<ul></ul>");
//select the ul, the h3's AND the h3's p tags
//and wrap them in a new div
//use the .add() function to make sure everything is selected
jQuery("#post-104 ul").add("#post-104 h3")
.add("#post-104 h3+p").wrapAll("<div id='aboutUs'></div>");
//for EACH h3 item:
jQuery("#post-104 h3").each(function(i){
//add text to the ul list w/ anchor links
var titleTxt = jQuery(this).text();
var htmlTxt = "<li>
<a href='#name-"+i+"'>"+titleTxt+"</a></li>";
jQuery("#post-104 ul").append(htmlTxt);
//wrap each h3 AND p in a div with anchor names
//this time, use .andSelf to make sure everything is selected
jQuery(this).next("p").andSelf()
.wrapAll("<div id='name-"+i+"'></div>");
});
//remove .entry class so list items don't have right quotes
//this is a list style in the default theme
jQuery("#post-104 .entry").removeClass('entry');
//Last, create the tabs widget
jQuery("#post-104 #aboutUs").tabs();

Top WordPress template tags

bloginfo('name');
wp_title('——',true,'');
the_title('<h2>', '</h2>');
the_content('more_link_text', strip_teaser, 'more_file');
the_category(', ');
the_author_meta();
wp_list_pages('title_li=');
wp_nav_menu( array('menu' => 'Main Nav' ));
next_post_link('<strong>%title</strong>');
previous_post_link('<strong>%title</strong>');
comments_number('no responses','one response', '% responses');
comments_popup_link('Add Your Thoughts');
edit_post_link('edit','<p>','</p>');
the_permalink();
the_ID();
wp_get_archives('type=monthly');
get_calendar(false);

Leave a Comment

Fields with * are required.

Please enter the letters as they are shown in the image above.
Letters are not case-sensitive.