Jquery документация на русском: Русская документация по API jQuery

15+ полезных документов по jQuery / Хабр

Как известно, пару месяцев назад свет увидела jQuery 1.4, в которой мы можем наблюдать множество новых функций и возможностей. А значит, стало еще больше информации для изучения и запоминания. И не важно, насколько хорошо вы владеете искусством jQuery — запомнить всё в любом случае не удастся. И вот здесь нам на помощь приходят всевозможные сборники документаций и шпаргалки, которые очень полезно держать под рукой и периодически в них заглядывать).

Итак, ниже представлены ссылочки на самые разнообразные документы по jQuery. Среди них вы найдете документацию по API, jQuery UI, мануалы по jQuery CSS и селекторам, шпаргалку по jQuery-валидатору и еще много других полезностей.
Поехали.

Официальная документация:

Альтернативные сборники документации:

jQAPI – Alternative jQuery Documentation (HTML, AIR и ZIP)

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

jQuery API – Alternative Browser (HTML)

Как и в предыдущем док-браузере, контент полностью дублирует официальную документацию. Особенностью же данного ресурса является его JS-навигация по содержимому, что значительно ускоряет поиск нужной информации.

Шпаргалки по jQuery

jQuery 1.4 Cheat Sheet – Impulse Studios Labs (PDF)

jQuery 1.4 API Cheat Sheet – Future Colors (PDF, HTML, PNG)

jQuery CSS Cheat Sheet (PDF)

jQuery Selectors – Refcardz (PDF)

jQuery Selectors Cheatsheet (HTML)

jTouch Cheatsheet – Color Charge (HTML)

jQuery Validator Cheatsheet – Elegant Code (PDF)

jQuery UI 1.7 Cheatsheet (HTML)

jQuery UI – Effects Cheatsheet (HTML)

jQuery – YUI3 Rosetta Stone (HTML)

jQuery 1.3

jQuery 1.3 Visual Cheat Sheet – Woorkup (PDF, JPEG)

jQuery 1.3 Cheatsheet – A Coding Fool (PDF)

jQuery 1.3 Cheatsheet Wallpaper (1920×1200, 1680×1050, 1440×900)

jQuery 1.3 Cheatsheet (HTML)

jQuery 1.3.2 Cheat Sheet (PDF, PNG, Microsoft XLS)

Источник: тут.

UPD: Ресурсы, предложенные в комментариях:

Утилиты | jQuery справочник

Возвращает все дочерние элементы выбранных элементов, а также текстовое содержимое.

Описание: Возвращает все дочерние элементы выбранных элементов, а также текстовое содержимое.

Given a jQuery object that represents a set of DOM elements, the .contents() method allows us to search through the immediate children of these elements in the DOM tree and construct a new jQuery object from the matching elements. The .contents() and .children() methods are similar, except that the former includes text nodes and comment nodes as well as HTML elements in the resulting jQuery object. Please note that most jQuery operations don’t support text nodes and comment nodes. The few that do will have an explicit note on their API documentation page.

The .contents() method can also be used to get the content document of an iframe, if the iframe is on the same domain as the main page.

Consider a simple <div> with a number of text nodes, each of which is separated by two line break elements (<br>):

  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  Ut enim ad minim veniam, quis nostrud exercitation ullamco
  laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit
  esse cillum dolore eu fugiat nulla pariatur.

We can employ the .contents() method to help convert this blob of text into three well-formed paragraphs:

      return this.nodeType === 3;

This code first retrieves the contents of <div> and then filters it for text nodes, which are wrapped in paragraph tags. This is accomplished by testing the .nodeType property of the element. This DOM property holds a numeric code indicating the node’s type; text nodes use the code 3. The contents are again filtered, this time for <br /> elements, and these elements are removed.

jQuery для начинающих. Часть 3. AJAX / Хабр

Представляю Вам третью статью из серии jQuery для начинающих. В этот раз я постараюсь рассказать о реализации AJAX запросов…

Что такое AJAX я думаю рассказывать не стоит, ибо с приходом веб-два-нуля большинство пользователей уже воротят носом от перезагрузок страниц целиком, а с появлением jQuery реализация упростилась в разы…

Примечание: Во всех примерах используется сокращенный вариант вызова jQuery методов, используя функцию $ (знак доллара)

jQuery(..).load

Начнем с самого простого — загрузка HTML кода в необходимый нам DOM элемент на странице. Для этой цели нам подойдет метод load. Данный метод может принимать следующие параметры:

1. url запрашиваемой страницы
2. передаваемые данные (необязательный параметр)
3. функция которой будет скормлен результат (необязательный параметр)

