JQuery основы. Методы: text, hide, show, width, heigth, html. Часть 3

Ромчик
3

Изучаем jquery

Доброго времени суток. Мы продолжаем изучать 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 код в нашем элементе.

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

Понравилась статья? Поделись с друзьями.
  • Add to favorites
  • Добавить ВКонтакте заметку об этой странице
  • Twitter
  • Facebook
  • Мой Мир
  • LiveJournal
  • Одноклассники
  • Блог Я.ру
  • MySpace
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • Reddit
  • StumbleUpon
  • Technorati
  • del.icio.us
  • БобрДобр
  • LinkedIn
  • Memori.ru
  • Сто закладок
  • Blogger

  • JQuery основы. Методы: fadeOut, fadeIn, fadeTo, slideUp, slideDown. Часть 4 | Все о WEB программировании - 03.07.2012 в 10:51

    […] основные действия над элементами в jQuery. Так в прошлой статье мы рассмотрели методы взаимодействия с текстом […]

  • Vitaliy - 09.08.2012 в 18:21

    Как используется метод 
    Метод show()? Я должен передать параметр show(2000, functoin(){ })?

    • Vitaliy - 09.08.2012 в 18:24

      а, все, разобрался, функция перед show вызывается.

  • ©2012-2017 По всем вопросам обращайтесь через форму обратной связи

    Яндекс.Метрика