Два очень похожих метода библиотеки jQuery, служащих для фильтрации выборки - метод

1
.has()
и метод
1
.hasClass()
.

И действительно, оба этих метода похожи между собой. Чтобы было понятно, лучше сразу перейду к примерам.

Метод .has()

Метод

1
.has()
фильтрует элементы, имеющие в своем составе указанные в
1
.has()
селекторы.

Простой пример:

$('li').has('a').addClass('active');

То есть: всем элементам

1
li
, имеющим в качестве потомков (в своем составе) элемент
1
a
, присвоить класс
1
.active
.

На лицо, как бы это сказать, обратная фильтрация - справа налево. Обычно все методы библиотеки jQuery работают слева направо.

Этот метод чем-то похож на метод

1
.parent()
. В качестве примера рассмотрим такой вариант:

$('a').parent('li').addClass('active');

… что читается таким образом: всем элементам

1
li
, являющимся родителями элементов
1
a
, присвоить класс
1
.active
.

Напомню, что метод

1
.has()
работает именно с селекторами и имеет такой синтаксис:

.has('selector')

Метод .hasClass()

Метод

1
.hasClass()
очень похож по принципу действия на предыдущий метод
1
has()
- но это только кажущееся впечатление.

Во-первых, как понятно из имени метода

1
.hasClass()
, что он работает с классами, а не селекторами.

То есть, синтаксис метода

1
.hasClass()
таков:

.hasClass('class')

Во-вторых, метод

1
.hasClass()
возвращает логическое
1
true
или
1
false
, в отличие от метода
1
.has()
, который возвращает массив объектов, доступных для дальнейшей обработки.

Простой пример:

if ($('li').hasClass('active')) {
  $('li').find('a').addClass('activeLink');
} else {
  $('li').find('a').addClass('inactiveLink');
}

… что читается таким образом: если элементы

1
li
имеют класс
1
.active
, то всем элементам
1
a
, являющимся потомками элементов
1
li
, присвоить класс
1
.activeLink
; иначе всем элементам
1
a
присвоить класс
1
.inactiveLink
.

Стоит обратить внимание, что в случае метода

1
.hasClass()
имеет место быть обычный способ фильтрации элементов - слева направо; выборка сужается по мере появления новых условий.

Вот такая картина получается, с двумя этими методами -

1
.has()
и
1
.hasClass
.

На этом все.


Осуществляет поиск элементов внутри уже выбранных элементов.

Метод имеет варианты использования и соответствующий синтаксис:

1
.find(selector)
- ищет элементы, соответствующие заданному селектору, внутри выбранных элементов.

1
.find(element)
- осуществляет поиск элемента
1
element
внутри выбранных элементов. Параметр
1
element
задается в виде DOM-элемента.

1
.find(jQuery object)
- осуществляет поиск элементов внутри выбранных элементов, оставляя те, которые содержатся в заданном объекте jQuery.

Примеры использования.

  • вернет все элементы
    1
    
    span
    , находящиеся внутри div-элементов:
$('div').find('span')
  • вернет все элементы с классом
    1
    
    .bigBlock
    , находящиеся внутри div-элементов:
$('div').find('.bigBlock')

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

1
.find()
.

Например, искать span-элементы, лежащие внутри div’ов правильнее будет так:

$('div span')

Метод

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

// найдем все ul-элементы на странице
var $ulElements = $('ul');
// найдем li-элементы с классом .userBox внутри $ulElements
$ulElements.find('li.userBox');

// сокращенный вариант записи
var $ulElements = $('ul').find('li.userBox');

Так же

1
.find()
удобен для использования в цепочках методов:

$('ul') // найдем все ul-элементы на странице
  .addClass('listElements') // добавим ul'ам класс .listElements
  .find('li.userBox') // найдем li-элементы с классом .userBox внутри ul'ов
  .remove(); // и удалим их

// сокращенный вариант записи
$('ul').addClass('listElements').find('li.userBox').remove();

Работа метода

1
.find()
схожа с методом
1
.children()
, который осуществляет поиск подходящих дочерних элементов.

Отличие заключается в том, что

1
.find()
проводит поиск не только среди дочерних элементов, но и внутри них тоже (другими словами - поиск проходит на всех уровнях иерархии DOM, в то время как
1
.children()
ищет только на одном уровне).

Пример метода .find()

Внутри каждого ul-элемента найдем первый li-элемент и последний p-элемент:

// найдем и сохраним все ul-элементы
var $matched = $('ul');

// выделим их
$matched.addClass('matched');

// найдем внутри уже выбранных элементов все требуемые и выделим их, добавив класс .result
$matched.find('li:first, p:last').addClass('result');

// сокращенный вариант записи
var $matched = $('ul').addClass('matched').find('li:first, p:last').addClass('result');

Фильтрация элементов помощью .find()

Кроме поиска, .find() может осуществлять своеобразную фильтрацию.

var $span = $('span'); // создать переменную $span и поместить в нее результат выборки по элементам span
$('p').find($span).css('color','blue'); // найти все элементы p, среди этих найденных элементов найти все элементы span и расскрасить их

