Подключение библиотеки jQuery
Надо сказать, что существует как минимум 2 версии библиотеки – сжатая (с приставкой min, например jquery-1.10.1.min.js) и расширенная. Насколько я понял, разница между ними только в объеме памяти, который они занимают. У сжатой удалены все пробелы и комментарии, поэтому она грузится быстрее, и в целом, быстрее работает, расширенная же наоборот, для тех, кто любит покопаться. Скачать их можно на официальном сайте jQuery.
Само подключение будет выглядеть примерно так
|
1 |
<script type="text/javascript" src="/jQuery/www/jquery-1.11.2.min.js"></script> |
Есть также сети CDN, то есть подключение можно производить напрямую из сети, например так
|
1 |
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> |
Простые примеры
Создадим пару кнопок и повесим на них обработчики. Одна из них будет работать в стиле jQuery, другая в традиционном javascript стиле.
Main.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--Подключение библиотеки jQuery и нашего скрипта JS для обработки страницы--> <script type="text/javascript" src="/jQuery/www/jquery-1.11.2.min.js"></script> <script type="text/javascript" src="App.js"></script> <title>Main</title> </head> <body> <!--Создадим 2 кнопки для примера --> <button id="btn1">jQuery</button> <button id="btn2">JavaScript</button> <!--Создадим div, в который будем записывать --> <div id='mydiv'> mydiv </div> </body> </html> |
App.js – в данном файле обработаем наши кнопки
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// Обработчик в стиле jQuery $(function(){ $('#btn1').click(function(){ $(this).css('background-color','green'); // Меняем цвет кнопки на желтый $('#mydiv').html('<h2>Hello from jQuery world</h2>'); }); }); //Обработчик в традиционном стиле javascript document.addEventListener("DOMContentLoaded", ready); function ready(){ function myClick(){ document.getElementById('mydiv').innerHTML='<h2>It is traditional javascript</h2>'; } document.getElementById('btn2').onclick=myClick; } |