9187

jQuery — библиотека JavaScript

Контрольная

Информатика, кибернетика и программирование

jQuery jQuery - библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM (Document Object Model - объектная модель документа), обращаться к...

Русский

2013-02-25

152.9 KB

26 чел.

jQuery

jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM(Document Object Model — «объектная модель документа»), обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API по работе с AJAX.


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

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

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

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

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

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

<head>

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

</head>

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

jQuery(function($) {

 // здесь код скрипта, где в $ будет находиться объект, предоставляющий доступ к функциям jQuery

})

А основные моменты в диаграмме:

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

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

В следующем примере реализуем эффект растворение:

$(document).ready(function(){

 

    $(".pane .delete").click(function(){

        $(this).parents(".pane").animate({ opacity: "hide" }, "slow");

    });

 

});

Когда мы кликаем по картинке <img class=”delete”>, будет найден родительский элемент <div class=”pane”>, и его прозрачность будет медленно изменяться от opacity= 1.0 до opacity=hide

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

$(document).ready(function(){

    $(".run").click(function(){

 

        $("#box").animate({opacity: "0.1", left: "+=400"}, 1200)

        .animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")

        .animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")

        .animate({top: "0"}, "fast")

        .slideUp()

        .slideDown("slow")

        return false;

    }); 

});

Line 0: когда прогрузилась страница (DOM готов к манипуляциям)

Line 1: привязываемся к событию click для элемента <a class=”run”>

Line 2: манипулируем элементом <div id=”box”> – уменьшаем его прозрачность до 0.1, наращиваем позицию left еще на 400px, со скоростью 1200 (milliseconds)

Line 3: затем медленно изменяем следующие параметры: opacity=0.4, top=160px, height=20, width=20; скорость анимации указывается вторым параметром : “slow”, “normal”, “fast” или в миллисекундах

Line 4: затем opacity=1, left=0, height=100, width=100, скорость – “slow”

Line 5: затем top=0, скорость – “fast”

Line 6: затем slideUp (с дефолтной скоростью анимации – “normal”)

Line 7: затем slideDown, скорость – “slow”

Line 8: возвращаем false для того чтобы браузер не перешел по ссылке

Использование jQuery позволяет сделать складывающиеся панели:

$(document).ready(function(){

 

    //hide message_body after the first one

    $(".message_list .message_body:gt(0)").hide();

 

    //hide message li after the 5th

    $(".message_list li:gt(4)").hide();

 

    //toggle message_body

    $(".message_head").click(function(){

        $(this).next(".message_body").slideToggle(500)

        return false;

    });

 

    //collapse all messages

    $(".collpase_all_message").click(function(){

        $(".message_body").slideUp(500)

        return false;

    });

 

    //show all messages

    $(".show_all_message").click(function(){

        $(this).hide()

        $(".show_recent_only").show()

        $(".message_list li:gt(4)").slideDown()

        return false;

    });

 

    //show recent messages only

    $(".show_recent_only").click(function(){

        $(this).hide()

        $(".show_all_message").show()

        $(".message_list li:gt(4)").slideUp()

        return false;

    });

 

});

  1.  скрываем все элементы <div class=”message_body”> после первого.
  2.  скрываем все элементы <li> после пятого
  3.  клик по <p class=”message_head”> – вызывает метод slideToggle для следующего элемента <div class=”message_body”>
  4.  клик по <a class=”collpase_all_message”> – вызывает метод slideUp для всех <div class=”message_body”>
  5.  клик по <a class=”show_all_message”> – скрывает элемент, и отображает <a class=”show_recent_only”>, так же вызывается метод slideDown для всех <li> послепятого
  6.  клик по <a class=”show_recent_only”> – скрывает элемент, и отображает <a class=”show_all_message”>, так же вызывается метод slideUp для всех <li> после пятого

На сегодняшний день на сайтах очень часто встречается галереи изображений на главной странице, большая часть из сделана при помощи jQuery:

$(document).ready(function(){

 

    $("h2").append('<em></em>')

 

    $(".thumbs a").click(function(){

 

        var largePath = $(this).attr("href");

        var largeAlt = $(this).attr("title");

 

        $("#largeImg").attr({ src: largePath, alt: largeAlt });

 

        $("h2 em").html(" (" + largeAlt + ")"); return false;

    });

  

 });

Для начала добавим тэг <em> в заголовки <h2>

