Features PhpStorm WebStorm

Tips on jQuery development in WebStorm

Hi JavaScript devs!

There’s no doubt that everyone is using one or another library to access/manipulate the DOM, and jQuery is currently the most popular one. And WebStorm has lots of small but really neat features to help you coding. Let’s quickly get a feeling of what we have.

1. Selecting DOM elements

The first thing you usually do is selecting some DOM element(s), right? WebStorm will help you with completion for the most used selector types, such as elements ID-s:

or CSS classes:

Sure you can use more complex selectors, which are also supported, like mixed matching:

or parent-child selectors.

Or you can switch to “chained calls” style – no problem!

Since most of jQuery selectors follow CSS selectors syntax, WebStorm will support you writing any valid CSS fragment, providing live code checking and completion.

Side note: if you’re using Dojo toolkit or prototype.js library you will get the same functionality for selecting DOM elements.

2. Element manipulation

Once selected, you may want to check or tweak elements styles using jQuery’s neat hasClass/addClass/removeClass/toggleClass helpers. Needless to say, our IDE will remind you all the jQuery functions names with the bold highlight:

then give an insight on method parameters:

Great! Now WebStorm can help you with the CSS classes themselves:

By the way, you can instantly have all the official docs for any jQuery function in context just by using External documentation action (Shift+F1):

In WebStorm, there are tons of helpful features packed: navigating through the code and inspecting it, checking for errors and potential problems, code refactorings etc. etc. Just keep following this blog as we will show you lot more cool stuff soon!

All the features are available in the latest WebStorm and PhpStorm EAP builds and in all the other products based on IntelliJ IDEA platform.

As usual: feel free to report any problems that you have in bug tracker. We will instantly answer all your questions at the forum.

Happy coding!
JetBrains Web IDE Team

Comments below can no longer be edited.

15 Responses to Tips on jQuery development in WebStorm

  1. Avatar

    Ka says:

    August 8, 2012

    webstorm only ? I’ve tried phpstorm ps-121.12 and doesn’t work for all these features.

    • Avatar

      Alexey Gopachenko says:

      August 9, 2012

      As article states “All the features are available in the latest WebStorm and PhpStorm EAP builds and in all the other products based on IntelliJ IDEA platform”.

      Have you added JQuery library to the project?…

      • Avatar

        Orillian says:

        August 14, 2012

        I’m in the same boat. I have my jQuery library added, but not seeing any of these cool new features.

  2. Avatar

    Henry says:

    August 8, 2012

    First of all, great product!

    Does this work for external js files?

    • Avatar

      Karlheinz says:

      August 9, 2012

      Good question!

      • Avatar

        Michal says:

        August 27, 2012

        I hope it will, i didnt wrote static html with inline js about 10 years 🙂

  3. Avatar

    gtraxx says:

    August 9, 2012

    Is this feature available in 4.3 phpstorm ?
    Best regards

  4. Avatar

    ksafonov says:

    August 9, 2012

    @Henry @Karlheinz Do you mean standalone JavaScript files? Yes it does.

  5. Avatar

    Rafi B says:

    August 9, 2012

    Guys, read the article. It’s jQuery features for web/phpStorm latest EAP. (Not 4.x)

  6. Avatar

    Yoosuf says:

    August 10, 2012

    woow, cool features

  7. Avatar

    ksafonov says:

    August 10, 2012

    @gtraxx @Rafi B Indeed, some of the shown features are part of 4.x release.

  8. Avatar

    Thomas P. says:

    August 13, 2012

    Good idea

  9. Avatar

    Antonio says:

    October 1, 2012

    I did everything as suggested, added the jquery library to the project but still I’m not able to use the auto completion like you show in this post blog.
    The more i try the more it does not work, can you help me to solve this problem?

  10. Avatar

    Yury says:

    October 25, 2012

    It seems that in PhpStorm this works for HTML files, but does not work for PHP files.
    For example, if you need to create an HTML page with PHP inserts—you will not be able to use these selectors. But for HTML it works as promised.

  11. Avatar

    Evan says:

    November 1, 2012

    Selecting the DOM doesn’t work.I have the latest version and Both latest jquery.js and Prototype.js.The methods worked only after i have attached the Jquery.js file in the javascript library and made it public.Go to file>settings>javascript>Libraries and click add.Then click attach and attach the js file and make it public.That should do the trick.

Discover more