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”


 

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

29983. Основные подходы к изучению восприятия в зарубежной психологии 57 KB
  Основные подходы к изучению восприятия в зарубежной психологии. Помимо ощущений в процессе восприятия задействован предыдущий опыт процессы осмысления того что воспринимается т. Мир восприятия состоит из: 1ощущений которые возникают когда раздражается отдельный рецептор и 2 образов памяти которые представляют собой следы прежних ощущений Если 2 ощущения повторялись совместно много раз и если затем возникает ощущение или образ памяти то сразу же появляется образ памяти другого ощущения. И для того чтобы объяснить все виды...
29984. Внимание. Общая характеристика 61.5 KB
  Виды внимания. Добрынин О теории и воспитании внимания Свойства внимания. Концентрированность внимания выделение сознанием объекта и направление на него внимания. Объем внимания можно увеличить если осмысленно связать и структурировать материал.
29985. Основные подходы к изучению памяти в зарубежной психологии 67 KB
  Основные подходы к изучению памяти в зарубежной психологии. Ассоциативная теория памяти: Ассоциация осн. Этот метод предоставляет возможности для изучения ассоциативных механизмов памяти. Метод разработан для изучения динамики изменения памяти и особенно забывания во времени.
29986. Основные факты и закономерности памяти 54.5 KB
  Основные факты и закономерности памяти Память запечатление сохранение последующее узнавание и воспроизведение следов прошлого опыта. Классические методы и основные результаты исследования памяти Первые экспериментальные методы изучения мнемических процессов были предложены Эббингаузом 19 век. Этот метод предоставляет возможности для изучения ассоциативных механизмов памяти. Метод разработан для изучения динамики изменения памяти и особенно забывания во времени.
29987. Память и деятельность 43.5 KB
  Подавляющее большинство наших систематических знаний возникает в результате специальной деятельности цель которой запомнить соответствующий материал чтобы сохранить в памяти. Исследование мнемической деятельности одна из ЦЕНТРАЛЬНЫХ ПРОБЛЕМ В ПСИХОЛОГИИ. Произвольное запоминание основа мнемической деятельности. Переход от одной сферы деятельности в которую включено намерение к другой может привести за собой забывание этого намерения.
29988. РЕШЕНИЕ ТРАНСЦЕНДЕНТНЫХ УРАВНЕНИЙ 5.23 MB
  Эти значения x называются корнями уравнения 3. ak например для уравнения вида ax2 bx c = 0 его корни выражаются формулой: . В большинстве же случаев аналитическую запись корней уравнения найти очень сложно или в принципе невозможно такие уравнения называются трансцендентными и поэтому приходится решать уравнение численным способом. Отделение корней На данном этапе определяются те интервалы области изменения переменной x в каждом из которых расположен один и только один корень уравнения 3.
29989. Таинственное похищение Первого звонка. Сценарий праздника 1 сентября 179.11 KB
  Сценарий праздника 1 сентября Действующие лица Первый звонок Витя Петя Четверка Пятерка Двойка Единица Клякса Маша Флеш моб танец Первый ведущий. На сцену выходит Первый звонок. Первый звонок. Здравствуйте ребята вы меня я надеюсь узнали Да я ваш добрый знакомый Первый Школьный Звонок.
29990. СЦЕНАРІЙ СВЯТА ПЕРШОГО ДЗВОНИКА 130.46 KB
  Зріє жито молодеДружно з квітами до школиЗнову молодість іде Ведучий 2:Вересень немов учительДвері школи відчинивШколярів дзвінком врочистимДо навчання запросив Ведучий 1: Здрастуй школо здрастуй ріднаЗдрастуй любий класВ першовересень привітноТи стрічаєш нас Ведучий 2: Пахнуть фарбою класи просторіОй як хочеться вже до книжокМи від степу і синього моряВсі злетілись на перший урок Ведучий 1: Я не знаю хвилини врочистішеЩасливіших не бачив очей.Подивіться як урочистоМалюки зустрічають цей день Ведучий 1: На лінійку запрошуються...
29991. Свято Першого дзвоника 2013-2014 н.р. 81 KB
  Лунає музикафанфари 1 й ведучийШановні друзі всі присутні Батьки сьогоднішні й майбутні Дорогі діти вчителі З найкращим святом на землі. Ведучий Тепла осінь як весна Далечінь така ясна. Зріє жито молоде Дружно з квітами до школи Знову молодість іде Ведуча Вересень немов учитель Двері школи відчинив Школярів дзвінком врочистим До навчання запросив Ведучий Здрастуй школо здрастуй рідна Здрастуй любий клас В першовересень привітно Ти стрічаєш нас 2й ведучий.1 й ведучийЦей день є визначним і радісним святом для кожного з...