• Страница 2 из 7
  • «
  • 1
  • 2
  • 3
  • 4
  • 6
  • 7
  • »
Форум » Ленточный вариант форума
Новые сообщения
16
Форум: Базовое знакомство с jQuery | Тема: Установка и чтение атрибутов элементов
Чтение, установка и удаление атрибутов

В jQuery есть две функции общего применения для работы с атрибутами html:

функция attr() - c её помощью можно считывать указанный атрибут html-элемента. Эта функция возвращает значение атрибута, установленное в html.

Например, можно узнать адрес ссылки на файл изображения, находящийся в каком-то блоке с идентификатором gallery и сохранить его в переменной imageLink:

Код
var imageLink = $('#gallery img').attr('src');


А передав в качестве второго аргумента функции attr() путь к иному изображению, вы замените им изображение существующее, то есть измените свойство src элемента img:

Код
$('#gallery img').attr('src','здесь адрес нового изображения');


Хотите удалить атрибут элемента?

Функция removeAttr() позволяет удалить атрибут элемента. Например, удаляем свойство bgColor элемента body:

Код
$('body').removeAttr('bgColor');

Изменить / Удалить

17
Форум: Базовое знакомство с jQuery | Тема: Установка и чтение атрибутов элементов
Изменение нескольких css-свойств одновременно

Как можно изменить несколько свойств одного элемента? Допустим, так:

Код
$('#main').css('background-color','#FCFCFC');

$('#main').css('border','2px solid #999999');


Однако, этот код не оптимален, поскольку браузеру каждый раз нужно выбирать элемент, чтобы изменить его свойство.

Гораздо более правильный вариант, использовать связывание функций:

Код
$('#main').css('background-color','#FCFCFC').css('border','2px solid #999999');


как видим, в данном случае браузеру нужно будет всего один раз выбрать элемент, после чего дважды выполнить функцию css().

Но, совершенно не обязательно многократно использовать функцию css(), чтобы изменить несколько свойств элемента. Для этого существует другой способ - передать функции css() объектную константу.

Объектная константа (или литерал объекта) - это список пар свойство : значение.
Например:

Код
{
'background-color' : '#FCFCFC',
'border' : '2px solid #999999'
}


для использования объектной константы просто передаём её функции css(). Допустим, нам нужно изменить цвет фона и установить рамку для элемента с идентификатором main:

Код
$('#main').css({
'background-color' : '#FCFCFC',
'border' : '2px solid #999999'
});

Изменить / Удалить

18
Форум: Базовое знакомство с jQuery | Тема: Установка и чтение атрибутов элементов
Изменение css-свойств исходя из текущего значения

В качестве примера: допустим, что на странице сайта есть кнопка, при нажатии на которую размер шрифта увеличивается в два раза.
Как это реализовать?

1. сначала нужно считать текущее значение шрифта на странице

2. полученное значение вернётся в виде строки, поэтому его нужно преобразовать в число

3. умножить полученное значение на 2

А теперь всё это в виде кода:

Код
var baseFont = $('body').css('font-size');

baseFont = parseInt(baseFont);

$('body').css('font-size', baseFont * 2);

Изменить / Удалить

19
Форум: Базовое знакомство с jQuery | Тема: Установка и чтение атрибутов элементов
Чтобы присвоить элементу свойство css, нужно передать функции css() два аргумента: имя css-свойства и его значение.
Например, чтобы увеличить размер шрифта для элемента body до 200% :

Код
$('body').css('font-size','200%');


или, к примеру, чтобы изменить отступ в элементе с классом quoteMessage на 100 пикселов:

Код
$('.quoteMessage').css('padding',100);


При использовании функции css(), вы можете применять сокращённую запись css-свойств, например, чтобы установить чёрную рамку в 1px для всех абзацев с классом news, пишем так:

Код
$('p.news').css('border','1px solid black');

Изменить / Удалить

20
Форум: Базовое знакомство с jQuery | Тема: Установка и чтение атрибутов элементов
Функция css()

С помощью данной функции можно изменять css-свойства элемента: добавить границу, цвет фона, установить ширину, задать расположение и т.д.

Использовать функцию css() можно разными путями:

- для нахождения текущего значения свойства css нужного элемента

- для установления свойства css нужного элемента

- для настройки нескольких свойств css одновременно

Чтобы определить текущее значение какого-либо свойства css, имя этого свойства нужно передать функции css().
Например, чтобы узнать цвет фона блока с идентификатором active:

Код
$('#active').css('background-color');


результат можно сохранить в переменную:

Код
var colorActive = $('#active').css('background-color');

Изменить / Удалить

21
Форум: Базовое знакомство с jQuery | Тема: Установка и чтение атрибутов элементов
Функция-переключатель .toggleClass()

Представим, что на странице сайта есть некий переключатель стилей страницы, её оформления. И когда этот переключатель включен, добавляется класс элементу body, за счёт чего меняется оформление страницы.
Когда вы щёлкаете по переключателю снова, этот класс у элемента body удаляется, оформление меняется на прежнее.

Зададим для переключателя идентификатор changeStyle, а переключаемому классу имя altStyle и напишем следующий код:

