Селекторы

Селекторы
http://api.jquery.com/category/selectors/

$('#id');
$('.class');

$('#id .class');
$('parent > child');
$('tag + tag');
$('tag[attribute]');
$('tag[attribute="value"]');
$('tag[attribute^="value"]');
$('tag[attribute*="value"]');
$('tag[attribute&="value"]');

$('tag:even'); возвращает 0-2-4 элементы выборки
$('tag:odd'); возвращает 1-3-5 элементы выборки

$('tag:first');
$('tag:last');

$('tag:not(element)'); без класса element
$('tag:has(element)'); выбирает tag имеющий element
$('tag:contains(content)');

$('tag:hidden'); если не установлен visibility: invisible;
$('tag:visible');

Выборка элементов jQuery отличается от традиционной выборки getElementByTagName() или getElementById() и не понимает традиционных методов объектной модели.

Автоматические циклы

$(‘#slideshow img’).hide(); – автоматически пройдет по всем элементам выборки и к каждому из них применит функцию .hide();

Связывание функций

$('#popUp').width(300)
    .height(300)
    .text('Hi!')
    .fadeIn(1000);

Добавление содержимого на страницу

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

.text() – похожа на работу функции html, но не принимает HTML элементы.

.append() – добавляет HTML-код в качестве последнего дочернего элемента выбранного элемента.

.prepend() -добавляет HTML-код в качестве первого дочернего элемента выбранного элемента.

.before()

Замена и удаление выборок

.remove() – удаляет выборку

.replaceWith(value) – заменяет выборку на value

.clone() – создает клон

Установка и чтение атрибутов элемента

addClass(‘class-name’) – добавляет класс

removeClass(‘class-name’) – удаляет класс

toggleClass(‘class-name’) – добавляет или удаляет класс

Чтение и изменение свойств CSS

определение текущего значения свойства

var bgColor = $('#main').css('background-color');

$('body').css('font-size' : '200%'); // числовое знач. второго аргумента jQuery переведет в пиксели .css('padding', 100)

var baseFont = $('body').css('font-size');
baseFont = parseInt(baseFont); // вернет значение + px
$('body').css('font-size', baseFont * 2);

jQuery возвращает все цвета в rgb или rgba если есть прозрачность. Всегда все значения в пикселях.

Литерал объекта (объектная константа) – список пар свойств / значение

.css({
    'font-size' : '5em',
    'color' : 'red'
});

Чтение, установка и удаление атрибутов HTML.

.attr(); .removeAttr()

var imageFile = $('#banner img').attr('src','new/image/path');

 Работа с каждым элементом выборки

.each(function() {});

Ключевые слова this и $(this)

$(this) jQuery версия традиционному this – относится к элементу вызывающему анонимную функцию

$('a[href^=http://]').each(function(){
    var extLink = $(this).attr('href');
});