Материал статьи полностью основан на http://jquery.page2page.ru и не претендует на оригинальность.

Две функции-близнеца, предназначенные для управления видимостью элементов на странице. Это осуществляется через CSS-свойство

1
display
(замечание: по внимательном перечтении оказалось не все так просто - в этой “магии” задействованы не только CSS-свойство
1
display
, но также
1
width
,
1
height
,
1
opacity
; и даже
1
margin
и
1
padding
!).

После скрытия элемента значение его CSS-свойство становится равным

1
dispaly: none
. Перед появлением элемента его CSS-свойство
1
display
изменяет свое значение на противоположное от
1
none
.

1
duration
— продолжительность выполнения анимации (появления или скрытия). Может быть задана в миллисекундах или строковым значением ‘fast’ или ‘slow’ (200 и 600 миллисекунд). Если этот параметр не задан, анимация будет происходить мгновенно, элемент просто появится/исчезнет.

1
callback
— функция, заданная в качестве обработчика завершения анимации (появления или скрытия).

Примеры использования:

  • мгновенно скроет элемент с идентификатором
    1
    
    #leftFit
    .
$("#leftFit").hide();
  • мгновенно покажет элемент с идентификатором
    1
    
    #leftFit
    :
$("#leftFit").show();
  • в течении 1/3 секунды скроет элемент с идентификатором
    1
    
    #leftFit
    :
$("#leftFit").hide(300);
  • в течении 600 миллисекунд вернет видимость элементу с идентификатором
    1
    
    #leftFit
    :
$("#leftFit").show("slow")

Можно скрывать и показывать элементы с помощью сворачивания/разворачивания (за счет изменения высоты). Это делают функции

1
slideUp()
,
1
slideDown()
.

Медленно скрывает и раскрывает все видимые параграфы, длительность анимационных эффектов — 600 миллисекунд:

$('button').click(function () {
  $('p').hide('slow');
});

$('button').click(function() {
  $('p').show('slow');
});

Использование callback-функции:

$('#clickme').click(function() {
  $('#book').hide('slow', function() {
    alert('Animation complete.');
  });
});

$('#clickme').click(function() {
  $('#book').show('slow', function() {
    alert('Animation complete.');
  });
});

Материал данной статьи основан на ресурсах:

… и не претендует на оригинальность.


Маленькое вступление. Этой статьей я начинаю серию, посвященную работе с библиотекой jQuery. Точнее, я буду с помощью этих микро-статей самостоятельно изучать jQuery. И хотя при этом меня не оставляет постоянная мысль, что я делаю глупую и пустую работу (есть масса куда более лучших по объему и качеству ресурсов на эту тематику), все же мне так хочется. И это желание также продолжает основную идею этого бложика, его цель и смысл существования.

Смысл жизни данного бложика - быть записной книжкой для своего хозяина. Помогать ему в освоении безбрежных просторов Web по принципу “прочитал-усвоил-пересказал”. Ибо такой принцип мне кажется наиболее эффективным в деле изучения чего-то нового, особенно - если этого нового очень много.

Кроме того, мне работа с библиотекой jQuery нравиться! Она для меня - легкая и увлекательная игра; тот редкий случай, когда изучение программирования для меня дается одновременно очень легко и увлекательно. Чаще - что-то одно из двух.

Хватит лирики - переходим к практике.

Функция on()

Функция

1
.on()
является универсальным способом обработки событий на странице с помощью библиотеки jQuery. Почему универсальным? Давайте взглянем на синтаксис функции
1
.on()
:

.on(event, eventHandler);

… здесь

1
event
- это стандартное событие языка JavaScript:
1
blur
,
1
focus
,
1
focusin
,
1
focusout
,
1
load
,
1
resize
,
1
scroll
,
1
unload
,
1
click
,
1
dblclick
,
1
mousedown
,
1
mouseup
,
1
mousemove
,
1
mouseover
,
1
mouseout
,
1
mouseenter
,
1
mouseleave
,
1
change
,
1
select
,
1
submit
,
1
keydown
,
1
keypress
,
1
keyup
,
1
error
.

1
eventHandler
- это функция, обработчик события. Она создается для указанного события.

Хватит слов - краткий пример все “расскажет” лучше всяких слов.

$('#foo').on('click', function(){
  alert('Вы нажали на элемент "foo"');
});

… или так -

function myFunction(){
  alert('Вы нажали на элемент "foo"');
});

$('#foo').on('click', myFunction);

То есть, при клике мыши (событие

1
click
) на элементе с идентификатором
1
#foo
запускается обработчик этого события - функция, которая в данном случае является всего лишь командой
1
alert
. Но эта функция может быть и более сложной, конечно.

Другими словами, вызывая функцию

1
.on()
, мы передаем ей два аргумента - событие (которое нужно отслеживать) и обработчик этого события. Поэтому функция
1
.on()
и называется универсальной функцией.

Существуют менее универсальные функции - одноименные (событиям) функции под каждое конкретное событие. Для сравнения, таких два примера абсолютно равнозначны, но имеют разный синтаксис:

$('#foo').click(function(){
  alert('Вы нажали на элемент "foo"');
})
$('#foo').on('click', function(){
  alert('Вы нажали на элемент "foo"');
});

