MooTools это свободный JavaScript фреймворк для разработки кроссбраузерных веб-приложений и веб-сервисов - polpoz.ru o_O
Главная
Поиск по ключевым словам:
Похожие работы
MooTools это свободный JavaScript фреймворк для разработки кроссбраузерных веб-приложений - страница №1/3




Библиотеки JavaScript




Оглавление

  1. Mootools 2

    1. Возможности Mootools 2

    2. Анимация в MooTools 6

    3. Интересные Примеры Применения Mootools 10

  2. JQuery 11

    1. Немного Теории 12

    2. jQuery в Примерах 19

    3. Интересные Примеры Применения jQuery 25

  3. Dojo 26

    1. Общий взгляд на Dojo Toolkit 28

    2. Dojo в примерах 32

  4. MochKit 44

    1. MochiKit — библиотеки на все случаи жизни 44

  5. Prototype 49

    1. Краткий обзор самых полезных возможностей 49


MooTools

Тип: Библиотека JavaScript

Разработчик: Valerio Proietti

Написана на: JavaScript

ОС: кроссплатформенное

Версия: 1.2.3 — 23 апреля 2009

Сайт: mootools.net

MooTools — это свободный JavaScript фреймворк для разработки кроссбраузерных веб-приложений и веб-сервисов. MooTools является компактным, модульным, объектно-ориентированным фреймворком, созданным для помощи опытным разработчикам JavaScript. Он позволяет писать мощный, гибкий и кроссбраузерный код благодаря элегантному, хорошо документированному и последовательному API. MooTools совместим и протестирован с браузерами: Safari 2+, Internet Explorer 6+, Firefox 2+ (и другими, основанными на движке Gecko), Opera 9+.



Возможности Mootols

Ядро фреймворка можно загрузить с официального сайта: http://mootools.net/download. В дальнейшем можно загружать только необходимые модули.


 

Подключаем файл к странице, скажем в head:


MooTools начинающих
<script type="text/javascript" src="mootools.js">script>




Получение DOM (Document Object Model) элементов:
 Для того, чтобы получить элемент по его id, необходимо сделать следующее:
var myElement = $('elementId');

 А чтобы получить все элементы с каким-то классом, можно сделать вот так:


var myElements = $$('.elementsClassName'); // в итоге получим массив
 
Вообще говоря, аргументом оператора $$() может быть любой CSS селектор. Кроме того, у функции может быть любое количество аргументов, каждый из которых представляет собой один или несколько элементов. Более наглядные примеры:
$$('#myWrapper a') // все внутри элемента с id="myWrapper"
$$('img[alt=^Image]') // все картинки, alt которых начинается с Image
$$(myelement1, 'a', '#myid', document.getElementsByTagName('div')); // массив этих элементов

MooTools содержит мощную коллекцию классов и продвинутую систему наследования, которая позволяет вторичное использование кода, а так же его расширение. Например:
var someClass=new Class({

initialize: function(){

alert('Hello, world!');

}

});

Результат — алерт со словами: «Hello, world».



initialize — конструктор класса. Вызывается автоматически при создании экземпляра класса.

У класса могут быть методы:

var testClass=new Class({

initialize: function(element){

this.element=$(element);

},

draw: function(){



this.element.setStyles({

'background-color': 'red',

border: 'solid 1px blue'

});


},

hide: function(){

this.element.setStyle('display', 'none');

},

show: function(){



this.element.setStyle('display', 'block');

},

toggle: function(){



this.element.style.display == 'none'? this.show(): this.hide();

}

});



Здесь четыре метода(не включая конструктора) — draw, hide, show и toggle.

draw делает элемент красным с синей границей;

hide скрывает элемент;

show показывает элемент;

toggle изменяет видимость элемента;
Extends:

С помощью него создается новый класс расширяющий существующий. Пример:

Расширим класс из первого примера (Hello, world):

var extendedSomeClass=new Class({



Extends: someClass,

initialize: function(){

this.parent();//вызываем метод initialize базового класса

alert('extended Hello, world!');

}

});


Результат — алерт «Hello, world!» из метода initialize базового класса и алерт «extended Hello, world!»

