Уроки:


  
HTML
  
  
CSS
  
  
PHP
  
  
JavaScript
  
  
jQuery
  
  
PHP+MySQL
  
  
Ajax
  

  Разделы:


  В помощь:


  Ещё:



  Авторизация:


  логин:   
  пароль: 
Сисадмин принес к нам в холодильник свою бутылку кетчупа. На этикетке ручкой написано: «Помидоры.zip»

  Тренажер интуиции:


Тренажер интуиции


  Видеокурсы:


Бесплатный видеокурс: "Cайт-визитка за 1 день"

видеокурс: Сайт-визитка за один день



  Опрос:



  Топ комментаторов:


40

Разговор подруг:
- Мой муж программист - дебил. Сделали сыну прививки и он написал на ребенке маркером: «Вирусная база обновлена 01.10.12 г.»

  Моя группа в контакте:



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

Сначала надо скачать саму библиотеку (которая находится в разделе "программы"), разархивировать и перенести в ту же папку, где лежат ваши 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:50px;
    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

Проверьте свою интуицию:


Мобильную версию можно скачать в google play

Комментарии


Здравствуйте уважаемая администрация сайта и посетители сайта. ЯЫ пришёл за помощью, так как у меня не получается подключить js-файл.

Сразу объясню, тот метод, который у Вас здесь описан он работает во всех браузерах, но к большому моему сожалению, я делаю html-страницу для заложенного браузера в платформу 1С Предприятие 8.2, а он как на зло, не хочет воспринимать код, типа: <script type=’text/javascript’ src=’Sort.js’></script>. Поковыряв немного маны в инете нашёл такую конструкцию: <script type="text/javascript" src="file://fileserver/shara/Sort.js"></script>, которая идеально работает. Но как видно из второго примера, мне приходится использовать прямые пути и у меня никак не получается их сделать относительными. Пробовал разные варианты конструкции  Может кто сталкивался с подобным, поделитесь, если не трудно.
2014-10-29 22:35

Ваш комментарий



Почта: info@web-shpargalka.ru
Сообщить друзьям:
Главная | Форум | Отзывы | Обо мне | Мои курсы | Работы учеников | Конкурсы | Обратная связь