Каталог статей

jQuery > помощь веб-мастеру

jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии
JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому
элементу DOM, обращаться к атрибутам и содержимому элементов DOM,
манипулировать ими. Также библиотека jQuery предоставляет удобный API по работе
с Ajax.

История создания

HTML была одной из первых вещей, которую Джон Резиг освоил когда он только
начал заниматься программированием. Резиг программировал на QBasic, когда один
его знакомый показал ему, как создать веб-страницу (используя Angelfire), а
также основы HTML. Отец подарил ему на Рождество две книги по HTML. Именно
тогда, когда он только начал программировать на Visual Basic, HTML и веб-дизайн
очень заинтересовали его.

Но страсть к JavaScript пришла значительно позже, примерно в 2004 году.
Тогда Резиг получал степень в области компьютерных наук и работал на полставки
в местной фирме Brand Logic. Он занимался дизайном сайта, в котором создавался
пользовательский скроллинг. Джон был разочарован и расстроен, особенно потому
что, использовал код других разработчиков, после этого, решил серьезно изучить
JavaScript. Изучив, пришел к выводам, что JavaScript — это простой, но
изящный язык, который является невероятно мощным решением многих задач. В
течение ближайших пары лет Д. Резиг создал множество различных JavaScript
приложений, прежде чем закончить создание jQuery. Библиотека была представлена
общественности на компьютерной конференции «BarCamp» в Нью-Йорке в 2006 году.

Основной целью создания jQuery Резиг видел возможность закодировать
многоразовые куски кода, которые позволят упростить JavaScript и использовать
их так, чтобы не беспокоиться о кросс-браузерных вопросах. Ночь в начале 2006
года Резиг запомнил на всю жизнь как счастливую: он закончил работу над jQuery
и запустил его в Internet Explorer — все заработало. Это был успех!

Возможности

Переход по дереву DOM,
включая поддержку xPath как плагина;
события;
визуальные эффекты;
AJAX-дополнения;
JavaScript-плагины

Философия

Точно так же, как СSS отделяет визуализацию от структуры HTML, JQuery
отделяет поведение от структуры HTML. Например, вместо прямого указания на
обработчик события нажатия кнопки, управление передаётся JQuery,
идентифицирующей кнопки и затем преобразовывающий его в обработчик события
клика. Такое разделение поведения и структуры также называется принципом
ненавязчивого JavaScript.

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

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

jQuery, как правило, включается в веб-страницу как один внешний
JavaScript-файл:

<head>
 
 <script type="text/javascript" src="путь/к/jQuery.js"></script>
 
 </head>

Вся работа с jQuery ведётся с помощью функции $. Если на сайте применяются другие JavaScript
библиотеки, где $ может
использоваться для своих нужд, то можно использовать её синоним — jQuery. Второй способ считается более
правильным, а чтобы код не получался слишком громоздким можно писать его
следующим образом:

jQuery(function($) {
 
   // Тут код скрипта, где в $ будет jQuery
 
 })

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

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

Типичный пример манипуляции сразу несколькими узлами DOM заключается в
вызове $ функции со строкой
селектора СSS, что возвращает объект jQuery,
содержащий некоторое количество элементов HTML-страницы. Эти элементы затем
обрабатываются методами jQuery. Например,

$("div.test").add("p.quote").addClass("blue").slideDown("slow");

находит все элементы <div>
с классом test, а также все
элементы <p> с классом quote, и затем добавляет им всем класс blue и визуально плавно спускает вниз.

Методы, начинающиеся с $.,
удобно применять для обработки глобальных объектов. Например:

$.each([1,2,3], function() {
 
   document.write(this + 1);
 
 });

добавит на страницу 234.

$.ajax и соответствующие
функции позволяют использовать методы ajax. Например:

$.ajax({
 
   type: "POST",
 
   url: "some.php",
 
   data: {name: 'John', location: 'Boston'},
 
   success: function(msg){
 
     alert( "Data Saved: " + msg );
 
   }
 
 });

В этом примере идет обращение к скрипту some.php
с параметрами name=John&location=Boston
и полученный результат выдается в сообщении по средством alert().

Пример добавления к элементу обработчика события click с помощью jQuery:

$(document).ready(function() {
 
   $("a").click(function() {
 
     alert("Hello world!");
 
   });
 
 });

В данном случае при нажатии на элемент <A> происходит вызов alert("Hello world!").

Получить ссылку

В новом окне Просмотров:[638]Добавлено:22.11.2024 Подробнее

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Создатели u.Tools не несут ответственности за размещаемые материалы. Каждый файл принадежит его создателю.
Сайт оптимизтрован для просмотра в брузерах:Firefox & Opera при разрешении экрана 1280x1024 пикселя.