Class.Extras:
В MooTools есть несколько классов, которые очень часто используются. Это классы Options, Events и Chain.
var exampleClass6=new Class({

Implements: [Options, Events],

options: { // опции по умолчанию

bgColor: 'red',

borderWidth: 1

},

initialize: function(element, options){



this.setOptions(options);

this.element=$(element);

},

draw: function(){



this.element.setStyles({

'background-color': this.options.bgColor,

'border-style': 'solid',

'border-color': 'black',

'border-width': this.options.borderWidth

});


this.fireEvent('draw');//event draw

}

});



var obj=new exmpleClass6('el', {

bgColor: '#561',

borderWidth: 4

});


obj.addEvent('draw', function(){

alert('draw выполнен');

});

obj.draw();



addEvent — добавить событие

fireEvent — выполнить событие

В данном примере событие добавлено явно с помощью метода addEvent. Событие можно также добавить, указав его в options с префиксом on и первой прописной:

var obj=new exampleClass6('el', {

bgColor: '#561',

borderWidth: 4,



onDraw: function(){

alert('draw выполнен');

}

});
Манипулирование классами и свойствами:



 

Теперь давайте посмотрим, как управлять классами и другими аттрибутами элементов. Рассмотрим, что мы

можем делать с классом элемента:

myElement.addClass('test-class'); // добавляет класс к элементу

myElement.removeClass('test-class'); // убирает класс у элемента

myElement.hasClass('test-class'); // проверяет, есть ли такой класс у элемента

myElement.toggleClass('test-class'); // если есть класс, убирает его, в противном случае добавляет

 

Для получения какого-либо аттрибута элемента можно использовать функции get('attr'), getProperty('attr') или



getProperties('attr1', 'attr2', ...) (последняя возвращает ассоциативный массив значений). Соответственно, для

установки аттрибута используем set('attr', 'val'), setProperty('attr', 'val') и setProperties({attr1: val1, attr2: val2}).

 

Рассмотрим пример. Допустим у вас есть две картинки и вы хотите взять значение alt у первой и поставить его в



alt второй:

картинка №1

картинка №2

 


Привязка событий:

 

Привязка события осуществляется функцией addEvent(). Ее первый аргумент — тип события, второй — фунция,



которая будет выполняться при этом событие на этом элементе.

Например, для того, чтобы выполнить какую-то функцию сразу после загрузки DOM, нужно написать вот так:

document.addEvent('domready', function() {

myFuntion();

});

 А если вы хотите, чтобы при клике на ссылку выполнялась какая-то функция, то сделать это можно вот так:



ссылка



Анимация в MooTools
Основные принципы. Класс Fx:

Анимация в MooTools — это изменение какого-либо свойства какого-либо элемента во времени (переход), например, изменение CSS-свойства left — это движение по горизонтали, а background-color — плавное изменение цвета заливки.

Для создания анимационных эффектов в MooTools используется класс Fx. Все классы, реализующие какую-либо анимацию наследуются от Fx. В этом классе определены вспомогательные методы для анимации:

start — этот метод запускает переход.

set — изменяет значение анимируемого параметра. Вызывается на каждом шаге перехода. По смыслу это абстрактный метод, если его можно так назвать, т. е. каждая реализация анимационного плагина должна переопределить set по-своему.

cancel — отменяет текущую анимацию.

pause — приостанавливает текущую анимацию.

resume — возобновляет приостановленную анимацию.

Конструктор принимает следующие опции:



fps — количество кадров в секунду для анимации. Характеризует, если можно так сказать, «плавность» анимации — чем он больше, тем «плавнее».

unit — единица измерения, например «em», «px», «%». Используется для преобразований CSS-свойств.

link — опция, характеризующая поведение анимации, когда во время перехода был вызван start. Может принимать следующие значения (пример с разными значениями link):

'ignore' — все вызовы start во время анимации игнорируются. Используется по умолчанию.

'cancel' — текущая анимация будет остановлена и начата новая с параметрами, пришедшими в start.

'chain' — все вызовы start во время анимации будут добавлены в цепь и их анимация начнется сразу после того, как закончится текущая.

duration — длительность анимации.

