Getting started with Aptana and jQuery [edit]

This walkthrough will instruct you how to create a new jQuery project and get started with your coding using the documented jQuery library supplied by Aptana.


  1. Access your projects.
    1. Click the Project tab to view your Aptana projects.
  2. Create a new jQuery project.
    1. From the Aptana File menu, select New > Project...
      The New Project wizard opens.
    2. On the New Project wizard, expand the Aptana Projects folder and select General Web Project.
    3. Click the Next button.
    4. In the Project name: field, type a name for your new project.
    5. Click the Next button.
    6. From the Select Ajax Libraries list, check the box next to jQuery. Click Next.
    7. On the Jaxer Support screen, click the Select All button if you want to automatically add Jaxer support to the project. Click Next.
    8. On the HTML Preview settings page, configure any special HTML preview settings for your project. Click Next.
    9. Click the Finish button.

      Aptana creates a new jQuery project, which includes a lib folder for the jQuery library, a new jQuery-linked HTML template file named jquery_sample.htm, and a new Code Assist Profile.

      The jquery_sample.htm file automatically opens in the HTML Editor. Because jquery_sample.htm is now the active file, your jQuery profile now becomes the active Profile in the Code Assist Profiles View.

  3. Explore the jQuery project.
    1. Just below the open jquery_sample.htm file in the Editor, click the Preview tab.
      Aptana displays a preview of the Local Links example from jQuery.
    2. Click the Source tab to return to the source view of jquery_sample.htm.
    3. In the Project View, expand your project folder to view the files in your jQuery project.
    4. In the Code Assist Profiles View, expand the jquery_sample.htm project folder to view the documented JQuery library files. <p>These are the files that will be available to you in Code Assist.
  4. Preview Code Assist.
    1. In your jquery_sample.js file, just inside of the $(document).ready(function(){...}); function, add the following line: $("p").
    2. While entering that selector you should have seen documentation come up for how to use the $ function.
    3. Now insert your cursor just after "$("p")" and type .ad and press ctrl+space.
      Code Assist displays a list of jQuery functions that begin with the letters "ad" (e.g. add, addClass, etc). Use Code Assist to help you code.
  5. Start coding.
    1. As you type, notice that Code Assist is now active for the jQuery objects and functions that you use.
    2. Press ctrl+space at any time to activate Code Assist.

Related Topics