- jQuery — это замечательный Javascript Framework, который подкупает своей простотой в понимании и удобством в использовании. Но изучение надо с чего-то начинать, и лично моё мнение — лучше всего начинать с наглядных примеров
- Ну для начала Вам понадобиться сам фреймворк, его вы сможете скачать с домашней(внешняя ссылка) страницы проекта, затем проинициализировать:
А основные моменты Вам поможет понять следующая диаграмма:
Код: Выделить всё
<head> <script type="text/javascript" src="jquery.js"></script> </head>
- Для того чтобы понимать как работает селектор Вам все-же необходимы базовые знания CSS, т.к. именно от принципов CSS отталкивает селектор jQuery:
- $("#header") — получение элемента с id=«header»
$(«h3») — получить все <h3> элементы
$(«div#content .photo») — получить все элементы с классом =«photo» которые находятся в элементе div с id=«content»
$(«ul li») — получить все <li> элементы из списка <ul>
$(«ul li:first») — получить только первый элемент <li> из списка <ul>
- $("#header") — получение элемента с id=«header»
- Начнем с простенького примера — слайд-панель, она у нас будет двигаться вверх/вниз по клику на ссылке (см. пример(внешняя ссылка)
Реализуем это следующим образом, по клику на ссылку, у нас будет переключаться её класс (между «active» и «btn-slide»), а панелька с id=«panel» будет выдвигаться/прятаться. (класс «active» изменяет позицию фонового изображения, см. CSS файл во вложении).
Код: Выделить всё
$(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); }); });
- Этот пример покажет как можно красиво и легко убирать растворять элементы (см. внешняя ссылка):
Когда мы кликаем по картинке <img class=«delete»>, будет найден родительский элемент <div class=«pane»>, и его прозрачность будет медленно изменяться от opacity= 1.0 до opacity=hide:
Код: Выделить всё
$(document).ready(function(){ $(".pane .delete").click(function(){ $(this).parents(".pane").animate({ opacity: "hide" }, "slow"); }); });