transition — уравнение перехода.
Работает Fx следующим образом. В вызов метода start передаются начальное и конечное значения изменяемого параметра, затем запускается таймер, который периодически (период равен 1 / fps) вызывает метод step, где на каждом шаге анимации вычисляется значение анимируемого параметра. А вычисляется оно так:

Время, прошедшее со старта перехода до текущего момента делится на duration, таким образом получается число от 0 до 1 характеризующее прогресс анимации. Назовем его progress.

Это число передается в функцию перехода (будет рассмотрено ниже). Результат вычисления функции перехода назовем delta.

Значение же анимируемого параметра вычисляется так: param = (to − from) × delta + from, где from — начальное значение параметра, to — конечное значение параметра. Очевидно, что при delta равном 0 мы получаем начальное значение параметра, а при 1 — конечное.

После вычисления значения параметра, в методе set происходит уже непосредственная визуализация анимации (например, изменение CSS-свойства left).
Стоит подчеркнуть, что сам по себе класс Fx является абстрактным, то есть ничего сам не анимирует, он оперирует только общими данными для реализации принципов анимации. Непосредственной анимацией занимаются наследники Fx. В основном для анимации элементов на HTML-страницах используются классы, которые анимируют различные CSS-свойства элементов. Об этих классах мы поговорим, а также рассмотрим случай с созданием своего класса, который реализует анимацию не-CSS-свойств.
Уравнения переходов:

Согласитесь, не очень красиво бы смотрелась анимация перемещения элемента на странице, если бы он резко стартовал и так же резко останавливался в конце пути. Так происходит, если приращение delta (которое упоминалось выше) на протяжении всего времени остается постоянным. Это называется — линейный переход, его уравнение delta = progress. Если взять последовательно несколько значений progress от 0 до 1 и подставить в уравнение, то получим обычную прямую, которая резко начинается в значении 0 и резко заканчивается в 1.


Стандартные уравнения:

Linear — прямая (delta = progress).

Quad — квадратичная функция (delta = progress2).

Cubic — кубическая функция (delta = progress3).

Quart — delta = progress4.

Quint — delta = progress5.

Pow — общая степенная функция delta = progressx (по умолчанию степень равна 6).

Expo — экспоненциальная функция (delta = 2(progress − 1) × 8).

Circ — четверть окружности (delta = 1 − sin(acos(progress))).

Sine — кусок синусоиды (delta = 1 − sin((1 − progress) × π / 2)).

Back — сначала оттягивает delta в минус, а потом плавно доводит до 1.

Bounce — прыгающий переход.

Elastic — эластичный переход (единственная ассоциация — резинка :).

Все эти уравнения доступны в классе Fx.Transitions. Они используются в качестве значения опции transition конструктора Fx. Помимо прямого использования этих уравнений можно еще применять к ним модификаторы:



easeIn — используется по умолчанию и ничего не меняет.

easeOut — вычисляет значение delta по формуле 1 − transition(1 − progress), таким образом разворачивая кривую перехода.

easeInOut — до середины перехода вычисляет delta по формуле transtition(2 × progress), а после — по (2 − transition(2 × progress)) / 2, совмещая в одном переходе две кривых: прямую и развернутую.
Цепочки. Сцепление анимационных преобразований:
Очень часто бывает нужно задать несколько последовательных преобразований так, чтобы каждое следующее осуществлялось после окончания предыдущего. Если просто вызвать их последовательно, то по умолчанию каждый следующий вызов будет игнорироваться (смотрим опцию link класса Fx). Если же указать link равным 'chain', то все последующие вызовы добавятся в цепочку и будут выполнены последовательно.
Однако, существует и специальный синтаксис для создания цепочек. Реализуются они в классе Chain. Он содержит аж целых три метода:

chain — дописывает функцию в конец цепочки.

callChain — вызывает следующую в цепочке функцию и удаляет ее из цепочки.

clearChain — очищает цепочку.
Стандартные анимационные плагины:
Fx.Tween.

Этот класс является простейшим классом, анимирующим любое CSS-свойство элемента. Для работы ему нужна ссылка на анимируемый элемент, имя анимируемого CSS-свойства и диапазон значений. Пример создания:


var myFx = new Fx.Tween(element, [, options]);
На этом классе основан пример с применением различных уравнений переходов:
// Здесь мы будем менять CSS-свойство top у элемента с идентификатором 'Ball'.

var fx = new Fx.Tween('Ball', { property: 'top', duration: 900, link: 'cancel' });

var transitionSelect = $('Transition');

var modifierSelect = $('Modifier');

var test = $('Test');

// При возникновении одного из следующих событий запустить анимацию.

modifierSelect.addEvent('change', startAnimation);

transitionSelect.addEvent('change', startAnimation);

test.addEvent('click', startAnimation);

function startAnimation(){

// Получаем имя перехода в виде 'sine:in'.

fx.options.transition = transitionSelect.value + modifierSelect.value;

// Двигаем шарик с выбранным переходом.

fx.start(60, 400);

}
В HTML-коде примера два выпадающих списка, анимируемый шарик и кнопка на всякий пожарный.
Fx.Morph.

Используется чаще, чем Fx.Tween потому что может одновременно анимировать несколько CSS-свойств элемента. Конструктор почти такой же как и у Fx.Tween за исключением отсутствия опции property, вместо нее в метод start передается объект, описывающий, какие CSS-свойства необходимо анимировать и в каких диапазонах. Например:


morph.start({

'margin-left': [0, 10],

'background-color': ['#EEE', '#555']

});
означает, что анимироваться будут два CSS-свойства: margin-left (от 0 до 10) и background-color (от '#EEE' до '#555'). Диапазоны значений можно и не указывать, а только указать конечное значение, тогда в качестве начального будет взято текущее значение, указанное в стиле элемента


Fx.Slide.

Довольно полезный класс, когда нужно чтобы что-то откуда-то выехало или заехало. Конструктор очень похож на все предыдущие, поэтому особо останавливаться на нем не буду. Скажу только, что он понимает еще несколько опций, самая важная их которых — это mode, определяющая направление «выезжания»: вертикальное или горизонтальное. На основе этого класса сделаны еще два примера с анимированными меню: первый и второй.


Fx.Elements.

Позволяет удобно анимировать любое количество CSS-свойств для любого количества элементов одновременно. В его конструктор передается массив элементов, над которыми будут осуществляться преобразования. А вся прелесть заложена в методе start — туда передается массив объектов для преобразования. Получается, каждому элементу из массива, переданного в конструкторе соответствует элемент объект из массива, переданного в start. Таким образом осуществляется массовая анимация элементов.


В примере ниже изменяется прозрачность массива элементов при наведении на них курсора, причем чем ближе элемент к тому, что в данный момент под курсором, тем меньше его прозрачность, а чем дальше — тем больше:
var elements = $$('#ElementsContainer .Element');

var elementsFx = new Fx.Elements(elements, { duration: 500, link: 'cancel' });

elements.each(function(element, i){

// При наведении курсора на элемент пересчитываем прозрачность соседей.

element.addEvent('mouseenter', function(){

var arg = {};

// Для всех соседних элементов вычисляем значение их прозрачности

// на основании их удаленности от текущего.

elements.each(function(element, j){

arg[j] = { opacity: 1 - Math.min(Math.abs(i - j), 5) / 8 };

});

// Стартуем изменение прозрачности.



elementsFx.start(arg);

});


});
Интересные Примеры Применения Mootools

  • Интересная реализация галереи для сайта

  • Плагин, который позволяет обратить внимание посетителей на любой объект на странице.

jQuery

Тип: JavaScript-библиотека

Разработчик: Джон Ресиг

Написана на: JavaScript

ОС: Кроссплатформенное ПО

Версия: 1.3.2 — 20 февраля 2009

Лицензия: MIT License и GNU GPL

Сайт: http://jquery.com/


jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API по работе с Ajax.
Точно так же, как CSS отделяет визуализацию от структуры HTML, JQuery отделяет поведение от структуры HTML. Например, вместо прямого указания на обработчик события нажатия кнопки, управление передаётся JQuery, идентифицирующей кнопки и затем преобразовывающий его в обработчик события клика. Такое разделение поведения и структуры также называется принципом ненавязчивого JavaScript.
Библиотека jQuery содержит функционал, полезный для максимально широкого круга задач. Тем не менее, разработчиками библиотеки не ставилась задача совмещения в jQuery функций, которые подошли бы всюду, поскольку это привело бы к большому коду, бо́льшая часть которого не востребована. Поэтому была реализована архитектура компактного универсального ядра библиотеки и плагинов. Это позволяет собрать для ресурса именно тот JavaScript-функционал, который на нём был бы востребован.

