JQuery основы. Методы: text, hide, show, width, heigth, html. Часть 3
Доброго времени суток. Мы продолжаем изучать 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 код в нашем элементе.
На этом данную статью я завершаю. А в следующей статье мы продолжим рассматривать основные методы для работы с элементами. Так, что не пропускайте выхода новых статей.
[…] основные действия над элементами в jQuery. Так в прошлой статье мы рассмотрели методы взаимодействия с текстом […]
Как используется метод
Метод show()? Я должен передать параметр show(2000, functoin(){ })?
а, все, разобрался, функция перед show вызывается.