Le choix des armes.

C'est quoi JQuery? JQuery est une bibliothèque de scripts en JavaScript qui s'intègre en surcouche par rapport au JavaScript supporté en natif par tous les navigateurs, depuis de nombreuses années. Pour de plus amples connaissances jQuery : l'histoire d'un framework.

JQuery apporte une simplification du code par rapport à du JavaScript pure souche. Il permet de faire des fonctions complexes sans trop connaissances en programmation. C'est la porte d'entrée pour pouvoir avoir du codage propre. J'entends par là qu'il permet d'automatiser des fonctions dynamiques sans toucher au document HTML. Puisqu'avec une #id ou des class vous pouvez allouer des fonctions à la chaine sans devoir mettre à chaque balise HTML un JavaScript:onclick par exemple. Vous pouvez le faire en JavaScript mais c'est nettement moins simple.

Pour vous initier à JQuery c'est ici Grafikart: Initiation à jQuery . Un très bon tutoriel pour débuter.
Sans compter de nombreux tutoriels annexes à garder dans ses favoris.

Faire le pont entre les deux...

Comme l'indique Jérome Debray dans son article, il est utile d'optimiser le code JQuery, et surtout cela pousse à mettre les «mains dans le cambouis».

...Puis un choix

Selon votre niveau en développement et ce dont vous avez besoin. De la performance ou de la facilité d'utilisation. Pour une vue d'ensemble jsperf: test offset jquery vs vanilla. Pour ma part j'ai sauté le pas, pour l'instant je n'utilise que JavaScript. Je n'utilise pas de JavaScript à outrance, c'est un non-sens d'optimiser tout son site et d'avoir un fichier JQuery qui pèse plus lourd que mes documents et je suis loin d'en utiliser toutes les fonctions. De plus je teste mon site sur une tablette quadcore à 1.1 Ghz, la différence se fait sentir du point de vue de la fluidité, entre les deux solutions. Sur un PC par contre c'est moins évident.

Les écueils.

Le développement en JavaScript demande un bon niveau par rapport à JQuery. Dans certains domaines notamment avec les animations il faudra faire un bon vieux coller/copier des familles, avec des tâtonnements pour la mise en place. JQuery apporte plus de souplesse dans la gestion des événements en tâche de fond, en JavaScript vous devrez les gérer tous si vous voulez bien faire, sinon vous devrez faire des concessions sur des détails (fadein, fadeout, ....). Cette gestion va vous demandez de bonnes connaissances en JavaScript, pour exemple, trouver les éléments selon la classe, les listeners, etc. Mais c'est possible, avec quelques efforts de recherche.

Stackoverflow rules.

J'ai une bonne et une mauvaise nouvelle.

La bonne, faire des recherches pour trouver les bonnes sources cela est possible, la mauvaise, il faudra le faire en anglais. C'est le constat que je dresse après de nombreuses recherches infructueuses dans ma langue maternelle. Or dès que j'ai pu formuler mes recherches correctement en anglais, dans l'immense majorité des cas, j'ai trouvé des réponses claires et précises, qui fonctionnent sur tous les navigateurs, what's else? :)
Pour ma part Stackoverflow est une référence en matière de programmation. Voir les exemples suivants:

Stackoverflow: “hasClass” with javascript?

Stackoverflow: Event.target.classname only first class

Stackoverflow: How use click event after xhr load without query?
Essayez de trouver les mêmes réponses en français.