Тема 4. Язык JavaScript

JavaScript — прототипно-ориентированный сценарный язык программирования. Является реализацией языка ECMAScript (стандарт ECMA-262).JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам. Основные архитектурные черты: динамическая типизация, слабая типизация, автоматическое управление памятью, прототипное программирование, функции как объекты первого класса.На JavaScript оказали влияние многие языки, при разработке была цель сделать язык похожим на Java, но при этом лёгким для использования непрограммистами. Языком JavaScript не владеет какая-либо компания или организация, что отличает его от ряда языков программирования, используемых в веб-разработке

Язык сценариев JavaScript позволяет создавать интерактивныединамические web-страницы, содержимое которых может изменяться взависимости от действий пользователя. Сценарии JavaScript выполняются браузером при наступлении различных событий: щелчок по ссылке, ввод текста, наведение указателя мыши на объект и т.д.Сценарии могут помещаться в любом месте страницы в тегах<script>...</script>. Для ускорения загрузки страницы в открывающем теге желательно указывать атрибут type="text/javascript", а для поддержки старых браузеров, не умеющих обрабатывать тег <script>, желательно заключать текст программы сценария в символы html-комментария:<script type="text/javascript"> <__ текст программы; //__></ script >Сценарии с описаниями пользовательских функций, как правило, помещают в раздел заголовка …. Если для выполнения сценария необходимо, чтобы вся страница уже была загружена, его помещают после закрывающего тега . Также сценарии можно помещать в исходном тексте страницы непосредственно за элементами управления, которые вызывают эти сценарии.

Интерпретатор JavaScript различает регистр имен переменных и функций, т.е. переменные ABC, abc и Abc – это три разных переменных.Типы переменных в JavaScript: числовые - целые и дробные: 1023, -3.096;строковые: "строка1", "строка2" -могут быть как в одинарных, так и в двойных кавычках;логические: true или false;объектные: ссылаются на объекты html-документа, например, на список list1 в форме myform текущего документа: document.myform.list1Объявлению каждой переменной предшествует слово var. При объявлении переменной сразу может быть присвоено начальное значение. Например: var x ;var str="строка";var z = 1.23e-23;Строгая типизация отсутствует, т.е. после указанных примеров далее можно присвоить строковой переменной числовое значение: str = 345;.

Массивы в JavaScript динамические, имеют нумерацию элементов всегда с 0 и задаются конструкцией new Array несколькими способами: var A1 = new Array(); // пустой массив без элементов var A2 = new Array(3); // массив из трёх пустых элементов с номерами 0,1,2 var A3 = new Array(“a”, “b”, “c”); //массив, заданный значениями элементов Обращение к элементам массива происходит через указание индекса в квадратных скобках: A2[0] = 123.5; A2[1] = 67; A2[2] = 8.9; A3[2] = ”ddd”; . Элементы массива создаются автоматически при присвоении им первого значения. Например, после этого присвоения A1[9] = 3.14; длина массива A1 станет равной 10: десятый элемент A1[9] будет иметь значение 3.14, остальные девять от A1[0] до A1[8] будут пустыми, т.е. содержать неопределённые значения. Массив в JavaScript – это объект, имеющий свои методы, т.е. процедуры, которые выполняют над объектом какие-либо действия. Примеры общеупотребительных методов join, sort и reverse: str = A2.join( ); //объединяет массив в строку через «,»: str=”123.5,67,8.9” str = A2.join(“;”) //теперь через точку с запятой: str=”123.5;67;8.9”A3.reverse( ); //теперь массив A3 инвертирован: (“c”, “b”, “a”) A3.sort( ); //теперь массив A3 опять отсортирован по алфавиту A2.sort( ); //массив A2 не изменится, т.к. сортировка осуществляется в лексикографическом порядке, т.е. числа сортируются как строки 

Ниже приведены операторы, написание которых отличается от написания в языке Паскаль или вообще отсутствует:Операция "Присваивание" - Запись в JavaScript "=" - Запись в Паскале ":="Операция "равно" - Запись в JavaScript "==" - Запись в Паскале "="Операция "неравно" - Запись в JavaScript "!=" - Запись в Паскале "<>"Операция "И" - Запись в JavaScript "&&" - Запись в Паскале "and"Операция "ИЛИ" - Запись в JavaScript "II" - Запись в Паскале "or"Операция "НЕ"- Запись в JavaScript "!" - Запись в Паскале "not"Операция "увеличение на 1" - Запись в JavaScript "i++" - Запись в Паскале "i:=i+1"Операция "уменьшение на 1" - Запись в JavaScript "i--" - Запись в Паскале "i:=i-1"Операция "тройной оператор" - Запись в JavaScript "условие ? оператор1 : оператор1" - Запись в Паскале "-"Тройной оператор выполняет ту же функцию, что условный оператор if: y = x>a ? x–a : x*a ; В Паскале тройного оператора нет, те же действия там нужно было бы записывать так: if (x>a) then y:=x–a else y:=x*a; .

