JAVASCRIPT

СТРАНИЦА 1    СТРАНИЦА 2   

15. JQUERY выборка элементов страницы

0. Об JQUERY. Подключение библиотеки jquery. JavaScript (/ˈdʒɑːvɑːˌskrɪpt/; аббр. JS) (англ. : query - запрос)

jquery-1.12.2.min.js - скачать

jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX. Сейчас разработка jQuery ведётся командой jQuery во главе с Джоном Резигом.

Некоторые библиотеки JavaScript позволяют упростить взаимодействие JavaScript с другими языками, такими как CSS, PHP, Ruby и Java. Это позволяет упростить запуск приложений JavaScript с приложениями, написанными на других языках программирования.

Библиотеки JavaScript :  Ext, Dojo,  Prototype, script.aculo.us ... .

API (интерфейс программирования приложений, интерфейс прикладного программирования) (англ. application programming interface, API [эй-пи-ай]) — набор готовых классов,процедур, функций, структур и констант, предоставляемых приложением (библиотекой, сервисом) или операционной системой для использования во внешних программных продуктах. Используется программистами при написании всевозможных приложений.

AJAX, Ajax (англ. Asynchronous Javascript and XML — «асинхронный JavaScript и XML») — подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате, при обновлении данных веб-страница не перезагружается полностью, и веб-приложения становятся быстрее и удобнее.

1. Взаимодействие с CSS 3. Селектор тега, селектор id и cелектор класса - выборка их.
Часть 1.
Часть 2.

2. Вложеные селекторы, следующего тега (+ ) и дочерних тегов (>)- выборка их.

3. Измениния в css документе. Вложеные селекторы, следующего тега и дочерних тегов - выборка их.

3.1 Самостоятельно используя данные из задания 1-3 создайте новый документ html и примените 6 видов селекторов
        Покажите результат преподавателю.

4. Перенос с низу вверх страницы код Javascript. Метод ready

5. Группировка селектора. Функции hide(), show()

6. Точные атрибуты, элемент атрибута, начальное значение атрибута, конечное значение атрибута - выборка их.

7. Cелекторы ~ *

7.1 Cелекторы атрибута. Группировка выборок.

7.2 Фильтры.

8. Фильтры.
Часть 1. Инструменты разработчика.
Часть 2. Фильтры.

16. JQUERY действия с элементами страницы

9. Цепные функции. text(), width(), height()

10. Функция для подсчета ширины и высоты. С применением text(), width(), height() - JQUERY
Часть 1.
Часть 2.

Файлы mod_w-css3 скачать

11. Функция html() для модернизации html кода

12. Функции fadeIn() и fadeOut() (англ. : fade - постепенно исчезать, увядать, вянуть ) (англ. : fade-In - постепенное появление), (англ. : fade-Out - постепенное исчезновение)
Часть 1.
Часть 2.

Архив к 12 заданию.

13. Функции slideUp(), slideDown() и fadeTo() (англ. : slide - слайд, скольжение, каток), (англ. : down - вниз),

14. Передача данных через ссылку в функцию и в докумет. onclick, onMouseOver, onMouseOut, onKeyPress, onMouseMove
Часть 1. Первая ссылка
Часть 2. Последуюцие ссылки

14.1 Самостоятельно используя данные из предыдущего задания создайте исчезающее меню как в этом видео
        Покажите результат преподавателю.

Архив к 14.1 заданию.

15. Функции attr() - получение, изменение атрибута. removeAttr() - удаление атрибута.
Атрибу́т (от лат. attributio — приписывание, признак)  — в философии — необходимое, существенное, неотъемлемое свойство предмета или явления (в отличие от преходящих, случайных его состояний).
(англ. : attributes - атрибуты)(англ. : remove - удалить)


16. Функции addClass() - добавляет класс, removeClass - удаляет класс (англ. : add - добавить, сложить)

17. Функция css() - изменить, получить свойство элемента css (англ. Cascading Style Sheets — каскадные таблицы стилей) (фр. cascade — водопад)
Часть 1.
Часть 2.

Литералы используются для представления значений в JavaScript. Они являются фиксированными значениями, а не переменными.
(англ. literal — константа)(константа - постоянная величина в ряду изменяющихся)

Литерал array, литерал boolean, литерал integer, литерал floating-point, литерал object, литерал string

var planets = { Mercury : "Меркурий",
Venus : "Венера", 
Earth : "Земля"; 
};

18. Функция animate() - изменение характеристик css за указанное время. Принимает 3 параметра. (англ. : animate - оживлять, воодушевлять)

18.1 Самостоятельно :
1) задайте форме (form) фон картинкой "i_555.jpg" и рамку 2px через функцию css
2) затем плавно увеличте рамку до 10рх за 3 сек.
3) затем плавно уберите рамку полностью за 4 сек.
4) затем плавно растворите форму полностью за 4 сек четез "fadeOut".
        Покажите результат преподавателю.

19. Функции :

prepend() - добавляет код внутрь выбранного объекта до всего его содержимого (англ. : prepend - перед именем)
append() - добавляет код внутрь выбранного объекта после всего его содержимого (англ. : append - добавлять в конец)
before() - добавляет код до выбранного объекта (англ. : before - до, перед )
after() - добавляет код после выбранного объекта (англ. : after - после, спустя)

19.1 Самостоятельно: на основании №19 добавте в самый конец <div id="wrapper"> новый div с картинкой и текстом и дайте этому объекту id="lesson_19_1".
Затем сделайте цвет фона этого объекта оранжевым, текст синим и рамку 2px.
        Покажите результат преподавателю.

