JavaScript — урок 5. JQuery

Веб программирование JavaScript — урок 5. JQuery

Помечено: ,

  • В этой теме 0 ответов, 1 участник, последнее обновление 1 год, 6 месяцев назад сделано Васильев Владимир Сергеевич.
Просмотр 0 веток ответов
  • Автор
    Сообщения
    • #5137
      @admin

      Обзор JQuery

      Главным удобством библиотеки является возможность выбора HTML элементов по css селекторам, и работы с ними как с одним объектом. Т.е. изменить стиль нескольких объектов можно вызовом одного метода без циклов. Есть поддержка ajax, несколько визуальных эффектов, собственные виджеты (элементы управления) пользовательского интерфейса как закладки.

      В ужатом виде занимает от 30кб.

      Скачать JQuery можно с домашнего сайта библиотеки. Для кракткости можно переименовать файл, например jquery-1.2.5.pack.js в jquery.js.

      На базе JQuery создан отдельный проект JQuery UI, позволяющий добавить на страницу готовые виджеты и визуальные эффекты. Сразу скачать ядро JQuery UI и JQuery можно с оффициального сайта проекта.

      Файл jquery ui в полном объеме довольно большой (почти 200кб). В скаченном вами архиве есть папка development-bundle/ui, где JQuery UI хранится по частям (в не сжатом виде). Таким образом, для сокращения времени загрузки страницы можно подключать только нужные части jquery ui.

      Чтобы виджеты выглядели как в примерах на официальном сайте, не забудьте подключить стили. Они также доступны по раздельности, что облегчает редактирование. На сайте jqueryui.com доступны различные цветовые темы.

      Пример использования JQuery

      Принцип работы следующий. Вызываем функцию $, возвращающую объект JQuery.
      Аргумент этой функции задает, с какими объектами будет работать созданный JQuery:

      • существующий dom объект;
      • css селектор версий 1-3 (поддерживаемый список);
      • обычный html текст, который можно будет добавить к существующим объектам.

      После этого вызываем методы JQuery, которые будут применяться ко всем отобранным объектам.
      Основные методы:

      • html() — получить значение innerHTML первого объекта;
      • html(«…») — установить значение innerHTML всех объектов;
      • text() — получить содержимое всех объектов в виде чистого текста (без тегов);
      • text(«…») — вставить текст в объекты, спец символы будут заменены на & последовательность;
      • val()/val(«…») — получить/установить значение управляющего элемента как текстовое поле;
      • css(«stylename») — возвращает значение стиля stylename первого объекта;
      • css({…}) — устанавливает стили всем объектам, стиль задается ассоциативным массивом, где
        ключ имя стиля, значение — значение стиля;
      • css(«stylename»,»val») — установить значение стиля всем объектам.

      Кроме этого в JQuery можно динамическм назначать функции для обработки
      различных событий выбранным объектам. Большинство методов
      возвращают ссылку на объект JQuery, так что можно делать большие цепочки вызовов метода,
      без сохранения JQuery в переменной.

      Ниже приведен пример использования библиотеки. При клике на надписи «меняем стиль» меняется стиль
      надписи «Hello World». Текст в левой ячейке таблицы, также генерится средствами библиотеки
      по innerHTML правой ячейки. Единственно, в IE элемент span содержит атрибут
      типа jQuery1238508360187=»2″.

      <span id="div1">
      <span id="p1">Hello <b>World</b></span>
      <br>
      <span id="p2"><b>Hello</b> World</span>
      <span id="p3"><b>Hello world</b></span></span>
      <span id="a1" style="color: green;">
      меняем стиль
      </span> 
      
      <script type="text/javascript">
      //<![CDATA[
      // когда DOM создана добавлям в наш div
      // дополнительный параграф 
      $(document).ready(
      function (){
      $("#div1").append("<span id='p3'><b>Hello world</b></span>");
      }
      );
      
      var mystyle=true;
      // выбираем объект с id=a1
      $('#a1').click(// обработчик клика на span
      function(){
      
      // устанавливаем стиль всем параграфам 
      // в блоке div1
      var a=$('#div1 span');
      if(mystyle){ 
        a.css(
            {'text-decoration':'underline', 
            'font-style' : 'italic'}
            );
        mystyle=false;
        }       
      else {
        a.css(
            {'text-decoration':'none', 
            'font-style' : 'normal'}
            );  
        mystyle=true;
        }
      }
      ).css("color","green") //делаем зеленый цвет
      .mouseover( // обработчик наведения мыши 
      function (){
      $('#a1').css("color","red");
      }
      ).mouseout( // обработчик ухода мыши
      function (){
      $('#a1').css("color","green");
      }
      );
      
      // копируем иходник из ячейки с id=result 
      // в область текста с id=src
      $("#src").text($("#result").html()); 
      //]]>
      </script>

      Hello World

      Hello World
      Hello worldHello world


      меняем стиль

      стиль элемента JQuery

      Для работы со стилями элементов определены следующие методы:

      • css(‘name’) — возвращает значение стиля name первого элемента;
      • css(properties) — устанавливает всем элементам стиль, заданный в виде массива свойств

        $(this).css({‘background-color’ : ‘yellow’, ‘font-weight’ : ‘bolder’});
      • css(‘name’, value) — устанавливает значение указанного свойства стиля всем элементам.

      позиция

      Методы для работы с позицией элементов

      • offset() — возвращает позицию первого элемента в пикселях относительно документа,
        значение указывается в виде объекта со свойствами top и left (т.е. Object{top,left});
      • position() — позиция элемента в виде Object{top,left} относительно родительского элемента;
      • scrollTop() — смещение верхней прокрутки первого элемента;
      • scrollTop(val) — установить смещение верхней прокрутки всех элементов;
      • scrollLeft() — смещение левой прокрутки первого элемента;
      • scrollLeft(val) — установить смещение левой прокрутки всех элементов;

      размеры

      • height() — высота в пикселях первого элемента;
      • height(val) — устанавливает высоту всех элементов;
      • width() — ширина в пикселях первого элемента;
      • width(val) — устанавливает ширину всех элементов;
      • innerHeight() — внутренняя высота (т.е. без рамки, но включая внутренний отступ (padding));
      • innerWidth() — внутренняя ширина;
      • outerHeight(margin) — внешняя высота (т.е. с рамкой и внутрениим отступом), если аргумент
        margin равен true, то внешние отступы также будут добавлены;
      • outerWidth(margin) — внешняя ширина.

      пример

      <div id="tst" style="width:200px; 
      height:100px; overflow:auto;">
      
      <p style="border:2px solid #666;
      width:1000px;height:1000px;">Hello World
      
      <p style="border:2px solid #666;">1000
      
      <p style="border:2px solid #666;
      width:1000px;height:1000px;">Hello World
      
      
      </div>
      
      
      <script type="text/javascript">
      <!--
      $("#tst").scrollTop(1000);
      //-->
      </script>

      Hello World

      1000

      Hello World

      Работа с html кодом в JQuery

      Общие методы

      • html() — html содержимое первого элемента (т.е. innerHTML).
        Не работает с xml документами, но работает с xhtml;
      • html(val) — устанавливает html содержимое для всех элементов;
      • text() — получить соединенный текст всех элементов;
      • text(val) — установить текстовое содержимое всех элементов.

      вставка внутри элемента

      • append(content) — добавить в конец содержимого каждого элемента;
      • appendTo(selector) — добавить выбранные элементы в конец каждого элемента из
        указанного множества элементов;
      • prepend(content) — добавить в начало содержимого каждого элемента;
      • prependTo(selector) — добавить выбранные элементы в начало каждого элемента
        из указанного множества элементов.

      вставка вне элемента

      • after(content) — вставить после каждого элемента;
      • before(content) — вставить перед каждым элементом;
      • insertAfter(selector) — вставить все элементы после каждого элемента из указанного множества
        элементов;
      • insertBefore(selector) — вставить все элементы перед каждым элементом из указанного множества
        элементов.

      оберточные методы

      Под «обернуть» понимается вставка до и после чего-либо.

      • wrap(html) — обернуть каждый элемент указанным html кодом;
      • wrap(elem) — обернуть каждый элемент указанным DOM элементом (т.е. объектом типа Element);
      • wrapAll(html) — обернуть выбранное множество элементов указанным html кодом;
      • wrapAll(elem) — обернуть выбранное множество элементов указанным DOM элементом;
      • wrapInner(html) — обернуть содержимое каждого элемента указанным html кодом;
      • wrapInner(elem) — обернуть содержимое каждого элемента указанным DOM элементом.

      замена

      • replaceWith(content) — заменить все элементы указанным html или DOM элементом;
      • replaceAll(selector) — заменить выбранными элементами все элементы из указанного
        множества.

      удаление

      • empty() — удаление из каждого элемента всех дочерних элементов;
      • remove([expr]) — удаляет все или отфильтрованные аргументом expr элементы из DOM. Как
        объекты JavaScript они продолжают существовать, так что их можно использовать дальше.

      копирование

      • clone() — создает копии выбранных DOM элементов и выбирает их;
      • clone(bool) — аналогично предыдущему, но если аргумент true, клонируются и
        обработчики событий.

      События в JQuery

      Ниже представлены методы JQuery устанавливающие обработчики событий всем выбранным элементам.
      Имена большинства методов образуются удалением on из имени соответствующего события. Например, onclick->click().

      • ready(fn) — готовность документа;
      • load(fn) — загрузка документа;
      • unload(fn) — выгрузка документа;
      • blur(fn) — потеря фокуса;
      • focus(fn) — получение фокуса;
      • click(fn) — одинарный клик мышью;
      • dblclick(fn) — двойной клик мышью;
      • mousedown(fn) — нажатие клавиши мыши;
      • mouseenter(fn) — вход мыши;
      • mouseleave(fn) — уход мыши;
      • mousemove(fn) — движение мыши;
      • mouseout( fn ) — уход мыши;
      • mouseover(fn) — вход мыши;
      • mouseup(fn) — обработчик отжатия кнопки мыши;
      • keydown(fn) — нажатие клавиши;
      • keypress(fn) — использование клавиши;
      • keyup(fn) — отжатие клавиши;
      • error(fn) — ошибка;
      • change(fn) — изменение;
      • select(fn) — выбор;
      • resize(fn) — изменение размеров;
      • scroll(fn) — прокрутка;
      • submit(fn) — отсылка данных.

      // что-то делаем когда документ загружен
      $(document).ready(function(){
          ...
        });

Просмотр 0 веток ответов
  • Для ответа в этой теме необходимо авторизоваться.