Как создать свой сайт → Уроки jQuery → Урок 5. Методы для работы с html

jQuery - Урок 5. Методы для работы с html

Сначала рассмотрим основные методы работы с html, а затем уже методы для манипуляции с этими элементами. Итак, основные методы:
  • html(val) - добавляет html-код в выбранные элементы.
    Пример:
    $("div.sp").html("<span>Привет</span>");
    Данная инструкция добавит во все div-ы с классом sp, span-ы с текстом "Привет".


  • text() / val() - возвращает текстовое содержимое элемента / значение элемента.
    Пример:
    $("p").text();
    Данная инструкция вернет текст из параграфа.


  • text(val) / val(val) - установит текст для элемента / значение для элемента.
    Пример:
    $("p").text("Привет!");
    Данная инструкция в параграфе напишет слово "Привет!".

Давайте для примера, сделаем так, чтобы при нажатии по кнопке "Повторить", текст из первого абзаца дублировался во второй абзац.

Текст первого абзаца!

Html-код:
<html> <head> <title>jQuery html</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery-1.2.6.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <p id="p1">Текст первого абзаца!</p> <p id="p2"></p> <input type="button" value="Повторить!" onclick="addHtml();"> </body> </html>
Фукция будет выглядеть так:
function addHtml(){ var tp1=$("#p1").text(); $("#p2").text(tp1); }
Т.е. сначала в переменную tp1 мы запишем текстовое содержимое первого абзаца (первая строка), а затем передадим его во второй абзац (вторая строка).

