.attr() - для работы с атрибутами.
Позволяет прочитать аттрибут по его имени, передаваемому в качестве параметра, позволяет установить атрибут, передавая имя аттрибута в качестве первого параметра, а значение в качестве второго.
$("p:eq(3)").attr("id"); //получаем id последнего абзаца $("#bar").attr("id","bat");//меняем значение id последнего абзаца с #bar на #bat
Использование формата Json позволяет задать сразу несколько атрибутов
$("p:eq(3)").attr({
"id":"baz",
"title":"А это второй установленный атрибут:)"
});
removeAttr() - удаляет атрибут по имени, передаваемому в качестве параметра
$(":checkbox").removeAttr("disabled");
.css() работает так же, как и .attr() но применяется к стилям
$(".foo").css({
"color":"red",
"background":"yellow"
});
.text() и .html() работают с содержимым элементов, .html() с дескрипторами, .text() только с текстовой информацией. При вызове этих методов без аргументов возвращается содержимое элемента. При передаче методу значения старое значение затирается и заменяется новым, причем удаляется все содержимое - вместе с html тегами
$("#bar").text();//читаем только текст
$("#bar").html();//читаем вместе с тегами
$("#bar").text("Это новый текст в параграфе");//меняем весь текст параграфа на новый (span тоже пал смертью храбрых)
$("#bar").html("Это будет новый параграф с тегом <strong>strong</strong>, примененным внутри");
.val() работает с содержимым элементов форм. Возвращает или устанавливает значение элемента input
$(":submit").val();//получаем значение кнопки submit
$(":submit").val("Отправить");//устанавливаем значение кнопки submit
.data() служит для сохранения информации об элементе JQuery
Пример: Присваиваем первым двум абзацам тестового документа имена, сохраняем и выводим в консоль
$("p:first")
.data("nickname", "Toshik")
.next("p")
.data("nickname", "Lena");
console.log("Меня зовут: "+$("p:first").data("nickname"));
console.log("А я - "+$("p:eq(1)").data("nickname"));
Иcпользуем Json и добавляем столько информации, сколько требуется
$("p.foo").data({
"nickname":"Аленка",
"favorite":{
"movie":"Игра",
"music":"Спас на крови",
"color":"blue"
}
});
console.log("Мое имя - "+$("p.foo").data("nickname"));
console.log("Мой любимый фильм - "+$("p.foo").data("favorite").movie);
console.log("Мой любимый цвет - "+$("p.foo").data("favorite").color);
Альтернативный вариант записи - с кешированием данных из data() в переменную info
$("p.foo").data({
"nickname":"Аленка",
"favorite":{
"movie":"Игра",
"music":"Спас на крови",
"color":"blue"
}
});
var info = $("p.foo").data();//кешируем объект data() в переменную info
console.log("Мое имя - "+info.nickname);
console.log("Мой любимый фильм - "+info.favorite.movie);
console.log("Мой любимый цвет - "+info.favorite.color);
.addClass(), .removeClass(), .toggleClass()
.addClass(), .removeClass() - добавляют и удаляют атрибут класса
$("p:first").addClass("bat");
console.log("Текст: "+$(".bat").text());
$("p:first").removeClass("bat");
console.log("Текст: "+$(".bat").text());
.toggleClass() принимает имя (или имена) класса, а затем либо добавляет класс, либо удаляет если класс уже существует
Например, добавим класс baz и удалим foo
$("p.foo").toggleClass("foo baz");
.hasClass() работает аналогично .is() - определяет, содержится ли данный класс в элементе и возвращает true или false
var msg = $("p:eq(1)").hasClass("foo") ? "Найден!" : "Нет";
console.log("Класс? "+msg);
.height() и .width()
определяют высоту и ширину, возвращают целое значение без указания единиц измерения, в отличие от .css(), который возвращает и единицу измерения тоже.
console.log("Высота формы: "+$("form").height()+"px");
console.log("Ширина формы: "+$("form").width()+"px");
передача параметра этим методам устанавливает значение, переданное как параметр
$("p").height(100).css("background","blue");
.innerHeight(), .innerWidth(), .outerHeight(), .outerWidth() - без учета и с учетом рамок и полей
чтобы включить размер полей, используем .outerHeight(true) и .outerWidth(true)
var el = $("p.foo");
el.css({
"margin":"20px",
"border":"4px solid #e6e6e6"
});
console.log("Внутренняя ширина: "+el.innerWidth()+"px");
console.log("Внутренняя высота: "+el.innerHeight()+"px");
console.log("Внешняя ширина: "+el.outerWidth()+"px");
console.log("Внешняя высота: "+el.outerHeight()+"px");
console.log("Внешняя ширина с полями: "+el.outerWidth(true)+"px");
console.log("Внешняя высота с полями: "+el.outerHeight(true)+"px");