9187

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

Контрольная

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

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

Русский

2013-02-25

152.9 KB

22 чел.

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”


 

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

80868. Проблемы становления и развития местного самоуправления в России на современном этапе 43.35 KB
  Одной из главных проблем сдерживающих развитие местного самоуправления в России является слабость гражданского общества низкий уровень общественной активности низкая правовая культура населения дефицит знаний о сущности и возможностях самоуправления. В обществе которое столетиями жило в условиях тоталитарного правления не имея глубоких демократических традиций идеи местного самоуправления воспринимаются далеко не всеми. Для того чтобы граждане восприняли идеи местного самоуправления необходима огромная разъяснительная работа.
80869. Правовые основы местного самоуправления 42.55 KB
  По вопросам осуществления отдельных государственных полномочий переданных органам местного самоуправления федеральными законами и законами субъектов Российской Федерации могут приниматься муниципальные правовые акты на основании и во исполнение положений установленных соответствующими федеральными законами и или законами субъектов Российской Федерации. За неисполнение муниципальных правовых актов граждане руководители организаций должностные лица органов государственной власти и должностные лица органов местного самоуправления несут...
80870. Территориальная организация местного самоуправления 46.64 KB
  МСУ осуществляется на всей территории РФ в городских сельских поселениях муниципальных районах городских округах и на внутригородских территориях городов федерального значения. В городах районного значения поселках волостях и сельсоветах на территории района имеются территориальные администрации подчиненные администрации района. 2 территории всех поселений за исключением территорий городских округов а также возникающие на территориях с низкой плотностью населения межселенные территории входят в состав муниципальных районов; 3...
80871. Предметы ведения и полномочия местного самоуправления 44.5 KB
  Предметы ведения и полномочия местного самоуправления. ФЗ №131 Об общих принципах организации местного самоуправления в Российской Федерации от 6. Это основополагающий базовый закон устанавливающий общие правовые территориальные организационные и экономические принципы организации местного самоуправления в России определяющий предмет ведения и полномочия его органов. Предметы ведения местного самоуправления необходимый элемент правового статуса каждого муниципального образования.
80872. Формы участия граждан в осуществлении местного самоуправления в муниципальном образовании 46.48 KB
  Предусматривает что МСУ осуществляется гражданами путем референдума выборов других форм прямого волеизъявления через выборные и другие формируемые ОМСУ. включает формы непосредственной демократии когда сам гражданин непосредственно принимает участие в решении того или иного вопроса. группу составляют формы представительной демократии выборные и другие ОМСУ когда участие гражданина состоит в выборах своих представителей для решения вопросов местной жизни.
80873. Организация территориального общественного самоуправления в муниципальном образовании 45.57 KB
  В соответствии с 131ФЗ Об общих принципах организации местного самоуправления в РФ: ТОС самоорганизация граждан по месту их жительства на части территории муниципального образования территориях поселений не являющихся муниципальными образованиями микрорайонов кварталов улиц дворов и других территориях для самостоятельного и под свою ответственность осуществления собственных инициатив в вопросах местного значения непосредственно населением или через создаваемые им органы территориального общественного самоуправления. Границы...
80874. Структура органов местного самоуправления: состав, полномочия 48.43 KB
  В субъектах РФ в городах федерального значения Москве и Санкт-Петербурге в соответствии с уставами и законами соответствующих субъектов РФ могут не создаваться выборные городские органы местного самоуправления; 2 другие органы образуемые в соответствии с уставами муниципальных образований структура органов местного самоуправления определяется населением самостоятельно. Образование органов местного...
80875. Организация аттестации муниципальных служащих 42.43 KB
  Порядок проведения аттестации Порядок проведения аттестации муниципальных служащих определяется путем принятия положения о проведении аттестации муниципальных служащих каждым муниципальным образованием в соответствии с Типовым положением о проведении аттестации муниципальных служащих. Для проведения аттестации на каждого муниципального служащего готовятся аттестационный лист муниципального служащего и отзыв об исполнении подлежащим аттестации муниципальным служащим должностных обязанностей за аттестационный период. Отзыв представляется не...
80876. Муниципальное образование как объект управления 43.36 KB
  Федеральный закон №131 Об общих принципах организации МСУ в РФ: МО это городское или сельское поселение муниципальный район городской округ либо внутригородская территория города федерального значения. Сельское поселение один или несколько объединенных общей территорией сельских населенных пунктов поселков сел станиц деревень хуторов кишлаков аулов и других сельских населенных пунктов в которых МСУ осуществляется населением непосредственно и или через выборные и иные органы МСУ; Городское поселение город или поселок в...