if (условие) {операторы;} //сокращённая форма оператора if if (условие) {операторы1;} else {операторы2;} //полная форма Подобно операторным скобкам begin ... end в Паскале, в JavaScript используются фигурные скобки {...} для объединения нескольких операторов в один блок.

for (нач_знач; условие; приращение) {тело цикла;}Пример: for (i=0; i<10; i++) { document.write( (i*i) + "<br>"); }Аналогичный фрагмент на Паскале выглядел бы так: for i:=0 to 9 do begin writeln(i*i); end;

while (условие) {тело цикла;}Пример: i=0; while (i<10) { document.write( (i*i)+"<br>"); i++; }

Пользовательские функции создаются с помощью зарезервированного слова function. Функция должна иметь имя и список параметров, который может быть пустым. Если функция должна возвращать значение, то она должна содержать оператор return с результатом функции. Результат функции может быть значением переменной или выражением. Следующие две функции эквивалентны, они вычисляют гипотенузу прямоугольного треугольника: function gipotenuza 1(a,b) { var c; c = Math.sqrt(a*a+b*b); return c; } 2. function gipotenuza 2(a,b) { return Math.sqrt(a*a+b*b); }

В памяти современного интернет-браузера каждый web-документ представляется в виде иерархической объектной модели – DOM, Document Object Model. Например, текущее окно – это объект window, который содержит объект document – загруженную в него страницу. Объект документ содержит объекты head и body, объект body, в свою очередь, содержит отображаемые объекты: абзацы, таблицы, изображения, формы и т.д.

Ниже приведена объектная модель Internet Explorer версии 4 и выше. Объектная модель Netscape Navigator и его «потомка» Mozilla Firefox немного отличается, но смысл тот же: window - объект, дающий доступ к окну броузера frames - объект, дающий доступ к фреймам (подокнам)window...window...... document - объект, содержащий в себе всю страничкуall - полная коллекция всех тегов документаforms - коллекция форм o anchors - коллекция якорейappleеs - коллекция апплетовembeds - коллекция внедренных объектовfilters - коллекция фильтровimages - коллекция изображенийlinks - коллекция ссылокplugins - коллекция подключаемых модулей o scripts - коллекция блоковselection - коллекция выделений o stylesheets - коллекция объектов с индивидуально заданными стилями history - объект, дающий доступ к истории посещенных ссылокnavigator - объект, дающий доступ к характеристикам браузераlocation - объект, содержащий текущий URLevent - объект, дающий доступ к событиямscreen - объект, дающий доступ к характеристикам экрана. 

Ниже приведён пример страницы с использованием JavaScript, на которой расположены две формы ввода: одна с выпадающим списком, другая – с набором кнопок с зависимой фиксацией, так называемых radiobuttons. Обе формы выполняют схожие действия: при нажатии кнопки изменяется фон страницы в зависимости от выбранного цвета. Изменение фона происходит при изменении свойства bgColor объекта document: document.bgColor=”blue”; Формы на странице имеют имена form1 и form2, указываемые атрибутом name. Соответственно, в сценарии обращение к ним идёт как к document.form1 и document.form2, а к элементам этих форм как к document.form1.color_list и document.form2.color_radio. Причем так называемые радиокнопки с зависимой фиксацией имеют одинаковый атрибут name=”color_radio”. В этом случае из всей группы color_radio может быть выделенной только одна кнопка. При этом группа color_radio – это массив объектов, к свойствам которых можно обращаться. 

jQuery - это библиотека значительно упрощающая и ускоряющая написание JavaScript кода. Девиз jQuery "write less, do more" (пиши меньше, делай больше) отражает ее главное предназначение. jQuery содержит команды позволяющие создавать анимацию и обработчики событий. Также она значительно облегчает выбор элементов в DOM и создание AJAX запросов. Данная библиотека работает со всеми браузерами (IE 6.0+, FF 2.0+, Safari 3.0+, Opera 9.0+, Chrome). Это значит, что Вам больше не нужно будет беспокоиться о кроссбраузерной совместимости JavaScript кода. Для jQuery написано огромное количество плагинов, которые расширяют ее возможности еще больше.