Работу с jQuery можно разделить на 2 типа:



  • Получение jQuery-объекта с помощью функции $(). Например, передав в неё CSS-селектор, можно получить jQuery-объект всех элементов HTML попадающих под критерий и далее работать с ними с помощью различных методов jQuery-объекта.

  • Вызов глобальных методов у объекта $, например, удобных итераторов по массиву.

jQuery совместим и протестирован с браузерами: Safari 2+, Internet Explorer 6+, Firefox 2+ (и другими, основанными на движке Gecko), Opera 9+.

Немного Теории

Пространство имен (namespacing):
Ключевым моментом в создании хорошего JavaScript-кода для дальнейшего использования является тщательное управление пространством имен. В JavaScript существует единое глобальное пространство имен (объект window), и многие программисты (и даже некоторые библиотеки) засоряют его безо всякой надобности. Глобальные переменные — зло! Более благоразумные разработчики сводят к минимуму свое вторжение в это пространство, используя некоторые методы, например, модульную модель.
jQuery вводит единственный объект в глобальное пространство имен — функцию/объект jQuery. Все остальное — это либо непосредственное свойство jQuery, либо метод объекта, возвращаемого вызовом функции jQuery.
Что можно сказать об улучшениях языка? Большинство библиотек предоставляют некоторое подобие функций отображения, фильтрации и обрезания, которые, к несчастью, отсутствуют в тех движках JavaScript, которые включены в большинство браузеров. Некоторые библиотеки напрямую расширяют встроенные в JavaScript классы String и Array, но также не до конца безопасно. String.prototype и Array.prototype являются самостоятельными глобальными пространствами имен, и добавление в них каких-либо свойств влечет опасность коллизий, связанных с использованием одних и тех же имен переменных в разных контекстах.
В jQuery имеется некоторое количество функций, расширяющих возможность JavaScript, но каждая из них является доступной только как свойство объекта jQuery: jQuery.each, jQuery.extend, jQuery.grep, jQuery.map, jQuery.merge и jQuery.trim. Они по определению не будут конфликтовать с каким-либо другим кодом.
Печально известная функция $:
Я был не до конца честен, когда заявил о том, что jQuery вводит только один символ в глобальное пространство имен, на самом деле есть еще и $: он используется как сокращение для jQuery. Слава богу, это производится достаточно мягко: если вам снова требуется ваша прежняя функция $ (например, если у вас есть часть кода, основанная на Prototype), вы можете вызвать jQuery.noConflict(), чтобы вернуть свою старую функцию $.
Если вам требуется ограничить использование функции $ для jQuery не опасаясь коллизий при каком-либо другом использовании глобальной функции $, документация по jQuery предлагает следующий способ:

(function($) {

// Внутри этого блока $ относится к jQuery

// Изящно, правда?

})(jQuery);
В начале я расценивал повсеместное использование $ в jQuery не более, чем хитроумный трюк. Но если рассматривать его только в контексте jQuery, то такое решение выглядит очень гибким, и я с радостью использую сокращение $ и в своем собственном коде.
Выбираем элементы:
Каждый jQuery-оператор начинается с выбора одного или нескольких узлов DOM. Синтаксис селекторов jQuery (внутренний язык этой библиотеки) является интересным гибридом спецификаций CSS 1, 2, немного CSS 3, немного XPath и еще малость других расширений. Я не буду углубляться в детали, просто приведу несколько полезных примеров:

jQuery('div.panel')

Все div'ы с

jQuery('p#intro')

Параграф с id="intro"

jQuery('div#content a:visible')

Все видимые ссылки внутри div с id="content"

jQuery('input[@name=email]')

Все поля ввода с name="email"

jQuery('table.orders tr:odd')

Все четные строки в таблице с

jQuery('a[@href^="http://"]')

Все внешние ссылки (те, которые начинаются с http://)

jQuery('p[a]')

Все параграфы, в которых есть хотя бы одна ссылка
Наибольший интерес из вышеописанного представляют :visible и :odd, которые являются специфичными только для jQuery. Стоит также отметить, что выбор атрибутов использует знак @, что более соответствует XPath нежели CSS 2.
Язык селекторов весьма богат и очень похож на регулярные выражения, так что время, потраченное на его изучение, окупится сполна.
Чего-нибудь с ними делаем:
Объект, который возвращают селекторы jQuery, является довольно интересным зверем. Он представляет собой набор DOM-элементов и ведет себя немного как массив: у него есть свойство length, к его элементам можно получить доступ по индексу и (что более важно) Firebug расценивает его именно как массив при отображении в своей консоли. Это не более, чем красивая иллюзия: набор элементов, на самом деле, — это объект jQuery, у которого есть большое число методов для выбора, изменения или расширения имеющегося набора.
В jQuery имеется три разных категории методов: первые манипулируют со всеми элементами, которые подходят по шаблону, вторые возвращают значение от первого найденного элемента, и третьи изменяют саму выборку.
Я не буду перечислять все доступные методы (эта можно посмотреть и на visualjquery.com), но хочу привести некоторые примеры. Если у вас есть Firebug, вы можете попробовать их самостоятельно: просто нужно воспользоваться закладкой «Вставить jQuery» ( javascript:void(function(){var s=document.createElement('script');s.src='http://code.jquery.com/jquery-1.1.2.js'; document.getElementsByTagName('head')[0].appendChild(s);}()) ) для загрузки самой библиотеки для любой страницы, а затем вставить примеры кода в консоль Firebug (прим.: можно и без Firebug: достаточно загрузить jQuery с помощью указанной ссылки и вызвать приведенные примеры в адресной строке браузера, не забыв в начале javascript: и какой-либо alert в конце (чтобы на страницу не выводилось возвращаемое значение)).

jQuery('div#primary').width(300);

Выставляет ширину div id="primary" в 300 пикселей.

jQuery('p').css('line-height', '1.8em');

Выставляет высоту строки в 1.8em для всех параграфов.

jQuery('li:odd').css({color: 'white', backgroundColor: 'black'});

Применяет 2 CSS-правила для каждого пункта списка; заметьте, что функция css() может принимать объект таблицы стилей вместо двух строк.

jQuery('a[@href^="http://"]').addClass('external').attr('target', '_blank');

Добавляет класс "external" для всех внешних ссылок (тех, что начинаются с http://), затем добавляет target="_blank", чтобы увеличить различие. В данном примере используется цепочка вызовов, описанная ниже.

jQuery('blockquote').each(function(el) { alert(jQuery(this).text()) });

Для каждого тега blockquote на странице выводит сообщение (alert) с его текстовым содержанием (включая HTML-теги).

jQuery('a').html('Нажми здесь!');

Заменяет весь текст в ссылках на странице призывом «Нажми здесь!».
Ниже несколько примеров методов, которые возвращают значение от первого элемента, найденного по шаблону:

var width = jQuery('div').width();

Какая ширина у первого div на странице?

var src = jQuery('img').attr('src');

Какое значение у атрибута src у первой картинки на странице?

var color = jQuery('h1').css('color');

Какой цвет у первого h1?
Хочу отметить удобную симметрию таких методов: они используются как для выставления атрибутов (когда принимают 2 аргумента или у передаваемого объекта несколько свойств), так и для прочтения значений этих атрибутов (если передается только один аргумент). Такая симметрия используется во всей библиотеке jQuery, что очень сильно облегчает запоминание API.
Наконец, есть несколько методов, которые изменяют весь набор найденных элементов. Многие из них также обеспечивают перемещение по DOM-дереву:

jQuery('div').not('[@id]')

Возвращает все div, у которых нет атрибута id.

jQuery('h2').parent()

Возвращает все элементы, которые являются непосредственными родителями h2.

jQuery('blockquote').children()

Возвращает все элементы, вложенные в blockquote.

jQuery('p').eq(4).next()

Находит пятый параграф на странице, потом находит следующий элемент (т.е. непосредственного соседа справа).

jQuery('input:text:first').parents('form')

Находит родительский элемент для формы, которая содержит первое поле input type="text" на странице. Опциональным параметром для parents() является другой селектор.
Цепочки вызовов:
Команда разработчиков jQuery часто хвастается по поводу поддержки в этой библиотеке цепочки вызовов, доходя до заявлений типа «jQuery создана для того, чтобы изменить ваш стиль программирования на JavaScript» прямо на главной странице. Честно говоря, лично я нахожу эту технику скорее боковым ответвлением, чем дорогой в будущее, но с радостью заявляю, что вы можете использовать jQuery, избежав длинных цепочек вызовов.
Короче говоря, цепочки можно использовать для нескольких интересных трюков. В дополнение к использованию набора DOM-выборок вы можете применить jQuery-метод end() для перемещения по стеку объектов и выхода из текущего контекста. Это немного сложно объяснить, но когда вы используете метод, который изменяет текущий (объектный) контекст (например, children() или filter()), вы можете использовать end() чуть позже, чтобы вернуться к предыдущей выборке. Jesse Skinner приводит хороший пример использования этой возможности в своем учебнике Делаем разработку на AJAX проще с jQuery:

$('form#login')

// прячем внутри формы все label с классом optional

.find('label.optional').hide().end()

// добавляем красную границу ко всем полям типа password в форме

.find('input:password').css('border', '1px solid red').end()

// добавляем обработчик на событие submit для формы

.submit(function(){

return confirm('Вы действительно хотите отправить данные?');

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


Это милая концепция, но никто не заставляет ее использовать, если вы этого не хотите. Я был просто счастлив визуально разбить свой код с помощью нескольких достаточно красноречивых имен переменных.
Манипулируем с DOM:
В jQuery имеется несколько способов для объемных манипуляций с DOM. Первый является несколько неожиданным: функция jQuery может принимать в качестве аргумента кусок HTML-кода, который преобразуется в DOM-элемент (фактически, это просто строка):

var div = jQuery('

Some text

');
Можно использовать цепочку вызовов, чтобы добавить атрибуты к div, как только он был создан:

var div = jQuery('

Some text

').addClass('inserted').attr('id', 'foo');
Теперь добавим его к тегу body:

div.appendTo(document.body)


Или вставим его, используя селектор, в имеющийся код:

div.prependTo('div#primary')


Перехватываем события:
Все JavaScript-библиотеки нуждаются в методах для обработки событий, и jQuery не является исключением. Как и в случае attr() и css(), методы для событий могут служить двум целям: их вызов с функцией в качестве аргумента назначает обработчик события, вызов без аргумента эмулирует возникновение этого события:

jQuery('p').click(function() { jQuery(this).css('background-color', 'red'); });

Выставляем для всех параграфов обработчик клика мыши, по которому они становятся красными.

jQuery('p:first').click()

Эмулируем клик для первого параграфа на странице.
Похожие функции используются для других событий браузера: mouseover, keyup и т.д. Следует заметить, что при вызове обработчика событий ключевое слово this ссылается на элемент, который это событие вызвал; использование jQuery(this) является расхожим приемом, чтобы вызвать методы jQuery для этого элемента.
Пара функций, относящихся к событиям, заслуживает отдельного упоминания:

jQuery('a').hover(function() {

jQuery(this).css('background-color', 'orange');

}, function() {

jQuery(this).css('background-color', 'white');

});
hover() является сокращением для сразу двух событий: onmouseover и onmouseout.

jQuery('p').one('click', function() { alert(jQuery(this).html()); });
one() выставляет обработчик событий, который будет удален после первого своего вызова. В вышеприведенном примере всем параграфы должны сообщить (alert) свое содержание после первого клика по ним.
jQuery также поддерживает собственные события через методы bind() и trigger() (подобные click()). Собственные события могут принимать аргументы, передаваемые при помощи массива в вызове trigger():

jQuery(document).bind('stuffHappened', function(event, msg) {

alert('Что прозошло: ' + msg);

});


jQuery(document).trigger('stuffHappened', ['Привет!']);
Ненавязчивое (unobtrusive) программирование:
Эта тема мне очень близка. Я по-прежнему верую в то, что лучшие веб-приложения — это те, которые могут функционировать и при отключенных скриптах, и лучшим методом для достижения этой цели будет ненавязчивый JavaScript, когда события назначаются элементам только после того, как вся HTML-страница у пользователя загрузится (для более подробной информации можно ознакомиться с ненавязчивым программированием и Hijax).
В jQuery присутствует замечательная поддержка этого подхода. Во-первых, парадигма селекторов для выбора узла является основополагающей как для jQuery, так и для ненавязчивого программирования в целом. Во-вторых, jQuery обеспечивает решения для проблемы window.onload, основанной на исследованиях Dean Edwards по поводу работы события "DOM loaded" для различных браузеров (прим.: подробнее о данной проблеме можно посмотреть в моем переводе, опубликованном ранее). Вы можете выставить функцию-обработчик тогда, когда DOM уже будет к ней готов:

jQuery(document).ready(function() {

alert('DOM готов!');

});
И даже больше, вы можете сократить эту запись, назначив вашу функцию напрямую jQuery():

jQuery(function() {

alert('DOM готов!');

});
jQuery и AJAX:
У jQuery лучший API для работы с AJAX, который я когда-либо видел в больших библиотеках. Наиболее простая форма AJAX-вызова выглядит следующим образом:

jQuery('div#intro').load('/some/fragment.html');


Он выполнит GET-запрос к /some/fragment.html и вставит в div#intro HTML-код, который получит.
Первый раз, когда я это увидел, то не был сильно впечатлен. Всего лишь красивое сокращение, но если требуется что-то более сложное, например, вывести индикатор AJAX-загрузки? jQuery предоставляет набор собственных событий (ajaxStart, ajaxComplete, ajaxError и другие) для использования в случае необходимости. Также в этой библиотеки есть и более продвинутый API низкого уровня для сложных AJAX-взаимодействий:

jQuery.get('/some/script.php', {'name': 'Simon'}, function(data) {

alert('Сервер ответил: ' + data);

}); // GET-запрос к /some/script.php?name=Simon


jQuery.post('/some/script.php', {'name': 'Simon'}, function(data) {

alert('Сервер ответил: ' + data);

}); // POST-запрос к /some/script.php
jQuery.getJSON('/some.json', function(json) {

alert('JSON выдал: ' + json.foo + ' ' + json.bar);

}); // Возвращает и преобразует ответ от /some.json как JSON
jQuery.getScript('/script.js'); // GET-запрос к /script.js и eval()

Расширения


Рассматривая весь этот набор функций в стандартной поставке, стоит заметить, что ужатый вариант jQuery занимает всего 20 КБ, и даже еще меньше, если применить архивирование (.gz). Дополнительная функциональность, выходящая за пределы это поставки, может быть организована с помощью расширений, которые могут (и так и делают) добавить новые методы к существующему объекту jQuery. При желании можно выполнить что-то вроде этого:

jQuery('p').bounceAroundTheScreenAndTurnGreen();


Механизм расширений в jQuery обеспечивает задокументированные методы для их добавления в систему. Простота и удобство их использования привлекли большое сообщество авторов таких расширений; справочник расширений насчитывает уже более ста примеров.
Еще одной приятной особенностью является возможность добавлять собственные селекторы так же, как и собственные методы. Расширение moreSelectors добавляет методы типа div:color(red), который, например, выбирает все div с красным текстом.
jQuery в примерах

Для начала Вам понадобиться сам фреймворк, его вы сможете скачать с домашней страницы проекта http://jquery.com/, затем проинициализировать:







А основные моменты Вам поможет понять следующая диаграмма:





Как получить элемент с помощью jQuery:

Для того чтобы понимать как работает селектор Вам все-же необходимы базовые знания CSS, т.к. именно от принципов CSS отталкивает селектор jQuery:

$("#header") — получение элемента с id=«header»

$(«h3») — получить все

элементы

$(«div#content .photo») — получить все элементы с классом =«photo» которые находятся в элементе div с id=«content»

$(«ul li») — получить все

  • элементы из списка
  • следующая страница >>


    izumzum.ru