Уроки:


  
HTML
  
  
CSS
  
  
PHP
  
  
JavaScript
  
  
jQuery
  
  
PHP+MySQL
  
  
Ajax
  

  Разделы:


  В помощь:


  Ещё:



  Авторизация:


  логин:   
  пароль: 
— Алло! Служба поддержки? Вы не знаете, почему у меня изображение на мониторе дрожжит, когда я грызу сухари?

  Тренажер интуиции:


Тренажер интуиции


  Видеокурсы:


Бесплатный видеокурс: "Cайт-визитка за 1 день"

видеокурс: Сайт-визитка за один день



  Опрос:



  Топ комментаторов:


40

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

  Моя группа в контакте:



Методы для работы с 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:700px;
    height:100px;
    background:blue;
}
.yellow_square{
    float:left;
    width:80px;
    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

Проверьте свою интуицию:


Мобильную версию можно скачать в google play

Комментарии


Нет комментариев. Вы можете стать первым !

Ваш комментарий



Почта: info@web-shpargalka.ru
Сообщить друзьям:
Главная | Форум | Отзывы | Обо мне | Мои курсы | Работы учеников | Конкурсы | Обратная связь