Приведу пример JavaScript кода:

// по окончанию загрузки страницы

$(document).ready(function(){              

    // вешаем на клик по элементу с id = example-1

    $(‘#example-1’).click(function(){

        // загрузку HTML кода из файла example.html

        $(this).load(‘ajax/example.html’);       

    }) 
}); 

Пример подгружаемых данных (содержимое файла example.html):

Example<br/>

Data Loaded By AJAX<br/>

Bye-Bye

Пример работы

jQuery.ajax

Это самый основной метод, а все последующие методы лишь обертки для метода jQuery.ajax. У данного метода лишь один входной параметр — объект включающий в себя все настройки (выделены параметры которые стоит запомнить):

• async — асинхронность запроса, по умолчанию true
• cache — вкл/выкл кэширование данных браузером, по умолчанию true
• contentType — по умолчанию «application/x-www-form-urlencoded»
• data — передаваемые данные — строка иль объект
• dataFilter — фильтр для входных данных
• dataType — тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)
• global — тригер — отвечает за использование глобальных AJAX Event’ов, по умолчанию true
• ifModified — тригер — проверяет были ли изменения в ответе сервера, дабы не слать еще запрос, по умолчанию false
• jsonp — переустановить имя callback функции для работы с JSONP (по умолчанию генерируется на лету)
• processData — по умолчанию отправляемые данный заворачиваются в объект, и отправляются как «application/x-www-form-urlencoded», если надо иначе — отключаем
• scriptCharset — кодировочка — актуально для JSONP и подгрузки JavaScript’ов
• timeout — время таймаут в миллисекундах
• type — GET либо POST
• url — url запрашиваемой страницы

Локальные AJAX Event’ы:

• beforeSend — срабатывает перед отправкой запроса
• error — если произошла ошибка
• success — если ошибок не возникло
• complete — срабатывает по окончанию запроса

Для организации HTTP авторизации (О_о):

• username — логин
• password — пароль

Пример javaScript’а:

$.ajax({

    url: ‘/ajax/example.html’,             // указываем URL и

    dataType : «json»,                     // тип загружаемых данных

    success: function (data, textStatus) { // вешаем свой обработчик на функцию success

        $.each(data, function(i, val) {    // обрабатываем полученные данные

            /* … */

        });

    }
});

jQuery.get

Загружает страницу, используя для передачи данных GET запрос. Может принимать следующие параметры:

1. url запрашиваемой страницы
2. передаваемые данные (необязательный параметр)
3. callback функция, которой будет скормлен результат (необязательный параметр)
4. тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

jQuery.post

Данный метод аналогичен предыдущему, лишь передаваемые данные уйдут на сервер посредством POST’а. Может принимать следующие параметры:

1. url запрашиваемой страницы
2. передаваемые данные (необязательный параметр)
3. callback функция, которой будет скормлен результат (необязательный параметр)
4. тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

JavaScript:

$(document).ready(function(){                          // по завершению загрузки страницы

    $(‘#example-3’).click(function(){                  // вешаем на клик по элементу с id = example-3

        $.post(‘ajax/example.xml’, {}, function(xml){  // загрузку XML из файла example.xml   

            $(‘#example-3’).html(»);

            $(xml).find(‘note’).each(function(){       // заполняем DOM элемент данными из XML

                $(‘#example-3’).append(‘To: ‘   + $(this).find(‘to’).text() + ‘<br/>’)

                               .append(‘From: ‘ + $(this).find(‘from’).text() + ‘<br/>’)

                               .append(‘<b>’    + $(this).find(‘heading’).text() + ‘</b><br/>’)

                               .append(           $(this).find(‘body’).text() + ‘<br/>’);

            });

        }, ‘xml’);                                     // указываем явно тип данных

    })
});

Файл example.xml:

<?xml version=»1.0″ encoding=»UTF-8″?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don’t forget me this weekend!</body>
</note>

Пример работы

jQuery.getJSON

Загружает данные в формате JSON (удобней и быстрее нежели XML). Может принимать следующие параметры:

1. url запрашиваемой страницы
2. передаваемые данные (необязательный параметр)
3. callback функция, которой будет скормлен результат (необязательный параметр)

JavaScript:

$(document).ready(function(){                            // по завершению загрузки страницы

    $(‘#example-4’).click(function(){                    // вешаем на клик по элементу с id = example-4

        $.getJSON(‘ajax/example.json’, {}, function(json){  // загрузку JSON данных из файла example.json   

            $(‘#example-4’).html(»);

                                                         // заполняем DOM элемент данными из JSON объекта

            $(‘#example-4’).append(‘To: ‘   + json.note.to + ‘<br/>’)

                           .append(‘From: ‘ + json.note.from + ‘<br/>’)

                           .append(‘<b>’    + json.note.heading + ‘</b><br/>’)

                           .append(           json.note.body + ‘<br/>’);

        });                

    })
});

Файл example.json:

{

    note:{

        to:’Tove’,

        from:’Jani’,

        heading:’Reminder’,

        body:’Don\’t forget me this weekend!’

    }
}

Пример работы

jQuery.getScript

данная функция загружает и выполняет локальный JavaScript. Может принимать следующие параметры:

1. url запрашиваемого скрипта
2. callback функция, которой будет скормлен результат (необязательный параметр)

JavaScript:

$(document).ready(function(){                          // по завершению загрузки страницы

    $(‘#example-5’).click(function(){                  // вешаем на клик по элементу с id = example-5

        $.getScript(‘ajax/example.js’, function(){     // загрузку JavaScript’а из файла example.js 

            testAjax();                                // выполняем загруженный JavaScript

        });                

    })
});

Файл example.js:

function testAjax() {

    $(‘#example-5’).html(‘Test completed’);  // изменяем элемент с id = example-5
}

Пример работы

Отправка Формы

Для отправки формы посредством jQuery можно использовать любой из перечисленных способов, а вот для удобства «сбора» данных из формы лучше использовать плагин jQuery Form

Отправка Файлов

Для отправки файлов посредством jQuery можно использовать плагин Ajax File Upload иль One Click Upload

Взаимодействие с PHP

Для организации работы с PHP использую бибилотеку jQuery-PHP, удобно если Вам нравится jQuery ;), подробней читаем в статье PHP библиотека для jQuery

Примеры использования JSONP

Отдельно стоит отметить использование JSONP — ибо это один из способов осуществления кросс-доменной загрузки данных. Если немного утрировать — то это подключение удаленного JavaScript’a, содержащего необходимую нам информациию в формате JSON, а так же вызов нашей локальной функции, имя которой мы указываем при обращении к удаленному серверу (обычно это параметр callback). Чуть более наглядно это можно продемонстрировать следующая диаграмма (кликабельно):

При работе с jQuery имя callback функции генерируется автоматически для каждого обращения к удаленному серверу, для этого достаточно использовать GET запрос ввида:

http://api.domain.com/?type=jsonp&query=test&callback=?

Вместо последнего знака вопроса (?) будет подставлено имя callback функции. Если же Вы не хотите использовать данный способ, то Вам необходимо будет явно указать имя callback функции, используя опцию jsonp при вызове метода jQuery.ajax().

Google Поиск

Пример получения и обработки результатов поиска используя Google, более подробную информацию найдете в статье «jQuery + AJAX + (Google Search API || Yahoo Search API)»

Yahoo Поиск

Пример получения и обработки результатов поиска используя Yahoo, более подробную информацию найдете в статье «jQuery + AJAX + (Google Search API || Yahoo Search API)»

JSONP API

Приведу так же небольшой список открытых API с поддержкой JSONP:

• Google — поиск и большинство сервисов
• Yahoo — поиск и большинство сервисов
• Flickr
• MediaWiki — соответственно и все производные — Wikipedia, Wiktionary и т.д.
• Digg
• CNET
• aideRSS

События

Для удобства разработки, на AJAX запросах висит несколько event’ов, их можно задавать для каждого AJAX запроса в отдельности, либо глобально. На все event’ы можно повесить свою функцию.

Пример для отображения элемента с id=«loading» во время выполнения любого AJAX запроса:

$(«#loading»).bind(«ajaxSend», function(){

    $(this).show(); // показываем элемент
}).bind(«ajaxComplete», function(){

    $(this).hide(); // скрываем элемент
});

Для локальных событий — вносим изменения в опции метода ajax():

$.ajax({

    beforeSend: function(){

        // Handle the beforeSend event

    },

    complete: function(){

        // Handle the complete event

    }

    // …
});

Для большей наглядности, приведу следующую диаграмму (кликабельно):

Ну и собственно список всех event’ов:

• ajaxStart — Данный метод вызывается в случае когда побежал AJAX запрос, и при этом других запросов нету
• beforeSend — Срабатывает до отправки запроса, позволяет редактировать XMLHttpRequest. Локальное событие
• ajaxSend — Срабатывает до отправки запроса, аналогично beforeSend
• success — Срабатывает по возвращению ответа, когда нет ошибок ни сервера, ни вернувшихся данных. Локальное событие
• ajaxSuccess — Срабатывает по возвращению ответа, аналогично success
• error — Срабатывает в случае ошибки. Локальное событие
• ajaxError — Срабатывает в случае ошибки
• complete — Срабатывает по завершению текущего AJAX запроса (с ошибкои или без — срабатывает всегда).Локальное событие
• ajaxComplete — Глобальное событие, аналогичное complete
• ajaxStop — Данный метод вызывается в случае когда больше нету активных запросов