Теперь давайте рассмотрим методы, которые позволяют манипулировать вставляемыми элементами.
  • append(content) - добавляет content внутрь всех выбранных элементов ПОСЛЕ существующего контента.
    Пример:
    $("p").append("<b>Привет</b>");
    Данная инструкция добавит в конец параграфа текст "Привет" жирным шрифтом.


  • appendTo(content) - обратная операция, добавляет В content все выбранные элементы.
    Пример:
    $("p").appendTo("#main");
    Данная инструкция добавит параграф в конец элемента с идентификатором "main".

    Иными словами:
    $(A).append(B) - добавит В в конец А.
    $(A).appendTo(B) - добавит А в конец В.


  • prepend(content) - добавляет content внутрь всех выбранных элементов ДО существующего контента.
    Пример:
    $("p").prepend("<b>Привет</b>");
    Данная инструкция вставит в начало параграфа текст "Привет" жирным шрифтом.


  • prependTo(content) - обратная операция, добавляет В content все выбранные элементы.
    Пример:
    $("p").prependTo("#main");
    Данная инструкция вставит параграф в начало элемента с идентификатором "main".

    Иными словами:
    $(A).prepend(B) - добавит В в начало А.
    $(A).prependTo(B) - добавит А в начало В.


  • after(content) - добавляет content ПОСЛЕ всех выбранных элементов (заметьте ПОСЛЕ элемента, а не в конец элемента, как в случае с append.
    Пример:
    $("p").after("<b>Привет</b>");
    Данная инструкция вставит после параграфа текст "Привет" жирным шрифтом.


  • befor(content) - добавляет content ДО всех выбранных элементов (заметьте ДО элемента, а не в начало элемента, как в случае с prepend.
    Пример:
    $("p").befor("<b>Привет</b>");
    Данная инструкция вставит перед параграфом текст "Привет" жирным шрифтом.


  • insertAfter(content) - вставляет все выбранные элементы ПОСЛЕ content-а .
    Пример:
    $("p").insertAfter("#main");
    Данная инструкция вставит параграф после элемента с идентификатором "main".

    Иными словами:
    $(A).after(B) - вставит В после А.
    $(A).insertAfter(B) - вставит А после В.


  • insertBefore(content) - вставляет все выбранные элементы ПЕРЕД content-ом .
    Пример:
    $("p").insertBefore("#main");
    Данная инструкция вставит параграф перед элементом с идентификатором "main".

    Иными словами:
    $(A).before(B) - вставит В перед А.
    $(A).insertBefore(B) - вставит А перед В.


Рассмотрим пример. Давайте сделаем так, чтобы при нажатии на кнопку "Добавить" в красном прямоугольнике появлялись желтые квадратики (один клик - один квадратик).


Код html-страницы состоит из одного div-а и одной кнопки:
<html> <head> <title>jQuery html</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery-1.2.6.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <div id="red_sk"></div> <input type="button" value="Добавить!" onclick="addYellowSquare();"> </body> </html>
На странице style.css как всегда определяем стили:
#red_sk{ width:700px; height:100px; background:red; } .yellow_square{ float:left; width:80px; height:80px; background:yellow; margin:5px; }
Ну а код самой функции совсем короткий:
function addYellowSquare(){ $("#red_sk").prepend("<div class='yellow_square'></div>"); }
Вот так все просто. Но продолжим рассматривать сами методы:
  • wrap(html) - оборачивает каждый элемент в элемент обертку.
    Пример:
    $("p").wrap("<span></span>");
    Данная инструкция обернет каждый параграф span-ом.


  • wrapAll(html) - оборачивает все элементы в ОДИН элемент обертку.
    Пример:
    $("p").wrapAll("<span></span>");
    Данная инструкция обернет все параграфы одним span-ом.


  • wrapInner(html) - оборачивает внутренне содержание каждого элемента.
    Пример:
    $("p").wrapInner("<em></em>");
    Данная инструкция выделит содержимое каждого параграфа курсивом.


  • replaceWith(content) - замещает одни элементы другими.
    Пример:
    $("span").replaceWith("<div></div>");
    Данная инструкция заменит все span-ы div-ами.


  • replaceAll(selector) - обратная операция, т.е. все selector-ы будут поменяны на элементы.
    Пример:
    $("span").replaceAll("<div></div>");
    Данная инструкция заменит все div-ы span-ами.


  • empty() - удаляет из элемента все узлы-потомки, включая текст.
    Пример:
    $("span").empty();
    Данная инструкция удалит все содержимое span-ов.


  • remove() - удаляет сами элементы.
    Пример:
    $("span").remove();
    Данная инструкция удалит все span-ы.


  • clone() - клонирует элементы.
    Пример:
    $("b").clone().append("div");
    Данная инструкция возьмет элементы, выделенные жирным и добавит их в div.


В последнем примере, мы коснулись еще одного аспекта jQuery, а именно поддержки этой библиотекой цепочки вызовов. Т.е. вы можете вызывать несколько методов в одной строке, отделяя их точкой. Насколько это удобно? Зависит от Вас. Если это Вас не путает, то используйте на здоровье. В дальнейшем мы часто будем использовать такой вид записи.

Напоследок, давайте сделаем еще один пример. Пусть у нас есть некоторый список, и мы хотим разрешить пользователям добавлять в него пункты:
Наши города:
  • Архангельск
  • Москва
  • Иркутск
Дополните список:
Код html-страницы:
<html> <head> <title>jQuery html</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery-1.2.6.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> Наши города: <ul id="jq"> <li>Архангельск</li> <li>Москва</li> <li>Иркутск</li> </ul> Дополните список: <input type="text" id="user_text" size="20" maxlength="50"> <input type="button" value="Добавить" onclick="addSpisok();"> </body> </html>
А код функции:
function addSpisok(){ var jq=$('#user_text').val(); $('#jq').append('<li>'+jq+'</li>'); }
Вот так просто можно делать многие вещи с помощью jQuery. Вы уже достаточно знаете, попробуйте сделать что-нибудь самостоятельно, используя изученные методы. Например, попробуйте нарисовать шахматную доску (8 х 8 клеток, для тех, кто не помнит), а в следующий раз посмотрим как это можно сделать.



Предыдущий урок Вернуться в раздел Следующий урок 
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.