jQuery – это замечательный JavaScript Framework, который подкупает своей простотой в понимании и удобством в использовании.
Вначале идем на домашнюю страницу
jQuery (домашняя страница)
Качаем или точнее сказать сохраняем в свой комп
Потом заливаем себе на сайт
Далее в на страничке где мы собираемся вставлять jQuery, должны проинициализировать код
Выглядет это так
Code
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
Приведу к примеру код страницы
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Пример</title>
<script type="text/javascript" src="http://komu-za-40.ucoz.kz/veterokua/jquery-1.4.js"></script>
</head>
</html>
Как из кода видно я в свою папку veterokua закачал jquery-1.4.js
При создании веб страницы на которой будет применяться эффект проинициализировать строчкой
Code
<script type="text/javascript" src="http://komu-za-40.ucoz.kz/veterokua/jquery-1.4.js"></script>
Основные моменты Вам поможет понять следующая диаграмма:
Для того чтобы понимать как работает селектор Вам все-же необходимы базовые знания CSS, т.к. именно от принципов CSS отталкивается селектор jQuery:
* $(“#header”) – получение элемента с id=”header”
* $(“h3″) – получить все <h3> элементы
* $(“div#content .photo”) – получить все элементы с классом =”photo” которые находятся в элементе div с id=”content”
* $(“ul li”) – получить все <li> элементы из списка <ul>
* $(“ul li:first”) – получить только первый элемент <li> из списка <ul>
Начнем с простенького примера – слайд-панель, она у нас будет двигаться вверх/вниз по клику на ссылке
Реализуем это следующим образом, по клику на ссылку, у нас будет переключаться её класс (между “active” и “btn-slide”), а панелька с id=”panel” будет выдвигаться/прятаться. (класс “active” изменяет позицию фонового изображения, см. CSS файл во вложении).
Code
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active");
});
});
А вот так это будет выглядеть на нашей пробной странице
Пример
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>О том ,о сем в гостях у Белочки</title>
<script type="text/javascript" src="http://komu-za-40.ucoz.kz/veterokua/jquery-1.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<style type="text/css">
body {
margin: 0 auto;
padding: 0;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
a:focus {
outline: none;
}
#panel {
background: #754c24;
height: 200px;
display: none;
}
.slide {
margin: 0;
padding: 0;
border-top: solid 4px #422410;
background: url(http://komu-za-40.ucoz.kz/veterokua/images/btn-slide.gif) no-repeat center top;
}
.btn-slide {
background: url(http://komu-za-40.ucoz.kz/veterokua/images/) no-repeat right -50px;
text-align: center;
width: 144px;
height: 31px;
padding: 10px 10px 0 0;
margin: 0 auto;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
.active {
background-position: right 12px;
}
</style>
</head>
<body>
<div id="panel">
Бла бла бла бла бла
</div>
<p class="slide"><a href="#" class="btn-slide">Пример выдвижной панели </a></p>
<br>
<br>
<br>
<a href="http://komu-za-40.ucoz.kz/forum/52-903-1"><h4>Назад в тему<h4></a>
</body>
</html>
Пример 1
