Jquery. Начало. jQuery для начинающих

1. Основы

Это базовое руководство, составленное чтобы помочь Вам начать работать с jQuery.

Создайте новую страничку со следующим содержанием:

  <html>
  <head>
    <script type="text/javascript" src="/path/to/jquery.js"></script>
    <script type="text/javascript">
      // Your code goes here
    </script>
  </head>
  <body>
    <a href="http://jquery.com/">jQuery</a>
  </body>
  </html>

Измените атрибут src в тэге скрипта, указав путь, где хранится Ваш файл jquery.js. Например, если jquery.js находится в той же дирректории что и HTML файл, следует написать так:

<script type="text/javascript" src="/jquery.js"></script>

Саму библиотеку jQuery Вы можете скачать по адресу http://docs.jquery.com/Downloading_jQuery

1.1.Запуск кода при загрузке документа

Большинство JavaScript программистов, создавая новую скрипт, начинают его со следующего кода:

window.onload = function(){ ... }

Между фигурными скобками располагается код, который будет выполняться сразу после загрузки страницы. Однако, JavaScript код не запуститься, пока на странице не будут загружены все изображения (в том числе и банеры). Причина использования window.onload в самом начале программы заключается в том, что HTML документ ещё не успевает загрузиться, на момент когда вы уже пытаетесь запустить ваш код.

Для решения обоих этих проблем, в jQuery есть введено специальное событие, под названием ready:

$(document).ready(function(){
   // Здесь ваш код
});

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

1.2. Выполнение действия при клике по ссылке

Первая вещь, которую мы собираемся опробовать - это выполнение действия, которое будет происходить при каждом клике по ссылке. В ready function (из примера выше), добавьте следующее:

$("a").click(function(){
   alert("Спасибо, что к нам зашли!");
});

Сохраните HTML файл и обновите (F5) тестовую страничку в браузере. Клик по любой ссылке на странице должен вызвать окно предупреждения, до того как осуществится переход на другую страницу.

Чтобы при нажатии на ссылку и/или для другого события, отменить действие по умолчанию, нужно чтобы обработчик событий возвращал false. Для этого добавьте строчку return false, как показано ниже:

 $("a").click(function(){
   alert("Спасибо, что к нам зашли!");
   return false;
});

1.3. Добавление класса

Ещё одной задачей, которую часто приходится выполнять, это добавление (или удаление) классов для элементов. Например:

$("a").addClass("test");

Если для тестовой страницы добавить следующее описание стилей:

<style type="text/css">a.test { font-weight: bold; }
 </style>

а потом вызвать метод addClass - все элементы станут выделены жирным шрифтом. Чтобы удалить класс, вам нужно использовать removeClass

1.4.Специальные эффекты

В jQuery, есть готовые эффекты, способные сделать ваш web-сайт действительно выдающимся. Вставьте этот код, вместо написанного раньше:

$("a").click(function(){
$(this).hide("slow");
return false;
});

Теперь, если вы нажмёте на любую ссылку на вашей тестовой страничке, она (ссылка) медленно исчезнет.

2.Chainability (Магия jQuery)

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

В двух словах: каждый метод в jQuery возвращает ссылку на результат своей работы, что позволят 'сцеплять' эти методы. Например:

$("a").addClass("test").show().html("foo");

Каждый из этих отдельных методов (addClass, show, html) возвращает объект jQuery, позволяя вам продолжать работать с выбранным элементом.

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

$("a")
.filter(".clickme")
.click(function(){
alert("You are now leaving the site.");
})
.end()
.filter(".hideme")
.click(function(){
$(this).hide();
return false;
})
.end();

Этот скрипт будет работать со следующим HTML кодом:

<a href="http://google.com/" title="http://google.com/" class="external free">Я выдам сообщение при клике</a>
<a href="http://yahoo.com/" title="http://yahoo.com/" class="external free">Нажми на меня чтобы я исчезла!</a>
<a href="http://microsoft.com/" title="http://microsoft.com/" class="external free">Ну а я - нормальная ссылка :)</a>

Методы, которые позволяют "на ходу" менять селектор jQuery и выполнение которых можно отменить с помощью end() это:

  • add()
  • children()
  • eq()
  • filter()
  • find()
  • gt()
  • lt()
  • next()
  • not()
  • parent()
  • parents()
  • siblings()

Подробней ознакомиться с данными методами вы можете по адресу http://docs.jquery.com/Traversing (Traversing API documentation).

3.callBack, функции и ключевое слово 'this'

Обратный вызов (callBack) - это функция, которая размещается как аргумент для другой функции и запускается после того как её 'родительская' функция будет выполнена.Особенность функции обратного вызова в том, что функции которые создаются после "родительской" могут быть запущены ДО запуска callBack.

Ещё одной важной вещью, является умение правильно установить обратный вызов.

3.1. Обратный вызов без аргументов

Для обратного вызова без аргументов следует писать так:

$.get('myhtmlpage.html', myCallBack);

Заметьте что второй параметр здесь - просто имя функции (не заключается в кавычки и без указания круглых скобок). Функции в Javascript могут быть переданы как переменные и запущены далее в коде.

3.2. Обратный вызов с аргументами

"А как быть, если мне необходимо указать аргументы в своей функции?", спросите вы.

3.2.1. Ошибочный синтаксис

Неправильный способ (не будет работать!)

$.get('myhtmlpage.html', myCallBack(param1, param2));

Это не будет работать потому что произойдет вызов функции myCallBack(param1, param2) и результат ее работы будет передан как второй параметр для метода $.get().

3.2.2 Верный синтаксис

Правильный способ (обратите внимание на использование конструкции "function(){"перед вызовом "myCallBack()" )

$.get('myhtmlpage.html', function(){
	myCallBack(param1, param2);
});

То есть мы используем вызов безымянной функции

function(){ 
myCallBack(param1, param2);
}

а уже из нее происходит вызов нужной нам функции с передацей ей аргументов

Этот метод работает, потому что он вставляет безымянную функцию как второй параметр в $.get() без её предварительного запуска.

Ресурс-источник: http://ballista.ru.

Полезные штучки:

Scroll to Top
Ads: