JQuery: замените содержимое DIV html из внешнего файла. Полный пример?

вопрос

каков полный код для включения jQuery на странице, а затем использовать его для замены содержимого DIV с текстом HTML из внешнего файла?

фон

Я новичок в jQuery, и я хочу работать с ним, чтобы я мог его изучить. У меня есть сайт, где мне нужно заменить содержимое одного дива (колонтитул), которая существует на каждой странице. К счастью, каждая из этих страниц уже импортирует один и тот же заголовок файл. Поэтому я собираюсь изменить этот файл заголовка с помощью магии jQuery! Я не могу найти полно примеров и я подумал, что у других могут быть похожие вопросы. Кого лучше спросить, чем так гуру?

пример

учитывая базовый HTML-файл Example.html:

<html>
    <head>
    </head>
    <body>
        <div id="selectedTarget">
            Existing content.
        </div>
    </body>
</html>

и внешний файл includes/contentSnippet.html содержащий фрагмент html:

<p>
    Hello World!
</p>

Что нового Example.htmlфайл, который будет связывать правильные библиотеки jQuery (от ./ JS directory) и заменить содержимое div через jQuery?

8
javascript jquery jquery-selectors

2 ответов

хорошо, я укушу...

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
        <script type="text/javascript">
           $(document).ready(function(){
               $('#selectedTarget').load('includes/contentSnippet.html');
           });
        </script>   
    </head>
    <body>
        <div id="selectedTarget">
            Existing content.
        </div>
    </body>
</html>

Примечания:

  1. я связал библиотеки jquery непосредственно из общедоступного CDN jQuery (который является разрешается и приветствуется)
  2. вы можете найти документацию для jQuery load() функции здесь.
15

чтобы использовать jQuery на Вашей странице, обычно рекомендуется поместить скрипт перед закрывающим тегом body, чтобы сохранить остальную часть содержимого страницы от блокировки для загрузки. Также рекомендуется использовать код из Google CDN для различных преимуществ Вот некоторые полезные ссылки: http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/ и http://encosia.com/2010/09/15/6953-reasons-why-i-still-let-google-host-jquery-for-me/.

учебники jQuery:http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
    // your script will go here
</script>
</body>

для замены содержимого div с содержимым из другого файла это делается с помощью AJAX-запроса:

$('#selectedTarget').load('includes/contentSnippet.html');

очевидно, есть много, чтобы узнать и гораздо больше способов управления и оптимизации ваших страниц. Я определенно рекомендую прочтите документацию API jQuery, чтобы узнать больше:http://api.jquery.com

2