Код
$('#changeStyle').click(function() {
  $('body').toggleClass('altStyle');
});


Функция .toggleClass() при каждом щелчке либо удаляет, либо добавляет класс altStyle.

На демо-страничке вы можете посмотреть такой переключатель в действии.

Изменить / Удалить

22
Форум: Базовое знакомство с jQuery | Тема: Установка и чтение атрибутов элементов
Функции jQuery для манипулирования с атрибутом класса элемента

Функция .addClass() добавляет элементу конкретный класс. Подключается после выборки jQuery, затем функции передаётся строка, в которой записано имя класса, который нужно добавить элементу.

Например, чтобы всем ссылкам, ведущим за пределы вашего сайта, добавить класс outLink:

Код
$('a[href^ = "http://"]').addClass('outLink');


и тогда, к примеру, ссылка:

Код
<a href="http://site.ru">Перейти на сайт</a>


станет выглядеть так:

Код
<a href="http://site.ru" class="outLink">Перейти на сайт</a>


Функция addClass() не исключает уже имеющегося у элемента класса, а добавляет к нему еще один.


Функция .removeClass() противоположна предыдущей и удаляет указанный ею класс у элемента.

Например, имеем блок div с классом news и идентификатором hotNews:

Код
<div class='news' id='hotNews'>
  /* здесь содержимое блока */
</div>


удалим у этого блока имеющийся класс:

Код
$('#hotNews').removeClass('news');

Изменить / Удалить

23
Форум: Базовое знакомство с jQuery | Тема: Замена выборок или их удаление
Замена выборки новым содержимым

Пример:
на странице есть фотография, по клику на которую она пропадает, а вместо неё появляется текст.

Допустим, у фотографии есть свой идентификатор:

Код
<img src = 'адрес фотографии' id = 'product15'>


с помощью jQuery-функции .replaceWith() мы заменим фотографию на текст(подразумевается, что данная замена будет происходить при клике пользователя по фотографии):

Код
$('#product15').replaceWith('Товар добавлен в корзину!');

Изменить / Удалить

24
Форум: Базовое знакомство с jQuery | Тема: Замена выборок или их удаление
Иногда выбранный элемент нужно полностью заменить, удалить или переместить. Для этого есть еще некоторые функции в jQuery.

Допустим, есть блок div с идентификатором main:

Код
<div id = "main">
  // здесь содержимое блока
</div>


чтобы удалить этот блок, выбираем его и используем функцию .remove()

Код
$('#main').remove();


как пример, удаляем все элементы span с каким-то назначенным им классом error:

Код
$('span.error').remove();

Изменить / Удалить

25
Форум: Базовое знакомство с jQuery | Тема: Работа с содержимым страницы
Функции .before() и .after() - используются, если нужно добавить html-код вне выборки: до открывающего тега элемента или сразу после закрывающего тега.

Например, есть текстовое поле какой-то формы, которое должен заполнить посетитель. И если он его не заполнил, должно выводиться предупреждающее сообщение об этом.

Код
<input type="text" name = "userName" id = "userName">


добавим это сообщение после текстового поля, используя функцию .after()

Код
$('#userName').after('<span class="error">Имя пользователя обязательно!</span>');


теперь наш html-код будет выглядеть так:

Код
<input type="text" name = "userName" id = "userName">
<span class="error">Имя пользователя обязательно!</span>


Если используем функцию .before() для той же задачи:

Код
$('#userName').before('<span class="error">Имя пользователя обязательно!</span>');


то в итоге код получается такой:

Код
<span class="error">Имя пользователя обязательно!</span>
<input type="text" name = "userName" id = "userName">

Изменить / Удалить

26
Форум: Базовое знакомство с jQuery | Тема: Работа с содержимым страницы
Функция .prepend() - схожа с предыдущей с той лишь разницей, что добавляет html-код сразу после открывающего тега выборки.
Поэтому, если взять наш код:

Код
<div id="container">
  <div id="errors">
    <h2>Ошибки:</h2>
  </div>
</div>


и использовать функцию .prepend(), передав ей строку с сообщением о найденных ошибках, заключённым в теги абзаца:

Код
$('#errors').prepend('<p>В данной форме четыре ошибки</p>');


то после выполнения функции мы получим следующий код:

Код
<div id="container">
  <div id="errors">
    <p>В данной форме четыре ошибки</p>
    <h2>Ошибки:</h2>
  </div>
</div>

Изменить / Удалить

27
Форум: Базовое знакомство с jQuery | Тема: Работа с содержимым страницы
Функция .append() - добавляет выбранному элементу html-код в виде последнего дочернего элемента.
Например, возьмём наш код:

Код
<div id="container">
  <div id="errors">
    <h2>Ошибки:</h2>
  </div>
</div>


и используя функцию .append(), добавим сообщение об отсутствии ошибок сразу после заголовка:

Код
$('#errors').append('<p>Ошибок не найдено!</p>');


в итоге код преобразуется в такой:

Код
<div id="container">
  <div id="errors">
    <h2>Ошибки:</h2>
    <p>Ошибок не найдено!</p>
  </div>