С помощью селекторов jQuery можно выбрать любой элемент на странице. Все возможные варианты использования селекторов перечислены ниже: $('*') - Будут выбраны все элементы присутствующие на странице$("#el1") -Будет выбран элемент с id=el1$(".el1") - Будут выбраны все элементы на странице с class=el1.$("div")  - Будут выбраны все элементы div на странице.$("div, #el1, .el1") - Будут выбраны все элементы div, элемент с id="el1" и все элементы с class="el1" на странице.$("div.el1") -Будут выбраны все элементы div на странице атрибут class которых равен el1.$("p > div")  - Будут выбраны все элементы потомки div родительского элемента p.$("[src]") - Будут выбраны все элементы на странице имеющие атрибут src.$("[src='wisdomweb.gif']") - Будут выбраны все элементы на странице со значениями атрибута src="wisdomweb.gif".$("[src!='wisdomweb.gif']") - Будут выбраны все элементы на странице со значениями атрибута src не равными "wisdomweb.gif".$("[src^='wisdomweb']")  - Будут выбраны все элементы на странице со значениями атрибута src начинающимися на wisdomweb (например wisdomweb.ru, wisdomweb.gif и т.д.).$("[src$='.gif']")  - Будут выбраны все элементы на странице со значениями атрибута src заканчивающимися на .gif.$("[src*='wisdomweb']") - Будут выбраны все элементы на странице со значениями атрибута src содержащими wisdomweb. $(":input")  - Будут выбраны все элементы input на странице.$(":button") - Будут выбраны все элементы input на странице с атрибутом type=button$(":text") - Будут выбраны все элементы input на странице с атрибутом type=text.$(":password")  - Будут выбраны все элементы input на странице с атрибутом type=password.$(":radio")  - Будут выбраны все элементы input на странице с атрибутом type=radio$(":checkbox")  - Будут выбраны все элементы input на странице с атрибутом type=checkbox.$(":reset")  - Будут выбраны все элементы input на странице с атрибутом type=reset.$(":image")  - Будут выбраны все элементы input на странице с атрибутом type=image$(":file")  - Будут выбраны все элементы input на странице с атрибутом type=file$("div:first") - Будет выбран первый div элемент на странице.$("div:last") - Будет выбран последний div элемент на странице.$("li:even")  - Будут выбраны все элементы списка с четными индексами. Так как нумерация индексов элементов начинается с 0, то по сути будут выбраны нечетные элементы т.е. 1й, 3й, 5й элементы списка и т.д.$("li:odd")  - Будет выбраны все элементы с нечетными индексами. Так как нумерация индексов элементов начинается с 0, то по сути будут выбраны четные элементы т.е. 2й, 4й, 6й элементы списка и т.д. $("li:eq(3)")  - Будет выбран 4 элемент списка (нумерация элементов в списке начинается с нуля). $("li:gt(1)")  - Будет выбраны все элементы списка индекс которых больше 1 (т.е. все элементы списка начиная с 3 элемента).$("li:lt(2)")  - Будет выбраны все элементы списка индекс которых меньше 2 (т.е. первые 2 элемента списка). $(":header")  - Будет выбраны все элементы на странице являющиеся заголовками (т.е. элементы h1, h2, h5 и т.д.). $(":animated") - Будет выбраны все анимированные элементы, которые находятся на странице.$(":contain('wisdomweb')") - Будет выбраны все элементы содержащие строку wisdomweb.$(":empty") - Будет выбраны все элементы не имеющие узлов потомков.$(":hidden") - Будет выбраны все скрытые элементы на странице.$(":visible")  - Будет выбраны все видимые элементы находящиеся на странице.