По клику на изображения в <p class=thumbs> выполняем следующие действия:

  1.  сохраняем значение атрибута “href” в переменной “largePath”
  2.  сохраняем значение атрибута “title” в переменной “largeAlt”
  3.  заменяем в элементе <img id=”largeImg”> значение атрибута “scr” и “alt” значениями из переменных “largePath” и “largeAlt”
  4.  так же присваиваем элементу “h2 em” значение из “largeAlt”


 

А также другие работы, которые могут Вас заинтересовать

41122. учасні приклади біотехнологій в архітектурі.Об’єкти екологічного дизайну 1.48 MB
  Біосферна концепція розвитку екосистеми міста дизайнерські рішення як один з запобіжних факторів по зменшенню антропогенного навантаження на довкілля сучасні приклади проектування біопозитивних споруд В наш час багато Європейських організацій в тому числі і урядових структур погоджуються з тим що міста відіграють надзвичайно важливу роль в питаннях повязаних із зміною клімату. Усвідомлення цієї концепції відбулося через численні конференції та обговорення внаслідок чого деякі організацій виробили чітке прогресивне бачення того як...
41123. Основные понятия программного обеспечения систем защиты информации 277.5 KB
  Быстро развивающиеся компьютерные информационные технологии вносят заметные изменения в нашу жизнь. Информация стала товаром, который можно приобрести, продать, обменять. При этом стоимость информации часто в сотни раз превосходит стоимость компьютерной системы, в которой она хранится.
41124. Техническая термодинамика и промышленная теплотехника 209.5 KB
  Если использовать в качестве тестового физического тела например руку то прикасаясь к стеклу мы скажем: стекло холодное. Из сказанного следует что для отдельного тела не контактирующего с другими телами понятие теплоты не может быть использовано. Такое тело имеет запас энергии само по себе даже при отсутствии взаимодействия с другими телами: если например тело движется с некоторой скоростью можно сказать что оно имеет некоторый запас энергии. В термодинамике принято тела нагретые больше по отношению к остальным называть...
41125. СУЩНОСТЬ И РАЗРАБОТКА МСФО 329.5 KB
  Совет также издает основы для заключений относительно МСФО и их проектов. Обязанностями Комитета являются: толкование применения МСФО и предоставление своевременных руководств тем кто выпускает финансовую отчетность по вопросам непосредственно не прописанным в МСФО или МСБУ; публикование проектов интерпретаций для публичных комментариев и рассмотрение полученных комментариев; предоставление отчетов Совету и получение одобренных Советом окончательных интерпретаций. В процессе разработки МСФО принимают...
41126. Загальний огляд інформаційно-пошукових правових систем 59 KB
  Навчальновиховна мета заняття: дати загальний огляд інформаційнопошукових правових систем Тип заняття: Наочність: Між предметні звязки: лекція таблиця інформаційнопошукових правових систем ЛІГА:ЗАКОН Кваліфікаційні вимоги до знань умінь навичок: Студенти повинні: Основні поняття інформаційнопошукових правових систем. Підведення підсумків уроку Які існують сучасні інформаційнопошукові системами Які ви знаєте види правової системи ЛігаЗакон Для чого призначена ЛігаЗакон Що знаходиться в системі ЛігаЗакон Що дуже вдало...
41127. Авторское право 79 KB
  Учения о природе авторского права Становление двух основных систем авторского права 1. В субъективном смысле авторское право совокупность правовых норм регулирующих личные неимущественные и имущественные права принадлежащие создателям произведений науки литературы и искусства. Предмет изучаемого курса включает в себя: систему правовой охраны творческих произведений авторскими и смежными правами; принципы и основные направления государственного регулирования авторского и смежных прав в Российской Федерации; объекты и субъекты...
41128. Этапы эволюции науки и развитие регионов в мировом сообществе в XXI веке 346.5 KB
  Классический рационализм предстает как направление научной мысли отображающее особенности научного мышления характерного для классического этапа эволюции методологии науки и отличающееся изучением феноменов явлений конкретных систем и конкретного человека как внешнего наблюдателя природы общественных и социальных процессов и т. Неклассический рационализм интерпретируется как направление научной мысли отображающее особенности научного мышления характерного для неклассического этапа эволюции методологии науки и отличающееся изучением...
41129. Проекции точки 196.5 KB
  Плоскости проекции. Проекции разделяются на центральные и параллельные. Пусть заданы в пространстве точка S центр проекции и плоскость П1 плоскость проекции.
41130. Основные задачи в области электротехники 188.5 KB
  Определение связи между токами напряжениями параметрами заданной цепи и теми величинами которые определяют работу рассматриваемой установки например: к. падение напряжения величина тока к. Электрической цепью называется совокупность устройств предназначенных для прохождения электрического тока. Различают источники напряжения и источники тока.