vvz.nw.ru Примеры к занятиям по JavaScript

<< Некоторые методы JQuery

Необходимо помнить, что

категория метод описание пример
Атрибуты HTML attr (имя_атрибута ) Возвращает значение указанного атрибута foo = $('#nav a:first').attr('href');
  attr( имя_атрибута, новое_значение ) Присваивает новое значение указанному атрибуту

$('#content a:[href^=http://]').attr('target','_blank');

Результат: все ссылки на внешние ресурсы (по протоколу http) будут открываться в новом окне!

  removeAttr( имя_атрибута ) Удаляет указанный атрибут  
CSS addClass( имя_класса ) Добавляет указанный класс стиля

$('#myTable tr:even').addClass('qq');

Результат: к четным строкам таблицы с ID "myTable" будет добавлен класс "qq" (скажем, с особым фоном).

  removeClass( имя_класса ) Удаляет указанный класс стиля  
  toggleClass( имя_класса ) Переключает указанный класс стиля (то есть, если класс уже присвоен, удаляет его, а если класс не присвоен - добавляет)  
  css( свойство_стиля ) Возвращает значение указанного свойства стиля  
  css( свойство_стиля, значение ) Присваивает новое значение указанному свойству стиля  
  height() Возвращает вычисленную браузером высоту элемента в пикселах (без указания единиц измерения)  
  height( значение ) Задает высоту  
 

width()

Возвращает вычисленную браузером ширину элемента (без указания единиц измерения)  
  width( значение ) Задает ширину  
Иерархия next( [селектор] ) Возвращает следующего непосредственного "сиблинга", соответствующего селектору  
  prev( [селектор] ) Возвращает предыдущего непосредственного "сиблинга", соответствующего селектору  
  parent() Возвращает родительский элемент  
  parents([селектор]) Возвращает предков элемента, соответствующих селектору  
  children( [селектор] ) Возвращает дочерние элементы, соответствующие селектору  
  find( [селектор] ) Возвращает потомков, соответствующих селектору  
  siblings( [селектор] ) Возвращает "сиблингов" (то есть, элементы, имеющие того же родителя), соответствующих селектору  
Модификация документа html( код HTML) Заменяет содержимое элемента указанным кодом (аналог innerHTML) $('#qq').html('<div>новый элемент!</div>');
  text( текст HTML) Заменяет текст элемента на указанный  
  prepend( кодHTML ) Добавляет содержимое в начало элемента $('#qq').append('<p>новый абзац </p>');
  append( кодHTML ) Добавляет содержимое в конец элемента $('#qq').append('<p>новый абзац </p>');
  before( код HTML) Вставляет новый элемент перед выбранным  
  after( код HTML) Вставляет новый элемент после выбранного  
Визуальные эффекты и анимация show() Показывает (как правило, ранее скрытые) элементы, что равносильно заданию для их CSS свойства display значения, отличного от none  
  hide() Скрывает элементы, что равносильно заданию для их CSS свойства display значения none  
  toggle() Переключает состояние отображения / неотображения, то есть избавляет от необходимости писать условную инструкцию вида
if (элементы не отображаются) отобразить
else скрыть
То есть, изменяет значение CSS свойства display

... $('.qq').toggle();    //в каком-нибудь обработчике
...
<p class="qq">первый</p>
<p class="qq">второй</p>

 

fadeIn(время, callback)

(время можно указыывать в миллисекундах либо с помощью значений 'slow' и 'fast')

Плавное появление (за счет изменения степени прозрачности)  
 

fadeOut(время, callback)

(время можно указыывать в миллисекундах либо с помощью значений 'slow' и 'fast')

Плавное исчезновение (за счет изменения степени прозрачности)  
 

fadeTo(время, степень_непрозрачности, callback)

(время можно указыывать в миллисекундах либо с помощью значений 'slow' и 'fast')

Плавное изменение степени прозрачности  
 

slideUp(время, callback)

(время можно указыывать в миллисекундах либо с помощью значений 'slow' и 'fast')

Плавное исчезновение за счет уменьшения высоты до 0. Как результат - CSS свойство display принимает значение none  
 

slideDown(время, callback)

(время можно указыывать в миллисекундах либо с помощью значений 'slow' и 'fast')

Плавное появление ранее скрытого элемента за счет увеличения высоты. Как результат - CSS свойство display принимает значение, отличное от none.  
 

slideToggle(время, callback)

(время можно указыывать в миллисекундах либо с помощью значений 'slow' и 'fast')

Переключает состояние отображения / неотображения, за счет изменения высоты элемента.  

 



vvz.nw.ru  > JavaScript