Существует много конкурирующих разработок, но именно jQuery стала одной из самых популярных, благодаря множеству преимуществ.
- Бесплатность
- Популярность (jQuery используется на миллионах сайтах, в т.ч таких популярных как: Google, Dell, NBC, youTube и др.)
- Команда разработчиков высшего класса, которая постоянно поддерживает данный программный продукт, выпуская новые версии.
- Относительная простота в использовании и возможности быстрого изучения
- Открытый код, возможность создавать плагины
jquery.com
code.jquery.com
В данном разделе представлены некоторые основные возможности jQuery, а также краткий справочник-шпаргалка по jQuery
<!DOCTYPE html> <!-- Примеры кодов на HTML будут приводиться в таком стиле //--> </html>
// Примеры кодов на JavaScript будут приводиться в таком стиле
Примеры из справочника-шпаргалки по jQuery будут приводиться в таком стиле
Как подключить jQuery
jQuery включается в веб-страницу как один внешний JavaScript-файл:
<head> <script type="text/javascript" src="/js/jquery.js"></script> <!-- Подключили саму библиотеку jQuery, теперь подключаем наш файл с программами для этой странички //--> <script type="text/javascript" src="/js/js1.js"></script> </head>
Проверка подключения библиотеки jQuery на данной страничке:
$("#a_test01").click(function(event){ alert("Как вы заметили линк не уводит вас на сайт usa2017.com"); event.preventDefault(); });
Если ссылка не уводит вас на сайт usa2017.com, значит, библиотека jQuery подключена и работает корректно (сработало событие jQuery preventDefault).
Core :: Ядро
jQuery function :: Функция джиКвери
$ .jQuery( selector [, context] ), .jQuery( element ), .jQuery( elementArray ), .jQuery( jQueryObject ), .jQuery( ) $ .jQuery( html [, ownerDocument] ), .jQuery( html, props ) $ .jQuery( fn )
jQuery Object Accessors :: Доступы к Объекту джиКвери
$ .each( fn(index, element) ) num .size( ), .length str .selector el .context $ .eq( index ) jQuery.error( str ) [el],el .get( [index] ) num .index( )index( selector )index( element ) $ jQuery.pushStack( elements, [name, arguments] ) arr .toArray( )
Interoperability :: Межоперационность
$ jQuery.noConflict( [extreme] )
Фундаментальной функцией jQuery является .ready(function() {...});
Данная функция ожидает окончания загрузки странички HTML, а затем запускает скрипты внутри данной функции. Обычно, программный код для выполнения находится внутри данной функции, если только, по каким-то соображениям не требуется иной подход.
$(document).ready(function() { // Начало функции .ready(function() {...}); // теперь можно разместить скрипты для данной странички }); // Конец функции .ready(function() {...});
jQuery(document).ready(function() { // Начало функции .ready(function() {...}); // теперь можно разместить скрипты для данной странички }); // Конец функции .ready(function() {...});
Типичное использование библиотеки jQuery:
- выборка элементов ДОМа
- манипуляция с выбранными элементами
jQuery( "#button_test02" ).click(function() { var amount_test02 = 0; jQuery( ".test02" ).each(function() { // этот цикл что-то вроде for или while на классических языках... // выборка элементов ДОМа с классом .test02 var nn = $( ".test02" ).index( this ); // nn - номер элемента выборки, начиная с 0 (нуля)... jQuery(this).removeClass("float_right"); amount_test02++; // считаем сколько всего таких элементов... jQuery(this).html(amount_test02); // выводим текущее значение на текущем элементе... }); // вывод окончательного значения amount_test02++; // замена кнопок });
Здесь будет информация после расчета по тесту 02
Selectors :: Селекторы
С помощью jQuery можно выбрать один или более элементов, пользуясь специальной командой, вызывающей объект jQuery.
Основной синтаксис такой:
$( "selector" ); // или jQuery( "selector" );
Основными селекторами CSS являются: ID, селекторы классов и элементов.
Basics :: Основные селекторы
#id element .class, .class.class * selector1, selector2
$( "#button_test03" ).click(function() { jQuery(".test03").fadeOut("slow").fadeIn("slow"); // выбираем все элементы с классом .test03 // заставляем эти элементы исчезнуть и вновь появиться });
Basic Filters :: Основные Фильтры
:first :last :not(selector) :even :odd :eq(index) :gt(index) :lt(index) :header :animated
Элемент test04_01 с классом test04
Элемент test04_02 с классом test04
Элемент test04_03 с классом test04
Элемент test04_04 с классом test04
Элемент test04_05 с классом test04
Элемент test04_06 с классом test04
Элемент test04_07 с классом test04
jQuery( "#button_test04" ).click(function() { jQuery( ".test04:even" ).each(function() { // по нажатию кнопки #button_test04 делаем выборку всех четных элементов с классом .test04 jQuery(this).addClass("hilite_invert2"); // и выделяем эти элементы, добавив класс hilite_invert2 }); jQuery("#button_test04").addClass("vis_off"); jQuery("#button_test04_restore").addClass("vis_on"); jQuery("#button_test04").removeClass("vis_on"); jQuery("#button_test04_restore").removeClass("vis_off"); });
Child Filters :: Фильтры Дочерних элементов
:nth-child(expr) :first-child :last-child :only-child
Hierarchy :: Иерархия
ancestor descendant parent > child prev + next prev ~ siblings
Content Filters :: Фильтры Контента
:contains(text) :empty :has(selector) :parent
Вася - нехороший человек...
Вася - нехороший человек...
jQuery( "#button_test05" ).click(function() { jQuery( "p:contains('Вася - нехороший')" ).each(function() { // т.е. ищем везде, где есть копромат на Васю... // и заменяем на правильное утверждение. jQuery(this).html('Вася - прекрасный человек!'); }); // смена кнопок... });
Visibility Filters :: Фильтры Видимости
:hidden :visible
Attribute Filters :: Фильтры Аттрибутов
[attribute] [attribute=value] [attribute!=value] [attribute^=value] [attribute$=value] [attribute*=value] [attribute|=value] [attribute~=value] [attribute] [attribute2]
Forms :: Формы
:input :text :password :radio :checkbox :submit :image :reset :button :file
Form Filters :: Фильтры Форм
:enabled :disabled :checked :selected
Attributes :: Аттрибуты
Attributes :: Аттрибуты
str .attr( name ) $ .attr( name, val ), .attr( map ), .attr( name, fn(index, attr) ) $ .removeAttr( name )
jQuery предлагает некоторые функции для управления аттрибутами класса элемента.
- addClass( class ) - добавляет элементу (элементам) класс.
- removeClass( class ) - удаляет из элемента (элементов) класс.
Class :: Класс
$ .addClass( class ), .addClass( fn(index, class) ) bool .hasClass( class ) $ .removeClass( [class] ), .removeClass( fn(index, class) ) $ .toggleClass( class [, switch] ), .toggleClass( fn(index, class) [, switch] )
HTML, text :: ХТМЛ, текст
str .html( ) $ .html( val ), .html( fn(index, html) ) str .text( ) $ .text( val ), .text( fn(index, html) )
Value :: Значение
str,arr .val( ) $ .val( val ), .val( fn() )
←
введите сюда что-нибудь для теста...
jQuery( "#button_test06" ).click(function() { jQuery("#button_test06").addClass("vis_off"); jQuery("#button_test06").removeClass("vis_on"); var val_test06 = $('#test06').val(); alert("val тега #test06 в данный момент = \r\n" + val_test06); jQuery("#button_test06").addClass("vis_on"); jQuery("#button_test06").removeClass("vis_off"); });
CSS :: Каскадные Таблицы Стилей
Функция jQuery css() позволяет прямо изменять свойства CSS выбранного элемента (элементов).
Три способа использования функции jQuery css():
- Нахождение текущего значения свойства CSS определенного элемента.
- Установка значения свойства CSS определенного элемента.
- Настройка множества свойств CSS одновременно.
CSS :: Каскадные Таблицы Стилей
str .css( name ) $ .css( name, val ), .css( map ), .css( name, fn(index, val) )
Positioning :: Позиционирование
obj .offset( ) $ .offset( coord ), .offset( fn( index, coord ) ) $ .offsetParent( ) obj .position( ) int .scrollTop( ) $ .scrollTop( val ) int .scrollLeft( ) $ .scrollLeft( val )
jQuery( "#button_test07" ).click(function() { // alert("Запущен тест 7 - прокрутка экрана на самый верх..."); jQuery(window).scrollTop(0,0); });
Height and Width :: Высота и Ширина
int .height( ) $ .height( val ), .height( fn(index, height ) ) int .width( ) $ .width( val ), .width(( fn(index, height ) ) int .innerHeight( ) int .innerWidth( ) int .outerHeight( [margin] ) int .outerWidth( [margin] )
Deferred :: Отложенный вызов
deferred object = { def done(doneCallbacks) def fail(failCallbacks) bool isRejected() bool isResolved() def reject([args]) def rejectWith(context, [args]) def resolve([args]) def resolveWith(context, [args]) def then(doneCallbacks, failCallbacks) } def .when(deferreds)
Traversing :: Пересечения
Filtering :: Фильтрация
$ .eq( index ) $ .first( ) $ .last( ) $ .has( selector ), .has( element ) $ .filter( selector ), .filter( fn(index) ) bool .is( selector ) $ .map( fn(index, element) ) $ .not( selector ), .not( elements ), .not( fn( index ) ) $ .slice( start [, end] )
Tree traversal :: Дерево Пересечений
$ .children( [selector] ) $ .closest( selector [, context] ) arr .closest( selectors [, context] ) $ .find( selector ) $ .next( [selector] ) $ .nextAll( [selector] ) $ .nextUntil( [selector] ) $ .offsetParent( ) $ .parent( [selector] ) $ .parents( [selector] ) $ .parentsUntil( [selector] ) $ .prev( [selector] ) $ .prevAll( [selector] ) $ .prevUntil( [selector] ) $ .siblings( [selector] )
Miscellaneous :: Разное
$ .add( selector [, context] ), .add( elements ), .add( html ) $ .andSelf( ) $ .contents( ) $ .end( )
Manipulation :: Манипуляции
Inserting Inside :: Вставка Внутрь
$ .append( content ), .append( fn( index, html ) ) $ .appendTo( target ) $ .prepend( content ), .prepend( fn( index, html ) ) $ .prependTo( target )
Inserting Outside :: Вставка Внешняя
$ .after( content ), .after( fn() ) $ .before( content ), .before( fn() ) $ .insertAfter( target ) $ .insertBefore( target )
Inserting Around :: Вставка Вокруг
$ .unwrap( ) $ .wrap( wrappingElement ), .wrap( fn ) $ .wrapAll(wrappingElement ), .wrapAll( fn ) $ .wrapInner( wrappingElement ), .wrapInner( fn )
Replacing :: Замена
$ .replaceWith( content ), .replaceWith( fn ) $ .replaceAll( selector )
Removing :: Удаление
$ .detach( [selector] ) $ .empty( ) $ .remove( [selector] )
Copying :: Копирование
$ .clone( [withDataAndEvents], [deepWithDataAndEvents] )
Объект для клонироваия...
var cloneNN=0; jQuery( "#button_test08" ).click(function() { // alert("Запущен тест 8 - клонирование..."); var clone1=jQuery("#object_to_clone").clone(); cloneNN++; clone1.removeClass("hilite"); clone1.addClass("hilite_invert2"); jQuery("#object_to_clone").before(clone1); clone1.html(" * Я есть клон номер " + cloneNN); });
Events :: События
JavaScript является событийно-управляемым языком. Событие есть точный момент, когда что-то происходит. Примеры событий: клик, наведение мыши, нажатие кнопки и т.д.
Библиотека jQuery облегчает процесс присвоения событий (помошников событий), который можно разбить на следующие шаги:
- Выборка элементов (одного или более).
- Присвоение события.
- Присвоение функции событию.
- Разработка-адаптация этой функции.
Page Load :: Загрузка Страницы
$ .ready( fn() )
Event Handling :: Управление Событиями
$ .bind( type [, data ], fn(eventObj) ) $ .bind( type [, data], false ) $ .bind( array ) $ .unbind( [type] [, fn]) $ .one( type [, data ], fn(eventObj) ) $ .trigger( event [, data]) obj .triggerHandler( event [, data]) $ .delegate( selector, type, [data], handler) $ .undelegate( [selector, type, [handler]])
Live Events :: Живые События
$ .live( eventType [, data], fn() ) $ .die( ), .die( [eventType] [, fn() ])
Interaction Helpers :: Помошники Взаимодействия
$ .hover( fnIn(eventObj), fnOut(eventObj)) $ .toggle( fn(eventObj), fn2(eventObj) [, ...])
Event Helpers :: Помошники События
function ( [data,] [fn] ) $ .blur, .change, .click, .dblclick, .error, .focus, .focusin, .focusout, .keydown, .keypress, .keyup, .load( [data,] fn ), .mousedown, .mouseenter, .mouseleave, .mousemove, .mouseout, .mouseover, .mouseup, .resize, .scroll, .select, .submit, .unload( [data,] fn )
// При наведении мыши, объекты с классом test09 // меняют значения ширины и высоты на значение 300. jQuery( ".test09" ).mouseover(function() { jQuery( this ).width(300); jQuery( this ).height(300); }); // При уходе мыши, объекты с классом test09 // меняют значения ширины и высоты на значение 100. jQuery( ".test09" ).mouseleave(function() { jQuery( this ).width(100); jQuery( this ).height(100); });
Event object :: Объект События
event = { el currentTarget, * data, bool isDefaultPrevented(), bool isImmediatePropagationStopped(), bool isPropagationStopped(), str namespace, num pageX, num pageY, preventDefault(), el relatedTarget, obj result, stopImmediatePropagation(), stopPropagation(), el target, num timeStamp, str type, str which }
Effects :: Эффекты
Basics :: Основные
$ .show( [ duration [, easing] [, fn] ] ) $ .hide( [ duration [, easing] [, fn] ] ) $ .toggle( [showOrHide] ) $ .toggle( duration [, easing] [, fn] )
- show() - показывает скрытый элемент.
- hide() - скрывает видимый элемент.
- toggle() - скрывает или показывает элемент.
Sliding :: Скольжение
$ .slideDown( duration [, easing] [, fn] ) $ .slideUp( duration [, easing] [, fn] ) $ .slideToggle( [duration] [, easing] [, fn] )
jQuery( "#button_test10_toggle" ).click(function() { jQuery( "#pic_test10_01").slideToggle(300); });
Fading :: Исчезновение
$ .fadeIn( duration [, easing] [, fn] ) $ .fadeOut( duration [, easing] [, fn] ) $ .fadeTo( [duration,] opacity [, easing] [, fn] ) $ .fadeToggle( [duration,] [, easing] [, fn] )
// jQuery( "#button_test10_toggle" ).click(function() { jQuery( "#pic_test10_01").slideToggle(300); }); // jQuery( "#button_test10_fadeToggle" ).click(function() { jQuery( "#pic_test10_02").fadeToggle(300); }); // jQuery( "#button_test10_fadeTo" ).click(function() { jQuery( "#pic_test10_02").fadeTo('slow',.25); }); // jQuery( "#button_test10_fadeTo_OFF" ).click(function() { jQuery( "#pic_test10_02").fadeTo('slow',1.0); });
Custom :: Пользовательские
$ .animate( params [, duration] [, easing] [, fn] ) $ .animate( params, options ) $ .stop( [clearQueue] [, jumpToEnd] ) $ .delay( duration [, queueName] )
Settings :: Установки
bool jQuery.fx.off num jQuery.fx.interval
AJAX :: Технология Ажакс
Термин AJAX появился в 2005 году и означает Asynchronous JavaScript и XML (асинхронные JavaScript и XML).
AJAX есть комплекс технологий сервера и рабочих станций для получения информации без перегрузки страницы.
Традиционная (без AJAX) модель взаимодействия рабочей станции (браузера) и сервера заключается в запросе и получении целиком вебстраницы с ее полной перезагрузкой. При использовании AJAX технологии браузер отправляет, а сервер отдает в ответ только небольшие куски информации. Обновляется не целиком веб страница, а только ее небольшие участки, связанные с текущей информацией.
Low-Level Interface :: Низкоуровневый Интерфейс
jqXHR jQuery.ajax( options, [settings] ) 1.5+ map accepts bool async = true fn beforeSend( jqXHR, config) bool cache = true fn complete( jqXHR, status) map contents str contentType obj context map converters bool crossDomain obj, str data fn dataFilter( data, type ) bool global = true map headers bool ifModified = false str jsonp fn jsonpCallback str password bool processData = true str scriptCharset map statusCode num timeout bool traditional str type = 'GET' str url = curr. page str username fn xhr str dataType ∈ {xml, json, script, html} fn error( jqXHR, status, errorThrown ) fn success( data, status, jqXHR ) jQuery.ajaxSetup( options )
Shorthand Methods :: Упрощенные методы
$ .load( url [, data] [, fn( responseText, status, XHR )] ) jqXHR jQuery.get( url [, data] [, fn( data, status, XHR )] [, type] ) jqXHR jQuery.getJSON( url [, data] [, fn( data, status )] ) jqXHR jQuery.getScript( url [, fn( data, status )] ) jqXHR jQuery.post( url [, data] [, fn( data, status )] [, type] )
Удобной и простой функцией технологии AJAX в библиотеке jQuery является load(). Эта функция загружает HTML файл в определенный элемент на странице.
Удобство этой функции в возможности четкого разделения обязанностей, что является необходимым условием при разработке и внедрения большого проекта. Сам файл HTML может подготавливать и обновлять его при необходимости один из участников проекта (серверный программист), а загружать на веб страницу (или страницы) - другой участник (дизайнер).
В примере ниже при нажатии кнопки в определенный див загружается подготовленная страничка HTML.
Сейчас в этом div-е ничего нет. Нажмите кнопку загрузки контента из HTML файла... Она ниже...
jQuery( "#button_test11_load" ).click(function() { jQuery( "#div_load_to").load('/post/webmaster/jquery/load/load1.html'); // ... });
Функции get() (или getJSON(), или getScript()) и post() являются инструментами для отправки и получения данных с веб-сервера.
Что лучше get() или post() ? Если вы передаете на сервер текстовую строку на русском языке (или другом языке, отличным от английского), то использование post() явно лучше по причине вероятного появдения проблем с кодировками при методе get(). Также метод POST (функция post()) удобнее при отправке большого объема информации, т.к. метод GET имеет встроенный лимит на объем данных, которые можно посылать. Далее, для упрощения мы рассматриваем метод POST, имея ввиду, что метод GET работает аналогично.
Базовая структура функции post() следующая:
jQuery.post(url, data, callback);
или
$.post(url, data, callback);
url - программа для сервера вместе с путем к ней;
var url = "post1.php"; // url - программа для сервера вместе с путем к ней;
var data = ""; // data - данные, передаваемые серверной программе // в формате строки или литерала объекта JavaScript; data += "ajax_ok=1"; data += "string_rus='Строка на русском языке'";
function callback(data, status) { if (status=='success') { var mesContent = $(data).find('string_rus_from_server').html(); // поиск тегов <string_rus> в переменной data, которая пришла от сервера } else { var mesContent = "Информация от сервера не получена"; } // выводим куда-нить mesContent }
XML является распространенным форматом обмена данными между компьютерами. Как и HTML, в XML используется теги для структуирования и идентификации информации. В XML можно придумывать свои теги, что позволяет более гибко и точно отобразить информацию.
<?xml version="1.0" encoding="UTF-8" ?> <info id="1"> <string_rus_from_server>Строка на русском языке от сервера</string_rus_from_server> </info>
←
введите сюда что-нибудь для теста...
Сейчас в этом div-е ничего нет. Нажмите кнопку тест11 post для проведения теста...
Небольшой тест для тестирования и сравнения методов GET и POST здесь:Тест сравнения методов GET и POST
В следующем тесте серверу технологией AJAX методом POST передается строка (по умолчанию ее значение %MySQL%, но ее значение можно изменить, в том числе и на фразу с русскими буквами.
В ответ сервер возвращает кусок НТМЛ-кода с информацией по данному запросу, в случае успеха, или сообщение о неудаче.
Примечание. Это SQL запрос. Можно (и нужно) использовать специальные символы:
% (процент) - означает любую последовательность символов.
_ (нижняя черта) - означает один любой символ.
←
введите сюда что-нибудь для поиска...
←
максимальное количество строк выборки (от 1 до 1000, оптимально 50)
Сейчас в этом div-е ничего нет. Нажмите кнопку тест12 post для проведения теста...
Global Ajax Event Handlers :: Обработка Глобальных Событий Ажакса
$ .ajaxComplete( fn( event, XHR, options ) ) $ .ajaxError( fn( event, XHR, options, thrownError ) ) $ .ajaxSend( fn( event, XHR, options ) ) $ .ajaxStart( fn( ) ) $ .ajaxStop( fn( ) ) $ .ajaxSuccess( fn(event, XHR, options) )
Miscellaneous :: Разное
str .serialize( ) [obj] .serializeArray( ) str jQuery.param( obj, [traditional] )
Utilities :: Утилиты
Browser and Feature Detection :: Определение браузера и его особенностей
obj jQuery.support obj jQuery.browser deprecated str jQuery.browser.version deprecated bool jQuery.boxModel deprecated
Basic operations :: Основные операции
obj jQuery.each( obj, fn( index, valueOfElement ) ) obj jQuery.extend( [deep,] target, obj1 [, objN] ) arr jQuery.grep( array, fn( element, index ) [, invert] ) arr jQuery.makeArray( obj ) arr jQuery.map( array, fn( element, index ) ) num jQuery.inArray( val, array ) arr jQuery.merge( first, second ) fn jQuery.noop fn jQuery.proxy( fn, scope ), jQuery.proxy( scope, name ) fn jQuery.sub( ) 1.5+ arr jQuery.unique( array ) str jQuery.trim( str ) obj jQuery.parseJSON( str )
Data functions :: Функции работы с данными
$ .clearQueue( [name] ) $ .dequeue( [name] ), jQuery.dequeue( [name] ) obj jQuery.data( element, key ), jQuery.data( ) obj .data( ), .data( key ) $ .data( key, val ), .data( obj ) $ .removeData( [name] ) [fn] .queue( [name] ) jQuery.queue( [name] ) $ .queue( [name,] fn( next ) ), jQuery.queue( [name,] fn( ) ) $ .queue( [name,] queue ), jQuery.queue( [name,] queue )
Test operations :: Тестовые операции
str jQuery.type( obj ) bool jQuery.isArray( obj ) jQuery.isEmptyObject( obj ) bool jQuery.isFunction( obj ) bool jQuery.isPlainObject( obj ) bool jQuery.isWindow( obj )