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!

This blog is permanently closed.

For up-to-date information please follow to corresponding WebStorm blog or PhpStorm blog.

 
This entry was posted in Cool Feature, PhpStorm, WebStorm. Bookmark the permalink.

13 Responses to jQuery API documentation at your fingertips

  1. Art says:

    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. MaximAL says:

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

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

  3. Chuck says:

    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. Necroman says:

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

  5. Rustam Vishnyakov says:

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

  6. Rustam Vishnyakov says:

    @Chuck
    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. Vladimir says:

    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
    com.intellij.lang.javascript.index.MyJSNamedItem@b1bde08
    and that is all.

  8. Rustam Vishnyakov says:

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

  9. Vladimir says:

    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. darktalker says:

    where is api support for dojotoolkit ?

  11. Rustam Vishnyakov says:

    @darktalker
    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. David Rees says:

    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. Olivier says:

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

Comments are closed.