• Страница 1 из 1
  • 1
Форум » II. jQuery » Базовое знакомство с jQuery » Работа с содержимым страницы (Изменение,вставка,удаление содержимого страницы)
Работа с содержимым страницы
1 С помощью jQuery возможно манипулирование с содержимым страницы. Ниже мы рассмотрим наиболее важные в этом плане функции jQuery.

Другие функции можно посмотреть здесь.

Функция .html() - считывает HTML-код внутри элемента, а также заменяет его на другой. Используется вместе с выборкой jQuery.

Рассмотрим на примере. Есть такой код:

Код
<div id="container">
  <div id="errors">
    <h2>Ошибки:</h2>
  </div>
</div>


сделаем выборку по селектору идентификатора

Код
$('#errors')


и выведем её во всплывающем окне:

Код
alert($('#errors'));


если мы запустим этот код сейчас, то во всплывающем окне мы увидим только:

Цитата
[object Object]


то есть содержимого элемента с идентификатором errors мы не увидели. Смотрим, что получится, если мы подключаем функцию .html()

Код
alert($('#errors').html());




благодаря функции .html(), во всплывающем окне продублировался html-код, находящийся внутри элемента с идентификатором errors, причём вместе с тегами.

Таким образом, с помощью функции .html() вы можете скопировать html-код, находящийся внутри нужного элемента и вставить его в другой элемент на странице сайта.

Как мы знаем, функции можно передавать различные значения в качестве аргумента.
Если мы передадим функции .html() строку в качестве аргумента:

Код
$('#errors').html('<p>В данной форме четыре ошибки!</p>');


то она заменит первоначальное содержимое элемента с идентификатором errors и мы увидим на странице сайта сообщение

Цитата
В данной форме четыре ошибки!


причём, как вы заметили, заменился не только текст, но и html-теги. В итоге первоначальный код:

Код
<div id="container">
  <div id="errors">
    <h2>Ошибки:</h2>
  </div>
</div>


преобразовался в такой:

Код
<div id="container">
  <div id="errors">
    <p>В данной форме четыре ошибки!</p>
  </div>
</div>

Изменить / Удалить

2 Функция .text() по принципу работы схожа с функцией .html(), с одной лишь разницей: она не принимает html-элементы.
Данная функция полезна, если нужно заменить какой-то текст внутри нужного элемента. Например, возьмём наш код:

Код
<div id="container">
  <div id="errors">
    <h2>Ошибки:</h2>
  </div>
</div>


и используем функцию .text(), чтобы заменить содержимое в заголовке второго уровня внутри элемента:

Код
$('#errors h2').text('Ошибок не найдено');


код преобразуется в такой:

Код
<div id="container">
  <div id="errors">
    <h2>Ошибок не найдено</h2>
  </div>
</div>


При этом теги заголовка останутся на месте, а текст внутри них поменяется.

Важное замечание: если использовать функцию .html() или .text() для того, чтобы извлечь текст или код из выборки, состоящей не из одного, а из множества элементов, то html-код или текст будет извлечён только из первого элемента выборки!


Например, если на странице сайта присутствуют пять блоков div, и мы производим выборку

Код
$('div').html();


то в результате этой выборки мы получим содержимое только первого элемента div страницы.

Однако, если с помощью функций .html() и .text() вставлять в выборку html-код или текст, то это коснётся всех элементов выборки.


Например, для тех же пяти блоков div данный код:

Код
$('div').html('<p>Привет,мир!</p>');


заменит html-код во всех пяти элементах div, а не только в первом.

Изменить / Удалить

3 Функция .append() - добавляет выбранному элементу html-код в виде последнего дочернего элемента.
Например, возьмём наш код:

Код
<div id="container">
  <div id="errors">
    <h2>Ошибки:</h2>
  </div>
</div>


и используя функцию .append(), добавим сообщение об отсутствии ошибок сразу после заголовка:

Код
$('#errors').append('<p>Ошибок не найдено!</p>');


в итоге код преобразуется в такой:

Код
<div id="container">
  <div id="errors">
    <h2>Ошибки:</h2>
    <p>Ошибок не найдено!</p>
  </div>
</div>


при этом первоначальный код внутри элемента остался прежним, а к нему добавился новый фрагмент html-кода.

Изменить / Удалить

4 Функция .prepend() - схожа с предыдущей с той лишь разницей, что добавляет html-код сразу после открывающего тега выборки.
Поэтому, если взять наш код:

Код
<div id="container">
  <div id="errors">
    <h2>Ошибки:</h2>
  </div>
</div>


и использовать функцию .prepend(), передав ей строку с сообщением о найденных ошибках, заключённым в теги абзаца:

Код
$('#errors').prepend('<p>В данной форме четыре ошибки</p>');


то после выполнения функции мы получим следующий код:

Код
<div id="container">
  <div id="errors">
    <p>В данной форме четыре ошибки</p>
    <h2>Ошибки:</h2>
  </div>
</div>

Изменить / Удалить

5 Функции .before() и .after() - используются, если нужно добавить html-код вне выборки: до открывающего тега элемента или сразу после закрывающего тега.

Например, есть текстовое поле какой-то формы, которое должен заполнить посетитель. И если он его не заполнил, должно выводиться предупреждающее сообщение об этом.

Код
<input type="text" name = "userName" id = "userName">


добавим это сообщение после текстового поля, используя функцию .after()

Код
$('#userName').after('<span class="error">Имя пользователя обязательно!</span>');


теперь наш html-код будет выглядеть так:

Код
<input type="text" name = "userName" id = "userName">
<span class="error">Имя пользователя обязательно!</span>


Если используем функцию .before() для той же задачи:

Код
$('#userName').before('<span class="error">Имя пользователя обязательно!</span>');


то в итоге код получается такой:

Код
<span class="error">Имя пользователя обязательно!</span>
<input type="text" name = "userName" id = "userName">

Изменить / Удалить

Форум » II. jQuery » Базовое знакомство с jQuery » Работа с содержимым страницы (Изменение,вставка,удаление содержимого страницы)
  • Страница 1 из 1
  • 1
Поиск: