С помощью jQuery Вы можете удобно управлять оформлением HTML элементов.
ТвитнутьjQuery имеет группу различных методов значительно упрощающих оформление элементов.
Одним из самых важных методов в этой группе является метод css().
С помощью метода css Вы можете узнавать текущие или устанавливать новые значения свойств оформления элементов.
Синтаксис:
//Узнаем значение указанного CSS свойства выбранного элемента
$("селектор").css("свойство");
//Установим новое значение указанному CSS свойству выбранного элемента
$("селектор").css("свойство","значение");
//Установим произвольные значения нескольким CSS свойствам выбранного элемента
$("селектор").css({свойство1:значение1, свойствоN:значениеN});
Пример
$(document).ready(function(){
$("#but1").click(function(){
alert($("#par1").css("color"));
});
$("#but2").click(function(){
$("#par2").css("color","red");
});
$("#but3").click(function(){
$("#par3").css({"font-size":"27px","color":"red","font-family":"Arial"});
});
$("#text1").focus(function(){
$("#text1").val("");
});
$("#but4").click(function(){
$("#par4").css("font-size",$("#text1").val()+"px");
});
});
С помощью метода addClass Вы можете добавить указанный класс выбранному элементу (данный метод, добавляя новый класс, не удаляет и не заменяет существующие).
С помощью метода removeClass Вы можете удалить указанный класс у выбранного элемента.
Метод toggleClass позволяет переключатся между удалением и добавлением класса выбранного элемента.
Синтаксис:
//Добавим указанный класс выбранному элементу
$("селектор").addClass("имя_класса");
//Удалим указанный класс у выбранного элемента
$("селектор").removeClass('имя_класса');
//При первом вызове указанный класс будет добавлен, а при втором удален.
$("селектор").toggleClass('имя_класса');
Пример
$(document).ready(function(){
$("#but1").click(function(){
$("#par1").addClass("blp");
});
$("#but2").click(function(){
$("#par1").removeClass("blp");
});
$("#but3").click(function(){
$("#par1").toggleClass("blp");
});
});
Обратите внимание: полный список всех существующих методов jQuery для манипуляций с оформлением с примерами использования Вы найдете в нашем jQuery справочнике.
Задание 1 реализуйте подпункты перечисленные ниже путем добавления на страницу соответствующего jQuery кода: