Home » Communication » jQuery for Interactive Websites

jQuery for Interactive Websites

May 27, 2016

jQuery for Interactive Websites

For many web developers who are moving beyond the basic link and page behavior, the next step is to learn JavaScript, a powerful programming language that runs in your user’s browser to enable your website to change its behavior in response to the user. (While some newer frameworks are making use of server side JavaScript, today’s focus will be on the more traditional client side usage.) 

While JavaScript in its original form is pretty powerful, there are some common frameworks that you can add to get yourself up and running with very minimal programming experience. One of the most common of these is jQuery.

A Word Before…

Before we dig too deep into the jQuery framework, you’re going to need to have mastered some basic skills.  I’m going to assume you know HTML5 and have at least some familiarity with CSS, including CSS3.  jQuery relies heavily on CSS selectors, so knowledge of how classes and ids work within the DOM (Document Object Model) is pretty key.  It’s also helpful to have some knowledge of how Javascript programming works, though we’ll cover some of that as we go. 

Getting Started

To get started with jQuery, simply add the following line to your document’s <head>: 

<script src="https://code.jquery.com/jquery-2.2.3.min.js"integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="crossorigin="anonymous"></script>

This will load the jQuery library from jquery.com and ensure that the delivered file has the expected content.  This safeguards your users in the unlikely event that jquery.com is ever hacked or compromised.  If the file doesn’t have the expected hash signature, the browser will simply reject it and move on.  Your site won’t work, but no malicious code gets run, either.

To test if you have jQuery running properly, load up your browser’s console. I prefer Chrome’s console, personally.  You can get to it by loading your page and pressing F12 on your keyboard.  Once you have the console up, type “$('body')”.  You should get a response that loads the <body> tag of your page’s DOM.  It doesn’t change anything, because all we’ve done is select the body tag, but it’s an indication that all is working.  If you get an error message, double check that you’ve inserted the code above in the <head> of your document.

jQuery Selectors

Once you’ve got jQuery running, it’s time to play with selectors.  jQuery selectors allow you to choose which elements of your page you wish to respond to or manipulate.  A series of examples may help:

  • $('body') // This selects the <body> tag.
  • $('p') // This selects all <p> tags throughout the document
  • $('.button') // This selects all items with the “button” class, regardless of tag type.
  • $('#aSpecificButton') // This selects the element with the id=“aSpecificButton”

You can use any combination of HTML tags and CSS selectors to define the elements you’d like jQuery to act upon.  Practice using those in the console and see if you can select specific elements of your page.

jQuery Methods

So how do we use these selectors to do things?  We use the jQuery API, of course.  Fortunately a number of the highest impact methods are fairly intuitive, so we won’t have to poke around in the API too often to get the results we want.  To call a jQuery method, we use standard dot notation on our selector.  Here, again, examples are more helpful than explanation:

  • $('#pageTitle').html(“Hello World”);  // This sets the element with the id='pageTitle' to contain the text “Hello World”. 
  • $('.error').show();  // This reveals any elements of class='error' that have been hidden.
  • $('.error').hide();  // Hides all elements of class='error'
  • $('.error').toggle();  // Hides visible errors and reveals hidden ones. 
  • $('p').addClass('BigFont');  // Adds the class BigFont to all paragraph tags.  Note that this won’t do anything unless your CSS contains a definition for .BigFont
  • $('p').removeClass('BigFont'); // Removes the class BigFont from all paragraph tags

Play with these functions a bit and see how much you can manipulate your page with just a few common methods.  Note, though, that because your underlying HTML hasn’t changed, things snap back to normal when you reload the page.  All of the manipulation is happening on the client side.

jQuery Events

The next step is to hook these methods to events to make your page interactive.  Fortunately, jQuery makes that pretty easy as well.  There are two methods:

<button onclick="$('p').css('background-color', '#FFFF00');">Click me to make paragraphs yellow!</button>

Or:

<script type="text/javascript">

      $('button').click( function() { $('p').css('background-color', '#FFFF00');"> }

</script>

Note that the second method will add that click event to all <button> tags, but you can refine that by using more specific selectors.

Go Play!

There’s a lot you can do with very minimal experience using jQuery’s powerful combinations of selectors, methods and events.  Experiment with your pages to create compelling interactive experiences to wow your visitors.

There’s a great community out there for most any difficulty you might encounter, so be sure to Google, but if you’re stumped, shoot me an email and I’ll see what I can come up with to help make your pages excellent. 

 Want to receive notifications about more content like this? Subscribe to this blog, Technology & Your Ministry.

{{cta('35e945a3-57b9-4426-b284-53c61bf91951')}}

Previous Article
What Your Church Sign Communicates
What Your Church Sign Communicates

Co-written by Rev. Keith Haney, Mission Facilitator, LCMS Northern Illinois District We see them all the ti...

Next Article
Church Communication & Vocation
Church Communication & Vocation

Vocation, or those roles to which God has called us to love and serve our neighbor, is at the heart of...

Return to Home