Так же Вы можете скачать все примеры в одном архиве.

Цикл статей

1. jQuery для начинающих
2. jQuery для начинающих. Часть 2. JavaScript Меню
3. jQuery для начинающих. Часть 3. AJAX

P.S. Для подсветки синтаксиса использовал мини-сервис http://highlight.hohli.com/

html — документация jquery — qaru

Переполнение стека

1. Около

2. Продукты

3. Для команд

1. Переполнение стека
   Общественные вопросы и ответы

2. Переполнение стека для команд
   Где разработчики и технологи делятся частными знаниями с коллегами

3. Вакансии
   Программирование и связанные с ним технические возможности карьерного роста

4. Талант
   Нанимайте технических специалистов и создавайте свой бренд работодателя

5. Реклама
   Обратитесь к разработчикам и технологам со всего мира

6. О компании

.

Загрузить jQuery | jQuery

Ссылка

Загрузка jQuery

Доступны сжатые и несжатые копии файлов jQuery. Несжатый файл лучше всего использовать во время разработки или отладки; сжатый файл экономит полосу пропускания и повышает производительность в производственной среде.
Вы также можете загрузить файл исходной карты для использования при отладке со сжатым файлом.
Файл карты — , а не , необходимый для запуска jQuery пользователями, он просто улучшает работу отладчика разработчика.Начиная с jQuery 1.11.0 / 2.1.0 комментарий // # sourceMappingURL не включается в сжатый файл.

Чтобы загрузить эти файлы локально, щелкните ссылку правой кнопкой мыши и выберите в меню «Сохранить как …».

ссылка jQuery

Для получения помощи при обновлении jQuery см. Руководство по обновлению, наиболее подходящее для вашей версии.
Мы также рекомендуем использовать плагин jQuery Migrate.

Загрузите сжатую рабочую версию jQuery 3.5.1

Загрузите несжатый, разрабатываемый jQuery 3.5,1

Загрузите файл карты для jQuery 3.5.1

Вы также можете использовать тонкую сборку, которая исключает модули ajax и эффектов:

Загрузите сжатую рабочую версию jQuery 3.5.1 slim build

Загрузите несжатую версию jQuery 3.5.1 для разработки без сжатия

.

Загрузите файл карты для jQuery 3.5.1 slim build

Примечания к выпуску jQuery 3.5.1

Ссылка

Загрузка jQuery с помощью npm или Yarn

jQuery зарегистрирован как пакет на npm.Вы можете установить последнюю версию jQuery с помощью команды командной строки npm:

В качестве альтернативы вы можете использовать команду интерфейса командной строки Yarn:

Это установит jQuery в каталог node_modules . Внутри node_modules / jquery / dist / вы найдете несжатый выпуск, сжатый выпуск и файл карты.

Ссылка

Загрузка jQuery с помощью Bower

jQuery также зарегистрирован как пакет с Bower. Вы можете установить последнюю версию jQuery с помощью команды:

Это установит jQuery в установочный каталог Bower, по умолчанию bower_components .В bower_components / jquery / dist / вы найдете несжатый выпуск, сжатый выпуск и файл карты.

Пакет jQuery Bower содержит дополнительные файлы помимо дистрибутива по умолчанию. В большинстве случаев вы можете игнорировать эти файлы, однако, если вы хотите загрузить выпуск по умолчанию самостоятельно, вы можете использовать Bower для установки jQuery с одного из указанных выше URL-адресов вместо зарегистрированного пакета. Например, если вы хотите установить только сжатый файл jQuery, вы можете установить только этот файл с помощью следующей команды:

ссылка Плагин jQuery Migrate

Мы создали плагин jQuery Migrate
чтобы упростить переход со старых версий jQuery.Плагин восстанавливает устаревшие функции и поведение, поэтому старый код по-прежнему будет правильно работать в новых версиях jQuery. Используйте несжатую версию для диагностики проблем совместимости, она будет генерировать предупреждения на консоли, которые можно использовать для выявления и устранения проблем. Используйте сжатую производственную версию , чтобы просто исправить проблемы совместимости без создания предупреждений консоли.

Существует две версии Migrate. Первый поможет вам обновить ваш pre-1.9 код jQuery для jQuery 1.9 до 3.0. Вы можете получить эту версию здесь:

Загрузите сжатую рабочую версию jQuery Migrate 1.4.1

Загрузить несжатый, разрабатываемый jQuery Migrate 1.4.1

Вторая версия помогает вам обновить код для работы на jQuery 3.0 или выше, после того, как вы использовали Migrate 1.x и обновили до jQuery 1.9 или выше :

Загрузите сжатую рабочую версию jQuery Migrate 3.3.0

Загрузите разрабатываемый несжатый файл jQuery Migrate 3.3,0

link Кроссбраузерное тестирование с помощью jQuery

Обязательно протестируйте веб-страницы, использующие jQuery, во всех браузерах, которые вы хотите поддерживать. На сайте ресурсов для разработчиков Microsoft доступны виртуальные машины для тестирования множества различных версий Internet Explorer. Более старые версии других браузеров можно найти на oldversion.com.

link Предварительные сборки jQuery

Команда jQuery постоянно работает над улучшением кода. Каждая фиксация в репозитории Github генерирует незавершенную версию кода, который мы обновляем в jQuery CDN. Эти версии иногда нестабильны и никогда не подходят для производственных площадок. Мы рекомендуем использовать их, чтобы определить, была ли уже исправлена ​​ошибка, при сообщении об ошибках в выпущенных версиях или чтобы узнать, были ли добавлены новые ошибки.

Загрузить незавершенную сборку jQuery

Ссылка

Использование jQuery с CDN

Сети CDN

могут повысить производительность за счет размещения jQuery на серверах по всему миру. Это также дает то преимущество, что
если посетитель вашей веб-страницы уже загрузил копию jQuery с того же CDN, повторно загружать ее не нужно.

связывается с CDN jQuery, предоставляемым StackPath

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

Чтобы использовать jQuery CDN, просто укажите файл в теге скрипта непосредственно из домена jQuery CDN.Вы можете получить полный тег скрипта, включая атрибут целостности субресурса, посетив https://code.jquery.com и щелкнув версию файла, который вы хотите использовать. Скопируйте и вставьте этот тег в свой HTML-файл.

Начиная с jQuery 1.9, файлы исходных карт доступны на jQuery CDN. Однако, начиная с версии 1.10.0 / 2.1.0, сжатый jQuery больше не включает комментарий исходной карты в копиях CDN, поскольку требует, чтобы несжатый файл и файл исходной карты располагались в том же месте, что и сжатый файл.Если вы поддерживаете локальные копии и можете контролировать расположение всех трех файлов, вы можете добавить комментарий исходной карты к сжатому файлу для упрощения отладки.

Чтобы увидеть все доступные файлы и версии, посетите https://code.jquery.com

link Другие CDN

Следующие CDN также содержат сжатые и несжатые версии выпусков jQuery. Начиная с jQuery 1.9 они также могут размещать файлы исходной карты; проверьте документацию сайта.

Обратите внимание, что между выпуском jQuery и его доступностью могут быть задержки.Пожалуйста, проявите терпение, они получают файлы одновременно с публикацией сообщения в блоге. Бета-версии и релиз-кандидаты не размещаются в этих сетях CDN.

Ссылка

О коде

jQuery предоставляется по лицензии MIT.

Код размещен и разработан в репозитории jQuery GitHub. Если вы заметили некоторые области кода, которые можно улучшить, не стесняйтесь обсуждать их на форуме «Разработка ядра jQuery». Если вы хотите принять участие в разработке jQuery, посетите наш сайт участников для получения дополнительной информации.

Чтобы найти и загрузить плагины, разработанные участниками jQuery, посетите страницу

.Обозначение функций документации

jQuery — qaruQaruSite

Переполнение стека

1. Около

2. Продукты

3. Для команд

1. Переполнение стека
   Общественные вопросы и ответы

2. Переполнение стека для команд
   Где разработчики и технологи делятся частными знаниями с коллегами

3. Вакансии
   Программирование и связанные с ним технические возможности карьерного роста

4. Талант
   Нанимайте технических специалистов и создавайте свой бренд работодателя

5. Реклама
   Обратитесь к разработчикам и технологам со всего мира

.

javascript — Почему jQuery не использует JSDoc?

Переполнение стека

1. Около

2. Продукты

3. Для команд

1. Переполнение стека
   Общественные вопросы и ответы

2. Переполнение стека для команд
   Где разработчики и технологи делятся частными знаниями с коллегами

3. Вакансии
   Программирование и связанные с ним технические возможности карьерного роста

4. Талант
   Нанимайте технических специалистов и создавайте свой бренд работодателя

5. Реклама
   Обратитесь к разработчикам и технологам со всего мира

6. О компании

.

No related posts.