SiteIS

jQuery - безграничные возможности в дизайне Вашего сайта!

- Один из самых популярных на сегодня среди веб разработчиков фреймворк

- Позволяет быстро и легко создать потрясающие веб-приложения

- Удивительно красивые анимационные эффекты

- Улучшение пользовательского интерфейса

Проверка наличия элемента в наборе

Метод: .is();

Проверяет наличие элемента в отобранном наборе. В случае положительного результата возвращает true, в случае отрицательного - false

  • Задача 1:

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

    Показать решение
    • Решение:

      $(function () {
      	alert($('div.first span').is('span') ? 'Искомые элементы есть в блоке' : 'В блоке нет ни одного элемента SPAN');
      });
      

      Пояснение:

      Для решения задачи с помощью селектора $('div.first span') отберем все элементы span в блоке div с классом first.
      Проверяем их наличие с помощью метода .is(), где в качестве параметра указываем искомый элемент .is('span').
      С помощью условного выражения ? 'Искомые элементы есть в блоке' : 'В блоке нет ни одного элемента SPAN' выводим на экран сообщение Искомые элементы есть в блоке, если метод возвращает true (т.е. элементы span присутствуют в блоке), или В блоке нет ни одного элемента SPAN, если метод возвращает false (т.е. элементы span в блоке не найдены).

      Результат:

      При загрузке страницы, к которой подключен скрипт, в случае, если в блоке div с классом first есть хотя бы один элемент span на экране появится модальное окно с сообщением Искомые элементы есть в блоке. Если в блоке div с классом first ни одного элемента span найдено не будет, то в модальном окне выведется сообщение В блоке нет ни одного элемента SPAN.

  • Задача 2:

    - отобрать все элементы li в списке. По событию click на текущем элементе сделать следующее:
    -- если это первый элемент списка - изменить цвет его шрифта на зеленый (#00cc00);
    -- если у элемента li есть класс .blue или .red - обвести их соответственно однопиксельной рамкой синего (#0000ff) или красного цвета (#cc0000);
    -- если в элементе li содержится текст Последний элемент списка и изменить фон элемента на желтый (#ffff00);
    -- если элемент не подходит не под одно, из выше перечисленных условий - изменить цвет его шрифта на синий (#0000ff).

    Показать решение
    • Решение:

      $(function () {
          $('ul li').click(function () {
      		if($(this).is('li:first-child')) {
      			$(this).css('color', '#00cc00');
      		} else if($(this).is('.blue')) {
      			$(this).css('border', '1px solid blue');
      		} else if($(this).is('.red')) {
      			$(this).css('border', '1px solid red');
      		} else if($(this).is(':contains("Последний элемент списка")')) {
      			$(this).css('background', '#ffff00');
      		} else {
      			$(this).css('color', 'blue');
      		}
      	});
      });
      

      Пояснение:

      Для решения задачи сначала с помощью селектора $('ul li') находим все элементы li и указываем, что при щелчке на элементах бдуд совершаться какие то действия .click(function () {...});. Далее с помощью условия if ... else описываем, что должно происходить:
      - проверяем, является ли элемент li, по которому кликнули, первым дочерним элементом списка if($(this).is('li:first-child')). Если это так, то изменяем цвет его шрифта на зеленый $(this).css('color', '#00cc00'); Если условие ложно (кликнули не по первому элементу), переходим ко второму варианту.
      - с помощью условия else if($(this).is('.blue')) проверяем, присвоен ли элементу li, по которому кликнули, класс blue. Если это так, то обводим текущий объект синей рамкой $(this).css('border', '1px solid blue');;
      - с помощью условия else if($(this).is('.red')) проверяем, присвоен ли элементу li, по которому кликнули, класс red. Если это так, то обводим текущий объект красной рамкой $(this).css('border', '1px solid red');;
      - с помощью условия else if($(this).is(':contains("Последний элемент списка")')) проверяем, содержится ли в элементе li, по которому кликнули, строка Последний элемент списка. Если это так, то изменяем фоновый цвет элемента на желтый $(this).css('background', '#ffff00');;
      - если ни одно из выше описанных условий не подходит (элемент li по которому кликнули не обладает ни одним из перечисленных свойств), то таким элементам изменяем цвет шрифта на синий.

      Результат:

      При загрузке страницы, к которой подключен скрипт, при клике на элементе li, который является первым элементом списка, у него изменится цвет шрифта. При клике на элементах li, которые имеют класс .blue или .red, вокруг них появится синяя или красная рамка соответственно. При клике на элементе, который содержит текст Последний элемент списка, его фоновый цвет изменится на желтый. При клике на элементах, не обладающих перечисленными выше свойствами, цвет их шрифта изменится на синий.

Следует учитывать, что метод .is(); не делает выборку из уже отобранных, а лишь указывает на наличие в наборе искомых элементов.

Автор: Super User