Getting Started With jQuery

addClass.js

jQuery('.post .entry-title').addClass('better-entry-title')

append.js

jQuery('#masthead .site-description').append( ", I'm also on WPMU DEV" )

attr.js

jQuery('.post:first').attr('id');
jQuery('.post:first').attr('id', 'the-first-post');

css.js

jQuery('.post .entry-title a').css({
    background: '#000000',
    color: '#ffffff',
    padding: '11px',
    borderBottom: '5px solid #F8E71C'
})

eq.js

jQuery('.widget-title:eq(0)').css({ background: 'red' });

event.js

jQuery(document).on( 'dblclick', '#masthead', function(){
    jQuery('#masthead .site-description').text( 'You have found my double click easter egg!' );
});

functions.php

<?php
add_action( 'wp_enqueue_scripts', 'jquery_test_assets' );
function jquery_test_assets() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css' );
    wp_enqueue_script( 'jquery-test', get_stylesheet_directory_uri() . '/scripts.js', array('jquery'), '1.0.0', true );
}

gt.js

jQuery('.widget-title:gt(2)').css({ background: 'red' });

has.js

jQuery('aside').children().has('.widget-title').css({ background: 'red' });

html-and-text.js

// treats string as HTML outputting a an actual link
jQuery('#masthead .site-description').html( 'Read me on <a href="http://premium.wpmudev.org/blog/author/danielpataki">WPMU DEV</a> as well' )

// trets string as text, outputs the string as-is
jQuery('#masthead .site-description').text( 'Read me on <a href="http://premium.wpmudev.org/blog/author/danielpataki">WPMU DEV</a> as well' )

multiple-elements.js

jQuery('.widget-title').css({ background: 'red' });

not.js

jQuery('.widget:not(.widget_categories) .widget-title').css({ background: 'red' });

selector.js

jQuery('#masthead').css({ background: 'red' });

style.css

/*
 Theme Name:   Jquery Test Theme
 Description:  A theme based on Twenty Sixteen for testing our jQuery prowess
 Author:       Daniel Pataki
 Author URI:   http://danielpataki.com
 Template:     twentysixteen
 Version:      1.0.0
*/

toggle.js

jQuery('.widget').prepend( '<span class="toggle-widget">toggle</span>' )
jQuery( document ).on( 'click', '.toggle-widget', function() {
    jQuery(this).parent().find('*').not('.toggle-widget, .widget-title').toggle();
})

traversal.js

jQuery('aside').children().find('h2').css({ background: 'red' });