Важное замечание: функция

1
.on()
была введена в jQuery взамен трех функций
1
.live()
,
1
.bind()
,
1
.delegate()
, которые считаются устаревшими и не поддерживаются современными версиями jQuery, начиная с версии 1.8.0.

В принципе, на этом можно остановиться, говоря о функции

1
.on()
. Для начала - этого достаточно.


В JavaScript имеется обычный оператор условия

1
if-else
, с которым я был знаком уже давно. Но вот недавно познакомился с его разновидностью - тернарным оператором
1
?
. Да, именно так - оператор вопросительный знак.

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

Сначала - что значит тернарный оператор? В JavaScript существуют унарные операторы, бинарные операторы и вот теперь, оказывается, есть тернарный оператор. Опять-таки, все просто. Унарный оператор оперирует с одним операндом, бинарный оператор - с двумя операндами, тернарный оператор - с тремя операндами.

Синтаксис тернарного оператора

1
?
таков:

var result = (условие) ? alpha : beta

Читается такой оператор условия следующим образом: если выполняется условие

1
(условие)
, то переменной
1
result
присвоить значение
1
alpha
; если условие
1
(условие)
не выполняется, то переменной
1
result
присвоить значение
1
beta
.

Тернарный оператор условия очень похож на обычный оператор условия

1
if-else
. Можно сказать, что это сокращенная версия обычного оператора условия
1
if-else
.

Давайте сравним оба условия:

  • оператор условия
    1
    
    if-else
    :
var result;
if ( a > 0){
  result = true;
} else {
  result = false;
}
  • тернарный оператор условия
    1
    
    ?
    :
var result = ( a > 0 ) ? true : false;

Очень похоже, не правда ли? Здесь есть один важный момент - в данном случае у обоих операторов есть одна общая черта. И в первом, и во-втором случае переменной

1
result
присваивается значение в зависимости от выполнения условия.

А вот такой вариант уже будет непохож на предыдущий:

var summOne;
var summTwo;
if ( a > 0 ){
  summOne = a + b;
} else {
  summTwo = a * b;
}

Обратите внимание, что в этом условии результат присваивается разным переменным. В данном случае тенарный оператор условия

1
?
уже не подойдет; он не применим в данном случае.

Отсюда вывод: тернарный оператор применим для случая, когда одной переменной присваивается разный результат в зависимости от условия.

Условие на тернарном операторе можно сделать разветвленными и тогда вид такого оператора дейсвительно будет выглядеть достаточно запутанным:

login = prompt('Enter your login','');
var pass = (login == 'black') ? 'Welcome!' :
  (login = 'white') ? 'Good bay!' :
  (login = 'green') ? 'See you next week!' :
  'I don\'t know you!';

Хотя тут все просто на самом деле, если разобраться. Если прочитать это условие, то оно будет выглядеть таким образом.

  • Переменной
    1
    
    login
    присвоить значение, полученное от пользователя.
  • Если значение переменной
    1
    
    login
    равно
    1
    
    black
    , то переменной
    1
    
    pass
    присвоить значение
    1
    
    Welcome!
    .
  • Иначе, если значение переменной
    1
    
    login
    равно
    1
    
    white
    , то переменной
    1
    
    pass
    присвоить значение
    1
    
    Good bay!
    .
  • Иначе, если значение переменной
    1
    
    login
    равно
    1
    
    green
    , то переменной
    1
    
    pass
    присвоить значение
    1
    
    See you next week!
    .
  • Иначе переменной
    1
    
    pass
    присвоить значение
    1
    
    I don\'t know you!
    .

Приведу еще один пример нескольких операторов

1
?
, нагло скопированный с ресурса learn.javascript.ru вместе с описанием его работы (все в угоду доходчивости изложения материала):


var age = prompt('возраст?', 18);

var message = (age < 3) ? 'Здравствуй, малыш!' :
  (age < 18) ? 'Привет!' :
  (age < 100) ? 'Здравствуйте!' :
  'Какой необычный возраст!';

alert( message );

Поначалу может быть сложно понять, что происходит. Однако, внимательно приглядевшись, мы замечаем, что это обычная последовательная проверка!

Вопросительный знак проверяет сначала

1
age < 3
, если верно — возвращает ‘Здравствуй, малыш!’, если нет — идет за двоеточие и проверяет
1
age < 18
. Если это верно — возвращает ‘Привет!’, иначе проверка
1
age < 100
и ‘Здравствуйте!’… И наконец, если ничего из этого не верно, то ‘Какой необычный возраст!’.

То же самое через

1
if-else
:

if (age < 3) {
  message = 'Здравствуй, малыш!';
} else if (a < 18) {
  message = 'Привет!';
} else if (age < 100) {
  message = 'Здравствуйте!';
} else {
  message = 'Какой необычный возраст!';
}

Вот так работает тернарный оператор

1
?
в JavaScript. Ресурс learn.javascript.ru советует использовать тернарный оператор
1
?
по назначению и не заменять им обычный оператор условия
1
if-else
.

Данный материал основан на ресурсе learn.javascript.ru и не претендует на оригинальность.