They work at different levels.
The simplest way to view the difference, from a beginner perspective is that jQuery is essentially an abstract of JavaScript, so the way we design a page for JavaScript is pretty much how we will do it for jQuery. Start with the DOM then build a behavior layer on top of that. Not so with Angular.Js. The process really begins from the ground up, so the end result is the desired view.
With jQuery you do dom-manipulations, with Angular.Js you create whole web-applications.
jQuery was built to abstract away the various browser idiosyncracies, and work with the DOM without having to add IE6 checks and so on. Over time, it developed a nice, robust API which allowed us to do a lot of things, but at its core, it is meant for dealing with the DOM, finding elements, changing UI, and so on. Think of it as working directly with nuts and bolts.
Angular.Js was built as a layer on top of jQuery, to add MVC concepts to front end engineering. Instead of giving you APIs to work with DOM, Angular.Js gives you data-binding, templating, custom components (similar to jQuery UI, but declarative instead of triggering through JS) and a whole lot more. Think of it as working at a higher level, with components that you can hook together, instead of directly at the nuts and bolts level.
Additionally, Angular.Js gives you structures and concepts that apply to various projects, like Controllers, Services, and Directives. jQuery itself can be used in multiple (gazillion) ways to do the same thing. Thankfully, that is way less with Angular.Js, which makes it easier to get into and out of projects. It offers a sane way for multiple people to contribute to the same project, without having to relearn a system from scratch.
A short comparison can be this-
jQuery
- Can be easily used by those who have proper knowledge on CSS selectors
- It is a library used for DOM Manipulations
- Has nothing to do with models
- Easily manipulate the contents of a webpage
- Apply styles to make UI more attractive
- Easy DOM traversal
- Effects and animation
- Simple to make AJAX calls and
- Utilities usability
- don't have a two-way binding feature
- becomes complex and difficult to maintain when the size of a project increases
- Sometimes you have to write more code to achieve the same functionality as in Angular.Js
Angular.Js
- It is an MVVM Framework
- Used for creating SPA (Single Page Applications)
- It has key features like routing, directives, two-way data binding, models, dependency injection, unit tests etc
- is modular
- Maintainable, when project size increases
- is Fast
- Two-Way data binding REST friendly MVC-based Pattern
- Deep Linking
- Templating
- Build-in form Validation
- Dependency Injection
- Localization
- Full Testing Environment
- Server Communication
And much more
Think this helps.
More can be found-