С помощью методов перечисленных ниже Вы можете создавать обработчики событий и привязывать их к элементам:blur - Привязывает или вызывает функцию, код которой выполнится, когда выбранный элемент перестанет быть активным. change - Привязывает или вызывает функцию, код которой будет выполнен в случае изменения содержимого выбранного элемента.click - Привязывает или вызывает функцию, код которой выполнится, когда на выбранном элементе будет произведен щелчок мыши.dblclick - Привязывает или вызывает функцию, код которой выполнится, когда на выбранном элементе будет произведен двойной щелчок мышиerror - Привязывает или вызывает функцию, код которой выполнится если при загрузке выбранного элемента произойдет ошибка. focus - Привязывает или вызывает функцию, код которой будет выполнен, когда выбранный элемент станет активнымfocusin - Привязывает или вызывает функцию, код которой выполнится, когда выбранный элемент или один из его элементов потомков станет активным.focusout - Привязывает или вызывает функцию, код которой выполнится, когда выбранный элемент или один из его элементов потомков перестанет быть активным.hover  - Привязывает одну или две функции к выбранному элементу. Код первой привязанной функции выполнится, когда на выбранный элемент будет наведен курсор мыши а второй, когда курсор мыши покинет пределы этого элемента.keydown - Привязывает или вызывает функцию, код которой выполнится, когда на клавиатуре будет нажата клавиша. keyup - Привязывает или вызывает функцию, код которой выполнится, когда нажатая на клавиатуре клавиша будет отпущена.mousedown - Привязывает или вызывает функцию, код которой будет выполнен после нажатия клавиши мыши на выбранном элементе.mouseenter - Привязывает или вызывает функцию, код которой будет выполнен, когда на выбранный элемент будет наведен указатель мыши. mouseleave - Привязывает или вызывает функцию, код которой будет выполнен, когда указатель мыши будет выведен из границ выбранного элемента.mousemove - Привязывает или вызывает функцию, код которой будет выполнен при передвижении указателя мыши в границах выбранного элемента.mouseout - Привязывает или вызывает функцию, код которой будет выполнен, когда указатель мыши будет выведен из границ выбранного элемента.mouseover - Привязывает или вызывает функцию, код которой будет выполнен, когда на выбранный элемент будет наведен указатель мыши.mouseup  - Привязывает или вызывает функцию, код которой будет выполнен, когда нажатая кнопка мыши будет отпущена.ready - Привязывает или вызывает функцию, код которой будет выполнен, когда страница будет полностью загружена.resize - Привязывает или вызывает функцию, код которой будет выполнен при изменении размера окна браузера.scroll - Привязывает или вызывает функцию, код которой будет выполнен при прокрутке содержимого элементаselect - Привязывает или вызывает функцию, код которой будет выполнен при выделении текста выбранного элемента. submit - Привязывает или вызывает функцию, код которой будет выполнен при отправлении содержимого выбранной формы. unload - Привязывает или вызывает функцию, код которой будет выполнен при выгрузке выбранного элемента.

С помощью методов представленных ниже можно управлять обработчиками событий:bind - Привязывает к выбранному элементу один обработчик события или более. delegate - Добавляет один обработчик события или более к элементам потомкам выбранного элемента.die - Удаляет все привязанные с помощью метода live() обработчики событий у выбранного элементаlive - Привязывает один обработчик события или более к выбранному элементу. Привязанные обработчики будут работать как с уже имеющимися на странице элементами, так и с теми которые будут созданы во время исполнения скрипта.one - Привязывает к выбранному элементу один обработчик события или более. Привязанные обработчики при этом могут быть вызваны только один раз.toggle - Позволяет привязать к выбранному элементу несколько обработчиков событий, между вызовами которых можно переключатся по щелчку мыши.trigger - Вызывает указанный обработчик события у выбранного элемента.trieggerHandler - Вызывает указанный обработчик события у выбранного элемента. unbind -Удаляет у выбранных элементов обработчики событий, которые были привязаны с помощью метода bind().undelegate - Удаляет у выбранных элементов обработчики событий, которые были привязаны с помощью метода delegate(). 

С помощью методов перечисленных ниже можно производить различные манипуляции над оформлением элементов: addClass - Добавляет указанный класс или классы выбранному элементу.css - Позволяет узнать текущее или установить новое значение указанному CSS свойству (или свойствам) выбранного элемента. hasClass - Проверяет содержит ли выбранный элемент класс с указанным именем.height - Позволяет узнать текущую или установить новую высоту выбранному элементу. offset - Позволяет узнать текущее или установить новое местоположение выбранного элемента относительно границ текущего документа. position - Позволяет узнать текущее местоположение выбранного элемента относительно родительского.removeClass - Удаляет у выбранного элемента один класс или более.scrollLeft - Позволяет узнать текущую или установить новую позицию полосы прокрутки выбранного элемента по вертикали. scrollTop - Позволяет узнать текущую или установить новую позицию полосы прокрутки выбранного элемента по горизонтали.toggleClass - Поочередно присваивает указанные классы выбранному элементу.width - Позволяет узнать текущую или установить новую ширину выбранному элементу.

