jQuery itself has some features that allow you to do that. If you can select header's/footer's container on each page, you can insert any common content you want, even replace the existing one.
jQuery replacing common parts of site
You can do something like this:
jQuery(function(){
jQuery('.header').html('SOME COMMON HEADER');
jQuery('.footer').html('SOME COMMON FOOTER');
});
See it in action here: http://jsfiddle.net/6sCfm/
jQuery loading external files into containers
Or, if you insist on loading external files, you can do this (using .load()):
jQuery(function(){
jQuery('.header').load('header.html');
jQuery('.footer').load('footer.html');
});
but pay attention to correct paths you are giving as parameters and make sure, that files should have only the HTML you need (no <head>, <body> tags, etc. - it will make HTML incorrect).
Loading parts of pages into containers
If you have whole pages (with <head>, <header> etc.), you can load only parts of them. Preferably give meaningful IDs to the parts you want to load (eg. header and footer) and supply them in the path, after space, as selector:
jQuery(function(){
jQuery('.header').load('header.html #header');
jQuery('.footer').load('footer.html #footer');
});
This should be flexible enough :)
