Features PhpStorm WebStorm

jQuery API documentation at your fingertips

There is a new feature in verison 2.1 of PhpStorm and WebStorm which allows to browse documentation for jQuery methods using the Ctrl+Q shortcut staying in off-line mode. Before you start using it you have to download the API documentation (raw XML API dump) from jQuery Web site and set it up. Fortunately it’s very easy since the IDE does almost everything for you.

If you have already set up your jQuery library, go to “JavaScript Libraries” in “Settings” panel and click [Edit] for your library. You should get something like this:

Make sure that jQuery on-line documentation link (http://api.jquery.com) is already there. You also need a properly set and working Internet connection from the IDE. Now click “Download” button and wait till documentation is downloaded. Eventually, you should see the message “Successfully downloaded http://api.jquery.com/api” and a new local file link in the list of documentation URLs, for example:

Click “OK” in library edit dialog and “OK”/”Apply” in Settings window. That’s it, jQuery off-line documentation is ready to be uses.

Now let’s take a simple code example and position the cursor to the html function as shown below:

Press Ctrl+Q. You will instantly get the following documentation window for html function:

Here you go!

Comments below can no longer be edited.

13 Responses to jQuery API documentation at your fingertips

  1. Avatar

    Art says:

    April 19, 2011

    It is odd that in the example which uses the .text() jQuery function, the documentation is for the “:text” CSS selector and not the .text() jQuery function.

  2. Avatar

    MaximAL says:

    April 19, 2011

    There is not an description of text() function on the screenshot.
    That is :text selector’s one.

    “Description: Get the combined text contents of each element in the set of matched elements, including their descendants.
    version added: 1.0.text()”

  3. Avatar

    Chuck says:

    April 19, 2011

    As a new user to PHPStorm I found this in the EAP and loved it. Now if only there was a way to add other jQuery documentation for example UI or Validate or Mobile. That would be killer. Keep ip the great work.

  4. Avatar

    Necroman says:

    April 19, 2011

    This is great! But ideally there should be also link to api.jquery.com related documentation webpage – adding this should be really simple 🙂

  5. Avatar

    Rustam Vishnyakov says:

    April 19, 2011

    I have updated my example, hopefully this one is correct.

  6. Avatar

    Rustam Vishnyakov says:

    April 19, 2011

    jQuery provides a well-structured raw XML document which can be easily integrated with IDE. If other frameworks would provide a similar kind of documentation, it would be easy to incorporate it too. Unfortunately usually there are only HTML pages.

  7. Avatar

    Vladimir says:

    April 19, 2011

    Simple can not make this work (PHP Storm). In documentation URLs panel I don’t have download in between Specify.. and Remove buttons. When I try CTRL+Q I receive this message
    and that is all.

  8. Avatar

    Rustam Vishnyakov says:

    April 19, 2011

    @Vladimir The feature is available in EAP build 106.444. Your version is likely the older one.

  9. Avatar

    Vladimir says:

    April 19, 2011

    Well at the beginning of the article it says “There is a new feature in verison 2.1” which I have but it doesn’t mention what build 🙂
    OK, I will update to the latest build or maybe wait for final version.

  10. Avatar

    darktalker says:

    April 20, 2011

    where is api support for dojotoolkit ?

  11. Avatar

    Rustam Vishnyakov says:

    April 20, 2011

    You can configure links to Dojo on-line documentation. See, for example, http://blogs.jetbrains.com/webide/2011/01/external-api-docs-support-for-popular-javascript-frameworks. But again, Dojo doesn’t provide any downloadable documentation package similar to jQuery.

  12. Avatar

    David Rees says:

    April 20, 2011

    Rustam, It’s all generated from the JSDoc (or Dojo’s only variation) though, why can’t you parse that like you already do for project code?

  13. Avatar

    Olivier says:

    April 30, 2011

    Any Howto on how to add Ext 4 and Sencha Touch?

Discover more