Доброго времени суток. Мы продолжаем изучать jQuery. Так в прошлых статьях мы  мы научились выбирать элементы по различным идентификаторам, классам и свойствам и фильтровать выбранные данные. После выбора необходимого элемента в jQuery мы должны произвести над ним действия. В данной статье мы и остановимся на действиях, которые можно производить над элементами при помощи jQuery.

Как Вы знаете JavaScript работает с DOM моделью страницы. Поэтому нам необходимо, что код JavaScript выполнялся только после построения модели DOM. Для  этого в jQuery есть метод ready, который ждет построения DOM модели документа.
Поэтому для выполнения скрипта после построения DOM модели используйте следующую конструкцию:

$(document).ready(function(){
<код скрипта>
})

Метод text()

Метод text() необходим для получения или изменения текста элемента. Допустим у нас есть следующий html-код:

<div id='text'>
Привет.
</div>

И мы хотим получить данный текст, тогда нам необходимо выбрать элемент div с id = text и применить к нему метод text().

$(document).ready(function(){
$('#text').text();
})

Для того чтобы изменить текстовое значение элемента необходимо нашему методу text передать параметр. Например, мы хотим изменить текст в выше приведенном примере на “Добро пожаловать на сайт web-programming.com”, тогда наш код будет выглядеть следующим образом:

$(document).ready(function(){
$('#text').text('Добро пожаловать на сайт web-programming.com');
})

Метод hide()

Если нам необходимо спрятать элемент, то в jQuery существует метод hide(speed, callback). Данному методу можно передать два параметра speed — скорость исчезновения, указывается время в миллисекундах  и callback — функция, которая будет выполнена после исчезновения элемента. Например, нам необходимо чтобы div с id=text (из примера выше) исчез за 2 секунды, тогда наш код будет:

$(document).ready(function(){
$('#text').hide(2000);
})

Метод show()

Противоположный метод hide — это show, если нам необходимо показать элемент. Аналогично как и метод hide, show принимает два параметра — это скорость появления и функцию, которая будет выполнена после того, как элемент появиться.

$(document).ready(function(){
$('#text').show(2000);
})

Метод width()

Для того, чтобы установить или получить ширину элемента в jQuery есть специальный метод width. Если нам необходимо получить ширину элемента div с id=text (из приведенного выше примера), то необходимо написать следующий код:

$(document).ready(function(){
$('#text').width();
})

Если же нам необходимо установить ширину, то методу width необходимо передать параметр. Если не указывать единицы измерения (%, em), то по умолчанию будет px.

$(document).ready(function(){
$('#text').width(30);
})

Метод heigth()

Для изменения или вычисления высоты элемента в jQuery используется метод heigth(). Данный метод работает по аналогии с методом width.

Метод html()

Если мы хотим получить или изменить html код элемента, то необходимо использовать метод html(). Данный метод работает по аналогии с методами heigth() и width(). Т.е. если мы нашему методу не передаем параметры, то метод вернем нам весь html код, который находиться в данном элементе. Если мы передадим параметр, то изменим html код в нашем элементе.

На этом данную статью я завершаю. А в следующей статье мы продолжим рассматривать основные методы для работы с элементами. Так, что не пропускайте выхода новых статей.