Базовые селекторы (#id, tagName, .class).

jQuery_2.js

$(document).ready(function(){
    
// ### Можем выделить все теги p, h2, h1 и т.д. c обводкой.
$('p').css('border', 'solid 3px red');

// Чтобы обратиться к конкретному элементу (p.blue, #id)
//p - это тэг который имеет клас .lead
$('p.lead').css('border', 'solid 3px red');

});

jQuery_3.js

$(document).ready(function(){
    
// ### Селекторы взаимодействия (parent, child, + ~ и т.д.)
// Внутри тэга body находятся тэги h2.
$('body h2').css('border', 'solid 3px red');

// Определяем тэг h2 + его сестренский элемент (ближайший).
$('h2 + p').css('border', 'solid 3px red');

// Все тэги которые находятся рядом с h2 (сестринские элементы).
$('h2 + ~').css('border', 'solid 3px red');

//Определить родительский элемент.
$('h2').parent().css('border', 'solid 3px red');

});

jQuery_4.js

$(document).ready(function(){
    
// ### Простые фильтры (:first, :last, even, odd, eq и т.д.)
// То есть выделить первый, последний, чётный и т.д.
$('p:first').css('border', 'solid 3px red');

// eq - обращение к конкретному пункту (начиная с 0 - обращаемся к каждому эл-у):
$('p:eq(0)').css('border', 'solid 3px red');

});

jQuery_5.js

$(document).ready(function(){
    
// ### Фильтры по содержимому (:has, :parent, :empty и т.д.)
// Например у нас 2 тэга h2 а нам нужен тот который содержит в себе span.
$('h2:has(span)').css('border', 'solid 3px red');

// Выделяем только те box-ы которые содержат в себе какие то элементы (то есть выделятся родители а пустой box выделен не будет).
$('.box:parent').css('border', 'solid 3px red');

// Выделяем только пустой элемент.
$('.box:empty').css('border', 'solid 3px red');

});

jQuery_6.js

$(document).ready(function(){
    
// ### Фильтры по атрибутам ([name ~= value] и т. д.)
// Выделять элементы форм,ссылки или картинки.
// В данном примере выделится тот текст который содержит в себе ссылку: 
$('a[href="http://google.com"]').css('border', 'solid 3px red');

// Выделить ту которая не содержит "!=" ссылку на google.com
$('a[href!="http://google.com"]').css('border', 'solid 3px red');

// Выделить те ссылки которые начинаются с http.
$('a[href^="http"]').css('border', 'solid 3px red');

// Выделить те ссылки значения которых заканчивается на ru.
// Знак "$" или "*" - означает что ссылка заканчивается именно на этот символ (то есть ru, можно даже искать 1 букву в слове, например "r").
$('a[href$=".ru"]').css('border', 'solid 3px red');

});