Есть много статей, описывающих как работать с jQuery библиотекой (или фреймворком – как вам больше нравится). В этой статье я постараюсь описать свое видение начала работы с jQuery, поскольку из тех статей, которые я читал иногда было не совсем понятно, что такое это самое jQuery и как с ним работать. Первый раз я попытался начать около года назад, прочитал статью где пафосно описывались возможности jQuery, простота и элементарность работы с ним, однако попробовав несколько примеров из этой статьи, которые напрочь отказывались работать, я «обиделся» и бросил эту затею. Совсем недавно я опять вспомнил про jQuery, но к этому времени я уже имел некоторые представления о фреймворках и о том как с ними работать. Снова начал искать статьи, за год ничего вообщем-то не изменилось, статьи как были с примерами, так и остались, в основном везде и примеры одинаковые.
Первое что необходимо понять: jQuery – не JavaScript, он не работает сам по себе, его надо подключить. Подключается jQuery так же, как любой внешний JavaScript файл. Чтобы не затягивать вот ссылка: jQuery.
Дальше подключаем скрипт
<script src="jquery.js" type="text/javascript"></script>
Все, теперь можно переходить к работе с самим фреймворком. Основой всего jQuery является функция $, с помощью нее можно получать доступ к элементам страницы.
Ну и конечно, как и все, я начну с простого примера: скрывание слоя div. В яваскрипте нам бы пришлось писать что то вроде: document.getElementById(‘идентификатор_слоя’).className=’класс_видимого_слоя’ или document.getElementById(‘идентификатор_слоя’).style.display=’block’. Такая запись довольно объемная, представляете если нужно показать 10 или 20 слоев, ну и вообще, поскольку ошибки яваскрипт не всегда очевидны (если вы пропустили букву в названии метода, или если пропустили где-нибудь заглавную) особенно в больших файлах, ошибки в таких записях иногда бывает трудно обнаружить. Что же нам предлагает jQuery:
$(‘#идентификатор_слоя’).show();
просто и красиво. Обратите внимание на значек # перед идентификатором слоя, он указывает на то, что нужно найти элемент с уникальным идентификатором ‘идентификатор_слоя’. Аналогично CSS, можно также применить метод show() ко всем элементам с классом ‘класс_слоя’
$(‘.класс_слоя’).show();
В результате получим что-то такое:
показать
Привет, меня показали с помощью jQuery
Обратите внимание, что метод show() может быть вызван с параметрами, например show(‘slow’) – покажет элемент медленно, также можно задать время в миллисекундах.
Все просто. Еще пример: изменение html элемента. В яваскрипт мы всегда пользовались методом innerHTML, например так:
var get_html=document.getElementById(‘идентификатор’).innerHTML
jQuery:
var get_html=$(‘#идентификатор’).html()
Тут следует оговориться, что вызов метода html без параметров возвращает содержимое элемента, а такой вызов: $(‘#идентификатор’).html(‘<span>какой нибудь текст</span>’) – заменит содержимое элемента ‘#идентификатор’ на указанное в скобках метода .html.
Вот два самых простых примера, которые мне пришли в голову. Ага, забыл самое главное, и то что мне не показалось неочевидным: а как вызвать эти методы, такие как .show() или .html(). Да очень просто, можно добавить прямо в обработчик события, т.е.:
<span onclick=”$(‘#идентификатор_слоя’).show()”>показать</span>
или если вам нужно еще произвести какие-либо действия, то добавляем прямо в яваскрипт функцию:
function show_div() {
$(‘#идентификатор_слоя’).show();
}
На этом введение можно закончить, основное что необходимо усвоить – jQuery – библиотека, которую нужно подключать.
