To learn how to use jQuery, all you need is a text editor and the jQuery files and a computer with a browser.

You can create HTML documents with the text editor, store them in a file on your own computer and open them up in the browser of your choice. All internet browsers are capable of recognizing and running JavaScript, but you need access to the jQuery files to specifically run jQuery functions. You can view the HTML files without having to have a internet web site on a host server. It is best to have a Web Developer tool plugin or extension installed on your browser for viewing the source code, seeing the DOM and error reporting tools. This site will be using Firefox's Web Developer Extension for this purpose.

If you are going to integrate PHP, you will need to work in a WAMP or XXAMP, Apache/MySQL environment. JQ.Zemplate is written for those not using PHP with their web pages, so all the tutorials and snippets can be used without a WAMP or XXAMP environment.

Where do you get jQuery?

Jquery is a free and open sourced library of files. You can ownload the files from http://jQuery.com/download. 

Read the JQ.Zemplate article on Obtaining and linking to jQuery files to find out how to access the necessary jQuery files for learning to use the program.

What is a text editor?

Image of a text editor

A text editor is a program that allows you to create files that are purely text, letters, numbers and characters, without any formatting. By no formatting we mean, no bold characters, no different font or font sizes, no colors, etc. Browsers read pure text files with a special character set such as "utf-8", etc.

There are a number of free downloads on the internet for text editors. There are also a number of sites that sell text editors for programming that add special features and functionality that make programming and troubleshooting easier. Most computers come with a very basic text editor, such as Notepad, but interacting with the internet can be difficult with these simple text editors.

Microsoft WORD and other word processors are NOT text editors. When you create documents with Word Processors a great deal of formatting code is applied. This formatting is not HTML and an internet browser will not read it properly. Even saving the document to a .txt file can cause problems. It is best to leave word processors alone for programming, use them for writing documents for pdfs and for print.

You can also use your text editor for creating other sorts of files for web development, such as stylesheets.

Features to look for in a text editor:

  • line numbers
  • multiple panes for viewing files side by side
  • internet connectivity, upload and download files via ftp
  • colored code for various scripting languages
  • auto completion of code
  • superior text editing, search & replace, remove empty lines, etc.
  • ability to modify its appearance for best visibility and minimum distraction

When looking for a text editor you want to be sure that it will work with your computer's operating system. If you are using a Windows machine, then get an editor that works with Windows. If on a Macintosh aka Apple device, you need something that works with OS X. If you are using a Linux based operating system, you should be sure the text editor will work with that operating system.

Some text editors allow you to preview the HTML document from the editor itself. This can be good if you only have one monitor, and you don't want to flip back and forth to see how changes in the code change the document. Be aware that you should still test your web page on several different brwosers.

Here is a list of some of the more common text editors that are used for programming.

NameURLDescriptionOSCost
notepad++ http://notepad-plus-plus.org Notepad++ is one of the most popular text editors. It is governed by a GPL license and is totally free. It has many features for programming with multiple scripting languages. The plugins allow for easy access to hosting servers via FTP. Windows free
Sublime Text https://www.sublimetext.com Sublime Text is a sophisticated text editor for writing code, HTML and stylesheets. It has enhanced features for editing code and navigation. Windows
OS X
Linux
paid 
Atom https://atom.io Created by GitHub, Atom is a relatively new, and full featured, text editor for writing code.  Windows Free
TextWrangler http://www.barebones.com/products/TextWrangler TextWrangler is the "lite" version of BBEdit, both created by Bare Bones. It is a good basic text editor for use with MAC operating systems. OS X Free
TextMate http://macromates.com TextMate is a very popular text editor for MAC OS.  OS X Paid
Coda http://www.panic.com/coda Coda is a widely used and powerful text editor for MAC operating systems. It has many powerfully text editing features and allows for a preview of the web page, which is a nice feature. OS X  Paid

How do I open files from my own computer to view on a browser 

The files to be opened on your own computer using a browser must be written in a format and language that the browser can recognize. JQ.Zemplate's tutorials are all written in HTML5, which any modern browser can read and display. By browser, we mean Chrome, Firefox, Internet Explorer or Safari. It is also good to have a Web Developer tool plugin or extension installed on your browser.

Folder Structure Screen Shot

Place your files in a convenient folder on your computer. Within that folder create a subfolder called "js", one called "css" and one called "images". These subfolders will contain the javascript files, the stylesheets and any graphics that will be used.

You must put the local path to the file in the address bar in the browser. See the example below:

file:///C:/jquery-testing/jq-test-file.html


Things to note about using a text editor

Text Editors strip out formatting when doing a copy/paste

If you highlight text in a web page then select CNTL+C on your keyboard, it will copy the text on the web page. If you then click in a an open text editor document then select CNTL+V on your keyboard, the only thing that will be copied into a text editor are the characters themselves. All formating as far as font size, color, and background will be lost.

You can do this with any of the code presented on this site that you wish to copy for our own tutorials.