- 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