If you want to work in a Java Web project, select the Java Web category, then select Web Application.

Note: If you are creating a PHP project for the first time and need help, see Configuring Your Environment for PHP Development in the PHP Learning Trail.

Right-click the project node and choose New > HTML file (Ctrl-N).

To delete the file, right-click the file in the Projects window and choose Delete. In the confirmation dialog that displays, click Yes.

Before we can begin working with jQuery, we must add the jQuery library to the project. If you haven’t done so already, download the jQuery library from http://jquery.com/.

Choose the uncompressed version, i.e., 'Development', before downloading. Using the uncompressed version will allow you to examine the JavaScript code in the editor, and aid in any debugging processes.

To add the jQuery library to your NetBeans project, simply copy the library folder from its location on your computer, and paste it directly into your project in the IDE’s Projects window. Details follow.

For Java Web projects, ensure that you place the js folder in the project’s web root. To do so, enter web in the Parent Folder field.

The jQuery library is now included in the jqproject project, and referenced from our index.html file. We can begin adding jQuery functionality to the page.

jQuery works by connecting dynamically-applied JavaScript attributes and behaviors to elements of the DOM (Document Object Model). Let’s add an element to the DOM and try to affect its properties. We’ll create a heading that changes color from black to blue when we click on it.

You can tidy up your code by right-clicking in the editor and choosing Format.

The jQuery instructions that we will add must be executed only after all of the elements of the DOM have been loaded by the browser. This is important because jQuery behaviors connect to elements of the DOM, and these elements must be available to jQuery in order to get the results we expect. jQuery takes care of this for us through its built-in (document).ready function, which follows the jQuery object, represented by $.

There is also an abbreviated version of this function that can alternately be used:

Our instructions for jQuery take the form of a JavaScript method, with an optional object literal representing an array of parameters, and must be placed between the curly braces {} inside the (document).ready function in order to execute only at the proper time, which is after the DOM has completely loaded.

At this stage, the index.html file should look as follows:

Enter the following code inside the (document).ready function, between the braces {}:

This example uses the jQuery click() function to invoke the jQuery addClass() function when an element matching the CSS selector “h1” is encountered. The $(this) refers back to the calling element. If we were to add more `<h1>`s to our page, the same behavior will be applied to all of them with this single set of rules, and each will interact with jQuery independently. (You can try this yourself as a quick exercise.)

The complete jQuery function should now look like this:

We created the simple test above by using JavaScript behaviors that are included in the core jQuery library. Now let’s examine a more real-world example by setting up an employee contact list using basic HTML markup. We’ll then apply the jQuery accordion widget to the contact list.

The accordion widget is part of the jQuery UI library. The UI library is built on top of the core library, and provides a modular approach to enabling interactions, widgets and effects to your web pages. You can keep file sizes to a mininum and conveniently select only the components you need from the jQuery’s download interface at http://jqueryui.com/download.

If you have not already done so, visit http://jqueryui.com/download and download the accordion navigation widget. Note that when you select the accordion widget, the UI Core library, and Widget Factory are also automatically selected. Also note that from the download page, the ‘UI lightness’ theme is selected by default, and is included in your download package. We’ll be applying this theme to our contact list in the following section.

Observe that the overall enclosing <div> element is given an id attribute with a value of infolist. Within this <div> element, there are four sets of <h3> tags and <div> tags that contain an image and unordered list.

When you type within <style> tags, take advantage of the IDE’s built-in CSS code-completion by pressing Ctrl-Space.

There are a number of problems with this document that we will address. Firstly, it is more difficult than it needs to be to scan the list quickly to find the person you’re looking for: one must scroll the page and visually inspect a lot of information that may not be of immediate interest. Four contacts in a list might be manageable, but if the number grew to say, 50, then the list would become much more difficult to use. Secondly, the document is visually plain, and is unlikely to blend in esthetically with most web site designs, particularly designs that have a strong graphic identity. We will address these issues by using the jQuery accordion widget, in combination with jQuery UI’s default theme.

Development versions of toolkit scripts are unminimized, meaning that their code is human-readable when viewed in an editor. Normally, you would want to switch to the compressed, minimized versions for a production-ready application in order to conserve download times.

You can paste by either pressing Ctrl-V (⌘-V on Mac), or right-clicking the js folder and choosing Paste.

The development-bundle > ui folder also contains a file named jquery-ui-1.8.1.custom.js. This file combines the three scripts listed above into a single script. You could equally paste this file into your project in place of the three individual scripts.

The <head> tags of your file should now look as follows.

In this line of code, #infolist is a CSS selector connected to a unique DOM element that has an id attribute with the value infolist; in other words, our contacts list. It is connected using typical JavaScript dot notation (‘.’) to the jQuery instruction that uses the accordion() method to display this element.

You’ve also specified ‘autoHeight: false’ in the above snippet. This prevents the accordion widget from setting the height of each panel based on the highest content part contained within the markup. For more information, consult the accordion API documentation.

Our project now has the behavior we want, but it looks quite plain and still lacks a well-organized appearance. Let’s address this by incorporating jQuery’s default ‘UI lightness’ theme.

To do so, right-click the project node and choose New > Folder. (If Folder doesn’t appear as an option, click the New File ( images:./new-file-btn.png[] ) button in the IDE’s toolbar, then choose Other > Folder in the New File wizard.) Name the folder css and place it within the same directory as your index.html file.

For Java Web projects, ensure that you place the css folder in the project’s web root. To do so, enter web in the Parent Folder field.

In this tutorial, you have learned how to add jQuery libraries to your project, as well as how to write some basic instructions using the jQuery syntax. You also learned how jQuery interacts with the DOM (Document Object Model) using variables that resemble CSS selectors to affect the appearance and behavior of elements on a web page.

Finally, you briefly explored the capabilities of the jQuery UI library by applying the accordion widget to a simple contact list. After implementing the accordion effect, you applied jQuery’s default style theme to the list. You should now be better able to appreciate how jQuery can be used to create dynamic web pages, while improving overall appearance and usability.