jQuery. Введение

Что такое jQuery. Как подключить эту библиотеку к странице. Как вызывать функции jQuery. Как использовать jQuery совместно с другими библиотеками.И, наконец, как работать с этой замечательной библиотекой!

Пришло время рассмотреть такую интересную библиотеку в JavaScript , как jQuery.
Что есть jQuery? Это библиотека, которая позволяет совершать какие-либо действия JavaScript с HTML-разметкой и CSS. Итак, начнём по-порядку.

Как подключить jQuery к странице сайта.

<HTML>
<HEAD>
      <TITLE>jQuery</TITLE>
      <SCRIPT type="text/javascript" src="jquery-X.X.X.js"></SCRIPT>
      //где X.X.X - номер версии jQuery
      <style type="text/css">
      </style>
</HEAD>
<BODY>
...

JQuery не стандартная библиотека, так что её придётся скачать с офф сайта JQuery.com. Не смотря на то, что на сайте написано, что библиотека кроссбраузерная, это не так. JQuery v2.x.x не поддерживает Internet Explorer начиная с версии 6 заканчивая 8. Рекомендуется использовать версию для разработки, так как в ней указаны все комментарии к различным частям кода этой библиотеки, что значительно упростит разработку начинающему программисту. Также можно не скачивать библиотеку, а подключить её с всегда доступного сетевого хранилища. Например от Google, Windows и т.д. Ссылку на Jquery online можно посмотреть также на офф сайте библиотеки.

Как вызвать функции JQuery

 <HTML>
<HEAD>
      <TITLE>jQuery</TITLE>
      <SCRIPT type="text/javascript" src="jquery-X.X.X.js"></SCRIPT>
      //где X.X.X - номер версии jQuery
      <style type="text/css">
      </style>
      <SCRIPT type="text/javascript">
      jQuery(document).ready(function(){
            var jq= jQuery('p');
       });
      </SCRIPT>
</HEAD>
<BODY>
      <h1> Моя библиотека JQuery</h1>
      <p> Какой-нибудь текст</p>
...

В данном случае мы вызвали все элементы p на странице сайта. Также можно сократить строку jQuery (document).ready (...) до $(...) это будет одно и то же.

jQuery и другие библиотеки

Как используют jQuery совместно с другими библиотеками? Например, в jQuery есть способ, который поможет избежать противоречий, которые могут возникнуть.

Строка вызова свойств jQuery будет выглядеть так:

var $j = jQuery.noConflict();

Теперь , дабы избежать проблем с другими библиотеками, мы будем вызывать свойства нашей библиотеки с помощью $j.

Пример работы с jQuery

<HTML>
  <HEAD>
  <SCRIPT type="text/javascript" src="jquery-x.x.x.js"></SCRIPT>
  <SCRIPT>
  $(document).ready(function(){
   var text = $('#hide_text');//присваиваем переменной text блок с id=hide_text
   text.hide();//скрываем полученный блок
   $('.button').click(function(){ // при клике на HTML элемент с классом button
    text.show(200);// показываем скрытый блок с задержкой 200 милисекунд
   });
  });
  </SCRIPT>
  </HEAD>
  <BODY>
  <h1>Контент страницы</h1>
  <a href="#" class="button">Нажмите, чтобы показать текст</a>
  <div id="hide_text">Скрытый текст</div>
  </BODY>
</HTML>

В данном примере мы рассмотрели возможность функции библиотеки, такой как скрыть текст. У данной библиотеки широкий спектр возможностей, таких как:
 — работа с анимацией меню сайта
 — различные фото галереи
 — надоедливые всплывающие окна :)
 — различные слайдеры
 — анимация перемещения блоков
 — изменение прозрачности элементов
 — работа с анимацией текста.

И это далеко ещё не всё. С остальными возможностями этой чудо библиотеки вы можете познакомится в мануале JQ на офф сайте.

Вы можете оставить комментарий, или Трекбэк с вашего сайта.

ОЦЕНИТЕ ПОЛЕЗНОСТЬ СТАТЬИ

Оценка: 5,00 ( голосов: 6)
Loading...Loading...

ПОДЕЛИТЬСЯ ССЫЛКОЙ

Оставить комментарий

Return to Top ▲Return to Top ▲