Методы для работы с html

Сначала рассмотрим основные методы работы с html, а затем уже методы для манипуляции с этими элементами. Итак, основные методы:

html(val) — добавляет html-код в выбранные элементы. Пример:

$(«div.sp»).html(«<span>Привет</span>»);

Данная инструкция добавит во все div-ы с классом sp, span-ы с текстом «Привет».

text() / val() — возвращает текстовое содержимое элемента / значение элемента. Пример:

$(«p»).text();

Данная инструкция вернет текст из параграфа.

text(val) / val(val) — установит текст для элемента / значение для элемента. Пример:

$(«p»).text(«Привет!»);

Данная инструкция в параграфе напишет слово «Привет!».

Теперь давайте рассмотрим методы, которые позволяют манипулировать вставляемыми элементами.

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).insert A fter(B) — вставит А после В.

insertBefore(content) — вставляет все выбранные элементы ПЕРЕД content-ом . Пример:

$(«p»).insertBefore(«#main»);

Данная инструкция вставит параграф перед элементом с идентификатором «main».

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

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

Эффекты jQuery

Код html-страницы состоит из одного div-а и одной кнопки:

<html>
  <head>
    <title>jQuery</title>
    <link rel="stylesheet" type="text/css" href="cascade.css">
 <script type="text/javascript" src="jquery-1.7.1.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
      <div id="blue_sk"></div>
 <input type="button" value="Добавить!" 
 onclick="addYellowSquare();">
  </body>
</html>

На странице style.css как всегда определяем стили:

 #blue_sk{
    width="99%";
    height:100px;
    background:blue;
}
.yellow_square{
    float:left;
    width="99%";
    height:80px;
    background:yellow;
    margin:5px;
}

Ну а код самой функции совсем короткий:

function addYellowSquare(){
    $("#blue_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, а именно поддержки этой библиотекой цепочки вызовов. Т.е. вы можете вызывать несколько методов в одной строке, отделяя их точкой. Насколько это удобно? Зависит от Вас. Если это Вас не путает, то используйте на здоровье. В дальнейшем мы часто будем использовать такой вид записи.

Напоследок, давайте сделаем еще один пример. Пусть у нас есть некоторый список, и мы хотим разрешить пользователям добавлять в него пункты:

Эффекты jQuery

Как Вас зовут?

Александр
Виктор
Евгений

Дополните список:

Код html-страницы:

<html>
  <head>
    <title>jQuery</title>
    <link rel="stylesheet" type="text/css" href="cascade.css">
 <script type="text/javascript" src="jquery-1.7.1.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. Вы уже достаточно знаете, попробуйте сделать что-нибудь самостоятельно, используя изученные методы.

1 2 3 4 5 6

Рекомендуем к прочтению

Добавить комментарий Отменить ответ