ОСНОВЫ jQuery

ОСНОВЫ JQUERY

ВЫБОРКА в JQUERY

МЕТОДЫ в JQUERY

СОБЫТИЯ в JQUERY

Предисловие

Данный 4-ёх страничный сайт - один из многих учебных веб-разделов, какие всегда делаю для себя во время самообучения.

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

Во время одной из плановых тренировок, решил открыть общий доступ к его страницам.
Они могут быть весьма полезны людям, изучающим сейчас эту замечательную, великолепную(!) технологию.

Разумеется, на них представлены только самые основные, постоянно используемые, базовые методы, основы jQuery.

Относительно путей до папок.
Прописаны мои. Это и понятно. Себе же делал. Абсолютно то же самое можно сказать и про многочисленные пометки, примечания. Делал себе. Как шпаргалку.

В конце последнего раздела добавил ссылки на очень полезные ресурс и книгу, взятую с сайта, углублённо изучающего jQuery.
Честно говоря, мне (для 90% задач) вполне хватает собственного справочного сайта, но, чтоб получился полноценный справочник - "полная картина маслом", добавил.
Теперь, как говорится, "ближе к телу".

ВВЕДЕНИЕ в jQuery

Стандартный (простой) JavaScript НЕ СОВЕРШЕНЕН!

Его недостатки:
1. "Хромает" кроссбраузерность.
2. Очень много кода. Очень!!!
3. Имеет всего лишь 2 метода отбора элементов: по id и по <тэгу>.

JavaScript сделал "скачок" в его повсеместном использовании только после появления в своём арсенале библиотек jQuery. Все крупнейшие ресурсы используют их.

jQuery - это тоже JavaScript!

Только УНИФИЦИРОВАННЫЙ! Это его библиотека.
Постоянно дорабатывается и обновляется. Появляются новые возможности (методы).

Основана на CSS-правилах - НЕ НУЖНО(!) учить новый синтаксис.

Логика написания, синтаксис и работа скриптов очень похожа на PHP, только в отличие от него - это клиентский скрипт, а не серверный.

Зная основы PHP, легко изучать основы JavaScript и jQuery, а кроме того - НЕ НУЖЕН(!) ЛОКАЛЬНЫЙ СЕРВЕР - всё можно разрабатывать в обычном "блокноте".

ПОДГОТОВКА

Скачать jQuery

Библиотека БЕСПЛАТНА. Скачал jquery-1.10.1.min по адресу: https://jqurey.com Это минимизированная версия, но полнофункциональная!

**Дополнительно скачал ещё файл map для неё, но пока НЕ ПОДКЛЮЧАЛ! Может быть он и не будет нужен?!

**P.S. Мне он так и не понадобился!

Сохранить jQuery

Сохранил файлы (имеют расширение .js) в папке js тестового сайта.
Полный путь: QJSsite -> jquery -> testsite -> js -> jquery.js
**Кроме неё, в этой же папке разместил ещё 2 файла: map.js и myscripts.js

**Для учебно-справочных страниц держу свой файл-копию myscripts.js в корне ГЛАВНОЙ папки (закомментирован).

Подключить jQuery

Вообще-то, библиотека подключается в области тэга <head>, НО!
Пока НЕ используется УНИВЕРСАЛЬНАЯ конструкция: "Ожидание создания DOM-дерева", с которым и работает JavaScript, возможно придётся подключать в разные места страницы тэга <body> (Об этой конструкции ниже).

Важно!

Внутри тэга <head>
подключается УНИВЕРСАЛЬНЫМ тэгом подключения скрипта:
<script src="jqeury.js" type="text/javascript"></script> *если в корне

<script src="papka/jquery.js" type="text/javascript"></script> *если в папке
Между тэгами НИЧЕГО не вставляется!
Особое внимание правильному (т.е. просто, либо ../../) адресу!

***

Внутри тэга <body>
<script type="text/javascript"> ВЕСЬ СКРИПТ </script> *если в теле страницы
Особое внимание С И Н Т А К С И С У ! (т.е. ; . , ] } ) ' " : пробелы и т.д.)

Теперь можно библиотеку jQuery использовать!
(Всегда проверять СОВМЕСТИМОСТЬ версий плагинов с используемой версией jQuery!)

После подключения к стандартному JavaScript его библиотеки jQuery, в нём появилась ШИКАРНАЯ возможность использовать УНИВЕРСАЛЬНУЮ функцию jquery(' ');

Краткое написание: $(' '); = jquery(' ');

Кавычки внутри ОДИНАРНЫЕ!

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

УНИВЕРСАЛЬНАЯ функция может:

1. Отбирать объекты (элементы) (называется jquery-набор).
3. Совершать с ними различные действия.
2. Прописывать объектам события.

**Всегда держать в голове схему: Объект - Событие - Действие.

Функция ожидания формирования DOM-дерева

Пока DOM-дерево НЕ ПОСТРОЕНО, НЕ ДОЛЖНЫ ПЫТАТЬСЯ использовать скрипт. (Убирал строчку скрипта в конец страницы.)

Теперь этого делать не нужно. У jQuery есть конструкция "ожидания" (специальный метод ready), в которой прописано: "Дождаться построения DOM-дерева, ну а затем уже ИСПОЛНЯТЬ ВСЕ СКРИПТЫ".

$(document).ready(function() { Здесь ВСЁ-ВСЁ-ВСЁ, все скрипты });

Есть сокращённая запись.

$(function() { Здесь ВСЁ-ВСЁ-ВСЁ, все скрипты });

**P.S. Лучше не забывать в конце конструкции ставить комментарий //конец ready На странице (в файле скриптов) может быть НЕ ОДИН модуль с такой конструкцией.

КОММЕНТАРИИ: /* ... ... ... */ - многострочные // ... ... - однострочные.

И ещё раз повторяю!

**Всегда(!) держать в голове схему: Объект - Событие - Действие.

* * *

Очень важно!

Не все версии плагинов подходят к, пусть даже самой свежей, версии jQuery!

П Р О В Е Р Е Н О !!! И всегда проверять СОВМЕСТИМОСТЬ!

И ещё раз - С И Н Т А К С И С ! (т.е. ; . , : ] } ) ' " пробелы и т.д.)

* И последнее. Всегда помнить! *

jQuery - клиентский скрипт! Работает только в браузере пользователя. Поэтому никакие его скриптовые "ухищрения" HTML-код НЕ МЕНЯЮТ!

* * *

ПОДГОТОВКА закончена, перехожу к ВЫБОРКЕ:

Нижняя синяя стрелка вернёт на главную страницу раздела "Просто jQuery".

ВВЕРХ