С помощью jQuery методов fadeOut(), fadeIn() и fadeTo() Вы можете постепенно скрывать и отображать элементы анимировано.Синтаксис://Позволяет постепенно скрыть выбранный элемент$("селектор").fadeOut(скорость,функция);//Позволяет постепенно отобразить выбранный элемент $("селектор").fadeIn(скорость,функция);//Позволяет постепенно скрыть/отобразить элемент до указанного значения прозрачности $("селектор").fadeTo(скорость,прозрачность,функция);С помощью jQuery методов slideUp, slideDown и slideToggle Вы можете плавно изменять высоту выбранных элементов.Синтаксис://Позволяет изменяет высоту элемента до 0$("селектор").slideUp(скорость,функция);//Позволяет плавно возвратить элементу его изначальную высоту$("селектор").slideDown(скорость,функция);//При первом вызове будет действовать как slideUp, а при втором как slideDown$("селектор").slideToggle(скорость,функция);С помощью метода slideToggle Вы можете создавать на Ваших страницах удобные выпадающие меню.

Эффекты представленные ниже позволяют скрывать и отображать элементы различными способами.fadeln() - Постепенно меняет прозрачность выбранного элемента делая его видимым.fadeOut() - Постепенно меняет прозрачность выбранного элемента делая его невидимым.fadeTo() - Постепенно меняет прозрачность выбранного элемента до указанного значенияhide() - скрывает выбранный элементshow() - отображает скрытый элементslideDown() - Постепенно изменяет высоту выбранного элемента, делая его видимымslideToggle() - ) Применяет к выбранному элементу метод slideDown() если он невидим и slideUp() если он отображен. slideUp() - Постепенно изменяет высоту выбранного элемента, делая его невидимым

С помощью метода animate() Вы можете создавать на Ваших страницах полноценную анимацию.Синтаксис: $("селектор").animate({стили},скорость,функция_смягчения,функция ); стили задает CSS стили для анимации (к элементу одновременно может быть применено несколько стилей). скорость задает скорость анимации. Вы можете указать скорость используя предопределенные свойства: "slow", "fast", "normal" (медленно, быстро, нормально) или указать скорость в миллисекундах (1000 миллисекунд = 1 секунда). функция_смягчения задает функцию, которая будет отвечать за плавность выполнения анимации. функция указывает имя функции, код которой будет выполнен после завершения анимации.

С помощью методов перечисленных ниже Вы можете создать на Ваших страницах анимацию.animate() - Выполняет заданную анимацию для выбранного элементаclearQueue() - очищает очередь функций выбранного элемента. delay() - Устанавливает задержку вызова следующей функции в очереди выбранного элементаdequeue() - Вызывает следующую функцию в очереди выбранного элементаstop() - Останавливает выполнение анимации для выбранного элементаqueue() - Позволяет добавлять функции в очередь выбранного элемента

С помощью JavaScript можно создавать асинхронные запросы и отправлять их на сервер. Использование асинхронных запросов позволяет значительно ускорить загрузку страниц, так как в этом случае обновляться будет только та часть страницы, которая содержит новые данные, а не страница целиком. Техника использования асинхронных запросов называется AJAX - Asynchronous JavaScript And XML (Асинхронный JavaScript и XML). Создание AJAX запросов на "чистом" JavaScript имеет несколько недостатков: Код даже самого простого AJAX запроса получается достаточно громоздким и сложным для понимания без специального ознакомления.Необходимо добавлять дополнительный код для поддержки старых версий браузеров. AJAX запрос созданный с помощью jQuery занимает всего одну строчку кода, и уже оптимизирован для использования и с новыми и старыми версиями браузеров. Синтаксис: $("селектор").load(url,данные,функция) селектор выбирает элемент, в котором будет отображен результат запроса. url адрес файла, который будет запрошен у сервера с помощью AJAX. данные которые будут переданы запрошенному файлу. Если Вы хотите запросить файл, при этом не передавать никаких данных, оставьте данный параметр пустым. функция имя функции, которая будет вызвана после выполнения запроса.

