Работа с элементами страницы

Переменная $ в jQuery, одновременно является и функцией и объектом (спасибо JavaScript, что это возможно).

Через $ мы можем обращаться к отдельным элементам страницы через CSS-селекторы

Например у нас есть блок:

<style>
#block {
    height:200px;
    width:200px;
    background:red;
}
</style>

<div id="block">
</div>

Чтобы обратится к этому блоку через jQuery, мы можем написать вот такую конструкцию

$('#block')

Вызов функции $ возвращает нам jQuery объект, то есть опять таки $, который содержит в себе массив DOM объектов (даже, если этот массив пустой).

Через функцию $ мы можем обращаться к любым DOM объектам через CSS-селекторы (классы, id, тэги и т.д.)

Например, если у нас есть несколько элементов с классом block, то мы можем сделать вот так

$('.block'); //Получит всю коллекцию блоков через jQuery-объект

Чтобы обратиться к первому DOM-объекту через коллекцию, можно воспользоваться вот такой конструкцией

$('.block')[0]

Тоже самое мы можем узнать, если будем использовать метод get

$( ".block" ).get(0)

Но с помощью его мы можем получать элементы с конца

$( ".block" ).get(-1);//получим последний элемент

Чтобы узнать количество элементов в коллекции нужно использовать свойство length

$('.block').length

Модификация элементов через jQuery

Было бы странно использовать jQuery, чтобы получать DOM-объекты. Ведь тогда мы теряем всю мощь jQuery

<script>
$('#block').css('height'); //вернет нам '200px' 

$('#block').css('height','400px');//высота блока станет 400px

$('#block').html('Новый текст внутри блока');// добавляем новый текст внутрь блока
</script>

Установка нескольких свойств

var cssValues = {
    "color":"red",
    "font-size":"25px"
}
$("p").css(cssValues);

Методы для работы с классами в jQuery

$('.block').addClass('new_class');

Ко всем элементам с классом block добавится new_class

.hasClass .removeClass .toggleClass

Получение i-го элемента колекции

Если мы хотим обратится ко второму элементу на странице, то мы можем воспользоваться функцией eq, которая позволяет обращаться к элементу по его номеру. Нумерация начинается с нуля!

$( "div" ).eq( 2 ).css( "background-color", "red" );

Мы можем запихнуть внутрь функции $ DOM-объект - и в результате получить jQuery объект со всеми функциями.

var obj = document.getElementById("block");
$(obj).css("height","200px");

Обращение к атрибутам data-

<div id="superid" data-foo-bar="123"></div>

$('#superid').data('fooBar'); // вернет 123

Сделает фон всех нечетных элементов красным

$( "li" ).not( ":even" ).css( "background-color", "red" );

Выберет пятый элемен

$( "li" ).eq( 4 ).css( "background-color", "red" );

Дополнения:

1. Скорость выполнения разных jQuery запросов https://habrahabr.ru/post/103174/

Практика:

1. Есть синий блок. С помощью jQuery поменять его цвет на красный.
2. Есть блок. Сделать так, чтобы при кликах блок менял цвет с первого на второй. Со второго на первый.
3. Есть блоки. При клике на блок выводим цвет блока, на который кликали в предыдущий раз
4. Игроку показывается круг в произвольном месте экрана. Если игрок успел кликнуть на круг в течении двух секунд, то он зарабатывает балл.
5. Есть четыре блока. Сначала "зажигается" первый. Потом он гаснет, зажигается второй. Потом гаснет второй, зажигается третий. То есть блоки по очереди зажигаются с 1-го по 4-й. После четвертого очередь переходит опять к первому и все повторяется.