Навігація по DOM

$('ul li').length; - кількість знайдених елементів.

Батьківські та дочірні елементи

$('p').parent(); - знаходить безпосередніх батьків елементів.

$('p').parents(); - знаходить всіх батьків елементів.

$('p').children(); - знаходить безпосередні дочірні елементи.

$('ul').find(selector); - знаходить всі дочірні елементи.

Можна задати селектор щоб знайти тільки потрібні елементи серед всіх:


				$('p').parent('article');

				$('p').parents('.wrapper');

				$('ul').children('.active');

Сусідні елементи

$('ul li.active').prev(); - вибирає попереднього сусіда.

$('ul li.active').next(); - вибирає наступного сусіда.

$('ul li.active').prevAll(); - вибирає всіх попередніх сусідів.

$('ul li.active').nextAll(); - вибирає всіх наступних сусідів.

Знову ж таки, вищезазначені методи можуть приймати в себе аргумент - селектор, що відфільтрує зайві елементи:


				$('p').prev('img');

				$('section').next('section');    // wtf?

				$('ul li.active').prevAll('.contacts');

				$('ul li.active').nextAll('.contacts');

Робота з набором

$('ul li').first(); - повертає перший елемент з набору.

$('ul li').last(); - повертає останній елемент з набору.


				$('ul li').first('.active');

				$('ul li').last('.active');

У jQuery є декілька спеціальних селекторів, що покращують читабельність коду та спрощують його:


				$('ul li:first');

				$('ul li:last');

				$('ul li:even');

				$('ul li:odd');


				// ну і не забувайте про CSS-псевдокласи:

				$('button:disabled');

				$('input[type="checkbox"]:checked');

Увага: jQuery, як і JS, не бачать і не розуміють CSS-псевдоелементи :before, :after. Наступний код не буде працювати:


				$('span:before').css('color', 'red');


				// вирішити це можна приблизно таким костилем:

				$('head').append('<style>.jq-red:before{color:red;}</style>');

				$('span').addClass('jq-red');

$('ul li').get(4); - повертає 5-й JS-елемент зі знайдених (починаючи з 0).

$('ul li')[4]; - аналогічно.

$('ul li').eq(4); - повертає 5-й jQuery-елемент зі знайдених (починаючи з 0). По суті - повертається jQuery-масив-обгортка довжиною 1 елемент.

$('ul li').each(fun); - виконує дію з кожним знайденим елементом.


				$('p').each(function(){

				  console.log($(this).text());

				});


				$('p').each(function(i, e){

				  console.log(i, $(e).text());

				});

Зверніть увагу: в функцію передаються чисті JS-елементи, а не jQuery-обгортки.

Фільтрація елементів

$('ul li').filter(':even').css('color', 'red'); - відфільтровує елементи, в даному випадку залишає парні.

$('ul li').not('.active'); - видаляє зі знайденого набору елементів ті елементи, що відповідають селектору.

$('p').add(...); - добавляє елементи до набора (аргумент - елементи або селектор).


				let $li = $('li');

				$('p').add($li).add('img.gallery').addClass('js-elem');

Перевірки

$('li').index('.active'); - повертає номер елемента в наборі, (індекс елемента LI.active серед всіх LI).

$('li').has('ul'); - вибирає тільки ті елементи, які містять в собі елементи, що підходять під селектор в аргументі метода (вибрати всі LI в яких всередині є UL).

$('p').is(selector); - перевірка чи елемент підходить до селектора:


				$('li').each(function(){

				  if ($(this).is('.active')) { ... }

				});