Как работает jQuery?

JavaScript | 21.11.2009 | Метки:
jQuery

Это простой урок переведенный с целью помочь вам начать использовать jQuery. Если вы еще не имеете тестовую страницу, самое время ее сбацать:

<html>
  <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    </script>
  </head>
  <body>
    <a href="http://jquery.com/">jQuery</a>
  </body>
</html>

Рекомендую поставить реальный адрес к вашему экземпляру jQuery либо ссылку на гугл http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js.

Первая вещь, которую делают Javascript программисты это добавка примерно такого кода в страницу:

window.onload = function(){ alert("welcome"); }

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

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

 $(document).ready(function(){
   // Your code here
 });

Внутри события ready добавим обработчик события click (клики по ссылкам):

 $(document).ready(function(){
   $("a").click(function(event){
     alert("Thanks for visiting!");
   });
 });

Сохраните ваш html и перезагрузите страницу. Клик по линку на странице будут вызывать появление всплывающего окна перед уходом на jquery.com.

Также вы можете запретить дефолтное поведение скрипта для кликов и массы других событий с помощью вызова event.preventDefault() в обрботчике event:

 $(document).ready(function(){
   $("a").click(function(event){
     alert("Как видите, ссылка больше не приводит вас на jquery.com");
     event.preventDefault();
   });
 });

Далее приведен пример готового html файла использующего jquery-библиотеку загружаемую с сервера гугла:

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
   <script type="text/javascript">
     $(document).ready(function(){
       $("a").click(function(event){
         alert("As you can see, the link no longer took you to jquery.com");
         event.preventDefault();
       });
     });
 
   </script>
 </head>
 <body>
   <a href="http://jquery.com/">jQuery</a>
 </body>
 </html>

Другая частая задача это добавление (или удаление) CSS-класса.
Для начала добавим немного инфы о стилях в блок тестового файла:

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

Далее добавим вызов функции addClass:

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

Теперь все а элементы выделены жырным.
Для удаления класса нужно юзать removeClass:

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

В jQuery куча разных эффектов созданных для решения практически любых задач. Для того чтобы потестировать их поменяйте тестовый код на следующий:

 $("a").click(function(event){
   event.preventDefault();
   $(this).hide("slow");
 });

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

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

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

Отметим, что вторым параметром здесь является просто название функции (но не в виде строки и без скобок). В JavaScript функции являются "гражданами первого сорта" и поэтому может быть принят во всем, как ссылки на переменные и осуществляется в более позднее время.
"Что делать, если у вас есть аргументы, которые вы хотите передать?", Спросите вы сами.
Проблема с вариантом $.get('myhtmlpage.html', myCallBack(param1, param2)); в том, что это выражение myCallBack (param1, param2) посчитается раньше чем придет в функцию. Javascript и расширения Jquery ожидает указатель на функцию, в подобных случаях, т.н. SetTimeout функцию.

В приведенном ниже примере создается анонимная функции (только блок операторов) и регистрирутся в качестве функции обратного вызова. Обратите внимание на использование 'function(){'. Анонимная функция делает ровно одну вещь: вызывает myCallBack, со значениями Param1 и Param2 в космической сфере:

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

Параметры param1 и param2 вычисляются как возвращаемые когда '$.get' доступен на странице.

оригинал: http://docs.jquery.com/How_jQuery_Works


Добавление комментария:

Вы можете использовать эти теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">