Изучение PHP. Запись 1 (Знакомство с jQuery)

Этим постом я планирую начать вести что-то типа дневника о моем прогрессе в продвижении изучения программы подготовки программистов организации "IT FOR FREE". Делаю я это в основном для себя, на случай если что-то из изученного забудется или возникнут вопросы на которые не сразу получится найти ответ. Поэтому, для тех, кто все-таки по каким-то причинам захочет это прочесть, сразу проясню - это не конспект, и пересказывать весь изученный материал я тут не буду. Скорее это можно назвать дневником, и содержание записей может быть самым разным... Скорее всего, в основном тут будут примеры нового или непонятного для меня кода. Это не первый день моего изучения веб разработки, поэтому, к сожалению, начну я с того места на котором сейчас нахожусь, то есть "1 день" это первый день ведения дневника а не изучения PHP. Ну что ж, как говорится - "с места в карьер!"

Вчера и сегодня изучал jQuery. Эта библиотека для меня не нова. В свое время я уже изучал ее по учебнику "Head first: jQuery", писал кое-какие скрипты, и с основными функциями и предназначением знаком. Поэтому планировал быстро пробежать материал программы и двинуться к практике. Но в книге Адама Фримена "jQuery для профессионалов" нашлось немало нового для меня, на чем и остановлюсь.

Устранение конфликтов имен

jQuery.noConflict(); 

Эту строку необходимо вставить в том случае, если у нас кроме jQuery подключены еще какие-то библиотеки, использующие символ S. В таком случае, для jQuery вместо S будет использоваться слово jQuery.

Также можно самому определить псевдоним для названия функции:

var jq = jQuery.noConflict(); 

Пример:

jq(document).ready(function () {}

Альтернативная нотация для $ (document).ready ()

Вместо нее можно напрямую передать определение функции в функцию S:

$(function() {
    $("img:odd").mouseenter(function(e) {
      $(this).css("opacity", 0.5);
    }).mouseout(function(e) {
      $(this).css("opacity", 1.0);
    })
});

Результат будет тот-же, хотя я пока не понимаю почему...

Задержка события загрузки страницы ( $(document).ready() )

Для этого используется функция $.holdReady(). Применяется она минимум 2 раза: с аргументами true (для запуска задержки) и false (для окончания).
Пример:

<script type="text/javascript">
$.holdReady(true);
$(document).ready(function() {
    console.log("Cpa6oтало событие ready");
    $("img:odd").mouseenter(function(e) {
        $(this).css("opacity", 0.5);
    }).mouseout(function(e) {
        $(this).css("opacity"/ 1.0);
    }) 
});
setTimeout(function() {
    console.log("Отмена задержки”);
    $.holdReady(false);
}, 5000);
</script>

Вопрос: функция S.holdReady() запускается сразу же после начала загрузки страницы, или после полной ее загрузки (непосредственно перед активацией $(document).ready() )? Другими словами, отсчет 5000 миллисекунд начнется сразу же, или только после полной загрузки страницы?
Ответ: Сразу же. Вообще - дурацкий вопрос )) Даже не знаю, как он мне в голову пришел! Наверно был уже в полусне. Конечно же функция запускается сказу же как интерпретатор дойдет до кода её вызова. Ее назначение - гарантировать загрузку всего, что должно быть загружено до вызова S(document).ready. А загрузилась уже DOM к тому времени или нет, в принципе не важно.

Селекторы jQuery

Оказалось, что jQuery может оперировать не только селекторами css но имеет также и свои, причем весьма полезные:
:animated - Выбирает все анимируемые в данный момент элементы
:contains(текст) - Выбирает все элементы, содержащие указанный текст
:eq(n) - Выбирает элемент с индексом n (индексы отсчитываются от нуля)
:even - Выбирает все четные элементы (индексы отсчитываются от единицы)
:first - Выбирает первый из подходящих элементов
:gt (n) - Выбирает все элементы, индекс которых превышает n (индексы отсчитываются от нуля)
:has(селектор) - Выбирает элементы, которые содержат хотя бы один элемент, соответствующий указанному селектору
: last - Выбирает последний из подходящих элементов
:lt(n) - Выбирает все элементы, индекс которых меньше n (индексы отсчитываются от нуля)
:odd - Выбирает все нечетные элементы (индексы отсчитываются от единицы)
: text - Выбирает все текстовые элементы

Также имеются селекторы по типам элементов:

:button - Выбирает все элементы типа button
:checkbox - Выбирает все элементы типа checkbox
: file - Выбирает все элементы типа file
:header - Выбирает все элементы заголовков
:hidden - Выбирает все скрытые элементы
:image - Выбирает все элементы изображений
:input - Выбирает все элементы input
:parent - Выбирает все элементы, являющиеся родительскими по отношению к другим элементам
:password - Выбирает все элементы, являющиеся паролями
:radio - Выбирает все элементы типа radio
:reset - Выбирает все элементы типа reset
:selected - Соответствует всем выбранным элементам
:submit - Выбирает все элементы типа submit
:visible - Выбирает все видимые элементы

Сужение области поиска с помощью контекста

Еще одно интересное новшество для меня. Кроме прямого поиска селекторов по всему документу в функции $() Можно указывать некий "контекст". Если выражаться просто, задать тег (или например класс, присвоенный тегу) внутри которого и будет осуществлен поиск искомых элементов. Выглядит это так:

$("img:odd", $('.drow')).mouseenter(function(e) {}

В данном примере нечетные элементы будут выбираться только из фрагментов кода внутри тегов с классом drow. S('.drow') в нашем случае, и есть этот самый контекст.
Важный момент! Если таких элементов (с классом drow) в документе несколько, то внутри каждого из них выборка будет начинаться заново. В нашем случае, отсчет нечетных элементов будет начинаться с нулевого в каждом из тегов с классом drow.

Вопрос: Можно ли указать сразу несколько не связанных между собой контекстов?
Ответ:Нет. Ни в одном определении функции я не нашел описания такого функционала. Везде упоминается только 2 аргумента - сам элемент и контекст.

Важно помнить, что функция S() возвращает объект, у которого есть свои методы для получения информации и работы с хранящимися внутри него html-елементами (которые тоже являются объектами) . Например S("img:odd").selector вернет сведения о примененном селекторе, а S("img:odd").get(индекс) - извлечет из объекта html-элемент с заданным индексом.

Интересная деталь! В объекте jQuery есть метод, отвечающий за выведение информации о контексте. Метод действует только если контекст встречается на странице только 1 раз, если же он не задан или встречается больше 1 раза, возвращено будет значение undefined. Но вот что меня заинтересовало! Контекст допускается вводить например средствами java script, вот так:

var jq3 = $("img:odd", document.getElementById("oblock")); 
console.log("Единственный элемент контекста: " + jq3.context.tagName);

Тут контекстом выступает элемент с идентификатором, найденный при помощи джава-скриптовой функции document.getElementById("oblock").
Но вот если мы вместо этого попробуем ввести в качестве контекста вроде-бы аналогичное выражение $("#oblock"):

var jq3 = $("img:odd", $("#oblock")); 
console.log("Единственный элемент контекста: " + jq3.context.tagName);

Ничего не выйдет! Будет возвращено undefined. У меня пока не было возможности разобраться почему так, но я думаю это потому, что $("#oblock") возвращает как раз объект, содержащий в себе элемент, а не сам этот элемент. Надо будет прояснить этот момент...