jQuery – это очень просто!

Макс

jQuery – это звезда среди остальных библиотек. Её достоинства – это: легкость, кросс-браузерность и простота. Задача, которая потребовала бы 10 строк кода на javascript, решается одной строкой на jQuery. Например, Вы хотите раскрасить табличку с id=”mytable”, чтобы каждый ряд имел свой цвет.


	Код: $function() { $("table#mytable tr:nth-child(even)".addclass("even"); $("div.test").add("p.quote").html("мааааленький тест").fadeout(); });

Волшебный знак $ и цепочки операторов
В jQuery наиболее важный символ – это символ $. Функция $() возвращает объекты, следующие в цепочке операторов. Например:


	Код: $("div.test").add("p.quote").html("a little test").fadeOut();

Эта цепочка делает следующее:
1) Выбирает див с классом test
2) Вставляет параграф с именем класса quote
3) Добавляет текст в параграф
4) Оперирует дивом, используя fadeOut

Селекторы
CSS селекторы
Мы формируем оформление страниц с помощью CSS. CSS работает с элементами в DOM в следующем порядке: body, table, p, input или с помощью ID элемента (пока ID уникальный) или именами классов.
jQuery использует такие же методы, чтобы найти один элемент или группу. Например:
$(“p.note”) вернет все элементы, у которых имя класса = note $(“p#note”) вернет элемент
чей id = note
$(“p”) вернет все p элементы
Дочерние селекторы
Чтобы выбрать дочерний селектор, нам надо использовать “>”. Например, $(“p > a”) вернет все ссылки в p элементе.
Чтобы выбрать элемент или элементы с заданным атрибутом, надо использовать []. Например, input[type=text] вернет все элементы ввода, которые имеют тип text.
Чтобы выбрать контейнер с другими элементами, мы должны использовать has. Например, $(“p:has(a)”) вернет
<p>
.

Позиционные селекторы
jQuery позволяет Вам выбрать элементы в зависимости от их порядка.
$(“p:first”) вернет первый элемент.
Существующие позиции:
first, last, first-child, only-child, nth-child(n), nth-child(even), nth-child(odd)
Собственные селекторы
Эти селекторы позволяют делать всё, что нам нужно.
animated, button, checkbox, checked, disabled, enabled, header, hidden, image, input, not(filter), parent, password, radio, reset, selected, submit, text, visible

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

size() and each(iterator)
Чтобы определить размер того, что мы только что выбрали, должны использовать команду size().
Например, чтобы получить все id элементов <p>, которые мы выбрали, надо использовать цикл for…loop и команду size():


	Код: for(var i=0;i< $('p').size(); i++) alert('мой id'+$('p')[i].id);

Чтобы убрать лишнее, мы можем использовать команду each(). Доступ к элементу можно получить, используя кейворд “this”. Перепишем код вот так:


	Код: $("p").each( function() { alert('мой id'+this.id); })

Берем и задаем значения атрибутов
addClass задает всем элементам, имеющих один CSS класс или несколько CSS классов.
removeClass наоборот убирает у элементов один или более CSS классов по заданному парамерту:


	Код: $('p.notes').addClass('notes', 'highlight'); $('p.notes').removeClass('highlight');

Мы можем не только задавать и снимать, но также и переключать. Команда toggleClass позволяет нам добавлять заданный CSS класс, если его нет, и удалять, если он есть.


	Код: $('p.notes').toggleClass('highlight');

css(имя, значение)
Что делать, если мы хотим изменить CSS стиль элемента без использования любых имен класса? Команда CSS позволяет сделать так:


	Код: $('p.note').css('background-color', 'yellow');

Здесь мы задаем параграфу с классом note желтый цвет фона.
Есть еще элементы width() и height(), которые позволяют нам напрямую изменять размеры элемента. Например:


	Код: $('p.note').width(500).height(100);

поменяет ширину и высоту всех элементов, которые имеют одинаковый класс note.

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

Манипуляция с контентом: html() и text()
Очень хорошо, что все команды jQuery позволяют задавать и брать параметры. Чтобы получить свойство, достаточно вызвать команду без параметров. Чтобы задать, надо вызвать с параметром.
html() вернет свойство innerHTML элемента;
html(content) задаст свойство.
text() вернет весь текстовый контент;
text(content) поменяет текстовый контент элемента.
Например, посмотрите на этот код:


	Код: <table id="table1"> <tbody> <tr> <td> test1 </td> <td> item1 </td> </tr> </tbody>

$(‘table#table1′).html(); вернет всё внутри таблицы (id=table1), включая теги
$(‘table#table1′).text(); вернет только контент одной большой неразделенной строкой: test1item1

Значения элементов формы: val()
Чтобы взять или задать значение элемента, используйте команду val(): val() – чтобы взять, и val(content) – чтобы задать.
Вот пара подсказок по val:
a) Помните, как мы перебирали радиокнопки, чтобы выбрать нужную нам?
for (var i=0; i
Теперь с jQuery (с селекторами и val() ) мы можем сделать


	Код: var selected = $('input[name=selectMe]:checked').val();

b) Запомните, что команды jQuery всегда мультизадачны и можно задавать цепочки команд.
Тоже самое и с командой val(). Можно задать значения для каждого элемента в выборке за один раз.


	Код: $('input').val(['red','blue','orange']);

Этот код проверит все чекбоксы или радиокнопки, чьи значения совпадают с любым из значений в массиве (red, blue, orange).

Добавление и вставка
JQuery умеет добавлять и вставлять данные в разные места:
append(something): добавляет “something” в конец выбранного;
appendTo(target): добавляет всё выбранное в конец target;
prepend(something): добавляет “something” в начало выбранного;
prependTo(target): добавляет всё выбранное в начало target;
before(something): добавляет “something” перед каждым элементом выбранного;
insertBefore(target): вставка всего выбранного перед target;
after(something) : вставка “something” после каждого выбранного элемента;
insertAfter(target) : вставка всего выбранного после target;

Обертка и удаление
Нам иногда может понадобиться обернуть наши элементы в другие элементы. Для этого мы можем воспользоваться командой wrap().


	Код: $('p.note').wrap(" This is our notes section ");

Мы также можем удалить обертку. remove() удаляет все выбранные элементы. Например:


	Код: $('div.note').remove();

Клонирование
Мы клонируем с clone(), затем перемещаем клон куда-нибудь, связывая командами appendTo, insertBefore, before, after и т.д.


	Код: $('img#cloneme').clone().appendTo('div#gallary');

Теперь, когда мы разобрались с назначением и применением элементов JQuery, настало время для изучения некоторых действий (обработка событий). Посредством действий, реакций и взаимодействий мы учимся, общаемся и играем, а Интернет становится неотъемлемой частью нашей жизни.
Однако, задача создания единой совершенной модели взаимодействия, одинаково пригодной для различных браузеров конкурирующих компаний-разработчиков, довольно затруднительна. Кроме того, не стоит забывать о существовании различных моделей событий DOM. Признайте, ведь вам не раз приходилось сталкиваться с проблемой взаимодействия типа «Да/Нет » между вами и пользователем?
Да, все работает.
Нет, не работает. Ничего не происходит.
Каким браузером вы пользуетесь?
…
JQuery предоставляет унифицированную платформу для кросбраузерной модели обработки событий. Кроме того, JQuery позволяет связывать или отключать события от нескольких слушателей событий. Каждое событие (blur, change, click, focus, keydown …) имеет свои свойства, такие как keyCode, pageX, pageY, screenX, screenY, shiftKey, target.

Добавление и удаление обработчика событий: bind() и unbind()


	Код: bind(eventType, data, listener)

Таким образом, вместо добавления события нажатия кнопки мыши к изображению, как показано ниже:


	Код: <img id="img1" src="arrowup.jpg" onclick ="showMe()"/>

используя JQuery мы добавляем обработчик(и) событий с помощью команды bind().


	Код: $(function(){ $('img#clickme').bind('click', function(evt){ alert('Опа! Вы кликнули на меня!'); }; };

С помощью селекторов JQuery и команды bind() несложно обработать событие выбранного набора элементов.
Теперь немного изменим вышеприведенный код:


	Код: $(function(){ $('img').bind('click', function(evt){ alert('Мой id='+this.id); }; }

;
В этом примере мы даем команду каждому изображению на странице реагировать на событие нажатия кнопки мыши.
Команда bind() может использоваться для добавления анонимных обработчиков к одному событию. А теперь снова рассмотрим наш пример и внесем в него некоторые изменения:


	Код: $('img').bind('click', function(event) { alert('Мой id='+this.id); }).bind('click', function(event) { alert('Мой источник '+this.src); }).bind('click', function(event) { alert('Мой положение '+event.pageX+' '+event.pageY ); }); });

Но ведь у каждой медали есть две стороны. Сначала мы добавляем, а затем удаляем обработчик событий одним из следующих способов:


	Код: unbind(eventType, listener) unbind(event)

Прямое использование названий событий и запуск обработчиков событий: eventName() и trigger()
Для большинства часто используемых событий существует множество удобных, продвинутых обработчиков. Для таких часто встречающихся событий как click, focus, select, submit, blur можно опустить команду bind() и напрямую, непосредственно использовать обработчики.
Синтаксис выглядит следующим образом: eventName(listener), например, click ( function () { } ) ;
или же просто eventName(), как, например, click ();

Пример:


	Код: $('img').click(function(event) { alert('My id = ' + this.id);}); $('img#clickMe').click() // имитация нажатия на изображение с id = clickMe

trigger(eventType)
Порой возникает необходимость не просто обработать, а сгенерировать событие. Например, иногда нужно инициировать событие отправки формы. Как это сделать? Просто используйте функцию trigger.


	Код: //… trigger(‘submit’);

Сгенерировать такое событие можно внутри обработчика другого события.


	Код: $('img#clickme').click(function(event){ $('img#submit').trigger('submit'); })

$('img#submit').submit(function(){
alert('Всё ок!');
});

Последовательная обработка событий: toggle(handler1, handler2, handler3, …)
Главное преимущество, которое предоставляет JQuery — удобство. Если существуют какие-то рутинные действия, то обязательно найдется функция, которая поможет их упростить. Так, например, обстоит дело с последовательной обработкой событий. Как видно из синтаксиса метода toggle(), вы можете переключаться между множеством обработчиков событий.
С помощью этого переключения удобно настраивать стили заданного набора элементов. Сначала задаем синий цвет; затем меняем не зеленый; потом на красный… пока снова не вернемся к синему. И так вновь и вновь.


	Код: $('img#chmeleon').toggle( function(event){ alert('Меняем на красный'); $(event.target).css('background-color: red'); }, function(event){ alert('Меняем на зеленый'); $(event.target).css('background-color: green'); } } );

Наведение курсора: hover(mouseoverhandler, mouseouthanlder)
Метод hover() – еще один пример удобной для использования команды. Всем нам нравится наблюдать как ссылки и картинки меняют свои стили и отображение при наведении курсора. Ранее с этой целью использовались команды mouseover() и mouseout(). Теперь же, используя JQuery, можно просто вызвать команду hover().


	Код: $('img#star').hover( function() { $(this).attr(src, 'star.jpg'); }, function() { $(this).attr(src, 'star.gif'); } );

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

Прием Show / Hide, медленнее и медленнее, а затем быстрее и быстрее
Прием Show / Hide (отобразить / скрыть слой) — довольно распространен. Однако, до использования JQuery мне всегда приходилось быть несколько многословным (и в большинстве случаев я был вынужден искать нужный код через поисковик, как, например, в этом случае, когда жертвой моего грабежа стал: http://www.geocities.com/technofundo/te ... whide.html):


	Код: <script type="text/javascript"> <!-- function toggleBox(szDivID, iState) //1 - видимый, 0 - спрятанный { if (document.layers) { document.layers[szDivID].visibility = iState ? "show" : "hide"; } else if document.getElementById) { var obj = document.getElementById(szDivID); obj.style.visibility = iState ? "visible" : "hidden"; } else if (document.all) { document.all[szDivID].style.visibility = iState ? "show" : "hidden"; } } --> <script>

Но теперь с помощью JQuery я могу просто написать (да, вы отгадали) show(), чтобы отобразить и hide(), чтобы скрыть элемент или подходящий набор элементов:


	Код: $(‘div’).show(); $(‘div’).hide();

Конечно, также можно воспользоваться функцией toggle(), которая определяет, а затем меняет состояние данного элемента на противоположное. Это сейчас отображается? Да-> Тогда скрыть; Нет -> показать.
Все просто.


	Код: $('#clickme').click(function() { $('div').toggle; });

Огромное преимущество команд show/hide/toggle состоит в том, что они дают возможность добавить анимацию (регулировку скорости), дабы в полной мере воссоздать волшебство появления, исчезновения и повторного возникновения.
Другими словами, элемент управления скоростью встречается не часто, однако для JQuery это норма. Отныне мы сможем с легкостью управлять скоростью таких анимационных эффектов, как slide, fade, animate и др. Существует три заданные по умолчанию скорости: низкая, средняя и высокая. Кроме того, безусловно, есть возможность задать нужную скорость вручную в миллисекундах.
Следующая строка кода медленно отображает и скрывает слой.


	Код: $(‘div#toggle’).toggle(‘slow’”>);

Развернуть и свернуть, изменить прозрачность
Реализация эффекта разворачивания и сворачивания слоя всегда была задачей непростой. Однако, больше это не так. Теперь можно просто использовать эти «говорящие» интуитивно понятные методы: slideUp(speed, callback) и slideDown(speed, callback). И, конечно, не стоит забывать о команде toggle. Совместно с эффектом сворачивания и разворачивания команда toggle будет slideToggle(speed, callback).
Для изменения прозрачности используются следующие команды: fadeIn(speed, callback), fadeOut(speed, callback).
Пример:


	Код: $('#clickme').click(function() { $('div#slideme').slideToggle("slow") }); $('#fademe').hover( function(){$('img#star').fadeIn("slow");}, function(){$('img#star').fadeOut("slow");} );

Во всех языках программирования существует работа со строками и обработка массивов. И JQuery — не исключение. Комплиментарный и ненавязчивый по своей природе, JQuery не заменяет существующий набор функций JavaScript собственными, а просто дополняет их наиболее недостающими.

Обрезка строк: $.trim(value)
Для работы со строками в языке JavaScript имеется довольно большое количество функций, таких как split, substr, charAt (см. доп. информацию по ссылке http://www.w3schools.com/jsref/jsref_obj_string.asp). Однако, по каким-то загадочным причинам, функции trim для удаления пробелов в начале и конце строки нет. Но нашлись люди талантливые и не жадные, написавшие различные варианты собственных версий функции trim. Как например:


	Код: var trimmed = str.replace(/^\s+\|\s+$/g, ”) ;

Функция работает отлично. Однако, как насчет простого вызова функции trim() с помощью JQuery? Синтаксис выглядит следующим образом:


	Код: $.trim(value) var trimmed = $.trim(” this really needs to be trimmed “);

Доступно и понятно, не так ли?

Функции обработки массива:


	Код: $.each (container, callback)

В JQuery в дополнение к традиционным типам массивов JavaScript (массив строк, чисел, элементов ) существует также специальный массив объектов в виде пары ключ-значение.
В JavaScript массив записывается следующим образом:


	Код: var arr = [ "one", "two", "three", "four", "five" ];

А в JQuery (каждая пара отделена двоеточием так:


	Код: var obj = { item1: “one”, item2: “two” ,item3: “three”, item4: “four”};

Осуществить проход по массиву JavaScript несложно. Однако, это может сделать еще проще с помощью функции JQuery $.each. Синтаксис таков: $.each (container, callback). Функция обратного вызова получает два аргумента: в случае с массивом [] (традиционный JavaScript) — индекс и знамчение; а в случае с массивом {} (массив объектов со свойствами) — ключ и значение.
Таким образом, в приведенном примере JQuery может получать доступ к элементам массива (заранее прошу прощения за такое количество alert):


	Код: var arr = ["one", "two", "three"]; var obj = {item1: "one", item2: "two", item3: "three"}; $.each(arr, function (n, val) { alert("Item " + n + " = " + val); }); $.each(obj, function (n, val) { alert(key + " = " + val); }); $.grep (array, callback, invert)

В JQuery есть функция $.grep(), которая возвращает массив элементов, удовлетворяющих определенному условию. Функции обратного вызова передается два параметра: текущее значение и его индекс. Например:


	Код: var arr = [10,20,30,40, 50]; var newArr = $.grep(arr, function (n, i) { return (n > 10 && n < 50); }); $.each(newArr, function (n, val) { alert("Item " + n + " = " + val); }); $.map (array, callback)

Ниже представлен еще один пример удобной функции, которая преобразовывает все элементы в массив за один заход. Преобразовать массив строк в массив чисел? Да. Преобразовать массив чисел обратно в массив строк? Да. Прибавить 10 к каждому числу массива? Да. Просто вызовите функцию $.map.


	Код: var arr = [10,20,30,40, 50]; array = $.map(arr, function (val) { return "" + val + ""; });

Другие чрезвычайно полезные функции JQuery для работы с массивами:
$.inArray(value, array) возвращает позицию первого найденного элемента по заданному значению.
Как например:


	Код: // мы получим "this" var inArr = $.inArray("this", ["this", "is", "a", "great", "fun"]); $.unique(array) возвращает массив уникальных элементов. Как в этом примере: // мы получим "this" "is" "a" "great" "fun" inArr = $unique(["this","this", "is", "a", "great", "fun"]); $.makeArray(object) создает массив из выбранных элементов. Как в примере ниже: // создаст массив со всеми элементами div var divs = $.makeArray($("div")); $.extend(target, source1, source2, … sourceN) добавляет свойства источника в целевой элемент. Например: // до: {firstname: "John", lastname: "Doe"} var target = {firstname: "John", lastname: "Doe"}; var source1 = {age: 20, gender: "M"}; //после: {firstname: "John", lastname: "Doe", age: 20, gender: "M"}; $.extend(target, source1);

Источник: jQuery – это очень просто! и оригинальный на английском языке JQuery, the very very basics – Lesson 1

Активные темы

Вопросы и ответы

jQuery – это очень просто!

Кто сейчас на конференции