Slyweb
На разработку сайта! Скидки 50%!
Поиск CSS свойств и HTML элементов:
поиск



Все CSS свойства и HTML элементы справочника

Зачем и почему эта статья нужна Вам.

Основное значение данной статьи - научить начинающих разработчиков пользоваться основными методами jQuery при работе с элементами HTML.

Оглавление. CSS и jQuery.

1. Что такое jQuery и зачем он нужен?
2. Возможности jQuery в HTML.
3.1. Методы jQuery для HTML элементов.
3.2. Практика. Методы обхода структуры DOM.
4. Заключениме.

1. Что такое jQuery и зачем он нужен?

jQuery - совокупность javascript функций, упрощающих написание скриптов на javascript. По сути своей jQuery представляет собой javascript.

Для того чтобы использовать jQuery необходимо подключить файл js(javascript). На сайте slyweb.ru, - на основной странице сайта или на основной странице руководства, в блоке для загрузки jquery Вы можете скачать последнюю версию jquery.

  1. jQuery в сжатом виде - jquery.1.4.4.js(26 k/b)
  2. jQuery для разработчиков - jquery.1.4.4.js (179 k/b)
Я рекомендую использовать последнюю минимизированную версию jQuery, хотя jQuery 1.3.2, обладает почти теми же возможностями.

Для использования jQuery на Ваших страницах подключите js файл, например:

  1.<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
Теперь перейдем к возможностям jQuery в CSS.

2. Возможности jQuery в HTML

Прежде всего jQuery - это быстрый и легкий доступ к HTML элементам. Сравните:

  1.$("#mydiv")
с его аналогам на яваскрипт:
  1.document.getElementById("#mydiv")
  2.)
Нетрудно заметить разницу в размере кода. Однако компактность jQuery кода не главное преимущество, по моему мнению, основное преимущество jQuery - легкость в изучении и огромные кроссбраузерные возможности при разработке сайта!

jQury позволяет работать с любыми HTML элементами. В нём присутствуют методы копирования, перемещения, удаления и создания HTML элементов. Чтобы создать HTML элемент можно написать html код:

  1.$("body").append("<div><p>Привет</p></div>");
  2.
представьте себе, чего бы это вам стоило на javascript:
  1.document.body.appendChild(document.createElement("div").appendChild(document.createElement("p").appendChild(document.createTextNode("Привет"))));
  2.

Как видите скорость написания увеличивается, если использовать jQuery.

3. Методы jQuery для HTML элементов.

Основными методами jQuery, предназначенными для манипуляции HTML элементами следует считать:

  1. html("val")
  2. html()
  3. remove()
  4. clone()
  5. each()
  6. append()

Рассмотрим каждый из вышеуказанных методов jQuery:

html("val"). С помощью метода html("val") создаётся html структура элементов либо единичный элемент. Следует помнить, что используя только данный метод, невозможно новую структуру элементов или вновь созданный элемент присоединить к элементам, созданным в момент загрузки страницы. Для этого необходимо использовать методы присоединения - .append(), .prepend(), .after(), .before(). Например, ниже мы не просто создаём новый элемент p, но и добавляем в структуру DOM страницы:

  1.$("div").append("<p>Привет</p>");
Если бы Вы использовали метод html, а не append например так:
  1.$("div").html("<p>Привет</p>");
то в результате бы у Вас получилось замещение содержимого элемента DIV новой структурой, а не добавление к элементу.

Вторая разновидность метод html(), наоборот, вместо создания новой структуры копируют существующие элементы. Пример в котором содержимое элемента div копируется вместе с тегами.

  1.var struct = $("div").html();
clone(). Заранее отмечу, что достичь тех же результатов можно используя метод clone(), разница лишь в том что объект сразу не встраивается в структуру а копируется в новый jquery объект. Пример clone:
  1.$("div").clone().html()

remove(). Метод удаления элементов HTMl. Удалим элемент с классом .hello

  1.$('.hello').remove();
для этого нам понадобится следующая структура элементов:
  1.<div class="container">
  2. <div class="hello">Hello</div>
  3. <div class="goodbye">Goodbye</div>
  4.</div>
Результат будет следующим:
  1.<div class="container">
  2. <div class="goodbye">Goodbye</div>
  3.</div>
Данный пример был взят с официальной страницы руководства jQuery.

Следующим в списке у нас идёт метод each(). Почему данный метод относится к числу методов для работы с HTML? Потому что он позволяет проходить циклом сразу по нескольким элементам, но это не его главная особенность, по-мимо этого метод each() имеет функцию обратного вызова что очень полезно для обработки как содержимого элемента так и самого элемента.

  1.$("div").each(function(){
  2.alert($("p", this).length);
  3.});
В этом примере, с помощью метода each, происходит подсчет количества элементов p для каждого элемента div. Следующий пример имеет большую практическую значимость:
  1.$("div").each(function(){
  2.$("p", this).remove();
  3.});
В примере происходит удаление элементов p, расположенных в элементе div.

3.2 Практика. Методы обхода структуры DOM.

Я думаю с методами создания, модификации, изменения и удаления элементов HTML Вы разобрались. Поэтому следует перейти к не менее важным методам, используемых для обхода структуры DOM. Как Вам должно быть известно каждая страница имеет древовидную структуру, по которой допустимо перемещаться методами jQuery. Если Вы заинтересованы в углублённом изучении методов обхода структуры DOM, то можете перейти в справочник jQuery данного сайта, который содержит целую главу под названием "Обход элементов HTML". Ниже я разберу только наиболее часто востребованные методы обхода структур структуры DOM.

