jQuery: изменение элементов DOM и стилей онлайн урок.


В jQuery есть возможность изменять элементы DOM, в том числе и их стилевые правила. В этом уроке будут рассмотрены основные методы которые это реализуют.

Атрибуты тегов. Метод, который работает с атрибутами тегов называется attr(). Он зависит как минимум от одного параметра - названия атрибута. Второй параметр необязательный - содержит новое значение атрибута, если его надо заменить. Если второй параметр не указан, то метод возвращает текущее значение атрибута. Рассмотрим следующий пример с HTML кодом и скриптом:

var result_1 = $('#test-link').attr('title');
var result_2 = $('#test-link').attr('title', 'Some new title');


Значение полей формы. При помощи метода val() можно управлять значением полей формы. Принцип работы этого метода похож на принцип работы attr(). Если аргумент не указан - метод возвращает текущее значение поля формы. Если аргумент указан, то в поле формы будет подставлено новое значение а метод вернет обновленный объект DOM.

var a = $('#test-input').val();
$('#test-input').val('new value');


Содержимое тегов. Для доступа к содержимому и редактирования тегов используются методы text() и html(). При помощи метода text() можно управлять/редактировать только текст внутри элемента. При помощи метода html() управлять/редактировать текст и теги внутри элемента.

Рассмотрим примеры:



В первой из последних двух инструкций содержимое элемента div#bar будет заменено на текст Hello world. Во второй из двух последних инструкций содержимое div#bar будет заменено на новый элемент u с текстом Hello и текст world.

Стилевые правила. При помощи метода css() можно редактировать стилевые правила элемента. Его можно использовать либо для получения значения конкретного свойства (задать в качестве аргумента строку с названием свойства), либо задать значение некоторого свойства (указать название свойства и его значение). Например, пусть даны следующие правила для элемента div#bar

var a = $('#bar').css('color'); 
$('#bar').css('color', 'blue');


Для множественного задания стилевых правил используется следующий синтаксис

css ( { 'property-1' : 'value-1', 'property-2' : 'value-2', ... , 'property-N' : 'value-N' } )

Рассмотрим примеры:

var a = $('#bar').css('color'); // we get "rgb(255, 255, 255)"
$('#bar').css('color', 'blue'); // color changed to blue
$('#bar').css({'font-size': '25pt','color': 'red'});