Программирование JS. JavaScript термины. JavaScript термины Делегирование события
Скачать 31.47 Kb.
|
JavaScript термины Делегирование события preventDefault() – некоторые события такие как щелчки мышью могут перенести вас через гиперссылку , и для того что бы запретить стандартное поведение можно воспользоваться данным методом к объектам события . Аналогом данного метода для ранних версий Internet Explorer можно проверить условие на наличие выполняемости этого метода и в противном случае воспользоваться event.returnValue = false – то есть он не будет возвращать значения stopPropagation() – метод предназначенный для того что остановить всплывание события , то есть что бы событие не распространялось для элементов предков , нужно пользоваться для объекта event , так же данный метод не работает на Internet Explorer и предусмотрен аналог в виде event.cancelBubble = true – то есть оно остановит распространения . return false – необходим для того что объединить два предыдущих методов , то есть оно останавливает событие поставленное по умолчанию Цель события - это объект, в котором возникло событие или с которым это событие связано. Когда говорят о событии, обычно упоминают тип и цель события. Например, событие «load» объекта Window или событие «click» элемента Node.parentNode – нужен для того что бы получать доступ к родительскому элементу данного элемента DOM Load – зачастую используется для загрузки сценариев при загрузки страницы focus – когда элемент получает фокус , на этом событие срабатывает событие focus - захват Blur – когда элемент теряет фокус , узле срабатывает blur - захват Focusin - аналог для фокуса – захват и всплывание Focusout - аналог выхода из фокуса – захват и всплывани События Click (display touch) – для выполнения задачи используем главную кнопку мыши , так же работает при нажатий – enter Dbclick – (double touch of display) – срабатываем когда мы нажимаем по главной кнопки мыши несколько раз Mousedown (touchstart)- срабатывает при нажатий любой кнопки мыши Mouseup(touchend) - срабатывает при отпусканий кнопки мыши Mouseover – срабатывает когда указатель мыши находился за пределами элемента , а затем оказался на элементе Mouseout – срабатывает когда указатель мыши находился на элементе а затем переместился вне его Mousemove - срабатывает когда указатель мыши движется в приделах элемента Области выполнения событий : Экран : ScreenX and screenY указывают координаты указателя мыши относительно экрана ПК Страница : pageX and pageY указывают координаты относительно всей вебстраницы Клиент ClientX and clientY указывают координаты в области просмотра в браузере (прокрутка верх и вниз) Собыия клавиатуры Input - срабатывает при измений значения input and textarea в качестве альтернативы keydown Keydown – срабатывает при нажатий на любую кнопку клавиши (если удерживать клавишу то присходит непрерывное действие ) Keypress – срабатывает с той кнопкой при нажатий которого выводится какой либо символ , тоесть если это будет стрелочка то оно не сработает (keydown сработает) Keyup - сработает после того как вы отпустите клавишу (Keypress и Keydown происходят после вывода симвлов а Keyup до ) События форм Submit – при отправке формы событие Submit срабатывает в узле form и применяется оно чаще всего для проверки значения введенных пользователем на сервер Change - срабатывает при когда изменяется состояние нескольких форм : При выборе из раскрывающегося списка При установке переключателя в одно приложение При установке или сбросе флажка Тоесть change – можно использовать как click , но только более разнобразнее можно использовать – tab , enter , -> Input - для того что бы вписывать инфомацию Поле представляет собой элемент формы для создания области, в которую можно вводить несколько строк текста. В отличие от тега в текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер. Валидация – проверка значении , вносимых в формы называется валидация . Если владелец пропускает необходимую информацию ли некорректно вводит данные то валидация проверяет это События изменений DOM – когда сценарий добавляет на страницу какой-то контент или удаляет у нее часть информации , и в дереве меняется все . DOMNodeInserted – срабатывает когда в дерево вставляется узел – с помощью appendChild() , replaceChild() , insertBefore() . DOMNodeRemoved- срабтывает когда из дерево удаляется элемент , например с помощью методов removeChild() , replaceChild() DOMSubtreeModified – срабатывает при изменений структуры дерево (выше двоя) DOMNodeInsertedDocument – срабатывает когда узел вставляется в дерево DOM как потомок другого узла которые имеется в документе DOMNodeRemovedFromDocument – срабатывает когда вы удаляете удаляете узел в дереве при этом родительский узел остается в документе События HTML-5 DOMContentLoaded – событие срабатывает на этапе формирования дерева DOM (на этапе когда файлы CSS и изоброжения не загрузились ) , то есть оно срабатывает до того как сработает load . Например – то есть он может загрузить все , но при этом он не дотдаеся загрузки изображения или рекламы , такую разметку можно прикрепить к window или document Hashchange – событие срабатывает при изменении хэша url , хэши используются со ссылками , указывающими на отдельные страницы . Данный обработчик работает на объекте window и после у объекта появляются oldURL and newURL которые будут содержать соответсвующие хэши Beforeunload – событие работает на объекте window перед тем как выгрузится из страницы , например «вы действительно хотите выйти из страницы» JQUERY – термины $(“”) – это объект jquery в котрую можно писать Элементы к которым мы хотим полуить доступ .addClass(“”) – добавить класс к элементу Hide() – скрывает элементы Delay() – создает паузу fadeIn() - создает всплывание Проверка проверка готовности страницы к работе Метод ready() – проверяет вашу страницы на то , готова ли она к работе с вашим кодом Инструкция $(document) – создает объект jq представляющий страницу , и когда страница готова к работе она выполняет метод ready() Синтаксис будет выглядит вот так : $(document).ready(function() { // здесь будет находиться ваш сценарий }) Можно так же сократить его написав вот так - $( function() { // здесь будет находиться ваш сценарий }) , то есть преимущество ready() в том что ставя js в html разметке даже в начале , он будет в любом случае ждать , пока он не будет готов к работе ПОЛУЧЕНИЕ СОДЕРЖИМОГО ЭЛЕМЕНТА (извлечение) Методы .html() – этот метод возвращает только код первого указанного элемента html но со всеми его дочерними разметками $(“ul”).html() ; $(“li”).html() ; Метод text() – этот метод возвращает текстовое содержимое сразу всех элементов и их потомков $(“li”).text() ; Обновление содержимого элемента(замена) .html() – этот метод присваивает каждому указанному элементу согласованного набора один и то же контент и так же этот принцип работает на их дочерние элементы , то есть он обновляет весь html код . .text() – этот метод будет обновлять текстовый контент каждому указанному элементу , и обновление вводится в виде текста replaceWith() - этот метод заменяет каждый элемент , который мы укажем , возвращая элементы . .remove() – этот элемент заменяет каждый согласованный элемент . ДОБАВЛЕНИЕ ЭЛЕМЕНТОВ Процесс добавление новых элементов состоит из 2 пунктов создание элементов добавление нового элемента создание элементов : создаем переменную и в нее помещаем пустой li элемент var $mraz = $(“li”); следующая тема создает элемент li и добавляем ему класс с содержимым var $mraz = $(“ добавление элемента на страницу , методы для этого .before() – этот метод вставляет перед одним или несколько указанными элементами .after() – этот метод вставляет после одного или несколько указанных элементов .prepend() – добавляет контент сразу после открывающегося элемента .append() – добавляет контент сразу после закрывающегося элемента .prependTo() – добавляет контент так же как и метод .prepend() , только не a к b , b к a .appendTo() - добавляет контент так же как и метод .append() , только не a к b , b к a ПОЛУЧЕНИЕ И УСТАНОВКА ЗНАЧЕНИЕ АТРИБУТОВ attr() – метод позволяет получать или устанавливать значение атрибутов и их значения для получения их значения нужно нужно в нужном эдементе , в этом методе написать нужный атрибут $(“li#one”).attr(“id”) ; Что бы обновить атрибут нужно сделать все тоже самое , но только нужно ввести через запятую новое значение атрибута $(“li#one”).attr(“id”,”large”); .removeAttr() – этот метод удаляет заданный атрибут в скобках $(“li#one”).removeAttr(“id”); .addClass() – этот метод добавляет к уже имеющему содержимое class removeClass() – этот метод удаляет значение аттрибута class указанное в скобках ПОЛУЧЕНИЕ И УСТАНОВКА СВОИСТВ CSS .css() – этот метод позволяет извлекать и устанавливать значение свойств css Что бы получить значение свойств css – необходимо прописать его в скобках $(“li”).css(“background-color”); - этот код сохранит код первого li элемента , и цвет будет возвращен в rgb цвета Для того что бы установить значение для свойства css необходимо прописать свойство и значение свойства в скобках (два значения ) $(“li”).css(“color”,”red”); $(“li”).css(“margin”,”-=40”); Установка множественных значений : можно устанавливать несколько css свойств в литеральном виде то есть нужно свойства и их значения записывается в фигурные скобки двоеточие используется для разделения названия и значения свойств css запятая ставится после каждой пары $(“li”).css({ “Color:red , Font-size : += 20 “ }); РАБОТА С КАЖДЫМ ЭЛЕМЕНТОМ ВЫБОРКИ Метод .each() позволяет воссоздать возможность цикла , применяя их к набору элементов Данный метод используется для Получения информации из каждого элемента в согласованном наборе Для выполнения последовательности действий с каждым из элементом Метод .each() – в качестве параметра использует функцию в которой все как раз таки будет выполнятся .each() - данный метод позволяет выполнять один или больше инструкций в контексте каждого элемента . Данный метод в качестве параметра принимает только один : функцию содержащую инструкций , которые вы хотите выполнить на каждый элемент . This или $(this) – когда метод .each() перебирает элементы , доступ к текущему элементу можно получить с помощью ключевого слово – this . Так же часто встречается инструкция $(this) , которое использует ключевое слово this для создания новой выборки , содержащий данный элемент . $(“li”).each(function() { Var ids = this.id; $(this).append(“” + ids + “”); }); МЕТОДЫ СОБЫТИЯ Метод - .on() - используется для обработки всех событий (click , dblclick , ect) Данный метод не отличается от от любого другого метода в Jq Выбираем селектор для выборки элемента Используем метод on() создает обработчик событий Пример : $(“li”).on(“click”,function () { $(this).addClass(“complete”); }); ОБЪЕКТ EVENT В JQ Любая функция обрабатывающая события принимает параметр event $(“li”).on(“click”,function(e){ eventType = e.type; }) ДОПОЛНИТЕЛЬНЫЕ ПАРАМЕТРЫ ДЛЯ ОБРАБОТЧИКОВ СОБЫТИЙ Если вы хотите отфильтровать из множество элементов , то вы можете воспользоваться селекторм в квадратных скобках (если написано в кватратных , то мы можем их ососбо не писать ) [селектор] Еще одно вы можете передать через еще одни квадратные скобки это данные [] ВИЗУАЛЬНЫЕ ЭФФЕКТЫ Show() - метод используется для отображения элемента Hide() – используется для скрытия элемента .toggle() – для того что бы изменить на отображение или на скрытие .fadeIn() – используется для всплывания (увеличения прозрачности) .fadeOut() - используется для плавного уменьшения прозрачности (скрытия) .fadeToggle() – для смены на противоположенную сторону прозрачности .slideUp() – скольжение (отображение ) .slideDown() – скольжение (скрытие) .slideToggle() – смена стороны скольжения .delay() – пауза .stop() – остановка .animate() - спец. Анимация Анимация свойств CSS Метод .animated() – позволяет создать нестандартные анимации путем изменения свойств css !! иметь в виду то что свойства css нужно прописывать в форме горбатогоРегистра пример : Border-left-top будет : borderLeftTop .animate ( { // свойства css которые вы хотите поменять } [,скорость][,скорость анимации(linear,swing)][,функция обратного вызова ] ); Параметры внутри : Внутри фигурных скобок нужно прописывать свойства css которые мы хотим изменить Параметр speed – обозначает скорость заданные в миллисекундах (продолжительность) Параметр easing имеет два типа : linear(скорость постоянная) и swing(скорость анимации ускоряется в середине , а в начале замедляется ) Параметр complete используется для использования обратной функции , то есть при выполнении анимации выполняет какую либо анимацию ДОБАВЛЕНИЕ И ФИЛЬТРАЦИЯ ЭЛЕМЕНТОВ В ВЫБОРКЕ .add() – данный метод позволяет добавлять новую выборку в уже существующий .filter() – данный метод фильтруем элементы которые совпадают со вторым селектором .file() – находит все потомки элемента у которых совпадают селекторы в аргументе :not ()– метод используется для того что бы получить элементы у которого не совпадают селекторы :has() – находит элементы , у которых потомки совпадаю по селектору :contains() – находит элементы у которых есть такое же текстовое содержание .is() – проверяет условиеи возвращает какое либо значение ПОИСК ЭЛЕМЕНТОВ ПО ИХ ПОРЯДКОВОМУ НОМЕРУ ОБЪЕКТ JQUERRY называют массивоподобным , потому что он присваивает номера начиная с 0 всем элементам которые вернули селектор .eq() – элемент с подходящим порядковым номером :it() – все элементы у которых индекс меньше чем указан :gt() – все элементы индексы которых больше чем указано [0] [1] [2] [3] |