Методы обхода элементов:

  1. .children()
  2. .find()
  3. .next()
  4. .nextAll()
  5. .parent()
  6. .parents()
  7. .prev()
  8. .prevAll()
  9. .siblings()

.children(). Метод предоставляет доступ ко все дочерним элементам родительского элемента.

К примеру ниже мы выбираем только дочерние элементы (div с классом "hello" и "goodbye")

  1.$(document).ready(function(){
  2.$('div').children().css("color","blue");
  3.});
Для выполнения этого примера структура HTML должна быть следующей:
  1. <div class="nochild">Это не дочерний элемент</div>
  2.<div class="container">
  3. <div class="hello">Дочерний элемент
  4. <div class="hello" style="color:red;">Дочерний элемент</div></div>
  5. <div class="goodbye">Дочерний элемент</div>
  6.</div>
  7.

.find(). Иногда требуется отыскать определенные элементы внутри других элементов, структура которых может не иметь заранее определенного характера, для этого вполне сгодится метод find().

Выберем все элементы span и применим некоторые CSS свойства:

  1.$(document).ready(function(){
  2.$('*').find("span").css{"color":"blue","text-decoration":"underline line-through"});
  3.});
Для выполнения этого примера структура HTML должна быть следующей:
  1. <div class="nochild">Это не дочерний элемент</div>
  2.<div class="container">
  3. <div class="hello">Дочерний элемент
  4. <span class="hello" style="color:red;">Дочерний элемент span</span></div>
  5. <div class="goodbye">Дочерний элемент</div>
  6. <span class="hello">Элемент span</span>
  7.</div>
  8.
Как видите таким не хитрым способом можно приукрасить определённые элементы на странице, либо использовать данную функцию для более сложных целей, например для поиска извлечения html примеров и превращения их в "живые" примеры.

.next(). Метод предоставляет доступ к немедленно следующему за текущим элементом элементу. Пример:

  1.$(document).ready(function(){
  2.$('.hello').next().css({"color":"blue","text-decoration":"underline line-through"});
  3.});
Для выполнения этого примера структура HTML должна быть следующей:
  1. <div class="nochild">Это не дочерний элемент</div>
  2. <div class="nochild">Это не дочерний элемент</div>
  3.<div class="container">
  4. <div class="hello">Дочерний элемент
  5. <span class="hello" style="color:red;">Дочерний элемент span</span></div>
  6. <div class="goodbye">Этот элемент следует за элементом с классом "hello"</div>
  7. <span class="hello">Элемент span</span>
  8.</div>
  9.

.nextAll(). Метод предоставляет доступ ко всем элементам следующим за текущим элементом.

  1.$(document).ready(function(){
  2.$('.hello').nextAll().css({"color":"blue","text-decoration":"underline line-through"});
  3.});
Для выполнения этого примера структура HTML должна быть следующей:
  1. <div class="nochild">Это не дочерний элемент</div>
  2. <div class="nochild">Это не дочерний элемент</div>
  3.<div class="container">
  4. <div class="hello">Дочерний элемент
  5. <span class="hello" style="color:red;">Дочерний элемент span</span></div>
  6. <div class="goodbye">Этот элемент следует за элементом с классом "hello"</div>
  7. <span class="hello">Элемент span</span>
  8.</div>
  9.
В результате будут перечеркнуты элементы с классом "goodbye" и "hello".

.parent(). Метод предоставляет доступ к родительским элементам.

  1.$(document).ready(function(){
  2.$('.hello').parent().css({"color":"blue","text-decoration":"underline line-through"});
  3.});
Для выполнения этого примера структура HTML должна быть следующей:
  1. <div class="nochild">Это не дочерний элемент</div>
  2. <div class="nochild">Это не дочерний элемент</div>
  3.<div class="container">
  4. <div class="hello">Дочерний элемент
  5. <span class="hello" style="color:red;">Дочерний элемент span</span></div>
  6. <div class="goodbye">Этот элемент следует за элементом с классом "hello"</div>
  7.</div>
  8.
В результате будут перечеркнуты элементы с классом "goodbye" и "hello" так как родительским элементом в нашем случае будет элемент div с классом "container", следовательно, все содержимое данного элемента будет перечеркнуто и отображено синим цветом.

Следующие два метода имеют то же значение, что и методы .next() и .nextAll(), только в противоположную сторону:

.siblings(). В заключение я расскажу о методе .sibligns(). Метод .siblings() предоставляет доступ ко всем элементам, соотносящихся с текущим элементом как "брат и сестра". В следующем примере все элементы, соотносящиеся как "брат и сестра" относительно элемента с классом "hello" будут выделены жирным шрифтом.

  1.$(document).ready(function(){
  2.$('.hello').siblings().css({"color":"blue","text-decoration":"underline line-through"});
  3.});
Для выполнения этого примера структура HTML должна быть следующей:
  1. <div class="nochild">Это не дочерний элемент</div>
  2. <div class="nochild">Это не дочерний элемент</div>
  3.<div class="container">
  4. <div class="hello">Дочерний элемент
  5. <span class="hello" style="color:red;">Дочерний элемент span</span></div>
  6. <div class="goodbye">Этот элемент следует за элементом с классом "hello"</div>
  7.</div>
  8.

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

4. Заключение.

Материал изложенный поможет Вам разобраться в jQuery при использовании его в HTML. Успехов и до встреч!


Александр Ермаков. Хостинг - www.pwstudio.org