9187

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

Контрольная

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

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

Русский

2013-02-25

152.9 KB

17 чел.

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”


 

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

40087. Теорема Шеннона для оценки производительности канала связи 17.5 KB
  Зато снизу к этому пределу можно подойти сколь угодно близко обеспечивая соответствующим кодированием информации сколь угодно малую вероятность ошибки при любой зашумленности канала. пропускная способность канала означающая теоретическую верхнюю границу скорости передачи данных которые можно передать с данной средней мощностью сигнала через аналоговый канал связи подверженный аддитивному белому гауссовскому шуму мощности равна: где пропускная способность канала бит с; полоса пропускания канала Гц; полная мощность сигнала над...
40088. Протокол, интерфейс, стек протоколов. Модель ISO/OSI 54.29 KB
  Интерфейс определяет набор услуг которые нижележащий уровень предоставляет вышележащему. Международная Организация по Стандартам Interntionl Stndrds Orgniztion ISO разработала модель которая четко определяет различные уровни взаимодействия систем дает им стандартные имена и указывает какую работу должен делать каждый уровень. Каждый уровень имеет дело с одним определенным аспектом взаимодействия. Каждый уровень поддерживает интерфейсы с выше и нижележащими уровнями.
40089. Обобщенная структурная схема систем электросвязи 27.45 KB
  Обобщенная структурная схема систем электросвязи показана на Рис. Обобщенная структурная схема систем электросвязи Сообщение при помощи преобразователя сообщениесигнал преобразуется в первичный электрический сигнал. Первичные сигналы не всегда удобно а иногда невозможно непосредственно передавать по линии связи.
40090. Организации стандартизации в области телекоммуникаций 15.26 KB
  Организации стандартизации в области телекоммуникаций Организации стандартизации в области телекоммуникаций это организации цель деятельности которых заключается в создании единых международных стандартов. Организации стандартизации обеспечивают условия для обсуждения прогрессивных технологий утверждают результаты этих обсуждений в виде официальных стандартов а также обеспечивают распространение утвержденных стандартов. Порядок работы организаций стандартизации по принятию стандартов может отличаться. Наиболее известными организациями...
40091. Амплитудная модуляция 67.25 KB
  2 Параметр МАМ = DV V называется глубиной амплитудной модуляции. При МАМ = 0 модуляции нет и vt = v0t т.3 показана форма передаваемого сигнала а несущего колебания до модуляции б и модулированного по амплитуде несущего колебания в. Такой вид модуляции называется частотной модуляцией.
40092. Частотное разделение каналов 135.63 KB
  2 Функциональная схема многоканальной системы с частотным разделением каналов В зарубежных источниках для обозначения принципа частотного разделения каналов ЧРК используется термин Frequency Division Multiply ccess FDM. В многоканальных системах передачи с частотным разделением каналов МСПЧРК по каналу передаётся только сигнал одной боковой полосы а несущая частота берётся от местного генератора. С целью уменьшения влияния соседних каналов уменьшения переходных помех обусловленного неидеальностью АЧХ фильтров между спектрами...
40093. Принцип временного разделения каналов 54.58 KB
  Принцип временного объединения каналов удобно пояснить с помощью синхронно вращающихся распределителей на передающей и приемной стороне рис. Основные этапы образования группового сигнала показаны на рис. Формируемые отсчеты сигналов на выходе первого импульсного модулятора рис.10в на выходе второго импульсного модулятора рис.
40094. Разделение сигналов по форме 13.93 KB
  Наиболее общим признаком является форма сигналов. Члены ряда линейно независимы и следовательно ни один из канальных сигналов cKtK1 не может быть образован линейной суммой всех других сигналов. В последние годы успешно развиваются цифровые методы разделения сигналов по их форме в частности в качестве переносчиков различных каналов используются дискретные ортогональные последовательности в виде функций Уолша Радемахера и другие.
40095. Ортогональное частотное мультиплексирование 32.57 KB
  Кроме того несущие в системе OFDM накладываются чтобы увеличить спектральную эффективность. Однако несущие в системе OFDM точно ортогональны к друг другу поэтому они накладываются без интерференции. В результате системы OFDM позволяют увеличить спектральную эффективность не вызывая интерференции в соседних каналах.