I have the below code which loads the #special from my root page. This all works fine however I am concerned that I am having to load all the css/js/images etc again each time someone loads this page.
<div id="test-one"></div>
<script>
$("#test-one").load("/ #special");
</script>
Is there a way to cache this? I see that jQuery.ajax refers to cache but it doesn't look as though you can load a specific selector with jQuery.ajax?
The browser will automatically use the cache for the new web page that the ajax call loads unless the server behind that web page prevents caching. You don't need to do anything special in your ajax call for browser caching to be used automatically.
Keep in mind that when you load a document fragment like you are doing, jQuery will fetch the whole document, let the browser parse it all into a document fragment and then jQuery will extract the portion you asked for and insert that where you asked.