</div>


при этом первоначальный код внутри элемента остался прежним, а к нему добавился новый фрагмент html-кода.

Изменить / Удалить

28
Форум: Базовое знакомство с jQuery | Тема: Работа с содержимым страницы
Функция .text() по принципу работы схожа с функцией .html(), с одной лишь разницей: она не принимает html-элементы.
Данная функция полезна, если нужно заменить какой-то текст внутри нужного элемента. Например, возьмём наш код:

Код
<div id="container">
  <div id="errors">
    <h2>Ошибки:</h2>
  </div>
</div>


и используем функцию .text(), чтобы заменить содержимое в заголовке второго уровня внутри элемента:

Код
$('#errors h2').text('Ошибок не найдено');


код преобразуется в такой:

Код
<div id="container">
  <div id="errors">
    <h2>Ошибок не найдено</h2>
  </div>
</div>


При этом теги заголовка останутся на месте, а текст внутри них поменяется.

Важное замечание: если использовать функцию .html() или .text() для того, чтобы извлечь текст или код из выборки, состоящей не из одного, а из множества элементов, то html-код или текст будет извлечён только из первого элемента выборки!


Например, если на странице сайта присутствуют пять блоков div, и мы производим выборку

Код
$('div').html();


то в результате этой выборки мы получим содержимое только первого элемента div страницы.

Однако, если с помощью функций .html() и .text() вставлять в выборку html-код или текст, то это коснётся всех элементов выборки.


Например, для тех же пяти блоков div данный код:

Код
$('div').html('<p>Привет,мир!</p>');


заменит html-код во всех пяти элементах div, а не только в первом.

Изменить / Удалить

29
Форум: Базовое знакомство с jQuery | Тема: Работа с содержимым страницы
С помощью jQuery возможно манипулирование с содержимым страницы. Ниже мы рассмотрим наиболее важные в этом плане функции jQuery.

Другие функции можно посмотреть здесь.

Функция .html() - считывает HTML-код внутри элемента, а также заменяет его на другой. Используется вместе с выборкой jQuery.

Рассмотрим на примере. Есть такой код:

Код
<div id="container">
  <div id="errors">
    <h2>Ошибки:</h2>
  </div>
</div>


сделаем выборку по селектору идентификатора

Код
$('#errors')


и выведем её во всплывающем окне:

Код
alert($('#errors'));


если мы запустим этот код сейчас, то во всплывающем окне мы увидим только:

Цитата
[object Object]


то есть содержимого элемента с идентификатором errors мы не увидели. Смотрим, что получится, если мы подключаем функцию .html()

Код
alert($('#errors').html());




благодаря функции .html(), во всплывающем окне продублировался html-код, находящийся внутри элемента с идентификатором errors, причём вместе с тегами.

Таким образом, с помощью функции .html() вы можете скопировать html-код, находящийся внутри нужного элемента и вставить его в другой элемент на странице сайта.

Как мы знаем, функции можно передавать различные значения в качестве аргумента.
Если мы передадим функции .html() строку в качестве аргумента:

Код
$('#errors').html('<p>В данной форме четыре ошибки!</p>');


то она заменит первоначальное содержимое элемента с идентификатором errors и мы увидим на странице сайта сообщение

Цитата
В данной форме четыре ошибки!


причём, как вы заметили, заменился не только текст, но и html-теги. В итоге первоначальный код:

Код
<div id="container">
  <div id="errors">
    <h2>Ошибки:</h2>
  </div>
</div>


преобразовался в такой:

Код
<div id="container">
  <div id="errors">
    <p>В данной форме четыре ошибки!</p>
  </div>
</div>

Изменить / Удалить

30
Форум: Базовое знакомство с jQuery | Тема: Выборки jQuery: два принципа
Связывание функций

Иногда над выбранным элементом нужно произвести не одну, а несколько операций. Например, для элемента div с идентификатором popUp нужно установить его ширину и высоту. Используя JavaScript, нам понадобилось бы две строки кода, jQuery же обходится одной:

Код
$('#popUp').width(300).height(300);


Функции добавляются одна за другой, разделяясь точкой. В этом и состоит принцип связывания.
Можно пойти ещё дальше и для выбранного нами блока добавить текст и его появление на странице:

Код
$('#popUp').width(300).height(300).text('Привет!').fadeIn(3000);


в результате к элементу #popUp применяются уже четыре jQuery-функции: width(), height(), text() и fadeIn().

Одну длинную строку можно разбить на несколько таким образом (главное не забудьте поставить в конце точку с запятой, чтобы интерпретатор JavaScript воспринял всё как единую инструкцию):

Код
$('#popUp').width(300)
.height(300)
.text('Привет!')
.fadeIn(3000);


При связывании функций вы не можете добавлять в цепочку функции, не являющиеся функциями jQuery(например, ваши собственные или встроенные в язык JavaScript) без создания дополнительного кода

Изменить / Удалить

  • Страница 2 из 7
  • «
  • 1
  • 2
  • 3
  • 4
  • 6
  • 7
  • »
Поиск: