Этот пост является продолжением серии “jQuery - это очень просто”. Первую часть можете прочитать по этому адресу: jQuery - это очень просто. Часть 1.
Было бы хорошо использовать комбинацию селекторов jQuery, чтобы получать массив элементов. Будет хорошо, если мы будем знать, как исследовать их один за другим и производить над ними операции. size() and each(iterator)
Чтобы определить размер того, что мы только что выбрали, должны использовать команду size().
Например, чтобы получить все id элементов <p>, которые мы выбрали, надо использовать цикл for…loop и команду size():
Code
for(var i=0;i< $('p').size(); i++) alert('мой id'+$('p')[i].id);
Чтобы убрать лишнее, мы можем использовать команду each(). Доступ к элементу можно получить, используя кейворд “this”. Перепишем код вот так:
Code
$("p").each( function() {
alert('мой id'+this.id);
})
Берем и задаем значения атрибутов addClass задает всем элементам, имеющих один CSS класс или несколько CSS классов.
removeClass наоборот убирает у элементов один или более CSS классов по заданному парамерту:
Code
$('p.notes').addClass('notes', 'highlight');
$('p.notes').removeClass('highlight');
Мы можем не только задавать и снимать, но также и переключать. Команда toggleClass позволяет нам добавлять заданный CSS класс, если его нет, и удалять, если он есть.
Code
$('p.notes').toggleClass('highlight');
css(имя, значение) Что делать, если мы хотим изменить CSS стиль элемента без использования любых имен класса? Команда CSS позволяет сделать так:
Code
$('p.note').css('background-color', 'yellow');
Здесь мы задаем параграфу с классом note желтый цвет фона. Есть еще элементы width() и height(), которые позволяют нам напрямую изменять размеры элемента. Например:
Code
$('p.note').width(500).height(100);