<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

В рамках упражнений курса Вы параллельно со мной будете создавать свою большую программу на Java, что даст Вам необходимую практику, после которой для Вас уже не будет разницы, какого размера создавать программы.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Работа с выборкой элементов на jQuery

Работа с выборкой элементов на jQuery

В предыдущей статье мы разбирали, как сделать выборку элементов в jQuery, однако, сама по себе выборка не имеет смысла, если с ней ничего не делать. И в этой статье мы разберём, как мы можем работать с выборкой элементов на jQuery.

Давайте разберём для начала следующий пример

<div id="block"><span>Блок</span></div>
<script type="text/javascript">
  var element = $("#block span").clone(); // Клонируем элемент span внутри #block
  element.text("Новый блок"); // Устанавливаем текстовое содержимое у элемента
  $("#block").append(element); // Добавляем элемент внутрь #block
</script>

В данном примере мы, во-первых, разобрали метод clone(). Его цель создать копию элемента для того, чтобы мы могли управлять новым элементом, не затрагивая старый. Далее мы поменяли текстовое содержимое с "Блок", доставшееся нам от элемента, который мы склонировали, на "Новый блок". В конце мы уже добавили с помощью метода append() наш созданный блок внутрь элемента с id="block".

Помимо клонирования элементов и изменения текстового содержимого, также используется возможность задания CSS-свойств для элементов:

<div id="red"><span>Блок</span></div>
<div id="green"><span>Блок</span></div>
<script type="text/javascript">
  $("div").css("font-size", "20px"); // Устанавливаем размер шрифта для всех div
  $("#red").css("color", "#f00"); // Устанавливаем красный цвет для id="red"
  $("#green").css("color", "#0f0"); // Устанавливаем зелёный цвет для id="green"
</script>

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

Разберём ещё один пример работы с выборкой элементов на jQuery:

<div>
  <a href="#">Ссылка</a>
  <img src="image.jpg" alt="" />
  <img src="image.jpg" alt="" />
  <img src="image.jpg" alt="" />
</div>
<script type="text/javascript">
  var elements = $("div").children(); // Получаем дочерние элементы
  for (var i = 0; i < elements.length; i++) {
    $(elements.get(i)).attr("title", "Заголовок"); // Устанавливаем атрибут title="Заголовок"
  }
</script>

В данном примере мы получили дочерние элементы и установили у них атрибуты. Но здесь самое главное не это. Обратите внимание, что метод attr() применяется именно к объекту jQuery. То есть написать так: "elements.get(i).attr" - нельзя, а только так "$(elements.get(i)).attr". Запомните, что если Вы используете метод, принадлежащий jQuery, а не JavaScript, то обязательно надо обёртывать элементы в $().

И, напоследок, ещё разберём один пример:

<div class="class_1"></div>
<div class="class_2"></div>
<div class="class_3"></div>
<script type="text/javascript">
  var elements = $("div"); // Получаем все div
  for (var i = 0; i < elements.length; i++) {
    var element = elements.get(i); // Берём i-й элемент из выборки
    /* Далее с помощью метода html() устанавливаем соответствующий HTML-код внутри элемента */
    if (element.className == "class_1") $(element).html("<p>Это блок с классом №1</p>");
    else if (element.className == "class_2") $(element).html("<p>Это блок с классом №2</p>");
    else $(element).html("<p>Это блок с другим классом</p>");
  }
</script>

Здесь стоит обратить внимание на "element.className". Как видите, здесь нет $(). Так написано потому, что свойство className встроено в JavaScript. А вот метод html() принадлежит jQuery, поэтому мы и пишем "$(element).html(...)".

Несмотря на то, что статья получилась немного больше обычного, здесь всё равно разобраны далеко не все возможности по работе с элементами на jQuery. Более подробно по работе с выборкой элементов на jQuery я рассказывал здесь.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.