jQuery–это JavaScript–библиотека обеспечивающая кроссбраузерную поддержку приложений.
Автор Джон Резинг(2006год–первая стабильная версия библиотеки).
Подключение библиотеки
Заходите на сайт jquery.com и скачиваете библиотеку.
Библиотека это текстовой файл.Сохраняете его на своем сервере с расширением js(jquery.js).
Далее производим подключение:в head вставляем строку
<script src="jquery.js" type="text/javascript"></script>
Основную работу в данной библиотеке выполняте функция
jQuery(),которая имеет псевдоним $().
Готовность документа
Библиотека jQuery дает возможность выполнять скрипты сразу посел формирования структуры документа,не дожидаясь загрузки других элементов.
Обрабатывается это событие с помощью метода ready().
$(document).ready(function()
{
...
}
<html>
<head>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("span a").css("color","yellow");
})
</script>
</head>
<body>
</body>
</html>
Селекторы
Суть jQuery брать элементы страницы и выполнять над ними определенные действия.Параметрами функции $() могут выступать селекторы,которые являются стандартом CSS.
- Тег
$("p").css("backgroundcolor","green") //делает фон абзацев зеленым -
#
$("#color").css("backgroundColor","red"); //красный фон для элемента с id="color" -
Тег#
$("p#color").css("backgroundColor","red"); //красный фон для абзаца с id="color" -
.Класс
$(".color").css("backgroundColor","green"); //зеленый фон для всех элементов class="color" -
Тег.Класс
$("p.color").css("backgroundColor","green"); //зеленый фон для всех абзацев с class="color"
-
Элемент1 в Элементе2
$("div a").css("color","yellow");
<div><a href="http://boobie.ru">Сайт приколов</a></div>
//цвет ссылки станет желтым,если она находится в теге <div> -
Элемент2 является дочерним для Элемента1
$("div>a").css("color","red");
<div>
<a href="http://boobie.ru"></a>
<span><a href="http://wp-designer.ru">Шаблоны для Wordpress</a></span>
</div>
//Цвет ссылки станет красным,если <a> находится в теге <div> и не в каком другом. -
Элемент1+Элемент2
$("div+a").css("color","red");
<div>...</div><a href="wp-designer.ru">Шаблоны для Wordpress</a>
//Цвет ссылки станет красным,если тег <a> следует сразу за тегом <div> -
Элемент1~Элемент2
//Ищем Элемент2,который следует после Элемента2 и не обязательно сразу
$("div~a").css("color","red");
//Цвет ссылок следующих после тега <div> станет красным,если они не вложены в другой тег
-
$("a[id]").css("color","red");
//Цвет ссылки станет красным,если тег <a> имеет параметр id -
$("a[href='http://boobie.ru']").css("color","red");
//Цвет ссылки станет красным,если параметр href имеет значение "http://boobie.ru" -
$("a[href!='http://boobie.ru']").css("color","red");
//Цвет ссылки станет красным,если параметр href не имеет значение "http://boobie.ru"
Псевдоклассы
- :nth-child(N)
//является N-дочерним элементом(нумерация с 1)используются спец.слова:even–четные элементы odd–нечетные элементы
$("ul li:nth-child(even)").css("color","green");
//все четные пункты будт зеленого цвета -
:first-child
//первый дочерний элемент своего родительского элемента -
:last-child
//последний дочерний элемент -
:only-child
//единственный дочерний элемент -
:not(селектор)
$("a:not(#lnk)").css("color","green");
//все ссылки примут зеленый цвет,кроме ссылки с идентификатором lnk
-
:input
//все элементы формы -
:text
//все текстовые поля -
:password
//все поля для ввода паролей -
:radio
//все переключатели -
checkbox
//все поля для установки флажков -
:submit
//все кнопки для отправки формы -
:reset
//все кнопки для очистки формы -
:button
//все обычные кнопки -
:file
//все поля для отправик файлов -
:enabled
//активный элемент -
:disabled
//неактивный элемент -
:checked
//отмеченный элемент -
:selected
//все выбранные элементы списка -
:even
//все четные элементы -
:odd
//все нечетные элементы -
:eg(индекс) и :nth(индекс)
//элемент с указанным индексом(нумерация с 0) -
:gt(индекс)
//элементы с индексом большим,чем указан(с 0) -
:lt(индекс)
//элементы с индексом меньшим,чем указан(с 0) -
:first
//первый элемент -
:second
//последний элемент -
:parent
//все элементы у которых есть дочерние элементы -
:contains('текст')
//все элементы в которых ест указанный текст -
:header
//все заголовки (<h1>...<h6>)
Перебор элементов
Получить коллекцию элементов можно с помощью функции $ и селекторов.
Выведем фразу "Здесь был Вася" во всех тегах <p>.
$("p").text("Здесь был Вася");
Если же нужно получить доступ к одному элементу коллекции,то необходимо сначала узнать общее количество элементов.
Это можно узнать с помощью свойств:
alert($("p").length);
alert($("p").size());
Получить доступ к элементу можно указав индекс в квадратных скобках.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var elems=$("p");
if(elems.size()>=3)
{
elems[1].innerHTML="Здесь был Вася";
}
else
{
alert("Элемента нет");
}
})
</script>
</head>
<body>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</body>
</html>
Данный метод позволяет перебрать все элементы коллекции без использования циклов.
<script type="text/javascript">
$(document).ready(function()
{
$("div").each(function(i)
{
this.innerHTML="Этот блок с индексом"+":"+i;
});
})
</script>
Если хотим прервать метод на индексе 3,то:
<script type="text/javascript">
$(document).ready(function()
{
$("div").each(function(i)
{
this.innerHTML="Этот блок с индексом"+":"+i;
if(i==3)
{
return false;
}
});
})
</script>
Добавление и изменение элементов
-
add(элемент)
//добавляет элемены в коллекцию
$("span").add("#div1").html("Я здесь был");
//находит все теги span и добавляет элемент с div1 с текстом "Я здесь был" -
not(параметр)
//удаляет элементы из коллекции
$("p").not("#div1").css("background-color","blue");
//удаляет синий фон у элемента с индентификатором div1 -
filter(параметр)
//в отличие от not,не удаляет элементы,а только их оставляет
$("div").filter("#div1").css("backgroundColor","green");
//синий фон будет только у элемента с индентификатором div1
Привязать поиск элемента к другим элементам
-
find(селектор)
//осуществляет поиск элементов,которые находятся внутри контейнера
$("div").find("span").html("Здрасьте я ваша тетя!");
//во всех span находящихся в div появится строка "Здрасьте я ваша тетя!" -
children(селектор)
//находит все дочерние элементы
$("div").children().css("color","green");
//текст во всех дочерних элементах содержащихся в div примет зеленый цвет
//если указать селектор children("b") будет изменен цвет текста между b -
parent(селектор)
//обнаруживает контейнер,в которы вложен элемент
$("span").parent().html("Какой-то текст"); -
parents(селектор)
//определяет все контейнеры,в которые вложен элемент -
siblings(селектор)
//обнаруживает все узлы,расположенные до или после элемента на одном уровне вложенности -
next(селектор)
//обнаруживает узел,который является соседним и следует после элемента
-
nextAll(селектор)
//определяет все узлы,которые следуют после элемента -
prev(селектор)
//определяет соседний узел,который находится перед элементом -
prevAll(селектор)
//определяются все узлы,которые находятся перед элементом -
contents(селектор)
//—находит дочерние узлы (включая текстовые) в коллекции элементов или в содержимом документа, если он представляет собой фрейм.
Изменение содержимого элементов
-
text(значение)
//позволяет задать текст элемента
$("div").text("Какой-то текст"); -
html(значение)
//то же,что и text только позволяет использовать html–теги
$("div").html("<h1>Какой-то текст</h1>"); -
append(выражение)
//добавляет (выражение) в конец элемента
$("div1").append("<u>Какой–то текст</u>");
-
prepend(выражение)
//добавляет (выражение) в начало элемента
$("div1").prepend("<u>Какой–то текст</u>"); -
appendTo(селектор)
//добавляет коллекцию элементов в конец всех элементов с указанным селектором
$("<u>Текст</u>").appendTo"#div1"); -
prependTo(селектор)
//добавляет коллекцию элементов в начало всех элементов с указанным селектором
Вложенность элементов
-
wrapInner(html–элемент или DOM–элемент)
//вкладывает содержимое элемента в другой элемент
$("div").wrapInner("<h1></h1>"); -
wrap(html–элемент или DOM–элемент)
//полностью вкладывает элемент коллекции в другой элемент -
wrapAll(html–элемент или DOM–элемент)
//собирает все элементы в одном месте и вкладывает их в другой элемент
Очистка содержимого и удаление элемента
-
empty()
//удаляет все подэлементы текущего элемента
<div id="d1">Текст для удаления</div>
<input type="button" value="Очистка" onclick="$('#d1').empty();">
<input type="button" value="Вставка" onclick="$('#d1').html('Текст для вставки');"> -
remove(селектор)
//полностью удаляет элементы
Замена элемента
-
replaceWith(выражение)
//заменяет все элементы на (выражение)
$("#d1").replaceWith($("Новый элемент")); -
replaceAll(селектор)
//вставляет элемент вместо элементов с данным селектором
Вычисление положения элемента
-
offset()
position()
//данные методы возвращают объект с двумя свойствами top(смещение сверху) и left(смещение слева)
События документа
Возможность ыполнения скриптов не дожидаясь загрузки других элементов можно осуществить с помощью метода ready().Данное условие было рассмотрено выше.
$(document).ready(function()
{
alert("Документ доступен");
});
Если необходимо совершить какие–то действия после полной загрузки документа,то можно применить
метод load().
$(window).load(function()
{
alert("Документ загружен");
});
Перед выполнением чего–либо перед выгрузкой документа используется метод unload().
$(window).unload(function()
{
alert("Уже уходите?");
});
События мыши
-
click(функция)
//выполняется при клике на элементе или странице -
toggle()
//дает возможность чередовать несколько функций при клике
$("p").toggle(function()
{
$(this).css("backgroundColor","red");
},
function()
{
$(this).css("backgroundColor","green");
},
function()
{
$(this).css("backgroundColor","blue");
},
function()
{
$(this).css("backgroundColor","yellow");
}).click(); //изначально абзац (p) будет красным и при каждом клике цвет фона будет меняться по кругу -
dblclick()
//выполняется при двойном щелчке -
mousedown(функция)
//выполняется при нажатиии кнопки мыши -
mouseup(функция)
//выполняется при отпускании кнопки мыши -
mousemove(функция)
//выполняется при любом движении мыши -
mouseover(функция)
//при наведении курсора на элемент -
mouseout(функция)
//при выходе курсора за границы элемента -
hover()
//обрабатывает наведение и уход курсора с элемента
$("a").hover(function()
{
$(this).css("color","red");
$("#div1").append("Ваш курсор на ссылке"+"
");
},
function()
{
$(this).css("color","black");
$("#div1").append("Вы убрали курсор"+"
");
});
//при наведении курсора на ссылку в блок с индентификатором div1 будет добавляться текст "Ваш курсор на ссылке",при уходе курсора будет вставляться текст "Вы убрали курсор".
События клавиатуры
-
keydown(функция)
//клавиша нажата -
keypress(функция)
//клавиша нажата (Unicode),генерация событий постоянна,пока не отпущена клавиша -
keyup(функция)
//клавиша отпущена
События формы
-
focus(функция)
//выполняется при получении фокуса элементом формы -
blur(функция)
//потеря фокуса -
change(функция)
//изменение данных в текстовом поле -
select(функция)
//выполняется при выделение содержимого элемента -
submit(функция)
//при отправке данных
Универсальные обработчики событий
-
bind(тип события,данные,функция)
//назначает обработчик для всех элементов коллекции
$(":button").bind("click",function()
{
alert("Вы нажали кнопку");
});
//для всех кнопок будет назначено данное событие -
one(тип события,данные,функция)
//то же,что и bind только выполняется один раз ,после чего удаляется -
trigger(тип события,данные,функция)
//вызывает обработчик указанного события -
triggerHandler(тип события,данные,функция)
//в отличие от trigger вызывается для первого элемента коллекции -
unbind(тип события,данные,функция)
//удаляет обработчики событий
Методы live() и die()
Метод live() предназначен для динамического назначения обработчиков событий.
$(":button).live("click",function()
{
var html='<input type="button" value="Создать кнопку">';
$(this).after("<br>"+html);
});
В данном случае будет образована новая кнопка и при нажатии на вновь образованную кнопку будет появляться еще одна и так далее.
С помощью метода die() можно удалить обрабтчик события.
Анимационные эффекты
-
show(продолжительность,функция)
//отображает элемент -
hide(продолжительность,функция)
//скрывает элемент -
toggle(продолжительность,функция)
//чередование показа и скрытия элемента -
toggle(условие)
//если условие true,то элемент отображается с помощью метода show(),если же false,то используется метод hide() -
slideDown(продолжительность,функция)
//элемент спускается сверху -
slideUp(продолжительность,функция)
//поднимается снизу вверх -
slideToggle(продолжительность,функция)
//чередует показ и скрытие
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#btn").click(function()
{
$("div").slideToggle(1000);
});
})
</script>
</head>
<body>
<div style="display:none;background-color:blue;height:300px;text-align:center;">
Скрытый элемент</div>
<input type="button" value="Отобразить или скрыть элемент" id="btn">
</body>
</html>
Прозрачность элемента
-
fadeIn(продолжительность,функция)
//показывает элемент,изменяя его прозрачность -
fadeOut(продолжительность,функция)
//скрывает элемент,изменяя его прозрачность -
fadeTo(продолжительность,прозрачность,функция)
//изменяет степень прозрачности элемента
$("#img1").css("opacity",0.1).hover(function()
{
$(this).stop().fadeTo(500,0.6);
},
function()
{
$(this).stop().fadeTo(500,0.4);
}
);
<img src="utka.gif" id="img1">
Создание анимации
Для создания анимации используется метод animate().
Данный метод имеент два формата:
–animate(изменяемые атрибуты,опции)
–animate(изменяемые атрибуты,продолжительность,эффект,функция)
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#btn1").click(function()
{
$("#div1").animate({width:"toggle"},"slow");
});
});
</script>
<style type="text/css">
.cls1
{
position:absolute;
top:50px;
left:10px;
width:800px;
height:100px;
}
</style>
</head>
<body>
<input type="button" value="Скрыть/Отобразить" id="btn1">
<div id="div1" class="cls1">
В параметре...
</div>
</body>
</html>
- swing–сначала ускорение,затем замедление
- linear–равномерная скорость движения
Прерывание анимации
Для досрочного прерывания анимации предназначен метод stop().
stop(очистка очереди,завершение анимации)
Управление очередью анимаций
-
queue(название очереди)
//возвращает массив функций в очереди
alert($("#div1").queue().length);
Свойство length позволяет узнать количество анимаций в очереди -
queue(название очереди,функция)
//добавляет функцию в очередь -
queue(название очереди,новая очередь)
//заменяет очередь всех элементов коллекции новой очередью -
dequeue(название очереди)
//удаляет добавленную в очередь функцию после ее выполнения
