9187

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

Контрольная

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

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

Русский

2013-02-25

152.9 KB

15 чел.

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”


 

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

79938. Договоры купли-продажи, мены, дарения 222 KB
  Передача товара покупателю представляет собой исполнение заключенного и вступившего в силу договора куплипродажи со стороны продавца. Если момент вступления договора в силу совпадает с фактической передачей товара то он исполняется в момент заключения. Он является договором синаллагматическим поскольку исполнение обязательств покупателем по оплате товара обусловлено исполнением продавцом своих обязательств по передаче товара покупателю п. Иными словами покупатель не должен исполнять свои обязанности по оплате товара до исполнения...
79939. Договор аренды, лизинга, ссуды. 197.5 KB
  Понятие договора аренды Договор имущественного найма зародился в римском праве как договор найма вещей loctioconductio rerum. Дореволюционное российское гражданское законодательство использовало понятие договора имущественного найма не придавая какоголибо специального юридического значения одновременному применению понятия аренда имущества. Поэтому предметом договора аренды объявляется только плодоносящая вещь. В действующем законодательстве дается следующее легальное определение договора аренды.
79940. Транспортные договоры. Транспортное законодательство 242 KB
  Морские порты выполняют широкий круг транспортных операций: погрузку разгрузку и обслуживание заходящих в порт судов транспортноэкспедиторские и складские операции с грузами перевалку грузов между разными видами транспорта обслуживание пассажиров морских судов а также местные перевозки грузов и пассажиров на судах порта. Договор перевозки груза его особенности и виды Гражданский кодекс воспроизводит традиционное правило транспортного права согласно которому перевозка грузов осуществляется на основании договора перевозки и дает этому...
79941. Ответственность. Понятие и признаки гражданско-правовой ответственности 105 KB
  Такие меры понуждения к реальному исполнению обязательств нельзя считать ответственностью поскольку обязанность реального исполнения вытекает непосредственно из самого обязательства а ответственность должна выражаться в какомто дополнительном бремени. Долгое время в нашем законодательстве использовался принцип реального исполнения обязательств когда уплата неустойки и возмещение убытков не освобождали должника от исполнения обязательства в натуре. Если уплата неустойки и возмещение убытков вызваны ненадлежащим исполнением обязательства...
79942. Конкуренция. Понятие и социально-экономическая роль конкуренции 91.5 KB
  Одной из мер направленных на развитие конкуренции является поддержка малого и среднего предпринимательства. Дистанционное обучение для инвалидов по доступным ценам Государственная поддержка субъектов малого и среднего предпринимательства в РФ Государственная поддержка субъектов малого и среднего предпринимательства входит в деятельность органов государственной власти РФ органов государственной власти субъектов РФ органов местного самоуправления и инфраструктуры поддержки субъектов малого и среднего предпринимательства. Эти действия...
79943. Введение в Коммерческое право. Понятие коммерции и ее функции 68.5 KB
  Преподавание торгового права было прекращено а само понятие изъято из употребления. Поэтому в стране было вновь возобновлено преподавание коммерческого права. Указывая на то что коммерческая деятельность является разновидностью деятельности предпринимательской следует отметить что предпринимательство гораздо шире коммерции поскольку прибыль можно получать от выполнения работ оказания услуг от доходов на имущество а не только от продажи товаров Понятие коммерческого права и...
79944. Субъекты коммерческой деятельности. Юридическое лицо как субъект коммерческой деятельности 266 KB
  23 ГК РФ гражданин вправе заниматься предпринимательской деятельностью без образования юридического лица с момента государственной регистрации в качестве индивидуального предпринимателя. К предпринимательской деятельности граждан осуществляемой без образования юридического лица соответственно применяются правила которые регулируют деятельность юридических лиц являющихся коммерческими организациями. Индивидуальный предприниматель физическое лицо обладающее гражданской правоспособностью зарегистрированное в установленном законом порядке...
79945. Товар как объект коммерческого права. Понятие товара 143 KB
  Перечень товаров которые не могут находиться в торговом обороте определен Указом Президента РФ О видах продукции работ услуг и отходов производства свободная реализация которых запрещена № 179 от 22. Данный указ был принят в целях сохранения государственного контроля за реализацией отдельных видов продукции имеющих важнейшее значение в удовлетворении потребностей народного хозяйства и обеспечении общественной безопасности см. к товарам полностью произведенным в данной стране относит следующие виды продукции: полезные ископаемые...
79946. Познавательные психические процессы 84 KB
  Познавательные процессы как отдельные виды деятельности; 2. Познавательные процессы как отдельные виды деятельности Ощущение восприятие внимание память воображение мышление речь это важные компоненты любой деятельности человека. Они не просто в ней участвуют но и в ней развиваются а также представляют собой отдельные виды деятельности а также относятся к общим способностям человека. Виды деятельности: игра учеба труд общение саморазвитие.