| Подключение библиотеки |
| Через абсолютный путь |
<script
src="https://code.jquery.com/jquery-3.1.0.min.js">
</script>
|
Скрипт нужно вставить в раздел <head> после файлов стилей, но перед другими скриптами
|
|
Через относительный путь
|
<script
src="js/jquery-3.1.0.min.js">
</script>
|
| Выполнение сценариев после загрузки страницы |
|
Синтаксис кода jQuery
|
$(document).ready(function() {
// вызов функций jQuery
});
УПРОЩЁННАЯ ЗАПИСЬ:
$(function() {
// jquery code
});
|
Функции jQuery будут выполняться только после полной отрисовки страницы в браузере, во всех примерах будет
подразумеваться вызов данной библиотеки (после загрузки объекта document)
|
| Выполнение сценариев |
|
Пример выполнения сценария ((селектор) - точка - функция - (параметр));
|
$(document).ready(function() {
$('header').hide().slideDown(2000);
});
|
Функция hide() убирает отображение всех тегов <header>, функция slideDown(2000) постепенно показывает содержимое <header> "скольжением" вниз
|
| Селекторы |
$('селектор') пишутся в скобках после знака доллара
|
'header' - название тега
'.classname' - название класса
'#idname' - название id
'main-menu a' - вложенные
'li > a' - дочерние
'p + ul' - соседние
'*' - все
$('...', '...') - несколько селекторов
$('[src]') - с атрибутом src
|
Всё точно также как и в CSS, только название селекторов пишутся всегда в кавычках
|
| Фильтры |
|
: и ключевое слово после селектора
|
$('div.main-content:even') // чётные элементы
:odd // нечётные элементы
:first // первый элемент
:last // последний элемент
:hidden // скрытые элементы
:visible // видимые элементы
$('a:not([href^="http://"])') // кроме этого
$('a:not(this) // кроме
$('li:has(a)') // li, внутри которых есть ссылки
$('p:contains('text')') // p, внутри которых есть текст 'text'
|
Они наподобие псевдо-классов в CSS
|