JQuery: заменить содержимое DIV на HTML из внешнего файла. Полный пример? - PullRequest
Новая
       2

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

8 голосов
/ 26 февраля 2011

Вопрос

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

Фон

Я новичок в jQuery, и мне не терпится поработать с ним, чтобы я мог его изучить. У меня есть сайт, на котором мне нужно заменить содержимое того же самого div (нижнего колонтитула), который существует на каждой странице. К счастью, каждая из этих страниц уже импортирует один и тот же заголовочный файл. Так что я собираюсь изменить этот заголовочный файл с помощью некоторого волшебства 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) и заменять содержимое div с помощью jQuery?

Ответы [ 2 ]

16 голосов
/ 26 февраля 2011

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

<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. Документацию по load() функции jQuery можно найти здесь .
2 голосов
/ 26 февраля 2011

Чтобы использовать 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 Tutorials: 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');

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...