Сопровождающие функции позволяют выполнять различный код в зависимости от состояния выполнения AJAX запроса. Метод ajaxSend() выполняет переданный в него код во время отправления AJAX запроса. Метод ajaxComplete выполняет переданный в него код после завершения выполнения AJAX запроса (при этом неважно произошла ошибка или нет).Метод ajaxSuccess выполняет переданный в него код, если выполнение AJAX запроса завершается успешно. Метод ajaxError выполняет переданный в него код, если выполнение AJAX запроса завершается с ошибкой.Методы ajaxStart и ajaxStop используются для сопровождения группы AJAX запросов. Метод ajaxStart выполняет переданный в него код при отправлении первого запроса из группы. Метод ajaxStop выполняет переданный в него код при завершении последнего запроса из группы.

Высокоуровневые методы создания AJAX запросов (т.е. методы которые были разобраны ранее в данной главе) подходят для создания большей части запросов, но иногда их функциональности становится недостаточно. Низкоуровневые AJAX запросы предоставляют более широкую функциональность, но более сложны в использовании.Синтаксис высокоуровневого AJAX запроса:$("#par1").load("add.php","x=4&y=5")Пример синтаксиса аналогичного низкоуровневого AJAX запроса: $("#but1").click(function(){ $.ajax({url:"add.php", data:"x=4&y=5", success:function(result){ $("#par1").html(result)} }); }); 

AJAX запросы - это асинхронные запросы к серверу позволяющие обновлять только ту часть страницы, которая содержит новую информацию, без необходимости обновлять страницу целиком. Использование AJAX запросов ускоряет загрузку страниц и снимает нагрузку с сервера

Все существующие в jQuery методы для создания AJAX запросов перечислены ниже: $.ajax() - выполняет AJAX запрос ajaxComplete() - Определяет функцию, под которой будет выполнен когда AJAX запрос будет совершенajaxError() - Определяет функцию, код которой будет выполнен если во время выполнения AJAX запроса произойдет ошибка.ajaxCend() - Определяет функцию, код которой будет выполнен перед отправлением AJAX запроса на сервер.$.ajaxSetup() -Позволяет установить данные для будущих AJAX запросов.ajaxStart() - Определяет функцию, код которой будет выполнен перед тем, как первый AJAX запрос из группы запросов будет отправлен на сервер.ajaxStop() - Определяет функцию, код которой будет выполнен, когда последний AJAX запрос из группы запросов будет совершен.ajaxSuccess() - Определяет функцию, код которой будет выполнен если AJAX запрос будет совершен успешно.$.get - Позволяет загрузить данные с сервера, используя HTTP запрос GET$.getJSON() - Позволяет загрузить JSON - данные с сервера используя HTTP запрос GET$.getScript() - Позволяет загрузить с сервера JavaScript код и исполнить егоload() - Позволяет загрузить данные с сервера и вставить их в содержимое выбранного HTML элемента.$.param() - Позволяет создать сериализованное представление массива или объекта. $.post - Позволяет загрузить данные с сервера, используя HTTP запрос POSTserialize() - позволяет закодировать группу элементов форму, как строку для отправки с помощью AJAX запросаserializeArray() - Позволяет закодировать группу элементов формы как массив из их имен и значений

Аjax - использование технологии асинхронного обращения к серверу, без перезагрузки web-страницы полностью. JSON (JavaScript Object Notation) - текстовый формат обмена данными, основанный на Javascript , удобный для чтения и написания как человеком, так и компьютером. 

jQuery.load- загрузка HTML кода в необходимый нам DOM элемент на странице jQuery.ajax – основной метод асинхронных запросов.Параметры:async — асинхронность запроса, по умолчанию truecache — вкл/выкл кэширование данных браузером, по умолчанию truecontentType — по умолчанию «application/x-www-form-urlencoded»data — передаваемые данные — строка или объектdataFilter — фильтр для входных данныхdataType — тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)global — тригер — отвечает за использование глобальных AJAX Event'ов, по умолчанию trueifModified — тригер — проверяет были ли изменения в ответе сервера, что бы не слать еще запрос, по умолчанию falsejsonp — переустановить имя callback функции для работы с JSONP (по умолчанию генерируется на лету)scriptCharset — кодировка — актуально для JSONP и подгрузки JavaScript'овtimeout — время таймаут в миллисекундахtype — GET либо POSTurl — url запрашиваемой страницы

