2018-08-30 15:42:55 +00:00
-- -
2021-03-10 03:43:53 +00:00
category : framework
framework : jquery
2018-08-30 15:42:55 +00:00
contributors :
- [ "Sawyer Charles" , "https://github.com/xssc" ]
translators :
- [ "Ev Bogdanov" , "https://github.com/evbogdanov" ]
lang : ru - ru
filename : jquery - ru . js
-- -
jQuery — это библиотека JavaScript , которая помогает "делать больше, писать меньше" . Она выполняет множество типичных JavaScript - задач , упрощая написание кода . jQuery используется крупными компаниями и разработчиками с о всего мира . Она упрощает и ускоряет работу с AJAX , с событиями , с DOM и с о многим другим .
2018-08-30 23:08:20 +00:00
Поскольку jQuery является библиотекой JavaScript , вам следует начать с [ изучения JavaScript ] ( https : //learnxinyminutes.com/docs/ru-ru/javascript-ru/).
2018-08-30 15:42:55 +00:00
` ` ` js
2018-08-30 19:55:47 +00:00
///////////////////////////////////
// 1. Селекторы
// Для получения элемента в jQuery используются селекторы
var page = $ ( window ) ; // Получить страницу целиком
// В качестве селектора может выступать CSS-селектор
var paragraph = $ ( 'p' ) ; // Получить все <p> элементы
var table1 = $ ( '#table1' ) ; // Получить элемент с идентификатором 'table1'
var squares = $ ( '.square' ) ; // Получить все элементы с классом 'square'
var square _p = $ ( 'p.square' ) // Получить <p> элементы с классом 'square'
2018-08-30 20:53:46 +00:00
///////////////////////////////////
// 2. События и эффекты
// jQuery прекрасно справляется с обработкой событий
// Часто используемое событие — это событие документа 'ready'
// Вы можете использовать метод 'ready', который сработает, как только документ полностью загрузится
$ ( document ) . ready ( function ( ) {
// Код не выполнится до тех пор, пока документ не будет загружен
} ) ;
// Обработку события можно вынести в отдельную функцию
function onAction ( ) {
// Код выполнится, когда произойдёт событие
}
$ ( '#btn' ) . click ( onAction ) ; // Обработчик события сработает при клике
2018-08-30 22:38:51 +00:00
// Другие распространённые события:
2018-08-30 20:53:46 +00:00
$ ( '#btn' ) . dblclick ( onAction ) ; // Двойной клик
$ ( '#btn' ) . hover ( onAction ) ; // Наведение курсора
$ ( '#btn' ) . focus ( onAction ) ; // Фокус
$ ( '#btn' ) . blur ( onAction ) ; // Потеря фокуса
$ ( '#btn' ) . submit ( onAction ) ; // Отправка формы
$ ( '#btn' ) . select ( onAction ) ; // Когда выбрали элемент
$ ( '#btn' ) . keydown ( onAction ) ; // Когда нажали клавишу
$ ( '#btn' ) . keyup ( onAction ) ; // Когда отпустили клавишу
$ ( '#btn' ) . keypress ( onAction ) ; // Когда нажали символьную клавишу (нажатие привело к появлению символа)
$ ( '#btn' ) . mousemove ( onAction ) ; // Когда переместили курсор мыши
$ ( '#btn' ) . mouseenter ( onAction ) ; // Когда навели курсор на элемент
$ ( '#btn' ) . mouseleave ( onAction ) ; // Когда сдвинули курсор с элемента
2018-08-30 21:57:46 +00:00
// Вы можете не только обрабатывать события, но и вызывать их
$ ( '#btn' ) . dblclick ( ) ; // Вызвать двойной клик на элементе
// Для одного селектора возможно назначить несколько обработчиков событий
$ ( '#btn' ) . on (
{ dblclick : myFunction1 } // Обработать двойной клик
{ blur : myFunction1 } // Обработать исчезновение фокуса
) ;
// Вы можете перемещать и прятать элементы с помощью методов-эффектов
$ ( '.table' ) . hide ( ) ; // Спрятать элемент(ы)
// Обратите внимание: вызов функции в этих методах всё равно спрячет сам элемент
$ ( '.table' ) . hide ( function ( ) {
// Сначала спрятать элемент, затем вызвать функцию
} ) ;
// Вы можете хранить селекторы в переменных
var tables = $ ( '.table' ) ;
// Некоторые основные методы для манипуляций с документом:
tables . hide ( ) ; // Спрятать элемент(ы)
tables . show ( ) ; // Показать элемент(ы)
tables . toggle ( ) ; // Спрятать/показать
tables . fadeOut ( ) ; // Плавное исчезновение
tables . fadeIn ( ) ; // Плавное появление
tables . fadeToggle ( ) ; // Плавное исчезновение или появление
tables . fadeTo ( 0.5 ) ; // Изменение прозрачности
tables . slideUp ( ) ; // Свернуть элемент
tables . slideDown ( ) ; // Развернуть элемент
tables . slideToggle ( ) ; // Свернуть или развернуть
// В с е эти методы принимают скорость (в миллисекундах) и функцию обратного вызова
tables . hide ( 1000 , myFunction ) ; // Анимация длится 1 секунду, затем вызов функции
// В методе 'fadeTo' вторым параметром обязательно идёт прозрачность
tables . fadeTo ( 2000 , 0.1 , myFunction ) ; // Прозрачность меняется в течение 2 секунд до 0.1, затем вызывается функция
// Метод 'animate' позволяет делать более продвинутую анимацию
tables . animate ( { "margin-top" : "+=50" , height : "100px" } , 500 , myFunction ) ;
2018-08-30 22:38:51 +00:00
///////////////////////////////////
// 3. Манипуляции
// Манипуляции похожи на эффекты, но позволяют добиться большего
$ ( 'div' ) . addClass ( 'taming-slim-20' ) ; // Добавить класс 'taming-slim-20' ко всем <div> элементам
// Часто встречающиеся методы манипуляций
$ ( 'p' ) . append ( 'Hello world' ) ; // Добавить в конец элемента
$ ( 'p' ) . attr ( 'class' ) ; // Получить атрибут
$ ( 'p' ) . attr ( 'class' , 'content' ) ; // Установить атрибут
$ ( 'p' ) . hasClass ( 'taming-slim-20' ) ; // Проверить наличие класса
$ ( 'p' ) . height ( ) ; // Получить или установить высоту элемента
2018-08-30 22:54:17 +00:00
// В о многих методах вам доступна информация ТОЛЬКО о первом элементе из выбранных
$ ( 'p' ) . height ( ) ; // Вы получите высоту только для первого <p> элемента
// Метод 'each' позволяет это исправить и пройтись по всем выбранным вами элементам
2018-08-30 22:38:51 +00:00
var heights = [ ] ;
$ ( 'p' ) . each ( function ( ) {
heights . push ( $ ( this ) . height ( ) ) ; // Добавить высоту всех <p> элементов в массив
} ) ;
2018-08-30 15:42:55 +00:00
` ` `