20. Функция each() - просеивание всех выбираемых элементов. Конструкция $(this) - текущий элемент. (англ. : each - каждый, всякий) (англ. : this - это, этот)

20.1 Самостоятельно на основании №20:
1) отберите фото у которых присуствует "jpg" используя $(' ')
2) используя each() и функцию "lesson_20_1" которая проверит фото на предмет - height >160 и width>90
3) и этаже функция добавит синию рамку 2px, padding 10px, фон желтый.
        Покажите результат преподавателю.

21. Функции clone() - копирует указанный предмет. remove() - удаляет объект и сохраняет его для последующего применения

22. Функция size() - возвращает количество элементов выборки. get() - доступ к элементу выборки
(англ. : size - размер)(англ. : get - получить, доставать)
Заключение.

17. ВЗАИМОДЕЙСТВИЕ ЭЛЕМЕНТОВ СТРАНИЦЫ С ДЕЙСТВИЯМИ ПОЛЬЗОВАТЕЛЯ

23. События, которые фиксирует (мониторит) браузер. load, mouseover, mouseout, click, dblclick.
click - onclick = cобытия-обработчик

23.1 Самостоятельно на основании №23:

1) сделайте копию папки 14 (задание 14) назвав ее 23.1
2) измените задание 14 , так что бы обработчик и весь код JavaScript
находился не в файле index.html, а в файле js_14.js
Покажите результат преподавателю.

24. Cобытия mousemove, mousedown, mouseup, focus, blur, change, reset, submit, keypress, keydown, keyup, resize, scroll, unload

25. jQuery. Oбъект > Cобытие > Действие (указать объект - указать событие - указать действие)

25.1 Oбъект > Cобытие > Действие.  this
архив к 25.1

25.2 Самостоятельно на основании №25.1:
1) сделайте копию папки 16 (задание 25.1) назвав ее 16.1
2) измените задание 25.1 , так что бы выбираемые элементы мозайки не пропадали, а оставались - делаясь полупрозрачными (fadeTo()) и клоичество вводимых мозаик было только 6.
Покажите результат преподавателю.

26. this. Добавление текста в таблицу через событие click из списка.

27. this. Изменение цвета фона ячейки таблицы через события: mouseover, mouseout.

28. Cобытие hover() в JQUERY вместе с addClass и removeClass. (англ. : hover - наведение)

28.1 Самостоятельно на основании №28:
измените задание 28 , так что бы вместо addClass и removeClass применялась функция css()(смотри задание 17) с событием hover() для изменения фона цвета и текста на кнопке "reset" и "submit" в форме.
Покажите результат преподавателю.

29. JavaScript cобытия : screenX, pageX, altKey, target ... .

30. Выбор altKey ... .

31. Методы : preventObject, return false. Отмена обычного поведения элемента. (англ. : prevent - не допустить)

32. Методы : preventObject, return false. Для отмены действия кнопки.

33. Создаем слайдшоу
Часть 1.
Часть 2.
html-33.txt     css-33.txt     terrestrial-33.rar(фото)

34. Доделываем слайдшоу.
toggleClass - добавляет указанный класс к элементу, если его нет, и удаляет указанный класс, если элемент уже обладает таковым. (англ. : toggle - переключатель)
Часть 1.
Часть 2.

18. ФОРМЫ И JQUERY

35. Элементы формы и их выбор в jquery
код формы         архив папки 15
36. Фильтр checked и selected элементов формы

37. Метод val для получения значения элементов формы

37.1 Самостоятельно на основании №37:
измените задание 37, так что бы вместо модального окна alert информация выводилась непосредственно на страницу красным цветом.
Покажите результат преподавателю.

38. События и focus() и blur()
(англ. : focus - фокус) - состояние объекта (элемнта формы) , при котором он получает команды, передаваемые мышкой, клавиатурой, и т. п
(англ. : blur - затемнить, неясные очертания)

39. Событe change() (англ. : change - изменение)

----------------------------

/* ## 39. Событe change() ##
$('[name="jumpMenu"]').change(function(){
var get_selected=$('[name="jumpMenu"] :selected').val();
if(get_selected==1){
$('#sel').html('<option value="11">1</option><option value="22">2</option>');
}
else if(get_selected==2){
$('#sel').html('<option value="11">1</option><option value="22">2</option><option value="33" selected>3</option>');
}
else if(get_selected==3){
$('#sel').html('<option value="11">1</option>');
}
})

*/
/* ## 40. Событe submit() ##
$('.food').submit(function(e){
if($('[name="ss"]').val()==""){
e.preventDefault();
alert('Заполните поле - номер');
}
})
*/

-----------------

40. Событe submit()
(англ. : submit - отправить, подавать, подчинять)
41. Проверка значения по умолчанию ' поиск по сайту' посредством focus и blur:
1) подставленное по умолчанию значение должно очиститься если поставлен курсор в это поле,
2) если его оставить пустым то в этом поле возвращается значение по умолчанию
код формы

42. Заблокировать/раззаблокировать (disabled) + поменять цвет, скрыть/показать поля формы

43. Проверка e-mail адреса с помощью регулярного выражениия и search

1) Проверка происходит в момент ухода с поля (blur/focus)
2) Когда e-mail корректный поле с зеленой рамкой, не корректный с крастной в остальном поумолчанию
3) Заблокировать вторичную отправку формы
код регулярного выражениия

архив папка 35

перейти вверх страницы