css-example.html

<div id="main">
    <div class="entry-content" id="post-1">
      Hi Roy!
    </div>
    <div class="entry-content" id="post-2">
      Hi Shawn!
    </div>
  </div>
<script>
jQuery(document).ready(function($) {
  $( '.entry-content' ).css( 'background-color', '#fff' );
  $( '#post-2' ).css( 'padding-bottom', '20px' );                   
});
</script>

event-example-2.js

  $( '#important-link' ).on( 'click', function( event ){
    //don't naviagate on click
    event.preventDefault();
    //do SOMETHING ELSE when link with ID #important-link is clicked

  });

event-example.js

  $( '#important-link' ).on( 'click', function( event ){
      //do something when link with ID #important-link is clicked
  });

hide-example.html

<a href="#" id="hide-post-7">Hide</a>
<div id="post-7">
	<!-- put post 7 here -->
</div>

<script>
	jQuery(document).ready(function($) {
		$( '#hide-post-7' ).on( 'click', function(event){
			event.preventDefault();
			$( '#post-7' ).hide();
		});
	});
</script>

load-jquery.php

<?php
add_action( 'wp_enqueue_scripts', function(){
   wp_enqueue_script( 'jquery' );
});

loop.php

if ( have_posts() ) {
	while ( have_posts() ) {
		the_post();
		echo '<div>';
		echo '<a href="#" class="hide-post">Hide</a>';
		echo '<h1>' . get_the_title() .'</h1>';
		echo get_the_content();
		echo '</div>';
	}
}

no-conflict-1.js

jQuery(document).ready(function($) {
  //$ is now jQuery 
});

non-conflict-2.js

(function($) {
   //$ is now jQuery 
})(jQuery);

post-hide-2.js

jQuery(document).ready(function($) {
$( '.hide-post' ).on( 'click', function( event ){
    event.preventDefault();
    $( this ).parent().hide();

});