1. Главная страница » Уроки jQuery » Как подключить jQuery

Как подключить jQuery

Автор: | 21.05.2013

Сначала надо скачать саму библиотеку (которая находится в разделе «программы«), разархивировать и перенести в ту же папку, где лежат ваши html-страницы.

Теперь нам надо подключить jQuery к html-странице. Для этого, как вы помните, в html существует тег <script>, который и отвечает за подключение внешних файлов скриптов. Добавим этот тег в html-страницу, так же как мы подключали файл «script.js» с функциями js:

Файл: «index.html»

<html>
  <head>
    <title>jQuery</title>
    <link rel="stylesheet" type="text/css" href="cascade.css">
  <script type="text/javascript" src="jquery-1.7.1.js"></script>
    <script type="text/javascript" src="script.js"></script>    
  </head>
  <body>
  </body>
</html>

Обратите внимание на имя файла. Здесь используется библиотека jquery-1.7.1, но Вы можете скачать более свежую версию, а потому цифры у Вас могут отличаться.

Итак, у нас в папке лежат html-страница, страница со стилями (cascade.css), страница с js-функциями (script.js) и библиотека jQuery (jquery-1.7.1.js). Давайте сделаем вот такой пример (пощелкайте по кнопкам):

Эффекты jQuery

1
2
3

Давайте посмотрим, как это сделано. На html-странице у нас должно быть три прямоугольника (div-ы) и три кнопки:

Файл: «index.html»

<html>
  <head>
    <title>jQuery</title>
    <link rel="stylesheet" type="text/css" href="cascade.css">
  <script type="text/javascript" src="jquery-1.7.1.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <h2>Эффекты jQuery</h2>
    <div id="xy1">1</div>
    <div id="xy2">2</div>
    <div id="xy3">3</div>
    <button  onclick="addEffect1()">Эффект Show()</button>
    <button  onclick="addEffect2()">Эффект SlideDown()</button>
    <button  onclick="addEffect3()">Эффект Animate()</button>
  </body>
</html>

Оформим внешний вид и сделаем прямоугольники невидимыми с помощью CSS.

Код cascade.css:

Файл: «cascade.css»

#xy1, #xy2, #xy3{
    width="99%";
    height:80px;
    float:left;
    background:red;
    margin:5px;
    color:white;
    display:none;
}

Теперь самое интересное, на странице script.js пишем код функций, которые будут срабатывать при нажатии на кнопки:

Файл: «script.js»

function addEffect1(){
  $("#xy1:hidden").show();
}
function addEffect2(){
  $("#xy2:hidden").slideDown("slow");
}
function addEffect3(){
  $("#xy3:hidden").show().animate( {
                fontSize:"36px"
                } , 3000 );
}

Что же делают эти функции?

Функция addEffect1() видит $ (знак доллара) и понимает, что это jQuery, затем она видит («#kv1:hidden») и понимает, что ей нужно найти элемент с id=»kv1″, обладающий свойством hidden (невидимый). Далее она видит .show() и понимает, что найденный элемент надо сделать видимым.

Функция addEffect2() видит $ (знак доллара) и понимает, что это jQuery, затем она видит («#kv2:hidden») и понимает, что ей нужно найти элемент с id=»kv2″, обладающий свойством hidden (невидимый). Далее она видит .slideDown(«slow») и понимает, что найденный элемент надо медленно («slow») отобразить сверху-вниз (slideDown).

Функция addEffect3() видит $ (знак доллара) и понимает, что это jQuery, затем она видит («#kv3:hidden») и понимает, что ей нужно найти элемент с id=»kv3″, обладающий свойством hidden (невидимый). Далее она видит .show() и понимает, что найденный элемент надо сделать видимым. Затем она видит .animate( {fontSize:»36px»} , 3000 ) и понимает, что размер шрифта нужно за 3 секунды (3000) увеличить до 36 пикселей (fontSize:»36px»)

Вот так собственно и работает jQuery. Посмотрите какие короткие у нас функции и представьте какими бы они были, если бы мы решили написать их на чистом javascript. Ну разве ли jQuery не прелесть? О том, как делать графические эффекты, анимацию, перетягивать и сортировать предметы и вообще работать с этой библиотекой и пойдет речь в последующих уроках.

В конце же этого урока хотелось бы поговорить об основных понятиях jQuery. Приблизительно синтаксис оператора jQuery можно представить следующим образом:

$(«селектор»).действие(«свойства действия»);

где селектор — элемент или элементы, с которыми мы будем что-либо делать.

действие — что именно мы будем делать с выбранными элементами. Мы можем добавить какой-либо эффект, css-стиль, изменить html-код и т.д. Здесь же могут быть указаны какие-либо события.

свойства действия — если они предусмотрены действием.

1 2 3 4 5 6

Как подключить jQuery: 1 комментарий

  1. Олег

    Олег Здравствуйте уважаемая администрация сайта и посетители сайта. ЯЫ пришёл за помощью, так как у меня не получается подключить js-файл. Сразу объясню, тот метод, который у Вас здесь описан он работает во всех браузерах, но к большому моему сожалению, я делаю html-страницу для заложенного браузера в платформу 1С Предприятие 8.2, а он как на зло, не хочет воспринимать код, типа: . Поковыряв немного маны в инете нашёл такую конструкцию: , которая идеально работает. Но как видно из второго примера, мне приходится использовать прямые пути и у меня никак не получается их сделать относительными. Пробовал разные варианты конструкции  Может кто сталкивался с подобным, поделитесь, если не трудно.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

code