Build the jQuery Basic Structure

In this episode, you will create the jQuery script file and build the basic structure. You’ll code the IIFE, initialization function, and each of the basic functions. Then you’ll cache the elements into variables. You’ll learn about mapping a click event to a function and passing additional data to it. Let’s get started working and learning about jQuery and JavaScript.

Here is what you are building in this episode. Don't worry. You and I will build it together, talk through what we're doing, and go test things in the browser's console.

	;(function($, window, document, undefined){
	'use strict';
	var $qaQuestions, $qaAnswers, $qaIcons,
	$teaserMessages, $teaserHiddenContents, $teaserIcons;
	var init = function() {
	$qaQuestions = $('.qa--question');
	$qaAnswers = $qaQuestions.next();
	$qaIcons = $qaQuestions.find('.qa--icon');
	$qaQuestions.on('click', {contentType: 'qa'}, clickHandler);
	$teaserMessages = $('.teaser--visible-message');
	$teaserHiddenContents = $teaserMessages.next();
	$teaserIcons = $teaserMessages.find('.teaser--icon');
	$teaserMessages.on('click', {contentType: 'teaser'}, clickHandler);
	}
	var clickHandler = function( event ) {
	console.log( event );
	}
	function changeIcon() {
	}
	function getIndex() {
	}
	function getHiddenContent() {
	}
	function getIcon() {
	}
	function getIconClasses() {
	}
	$(document).ready(function(){
	init();
	});
	})(jQuery, window, document);

view raw

jquery.plugin.js

hosted with ❤ by GitHub

I’ll also share my process on defining functions and laying out scripts. If you need a refresher on function definitions, go back and watch this episode: Functions – Introduction to jQuery (and JavaScript).