Загружает страницу, используя для передачи данных GET запрос. Может принимать следующие параметры: – url запрашиваемой страницы – передаваемые данные (необязательный параметр) – callback функция, которой будет скормлен результат (необязательный параметр) – тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default) 

- Данный метод аналогичен предыдущему, передачи данных на сервер посредством POST'а. Может принимать следующие параметры: -url запрашиваемой страницы – передаваемые данные (необязательный параметр) – callback функция, которой будет скормлен результат (необязательный параметр) – тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

Загружает данные в формате JSON. Может принимать следующие параметры: – url запрашиваемой страницы – передаваемые данные (необязательный параметр) callback функция, которой будет скормлен результат (необязательный параметр) 

jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Данная библиотека появилась в январе 2006 года. На сайте разработчиков jQuery – по адресу jquery.comТакже библиотека jQuery предоставляет удобный API по работе с Ajax. jQuery помогает легко получать доступ к любому элементу (набору элементов) объектной модели документа (DOM), обращаться к атрибутам и содержимому элементов DOM и конечно манипулировать ими. Причем благодаря своему интуитивно понятному синтаксису, схожему в чем-то с CSS1, CSS2, работа с этой библиотекой становиться очень простой. 

Подключение библиотеки jQuery происходит так же, как и подключение любой другой JavaScript библиотеки: <head> <script type="text/javascript" src="путь/к/JQuery.js"></script> </head>Пример: <script type="text/javascript" src="js/jquery.min.js"></script>

Вызывается работа библиотеки символом $. В редких случаях вызывается командой jQuery, это бывает в тех случаях, когда браузер не может обработать или понять символ $.Типичный пример манипуляции сразу несколькими узлами DOM заключается в вызове $ функции со строкой селектора CSS, что возвращает объект jQuery, содержащий некоторое количество элементов HTML-страницы. Эти элементы затем обрабатываются методами jQuery. 

fadeOut(время, [function(){};]) - постепенно скрыть выбранный элемент fadeIn(время, [function(){};]) - постепенно отобразить выбранный элемент fadeTo(время, прозрачность, [function(){};]) - постепенно скрыть/отобразить элемент до указанного значения прозрачности slideUp(время, [function(){};]) - изменяет высоту элемента до 0 slideDown(время, [function(){};]) - плавно возвратить элементу его изначальную высоту slideToggle(время, [function(){};]) - При первом вызове будет действовать как slideUp, а при втором как slideDown

DOM (Document Object Model — «объектная модель документа») — это не зависящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML, XHTML и XML-документов, а также изменять содержимое, структуру и оформление таких документов.

Функционал поиска элементов DOM: Найти по классу - .class ,где class – это любое произвольное имя класса в css.Найти по айди - #id ,где id– это любое произвольное имя идентификатора в css 

html("новое_содержимое") - Вы можете изменить или узнать внутреннее содержимое выбранного элемента append("произвольный_текст") - вставить произвольный текст после внутреннего содержимого выбранного элемента prepend("произвольный_текст") - вставить произвольный текст перед внутренним содержимым выбранного элемента attr("атрибут", "значение") - узнать или изменить содержимое указанного атрибута у выбранного элемента removeAttr("атрибут") - удалить указанный атрибут у выбранного элемента wrap("<нач_тэг><кон_тэг>") - позволяет "обернуть" выбранный элемент указанными тэгами .text () – добавление текста. .css() – добавление стиля .height() – установление высоты элемента .weight() - установление ширины элемента .addClass("имя_класса") - добавляет класс стилей css к элементу .css("параметр", "значение") - добавляет стиль css к элементу .hide() - скрыть элемент .show() - показать элемент 

ready() - событие "ready", функция будет выполнено тогда, когда DOM будет готов click(function(){};); - обработчик события нажатия кнопки мыши dblclick(function(){};); - обработчик двойного нажатия кнопки мыши mouseover(function(){};); - обработчик движения мыши над объектом mouseout(function(){};);- обработчик движения мыши над объектом focus(function(){};); - будет выполнен, когда элемент станет активным blur(function(){};); - будет выполнен, когда элемент перестанет быть активным change(function(){};); - будет выполнен, при изменении содержимого элемента

$(селектор).событие(function(event){ код_обработчика_события});

one() - позволяет создавать обработчики, которые могут быть вызваны лишь один раз $("#but1").one("click",function(){alert("Вы нажали на кнопку с id=but1")}); toggle() - позволяет переключаться между различными обработчиками событий по щелчку мыши