.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");