Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.
Нажимай и поддержи.

Пн Вт Ср Чт Пт Сб Вс
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30


Чувашия-это моя Россия

Функция css()jQuery.

Функция css() изменяет свойства CSS определенного элемента, вместо применения к элементу стиль класса, может непосредственно добавлять границу, цвет фона, устанавливать ширину или задавать расположение блоков и элементов. Можно применять функцию css() тремя способами: находить действующее значение свойства CSS определенного элемента, установить свойство CSS определенного элемента или настроить несколько свойств CSS одновременно.

Для определения текущего значения свойства CSS надо передать имя свойства функции css(). Пусть хотим узнать цвет фона тега < div> с id="nav" и для этого просто пишем код программы:

                    var цветФона = $('#nav').css('background-color');

Через переменную jQuery всегда возвращает или значение rgb, например rgb(255, О, 10), или с прозрачностью значение rgba, например rgba(255,10,10,5). Библиотека jQuery возвращает значения RGB вне зависимости от того, был ли цвет в таблице стиля определен с использованием шестнадцатеричной системы (#F4477A), RGB с использованием процентов ( rgb( 100%, 10%,0%)) или цветовой модели HSL ( hsl( 72,100%,50%)). jQuery переводит все значения в пиксели, поэтому для установки размера шрифта тега < body> на 130 %, jQuery возвратит значение в пикселах при проверке свойства font-size.

В принципе общий вид действия кода функции css() будет такой: $('тег_HTML').css('свойство_CSS','его_значение')

Можно изменить несколько свойств одного элемента, блока при помощи функции css(). Для этого всего-то записать так: $('тег_HTML').css({'свойство1_CSS' : 'его_значение1' , 'свойство2_CSS' : 'его_значение2'}). Видите, что между парами свойства и значение есть запятая и два аргумента функции заключают еще в фигурные скобки

С каждым днем все больше возможностей становятся реализованными с помощью функции css({}). Если недавно данная функция не воспринимала такие параметры как обобщенные значения border, margin, padding и др., то теперь, пожалуйста, применяйте и пользуйтесь.

По ходу изучения языка jQuery с первых страниц сайта мы с Вами пользуемся функцией стилевого изменения выбранных элементов документа на странице сайта, так что надеюсь уже давно на ты с функцией css({}). Хотя давайте, как обычно посмотрим на практике работу этой функции. Сделаем следующее. Если раньше применяли функции jquery к отдельно взятым из выборки элементам, то сейчас проделаем изменение всей страницы сайта при щелчке кнопкой мыши( так называемое событие mousedown() - первая половина щелчка) и возвращение в исходное состояние страницы сайта при отпускания левой кнопки мыши ( так называемое событие mouseup(); об этих свойствах еще впереди поговорим не раз). При кажущейся простоте данной процедуры тут возникают некоторые дополнительные вопросы.

Основа всякого дела - это знать, что хотим. Нам уже поставлена задача и начинаем работу. Выбираем нашу страницу, как известно она находится между тегами < body>...< /body>, значит, нам нужен объект $(body). Так как Вы уже находитесь на этом объекте, то Вам надо все лишь кликнуть левой кнопкой мыши по странице сайта и задать функцию изменения стиля страницы css({}) и здесь эту функцию будем применять с литералами, то есть сразу с несколькими параметрами сразу и поэтому тут появляются фигурные скобки для аргументов функции. При отпускании левой кнопки мыши страница примет первоначальный вид.

Прежде чем начнем писать коды программы напомню, что тут есть одна заковыка. Фон тела body не просто фон как ( background-color: #С9С;), но, получается из кусочков картины ( background-image: url(../fon/f00056.jpg)). Однако, Вы знаете, что значение z-индекса свойства image намного больше , чем свойства background-color. Поэтому изображение всегда накладывается на фон страницы сайта. Значит, прежде всего Вам надо убрать фоновое изображение со страницы. Тогда Вы можете увидить то, что фон на странице сайта тела страницы body будет изменяться. С учетом сказанного и будем писать программу.

Возьмите за правило, чтобы сначала написать так называемую оболочку jQuery, а именно:

 
                       < script type="text/javascript">$(document).ready(function(){});< /script>

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

Наш код программы для изменения вида нашей страницы сайта примет следующий вид:

                       < script type="text/javascript">$(document).ready(function(){
                                  $('body').mousedown(function(){
                                      $(this).css({'background-image': 'url()',
                                               'background-color':'#F00'});})
                                           .mouseup(function(){
                                      $(this).css({'background-image': 'url(../fon/f00056.jpg)',
                                                   'background-color': '#С9С'});
                                              });
                                           });
                       < /script>

Кнопку "Нажимайте" я тут поставил для красоты и чтобы Вы не забыли нажимать и посмотреть наш эффект исчезновения изображения на странице сайта и появление другого фонового цвета страницы ( background-color: #EDA), то есть эффект исчезновения Вы можете наблюдать в любой точке страницы сайта, просто на любую точку экрана нажимаете и смотрите эффект, потому что мы выбрали объект $('body') и все действия соотносятся к нему.

Однако, тут есть одно "но!". При выполнения сценария данной программы Вы просто не увидите фон данной страницы, которая является основным ( фиолетовый цвет), чтобы не усложнять коды программы не стал первоначально показывать начальный фон( фиолетовый цвет), потом измененный ( красный цвет).


seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно на главную     назад    дальше     вперед

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: