jQuery - Краткое руководство

Что такое jQuery?

jQuery - это быстрая и лаконичная библиотека JavaScript, созданная Джоном Ресигом в 2006 году под красивым девизом: Write less, do more. jQuery упрощает перемещение по HTML-документу, обработку событий, анимацию и взаимодействие Ajax для быстрой веб-разработки. jQuery - это набор инструментов JavaScript, предназначенный для упрощения различных задач за счет написания меньшего количества кода. Вот список важных основных функций, поддерживаемых jQuery:

DOM manipulation - jQuery упростил выбор элементов DOM, согласование их и изменение их содержимого с помощью кроссбраузерного механизма выбора с открытым исходным кодом, называемого Sizzle.
Event handling - jQuery предлагает элегантный способ захвата широкого спектра событий, таких как щелчок пользователя по ссылке, без необходимости загромождать сам HTML-код обработчиками событий.
AJAX Support - jQuery очень помогает вам разработать адаптивный и многофункциональный сайт с использованием технологии AJAX.
Animations - В jQuery есть множество встроенных эффектов анимации, которые вы можете использовать на своих сайтах.
Lightweight - jQuery - очень легкая библиотека - размером около 19 КБ (уменьшенная и сжатая с помощью gzip).
Cross Browser Support - jQuery имеет кроссбраузерную поддержку и хорошо работает в IE 6.0+, FF 2.0+, Safari 3.0+, Chrome и Opera 9.0+.
Latest Technology - jQuery поддерживает селекторы CSS3 и базовый синтаксис XPath.

Как использовать jQuery?

Есть два способа использовать jQuery.

Local Installation - Вы можете загрузить библиотеку jQuery на свой локальный компьютер и включить ее в свой HTML-код.
CDN Based Version - Вы можете включить библиотеку jQuery в свой HTML-код прямо из сети доставки контента (CDN).

Локальная установка

Перейти к https://jquery.com/download/ чтобы загрузить последнюю доступную версию.
Теперь ставим скачанный jquery-2.1.3.min.js файл в каталоге вашего веб-сайта, например / jquery.

пример

Теперь вы можете включить библиотеку jquery в свой HTML-файл следующим образом:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" src = "/jquery/jquery-2.1.3.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</html>

Это даст следующий результат -

Версия на основе CDN

Вы можете включить библиотеку jQuery в свой HTML-код прямо из сети доставки контента (CDN). Google и Microsoft обеспечивают доставку контента для последней версии.

В этом руководстве мы используем версию библиотеки Google CDN.

пример

Теперь давайте перепишем приведенный выше пример, используя библиотеку jQuery из Google CDN.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</html>

Это даст следующий результат -

Как вызвать функции библиотеки jQuery?

Поскольку почти все, что мы делаем при использовании jQuery для чтения или управления объектной моделью документа (DOM), нам нужно убедиться, что мы начинаем добавлять события и т. Д., Как только DOM будет готов.

Если вы хотите, чтобы событие работало на вашей странице, вы должны вызвать его внутри функции $ (document) .ready (). Все внутри него загрузится, как только будет загружена модель DOM и до того, как будет загружено содержимое страницы.

Для этого мы регистрируем готовое событие для документа следующим образом -

$(document).ready(function() {
   // do stuff when DOM is ready
});

Чтобы вызвать любую функцию библиотеки jQuery, используйте теги HTML-скрипта, как показано ниже -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { $("div").click(function() {alert("Hello, world!");});
         });
      </script>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

Это даст следующий результат -

Как использовать собственные скрипты?

Лучше написать наш собственный код в пользовательском файле JavaScript: custom.js, следующим образом -

/* Filename: custom.js */
$(document).ready(function() { $("div").click(function() {
      alert("Hello, world!");
   });
});

Теперь мы можем включить custom.js файл в нашем HTML-файле следующим образом -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" src = "/jquery/custom.js">
      </script>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

Это даст следующий результат -

Использование нескольких библиотек

Вы можете использовать несколько библиотек вместе, не противореча друг другу. Например, вы можете использовать вместе javascript-библиотеки jQuery и MooTool. Вы можете проверить метод jQuery noConflict для более подробной информации.

Что следующее ?

Не беспокойтесь, если вы не поняли приведенные выше примеры. Вы скоро поймете их в следующих главах.

В следующей главе мы попытаемся охватить несколько основных концепций, которые происходят из обычного JavaScript.

jQuery - это фреймворк, построенный с использованием возможностей JavaScript. Итак, вы можете использовать все функции и другие возможности, доступные в JavaScript. В этой главе объясняются самые основные концепции, но часто используемые в jQuery.

Строка

Строка в JavaScript - это неизменяемый объект, не содержащий ни одного, одного или нескольких символов. Ниже приведены действительные примеры строки JavaScript:

"This is JavaScript String"
'This is JavaScript String'
'This is "really" a JavaScript String'
"This is 'really' a JavaScript String"

Числа

Числа в JavaScript представляют собой значения IEEE 754 в 64-битном формате двойной точности. Они неизменны, как и строки. Ниже приведены действительные примеры номеров JavaScript.

5350
120.27
0.26

Булево

Логическое значение в JavaScript может быть либо true или же false. Если число равно нулю, по умолчанию используется значение false. Если пустая строка по умолчанию равна false.

Ниже приведены действительные примеры логического значения JavaScript:

true      // true
false     // false
0         // false
1         // true
""        // false
"hello"   // true

Объекты

JavaScript очень хорошо поддерживает объектную концепцию. Вы можете создать объект, используя литерал объекта следующим образом:

var emp = {
   name: "Zara",
   age: 10
};

Вы можете писать и читать свойства объекта, используя точечную нотацию следующим образом:

// Getting object properties
emp.name  // ==> Zara
emp.age   // ==> 10

// Setting object properties
emp.name = "Daisy"  // <== Daisy
emp.age  =  20      // <== 20

Массивы

Вы можете определять массивы с помощью литерала массива следующим образом:

var x = [];
var y = [1, 2, 3, 4, 5];

Массив имеет length свойство, полезное для итерации -

var x = [1, 2, 3, 4, 5];

for (var i = 0; i < x.length; i++) {
   // Do something with x[i]
}

Функции

Функция в JavaScript может быть именованной или анонимной. Именованная функция может быть определена с использованием ключевого слова function следующим образом:

function named(){
   // do some stuff here
}

Анонимную функцию можно определить так же, как и обычную функцию, но у нее не будет имени.

Анонимная функция может быть назначена переменной или передана методу, как показано ниже.

var handler = function (){
   // do some stuff here
}

JQuery очень часто использует анонимные функции следующим образом:

$(document).ready(function(){
   // do some stuff here
});

Аргументы

Аргументы переменных JavaScript - это своего рода массив, который имеет свойство length . Следующий пример очень хорошо это объясняет -

function func(x){
   console.log(typeof x, arguments.length);
}

func();                //==> "undefined", 0
func(1);               //==> "number", 1
func("1", "2", "3");   //==> "string", 3

У объекта arguments также есть свойство callee , которое относится к функции, внутри которой вы находитесь. Например -

function func() {
   return arguments.callee; 
}

func();                // ==> func

Контекст

Известное ключевое слово JavaScript thisвсегда относится к текущему контексту. Внутри функцииthis контекст может меняться, в зависимости от того, как функция вызывается -

$(document).ready(function() {
   // this refers to window.document
});

$("div").click(function() {
   // this refers to a div DOM element
});

Вы можете указать контекст для вызова функции, используя встроенные в функцию методы call() и apply() методы.

Разница между ними в том, как они передают аргументы. Call передает все аргументы в качестве аргументов функции, а apply принимает массив в качестве аргументов.

function scope() {
   console.log(this, arguments.length);
}

scope() // window, 0
scope.call("foobar", [1,2]);  //==> "foobar", 1
scope.apply("foobar", [1,2]); //==> "foobar", 2

Объем

Область видимости переменной - это область вашей программы, в которой она определена. Переменная JavaScript будет иметь только две области.

Global Variables - Глобальная переменная имеет глобальную область видимости, что означает, что она определяется везде в вашем коде JavaScript.
Local Variables- Локальная переменная будет видна только внутри функции, в которой она определена. Параметры функции всегда являются локальными для этой функции.

В теле функции локальная переменная имеет приоритет над глобальной переменной с тем же именем -

var myVar = "global";     // ==> Declare a global variable

function ( ) {
   var myVar = "local";   // ==> Declare a local variable
   document.write(myVar); // ==> local
}

Перезвони

Обратный вызов - это простая функция JavaScript, переданная некоторому методу в качестве аргумента или опции. Некоторые обратные вызовы - это просто события, вызываемые, чтобы дать пользователю возможность отреагировать на срабатывание определенного состояния.

Система событий jQuery использует такие обратные вызовы везде, например -

$("body").click(function(event) {
   console.log("clicked: " + event.target);
});

Большинство обратных вызовов предоставляют аргументы и контекст. В примере с обработчиком событий обратный вызов вызывается с одним аргументом - Event.

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

$("#myform").submit(function() {
   return false;
});

Закрытие

Замыкания создаются всякий раз, когда к переменной, которая определена вне текущей области видимости, осуществляется доступ из некоторой внутренней области.

В следующем примере показано, как переменная counter виден внутри функций создания, увеличения и печати, но не вне их -

function create() {
   var counter = 0;
	
   return {
      increment: function() {
         counter++;
      },
	   print: function() {
         console.log(counter);
      }
   }
}

var c = create();
c.increment();
c.print();     // ==> 1

Этот шаблон позволяет создавать объекты с методами, которые работают с данными, невидимыми для внешнего мира. Необходимо отметить, чтоdata hiding это сама основа объектно-ориентированного программирования.

Шаблон прокси

Прокси - это объект, который можно использовать для управления доступом к другому объекту. Он реализует тот же интерфейс, что и этот другой объект, и передает ему любые вызовы методов. Этот другой объект часто называют настоящим субъектом.

Вместо этого реального объекта можно создать прокси-сервер, что позволит получить к нему удаленный доступ. Мы можем сохранить метод jQuery setArray в закрытии и перезаписать его следующим образом:

(function() {
   // log all calls to setArray
   var proxied = jQuery.fn.setArray;

   jQuery.fn.setArray = function() {
      console.log(this, arguments);
      return proxied.apply(this, arguments);
   };
	
})();

Вышеупомянутый код включает функцию, скрывающую проксируемую переменную. Затем прокси-сервер регистрирует все вызовы метода и делегирует вызов исходному методу. Использование apply (this, arguments) гарантирует, что вызывающий не сможет заметить разницу между исходным и прокси-методом.

Встроенные функции

JavaScript поставляется с полезным набором встроенных функций. Эти методы можно использовать для управления строками, числами и датами.

Ниже приведены важные функции JavaScript -

Sr.No.	Метод и описание
1	charAt() Возвращает символ по указанному индексу.
2	concat() Объединяет текст двух строк и возвращает новую строку.
3	forEach() Вызывает функцию для каждого элемента в массиве.
4	indexOf() Возвращает индекс первого вхождения указанного значения в вызывающем объекте String или -1, если не найдено.
5	length() Возвращает длину строки.
6	pop() Удаляет последний элемент из массива и возвращает этот элемент.
7	push() Добавляет один или несколько элементов в конец массива и возвращает новую длину массива.
8	reverse() Меняет порядок элементов массива на обратный: первый становится последним, а последний - первым.
9	sort() Сортирует элементы массива.
10	substr() Возвращает символы в строке, начиная с указанного места и заканчивая указанным количеством символов.
11	toLowerCase() Возвращает значение вызывающей строки, преобразованное в нижний регистр.
12	toString() Возвращает строковое представление значения числа.
13	toUpperCase() Возвращает значение вызывающей строки, преобразованное в верхний регистр.

Объектная модель документа

Объектная модель документа представляет собой древовидную структуру различных элементов HTML следующим образом:

<html>
   <head>
      <title>The jQuery Example</title>
   </head>
	
   <body>
      <div>
         <p>This is a paragraph.</p>
         <p>This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
</html>

Это даст следующий результат -

Ниже приведены важные моменты о приведенной выше древовидной структуре.

<html> является предком всех остальных элементов; другими словами, все остальные элементы являются потомками <html>.
Элементы <head> и <body> являются не только потомками, но и дочерними элементами <html>.
Аналогичным образом, <html> не только является предком для <head> и <body>, но и является их родительским элементом.
Элементы <p> являются потомками (и потомками) <div>, потомками <body> и <html>, а также братьями и сестрами друг друга элементов <p>.

Изучая концепции jQuery, будет полезно иметь представление о DOM. Если вы не знакомы с DOM, я бы посоветовал пройти наше простое руководство по DOM Tutorial .

Библиотека jQuery использует возможности селекторов каскадных таблиц стилей (CSS), позволяя нам быстро и легко получать доступ к элементам или группам элементов в объектной модели документа (DOM).

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

Заводская функция $ ()

Селекторы jQuery начинаются со знака доллара и скобок - $(). Заводская функция$() использует следующие три строительных блока при выборе элементов в данном документе -

Sr.No.	Селектор и описание
1	Tag Name Представляет имя тега, доступное в DOM. Например$('p') выделяет все абзацы <p> в документе.
2	Tag ID Представляет тег, доступный с данным идентификатором в DOM. Например$('#some-id') выбирает единственный элемент в документе с идентификатором some-id.
3	Tag Class Представляет тег, доступный для данного класса в модели DOM. Например$('.some-class') выбирает все элементы в документе, которые имеют класс некоторого класса.

Все вышеперечисленные элементы можно использовать отдельно или в сочетании с другими селекторами. Все селекторы jQuery основаны на том же принципе, за исключением некоторых настроек.

NOTE - Заводская функция $() является синонимом jQuery()функция. Итак, если вы используете любую другую библиотеку JavaScript, где$ знак конфликтует с чем-то еще, тогда вы можете заменить $ подписать jQuery имя, и вы можете использовать функцию jQuery() вместо $().

пример

Ниже приводится простой пример, в котором используется селектор тегов. Это выберет все элементы с именем тегаp.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("p").css("background-color", "yellow");
         });
      </script>
   </head>
	
   <body>
      <div>
         <p class = "myclass">This is a paragraph.</p>
         <p id = "myid">This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
</html>

Это даст следующий результат -

Как использовать селекторы?

Селекторы очень полезны и требуются на каждом этапе использования jQuery. Они получают именно тот элемент, который вы хотите, из вашего HTML-документа.

В следующей таблице перечислены несколько основных селекторов и приведены их примеры.

Sr.No.	Селектор и описание
1	имя Выбирает все элементы, которые соответствуют заданному элементу Name.
2	#Я БЫ Выбирает один элемент, соответствующий заданному ID.
3	.Класс Выбирает все элементы, которые соответствуют заданному Class.
4	Универсальный (*) Выбирает все элементы, доступные в DOM.
5	Несколько элементов E, F, G Выбирает объединенные результаты всех указанных селекторов E, F или же G.

Примеры селекторов

Подобно приведенному выше синтаксису и примерам, следующие примеры дадут вам представление об использовании другого типа других полезных селекторов:

Здесь у вас есть другие полезные селекторы другого типа -

Sr.No.	Селектор и описание
1	*$('')** Этот селектор выбирает все элементы в документе.
2	*$("p > ")** Этот селектор выбирает все элементы, которые являются дочерними элементами элемента абзаца.
3	$("#specialID") Эта функция-селектор получает элемент с id = "specialID".
4	$(".specialClass") Этот селектор получает все элементы, имеющие класс specialClass .
5	$("li:not(.myclass)") Выбирает все элементы, соответствующие <li>, у которых нет class = "myclass".
6	$("a#specialID.specialClass") Этот селектор сопоставляет ссылки с идентификатором specialID и классом specialClass .
7	$("p a.specialClass") Этот селектор сопоставляет ссылки с классом specialClass, объявленным в элементах <p>.
8	$("ul li:first") Этот селектор получает только первый элемент <li> из <ul>.
9	$("#container p") Выбирает все элементы, соответствующие <p>, которые являются потомками элемента, имеющего идентификатор контейнера .
10	$("li > ul") Выбирает все элементы, соответствующие <ul>, которые являются дочерними элементами элемента, соответствующего <li>
11	$("strong + em") Выбирает все элементы, совпадающие с <em>, которые сразу же следуют за одноуровневым элементом, совпадающим с <strong>.
12	$("p ~ ul") Выбирает все элементы, соответствующие <ul>, которые следуют за одноуровневым элементом, совпадающим с <p>.
13	$("code, em, strong") Выбирает все элементы, соответствующие <code>, <em> или <strong>.
14	$("p strong, .myclass") Выбирает все элементы, соответствующие <strong>, которые являются потомками элемента, соответствующего <p>, а также все элементы, которые имеют класс myclass .
15	$(":empty") Выбирает все элементы, у которых нет дочерних элементов.
16	$("p:empty") Выбирает все элементы, соответствующие <p>, у которых нет дочерних элементов.
17	$("div[p]") Выбирает все элементы, соответствующие <div>, которые содержат элемент, соответствующий <p>.
18	$("p[.myclass]") Выбирает все элементы, соответствующие <p>, которые содержат элемент с классом myclass .
19	$("a[@rel]") Выбирает все элементы, соответствующие <a>, которые имеют атрибут rel.
20	$("input[@name = myname]") Выбирает все элементы, соответствующие <input>, у которых значение имени в точности равно myname.
21 год	$("input[@name^=myname]") Выбирает все элементы, соответствующие <input>, у которых значение имени начинается с myname .
22	$("a[@rel$=self]") Выбирает все элементы, соответствующие <a>, у которых есть relзначение атрибута, оканчивающееся на self .
23	*$("a[@href=domain.com]")** Выбирает все элементы, совпадающие с <a>, которые имеют значение href, содержащее domain.com.
24	$("li:even") Выбирает все элементы, соответствующие <li>, которые имеют четное значение индекса.
25	$("tr:odd") Выбирает все элементы, соответствующие <tr>, которые имеют нечетное значение индекса.
26	$("li:first") Выбирает первый элемент <li>.
27	$("li:last") Выбирает последний элемент <li>.
28	$("li:visible") Выбирает все видимые элементы, соответствующие <li>.
29	$("li:hidden") Выбирает все скрытые элементы, соответствующие тегу <li>.
30	$(":radio") Выбирает все переключатели в форме.
31 год	$(":checked") Выбирает все флажки в форме.
32	$(":input") Выбирает только элементы формы (ввод, выбор, текстовое поле, кнопка).
33	$(":text") Выбирает только текстовые элементы (input [type = text]).
34	$("li:eq(2)") Выбирает третий элемент <li>.
35 год	$("li:eq(4)") Выбирает пятый элемент <li>.
36	$("li:lt(2)") Выбирает все элементы, совпадающие с элементом <li> перед третьим; другими словами, первые два элемента <li>.
37	$("p:lt(3)") выбирает все элементы, которым соответствуют элементы <p> перед четвертым; другими словами, первые три элемента <p>.
38	$("li:gt(1)") Выбирает все элементы, соответствующие <li> после второго.
39	$("p:gt(2)") Выбирает все элементы, соответствующие тегу <p> после третьего.
40	$("div/p") Выбирает все элементы, соответствующие <p>, которые являются дочерними элементами элемента, соответствующего <div>.
41 год	$("div//code") Выбирает все элементы, соответствующие <code>, которые являются потомками элемента, соответствующего <div>.
42	$("//p//a") Выбирает все элементы, соответствующие <a>, которые являются потомками элемента, соответствующего <p>
43 год	$("li:first-child") Выбирает все элементы, соответствующие <li>, которые являются первым потомком своего родителя.
44	$("li:last-child") Выбирает все элементы, соответствующие <li>, которые являются последними дочерними элементами своего родителя.
45	$(":parent") Выбирает все элементы, которые являются родительскими для другого элемента, включая текст.
46	$("li:contains(second)") Выбирает все элементы, соответствующие <li>, которые содержат второй текст.

Вы можете использовать все перечисленные выше селекторы с любым элементом HTML / XML обычным образом. Например, если селектор$("li:first") работает для элемента <li>, тогда $("p:first") также будет работать для элемента <p>.

Некоторые из самых основных компонентов, которыми мы можем манипулировать, когда дело доходит до элементов DOM, - это свойства и атрибуты, назначенные этим элементам.

Большинство этих атрибутов доступны через JavaScript как свойства узла DOM. Некоторые из наиболее распространенных свойств:

className
tagName
id
href
title
rel
src

Рассмотрим следующую разметку HTML для элемента изображения -

<img id = "imageid" src = "image.gif" alt = "Image" class = "myclass" 
   title = "This is an image"/>

В разметке этого элемента имя тега - img, а разметка для id, src, alt, class и title представляет атрибуты элемента, каждый из которых состоит из имени и значения.

jQuery дает нам возможность легко манипулировать атрибутами элемента и дает нам доступ к элементу, чтобы мы также могли изменять его свойства.

Получить значение атрибута

В attr() Метод может использоваться либо для получения значения атрибута из первого элемента в согласованном наборе, либо для установки значений атрибутов для всех согласованных элементов.

пример

Ниже приведен простой пример, который извлекает атрибут title тега <em> и устанавливает значение <div id = "divid"> с тем же значением:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { var title = $("em").attr("title");
            $("#divid").text(title);
         });
      </script>
   </head>
	
   <body>
      <div>
         <em title = "Bold and Brave">This is first paragraph.</em>
         <p id = "myid">This is second paragraph.</p>
         <div id = "divid"></div>
      </div>
   </body>
</html>

Это даст следующий результат -

Установить значение атрибута

В attr(name, value) может использоваться для установки именованного атрибута для всех элементов в обернутом наборе с использованием переданного значения.

пример

Ниже приводится простой пример, который устанавливает src атрибут тега изображения в правильное место -

<html>
   <head>
      <title>The jQuery Example</title>
      <base href="https://www.tutorialspoint.com" />
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#myimg").attr("src", "/jquery/images/jquery.jpg");
         });
      </script>
   </head>
	
   <body>
      <div>
         <img id = "myimg" src = "/images/jquery.jpg" alt = "Sample image" />
      </div>
   </body>
</html>

Это даст следующий результат -

Применение стилей

В addClass( classes )может использоваться для применения определенных таблиц стилей ко всем совпадающим элементам. Вы можете указать несколько классов, разделенных пробелом.

пример

Ниже приводится простой пример, который устанавливает class атрибут тега para <p> -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("em").addClass("selected"); $("#myid").addClass("highlight");
         });
      </script>
		
      <style>
         .selected { color:red; }
         .highlight { background:yellow; }
      </style>	
   </head>
	
   <body>
      <em title = "Bold and Brave">This is first paragraph.</em>
      <p id = "myid">This is second paragraph.</p>
   </body>
</html>

Это даст следующий результат -

Методы атрибутов

В следующей таблице перечислены несколько полезных методов, которые вы можете использовать для управления атрибутами и свойствами.

Sr.No.	Методы и описание
1	attr (свойства) Установите объект типа "ключ-значение" как свойства для всех совпадающих элементов.
2	attr (ключ, fn) Установите для одного свойства вычисленное значение для всех совпадающих элементов.
3	removeAttr (имя) Удалите атрибут из каждого совпадающего элемента.
4	hasClass (класс) Возвращает true, если указанный класс присутствует хотя бы в одном из набора совпадающих элементов.
5	removeClass (класс) Удаляет все или указанные классы из набора совпадающих элементов.
6	toggleClass (класс) Добавляет указанный класс, если он отсутствует, удаляет указанный класс, если он присутствует.
7	html () Получите HTML-содержимое (innerHTML) первого совпадающего элемента.
8	html (val) Установите HTML-содержимое каждого совпадающего элемента.
9	текст () Получите объединенное текстовое содержимое всех совпадающих элементов.
10	текст (val) Установите текстовое содержимое всех совпадающих элементов.
11	val () Получите входное значение первого совпадающего элемента.
12	val (val) Установите атрибут значения каждого совпадающего элемента, если он вызывается в <input>, но если он вызывается в <select> с переданным значением <option>, тогда будет выбран переданный параметр, если он вызывается в поле флажка или переключателя, тогда будут отмечены все соответствующие флажки и радиобоксы.

Примеры

Подобно синтаксису и примерам, приведенным выше, следующие примеры дадут вам представление об использовании различных методов атрибутов в разных ситуациях:

Вот полный список методов атрибута в разных ситуациях -

Sr.No.	Селектор и описание
1	$("#myID").attr("custom") Это вернет значение атрибута custom для первого элемента, соответствующего идентификатору myID.
2	$("img").attr("alt", "Sample Image") Это устанавливает alt атрибут всех изображений на новое значение «Образец изображения».
3	$("input").attr({ value: "", title: "Please enter a value" }); Устанавливает значение всех элементов <input> в пустую строку, а также устанавливает Пример jQuery в строку. Введите значение .
4	$("a[href^=https://]").attr("target","_blank") Выбирает все ссылки с атрибутом href, начинающимся с https: //, и устанавливает для его целевого атрибута значение _blank .
5	$("a").removeAttr("target") Это удалит целевой атрибут всех ссылок.
6	$("form").submit(function() {$(":submit",this).attr("disabled", "disabled");}); Это изменит атрибут disabled на значение «disabled» при нажатии кнопки «Отправить».
7	$("p:last").hasClass("selected") Это возвращает истину, если последний тег <p> ассоциировал выбранный класс .
8	$("p").text() Возвращает строку, содержащую объединенное текстовое содержимое всех совпавших элементов <p>.
9	$("p").text("<i>Hello World</i>") Это установит "<I> Hello World </I>" как текстовое содержимое соответствующих элементов <p>.
10	$("p").html() Это возвращает HTML-содержимое всех совпадающих абзацев.
11	$("div").html("Hello World") Это установит для HTML-содержимого всех подходящих <div> значение Hello World .
12	$("input:checkbox:checked").val() Получить первое значение из установленного флажка.
13	$("input:radio[name=bar]:checked").val() Получите первое значение из набора переключателей.
14	$("button").val("Hello") Устанавливает атрибут значения каждого совпадающего элемента <button>.
15	$("input").val("on") Это проверит все переключатели или кнопки флажка, значение которых «включено».
16	$("select").val("Orange") Это позволит выбрать опцию «Оранжевый» в раскрывающемся списке с опциями «Оранжевый», «Манго» и «Банан».
17	$("select").val("Orange", "Mango") Это позволит выбрать параметры «Апельсин» и «Манго» в раскрывающемся списке с вариантами «Апельсин», «Манго» и «Банан».

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

Найти элементы по индексу

Рассмотрим простой документ со следующим содержимым HTML -

<html>
   <head>
      <title>The JQuery Example</title>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

Это даст следующий результат -

Над каждым списком есть свой индекс, и его можно найти напрямую, используя eq(index) как показано ниже в примере.
Каждый дочерний элемент начинает свой индекс с нуля, поэтому к элементу списка 2 можно будет получить доступ, используя$("li").eq(1) и так далее.

пример

Ниже приводится простой пример, который добавляет цвет ко второму элементу списка.

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

Это даст следующий результат -

Фильтрация элементов

В filter( selector )может использоваться для фильтрации всех элементов из набора совпадающих элементов, которые не соответствуют указанному селектору (-ам). Селектор может быть записан с использованием любого синтаксиса селектора.

пример

Ниже приводится простой пример, который применяет цвет к спискам, связанным со средним классом.

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").filter(".middle").addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <div>
         <ul>
            <li class = "top">list item 1</li>
            <li class = "top">list item 2</li>
            <li class = "middle">list item 3</li>
            <li class = "middle">list item 4</li>
            <li class = "bottom">list item 5</li>
            <li class = "bottom">list item 6</li>
         </ul>
      </div>
   </body>
</html>

Это даст следующий результат -

Поиск дочерних элементов

В find( selector )может использоваться для поиска всех дочерних элементов определенного типа элементов. Селектор может быть записан с использованием любого синтаксиса селектора.

пример

Ниже приведен пример, который выбирает все элементы <span>, доступные внутри разных элементов <p>.

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("p").find("span").addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <p>This is 1st paragraph and <span>THIS IS RED</span></p>
      <p>This is 2nd paragraph and <span>THIS IS ALSO RED</span></p>
   </body>
</html>

Это даст следующий результат -

Методы фильтрации JQuery DOM

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

Sr.No.	Метод и описание
1	eq (индекс) Сократите набор совпадающих элементов до одного элемента.
2	фильтр (селектор) Удаляет все элементы из набора совпавших элементов, которые не соответствуют указанному селектору (-ам).
3	фильтр (fn) Удаляет все элементы из набора совпавших элементов, которые не соответствуют указанной функции.
4	есть (селектор) Проверяет текущий выбор по выражению и возвращает истину, если хотя бы один элемент выбора соответствует заданному селектору.
5	карта (обратный вызов) Преобразуйте набор элементов в объекте jQuery в другой набор значений в массиве jQuery (который может содержать или не содержать элементы).
6	нет (селектор) Удаляет элементы, соответствующие указанному селектору, из набора совпадающих элементов.
7	срез (начало, [конец]) Выбирает подмножество совпадающих элементов.

Методы обхода JQuery DOM

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

Sr.No.	Методы и описание
1	добавить (селектор) Добавляет дополнительные элементы, соответствующие заданному селектору, в набор совпадающих элементов.
2	andSelf () Добавить предыдущий выбор к текущему выбору.
3	дети ([селектор]) Получите набор элементов, содержащий всех уникальных непосредственных дочерних элементов каждого согласованного набора элементов.
4	ближайший (селектор) Получить набор элементов, содержащий ближайший родительский элемент, соответствующий указанному селектору, включая начальный элемент.
5	содержимое () Найдите все дочерние узлы внутри совпадающих элементов (включая текстовые узлы) или в документе содержимого, если элемент является iframe.
6	конец( ) Вернуть самую последнюю «деструктивную» операцию, вернув набор совпавших элементов в предыдущее состояние.
7	найти (селектор) Ищет дочерние элементы, соответствующие указанным селекторам.
8	следующий ([селектор]) Получите набор элементов, содержащий уникальных ближайших братьев и сестер каждого из заданного набора элементов.
9	nextAll ([селектор]) Найдите все родственные элементы после текущего элемента.
10	offsetParent () Возвращает коллекцию jQuery с позиционированным родителем первого совпадающего элемента.
11	родительский ([селектор]) Получите прямого родителя элемента. Если вызывается для набора элементов, parent возвращает набор своих уникальных прямых родительских элементов.
12	родители ([селектор]) Получите набор элементов, содержащий уникальных предков согласованного набора элементов (кроме корневого элемента).
13	prev ([селектор]) Получите набор элементов, содержащий уникальных предыдущих братьев и сестер каждого из согласованного набора элементов.
14	prevAll ([селектор]) Найдите все элементы-братья перед текущим элементом.
15	братья и сестры ([селектор]) Получите набор элементов, содержащий всех уникальных братьев и сестер каждого из согласованного набора элементов.

Библиотека jQuery поддерживает почти все селекторы, включенные в спецификации Cascading Style Sheet (CSS) с 1 по 3, как указано на сайте Консорциума World Wide Web.

Используя библиотеку JQuery, разработчики могут улучшать свои веб-сайты, не беспокоясь о браузерах и их версиях, если в браузерах включен JavaScript.

Большинство методов JQuery CSS не изменяют содержимое объекта jQuery и используются для применения свойств CSS к элементам DOM.

Применить свойства CSS

Очень просто применить любое свойство CSS с помощью метода JQuery. css( PropertyName, PropertyValue ).

Вот синтаксис метода -

selector.css( PropertyName, PropertyValue );

Здесь вы можете передать PropertyName как строку javascript, и в зависимости от ее значения PropertyValue может быть строкой или целым числом.

пример

Ниже приведен пример добавления цвета шрифта ко второму элементу списка.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).css("color", "red");
         });
      </script>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

Это даст следующий результат -

Применить несколько свойств CSS

Вы можете применить несколько свойств CSS, используя один метод JQuery CSS( {key1:val1, key2:val2....). Вы можете применить столько свойств, сколько захотите, за один вызов.

Вот синтаксис метода -

selector.css( {key1:val1, key2:val2....keyN:valN})

Здесь вы можете передать ключ как свойство и val как его значение, как описано выше.

пример

Ниже приведен пример, который добавляет цвет шрифта, а также цвет фона ко второму элементу списка.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).css({"color":"red", "background-color":"green"});
         });
      </script>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

Это даст следующий результат -

Установка ширины и высоты элемента

В width( val ) и height( val ) может использоваться для установки ширины и высоты любого элемента соответственно.

пример

Ниже приведен простой пример, который устанавливает ширину первого элемента деления, тогда как остальные элементы имеют ширину, установленную таблицей стилей.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div:first").width(100); $("div:first").css("background-color", "blue");
         });
      </script>
		
      <style>
         div { 
            width:70px; height:50px; float:left; 
            margin:5px; background:red; cursor:pointer; 
         }
      </style>
   </head>
	
   <body>
      <div></div>
      <div>d</div>
      <div>d</div>
      <div>d</div>
      <div>d</div>
   </body>
</html>

Это даст следующий результат -

CSS-методы JQuery

В следующей таблице перечислены все методы, которые вы можете использовать для игры со свойствами CSS.

Sr.No.	Метод и описание
1	css (имя) Вернуть свойство стиля для первого совпадающего элемента.
2	css (имя, значение) Установите для свойства единого стиля значение для всех совпадающих элементов.
3	css (свойства) Установите объект типа "ключ-значение" как свойства стиля для всех совпадающих элементов.
4	высота (val) Установите высоту CSS для каждого совпадающего элемента.
5	высота( ) Получить текущую вычисленную высоту в пикселях первого совпадающего элемента.
6	innerHeight () Получает внутреннюю высоту (исключая границу и включает заполнение) для первого совпадающего элемента.
7	innerWidth () Получает внутреннюю ширину (исключая границу и включает заполнение) для первого совпадающего элемента.
8	смещение () Получите текущее смещение первого согласованного элемента в пикселях относительно документа.
9	offsetParent () Возвращает коллекцию jQuery с позиционированным родителем первого совпадающего элемента.
10	externalHeight ([маржа]) Получает внешнюю высоту (по умолчанию включает границу и отступы) для первого совпадающего элемента.
11	externalWidth ([маржа]) Получите внешнюю ширину (по умолчанию включая границу и отступы) для первого совпадающего элемента.
12	должность( ) Получает верхнюю и левую позицию элемента относительно его родительского смещения.
13	scrollLeft (val) Когда значение передается, смещение прокрутки влево устанавливается на это значение для всех совпадающих элементов.
14	scrollLeft () Получает смещение прокрутки влево первого совпадающего элемента.
15	scrollTop (val) Когда значение передается, смещение верха прокрутки устанавливается на это значение для всех совпадающих элементов.
16	scrollTop () Возвращает верхнее смещение прокрутки первого совпадающего элемента.
17	ширина (val) Установите ширину CSS для каждого совпадающего элемента.
18	ширина () Получить текущую вычисленную ширину в пикселях первого согласованного элемента.

JQuery предоставляет методы для эффективного управления DOM. Вам не нужно писать большой код для изменения значения любого атрибута элемента или для извлечения HTML-кода из абзаца или раздела.

JQuery предоставляет такие методы, как .attr (), .html () и .val (), которые действуют как геттеры, извлекая информацию из элементов DOM для дальнейшего использования.

Управление контентом

В html( ) получает HTML-содержимое (innerHTML) первого совпадающего элемента.

Вот синтаксис метода -

selector.html( )

пример

Ниже приводится пример, в котором используются методы .html () и .text (val). Здесь .html () извлекает содержимое HTML из объекта, а затем метод .text (val) устанавливает значение объекта, используя переданный параметр -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { $("div").click(function () {
               var content = $(this).html(); $("#result").text( content );
            });
         });
      </script>
		
      <style>
         #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on the square below:</p>
      <span id = "result"> </span>
		
      <div id = "division" style = "background-color:blue;">
         This is Blue Square!!
      </div>
   </body>
</html>

Это даст следующий результат -

Замена элемента DOM

Вы можете заменить весь элемент DOM указанными элементами HTML или DOM. ВreplaceWith( content ) метод очень хорошо служит этой цели.

Вот синтаксис метода -

selector.replaceWith( content )

Здесь контент - это то, что вы хотите иметь вместо исходного элемента. Это может быть HTML или простой текст.

пример

Ниже приведен пример, в котором элемент деления заменяется на «<h1> JQuery is Great </h1>» -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { $("div").click(function () {
               $(this).replaceWith("<h1>JQuery is Great</h1>");
            });
         });
      </script>
		
      <style>
         #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on the square below:</p>
      <span id = "result"> </span>
		
      <div id = "division" style = "background-color:blue;">
         This is Blue Square!!
      </div>
   </body>
</html>

Это даст следующий результат -

Удаление элементов DOM

Может возникнуть ситуация, когда вы захотите удалить один или несколько элементов DOM из документа. JQuery предоставляет два метода для решения этой ситуации.

В empty( ) метод удалить все дочерние узлы из набора совпавших элементов, где в качестве метода remove( expr ) удаляет все совпадающие элементы из DOM.

Вот синтаксис метода -

selector.remove( [ expr ])

or 

selector.empty( )

Вы можете передать необязательный параметр expr, чтобы отфильтровать набор удаляемых элементов.

пример

Ниже приведен пример, в котором элементы удаляются, как только на них щелкают.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function () { $(this).remove( );
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below:</p>
      <span id = "result"> </span>
		
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
   </body>
</html>

Это даст следующий результат -

Вставка элементов DOM

Может возникнуть ситуация, когда вы захотите вставить новый один или несколько элементов DOM в существующий документ. JQuery предоставляет различные методы для вставки элементов в разные места.

В after( content ) метод вставляет содержимое после каждого из совпадающих элементов, где в качестве метода before( content ) метод вставляет содержимое перед каждым из совпадающих элементов.

Вот синтаксис метода -

selector.after( content )

or

selector.before( content )

Здесь контент - это то, что вы хотите вставить. Это может быть HTML или простой текст.

пример

Ниже приведен пример, в котором элементы <div> вставляются непосредственно перед выбранным элементом.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { $("div").click(function () {
               $(this).before('<div class="div"></div>' );
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below:</p>
      <span id = "result"> </span>
		
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
   </body>
</html>

Это даст следующий результат -

Методы манипулирования DOM

В следующей таблице перечислены все методы, которые вы можете использовать для управления элементами DOM.

Sr.No.	Метод и описание
1	после (содержание) Вставляйте контент после каждого из совпадающих элементов.
2	добавить (содержание) Добавлять содержимое внутрь каждого совпадающего элемента.
3	appendTo (селектор) Добавить все совпадающие элементы к другому указанному набору элементов.
4	до (содержание) Вставьте содержимое перед каждым из совпадающих элементов.
5	клон (булево) Клонируйте соответствующие элементы DOM и все их обработчики событий и выберите клоны.
6	клон () Клонируйте соответствующие элементы DOM и выберите клоны.
7	пустой () Удалите все дочерние узлы из набора согласованных элементов.
8	html (val) Установите HTML-содержимое каждого совпадающего элемента.
9	html () Получите HTML-содержимое (innerHTML) первого совпадающего элемента.
10	insertAfter (селектор) Вставьте все совпадающие элементы после другого указанного набора элементов.
11	insertBefore (селектор) Вставьте все совпадающие элементы перед другим заданным набором элементов.
12	prepend (содержание) Добавьте содержимое внутри каждого совпадающего элемента.
13	prependTo (селектор) Присоедините все совпадающие элементы к другому указанному набору элементов.
14	удалить (выражение) Удаляет все согласованные элементы из модели DOM.
15	replaceAll (селектор) Заменяет элементы, совпадающие с указанным селектором, на совпадающие элементы.
16	replaceWith (контент) Заменяет все совпадающие элементы указанными элементами HTML или DOM.
17	текст (val) Установите текстовое содержимое всех совпадающих элементов.
18	текст () Получите объединенное текстовое содержимое всех совпадающих элементов.
19	обернуть (элем) Оберните каждый согласованный элемент указанным элементом.
20	обернуть (HTML) Оберните каждый совпавший элемент указанным содержимым HTML.
21 год	wrapAll (элемент) Оберните все элементы согласованного набора в один элемент-оболочку.
22	wrapAll (HTML) Оберните все элементы согласованного набора в один элемент-оболочку.
23	wrapInner (элем) Оберните внутреннее дочернее содержимое каждого согласованного элемента (включая текстовые узлы) элементом DOM.
24	wrapInner (HTML) Оберните внутреннее дочернее содержимое каждого согласованного элемента (включая текстовые узлы) структурой HTML.

У нас есть возможность создавать динамические веб-страницы с помощью событий. События - это действия, которые может обнаружить ваше веб-приложение.

Ниже приведены примеры событий -

Щелчок мышью
Загрузка веб-страницы
Наведение мыши на элемент
Отправка HTML-формы
Нажатие клавиши на клавиатуре и т. Д.

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

Привязка обработчиков событий

Используя модель событий jQuery, мы можем установить обработчики событий для элементов DOM с bind() метод следующим образом -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Hi there!');
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below to see the result:</p>
		
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

Этот код заставит элемент деления реагировать на событие щелчка; когда пользователь после этого щелкает внутри этого раздела, будет показано предупреждение.

Это даст следующий результат -

Полный синтаксис команды bind () следующий:

selector.bind( eventType[, eventData], handler)

Ниже приводится описание параметров -

eventType- Строка, содержащая тип события JavaScript, например щелчок или отправка. Обратитесь к следующему разделу для получения полного списка типов событий.
eventData - Необязательный параметр - это карта данных, которые будут переданы в обработчик событий.
handler - Функция, выполняемая каждый раз, когда событие запускается.

Удаление обработчиков событий

Обычно после того, как обработчик событий установлен, он остается в силе до конца жизни страницы. Может возникнуть необходимость, когда вы захотите удалить обработчик событий.

jQuery предоставляет unbind()команда для удаления существующего обработчика событий. Синтаксис unbind () следующий:

selector.unbind(eventType, handler)

or 

selector.unbind(eventType)

Ниже приводится описание параметров -

eventType- Строка, содержащая тип события JavaScript, например щелчок или отправка. Обратитесь к следующему разделу для получения полного списка типов событий.
handler - Если предоставлено, идентифицирует конкретного слушателя, который должен быть удален.

Типы событий

Ниже приведены кросс-платформенные и рекомендуемые типы событий, которые вы можете привязать с помощью JQuery.

Sr.No.	Тип и описание события
1	blur Происходит, когда элемент теряет фокус.
2	change Происходит при изменении элемента.
3	click Происходит при щелчке мышью.
4	dblclick Происходит при двойном щелчке мышью.
5	error Происходит при ошибке загрузки или разгрузки и т. Д.
6	focus Происходит, когда элемент получает фокус.
7	keydown Происходит при нажатии клавиши.
8	keypress Происходит при нажатии и отпускании клавиши.
9	keyup Происходит при отпускании клавиши.
10	load Происходит при загрузке документа.
11	mousedown Происходит при нажатии кнопки мыши.
12	mouseenter Происходит, когда мышь входит в область элемента.
13	mouseleave Происходит, когда мышь покидает область элемента.
14	mousemove Происходит при перемещении указателя мыши.
15	mouseout Происходит, когда указатель мыши выходит за пределы элемента.
16	mouseover Происходит при наведении указателя мыши на элемент.
17	mouseup Происходит при отпускании кнопки мыши.
18	resize Происходит при изменении размера окна.
19	scroll Происходит при прокрутке окна.
20	select Происходит при выделении текста.
21 год	submit Происходит при отправке формы.
22	unload Происходит при выгрузке документов.

Объект события

Функция обратного вызова принимает единственный параметр; при вызове обработчика через него будет передан объект события JavaScript.

Объект события часто не нужен, и параметр опускается, поскольку обычно доступен достаточный контекст, когда обработчик обязан точно знать, что нужно сделать при срабатывании обработчика, однако есть определенные атрибуты, к которым вам может потребоваться доступ.

Атрибуты события

Следующие свойства / атрибуты событий доступны и безопасны для доступа независимо от платформы:

Sr.No.	Описание недвижимости
1	altKey Установите значение true, если клавиша Alt была нажата при срабатывании события, и false, если нет. Клавиша Alt обозначена как Option на большинстве клавиатур Mac.
2	ctrlKey Установите значение true, если клавиша Ctrl была нажата при срабатывании события, и false, если нет.
3	data Значение, если таковое имеется, передается в качестве второго параметра команде bind () при установке обработчика.
4	keyCode Для событий keyup и keydown это возвращает нажатую клавишу.
5	metaKey Установите значение true, если при срабатывании события была нажата клавиша Meta, в противном случае - false. Мета-клавиша - это клавиша Ctrl на ПК и клавиша Command на Mac.
6	pageX Для событий мыши указывает горизонтальную координату события относительно исходной точки страницы.
7	pageY Для событий мыши указывает вертикальную координату события относительно исходной точки страницы.
8	relatedTarget Для некоторых событий мыши идентифицирует элемент, который курсор покинул или вошел, когда событие было инициировано.
9	screenX Для событий мыши указывает горизонтальную координату события относительно исходной точки экрана.
10	screenY Для событий мыши указывает вертикальную координату события относительно исходной точки экрана.
11	shiftKey Установите значение true, если клавиша Shift была нажата при срабатывании события, и false, если нет.
12	target Определяет элемент, для которого было инициировано событие.
13	timeStamp Отметка времени (в миллисекундах), когда было создано событие.
14	type Для всех событий указывает тип инициированного события (например, щелчок).
15	which Для событий клавиатуры указывает числовой код клавиши, вызвавшей событие, а для событий мыши указывает, какая кнопка была нажата (1 для левой, 2 для средней, 3 для правой).

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Event type is ' + event.type);
               alert('pageX : ' + event.pageX);
               alert('pageY : ' + event.pageY);
               alert('Target : ' + event.target.innerHTML);
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below to see the result:</p>
		
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

Это даст следующий результат -

Методы событий

Существует список методов, которые можно вызвать для объекта события -

Sr.No.	Метод и описание
1	preventDefault () Запрещает браузеру выполнять действие по умолчанию.
2	isDefaultPrevented () Возвращает, вызывался ли когда-либо event.preventDefault () для этого объекта события.
3	stopPropagation () Останавливает восходящую цепочку события к родительским элементам, предотвращая получение уведомления о событии родительскими обработчиками.
4	isPropagationStopped () Возвращает, вызывался ли когда-либо event.stopPropagation () для этого объекта события.
5	stopImmediatePropagation () Останавливает выполнение остальных обработчиков.
6	isImmediatePropagationStopped () Возвращает, вызывался ли когда-либо event.stopImmediatePropagation () для этого объекта события.

Методы манипулирования событиями

В следующей таблице перечислены важные методы, связанные с событиями.

Sr.No.	Метод и описание
1	bind (тип, [данные], fn) Привязывает обработчик к одному или нескольким событиям (например, щелчку) для каждого совпадающего элемента. Также можно привязать пользовательские события.
2	выкл (события [, селектор] [, обработчик (объект_события)]) Это противоположность прямой трансляции, она удаляет привязанное прямое событие.
3	зависать (над, за) Имитирует наведение, например перемещение мыши на объект и его выключение.
4	on (события [, селектор] [, данные], обработчик) Привязывает обработчик к событию (например, щелчку) для всех текущих и будущих совпадающих элементов. Также можно привязать пользовательские события.
5	один (тип, [данные], fn) Привязывает обработчик к одному или нескольким событиям, которые должны выполняться один раз для каждого совпадающего элемента.
6	готов (fn) Связывает функцию, которая будет выполняться всякий раз, когда DOM готов для обхода и манипулирования.
7	триггер (событие, [данные]) Запускать событие для каждого совпадающего элемента.
8	triggerHandler (событие, [данные]) Запускает все связанные обработчики событий для элемента.
9	unbind ([type], [fn]) Это противоположно связыванию, оно удаляет связанные события из каждого совпадающего элемента.

Методы поддержки событий

jQuery также предоставляет набор вспомогательных функций для событий, которые можно использовать для запуска события для привязки любых типов событий, упомянутых выше.

Методы триггера

Ниже приведен пример, который запускает событие размытия для всех абзацев.

$("p").blur();

Методы привязки

Ниже приведен пример, который связывает click событие на всех <div> -

$("div").click( function () { 
   // do something here
});

Вот полный список всех методов поддержки, предоставляемых jQuery:

Sr.No.	Метод и описание
1	blur( ) Запускает событие размытия для каждого совпадающего элемента.
2	blur( fn ) Привяжите функцию к событию размытия каждого совпадающего элемента.
3	change( ) Запускает событие изменения для каждого совпадающего элемента.
4	change( fn ) Связывает функцию с событием изменения каждого совпадающего элемента.
5	click( ) Запускает событие щелчка для каждого совпадающего элемента.
6	click( fn ) Привязывает функцию к событию щелчка каждого совпадающего элемента.
7	dblclick( ) Запускает событие dblclick для каждого совпадающего элемента.
8	dblclick( fn ) Связывает функцию с событием dblclick каждого совпадающего элемента.
9	error( ) Запускает событие ошибки для каждого совпадающего элемента.
10	error( fn ) Связывает функцию с событием ошибки каждого совпадающего элемента.
11	focus( ) Запускает событие фокуса для каждого совпадающего элемента.
12	focus( fn ) Привязывает функцию к событию фокуса каждого совпадающего элемента.
13	keydown( ) Запускает событие нажатия клавиши для каждого совпадающего элемента.
14	keydown( fn ) Привяжите функцию к событию нажатия клавиши для каждого совпадающего элемента.
15	keypress( ) Запускает событие нажатия клавиши для каждого совпадающего элемента.
16	keypress( fn ) Связывает функцию с событием нажатия клавиши каждого совпадающего элемента.
17	keyup( ) Запускает событие keyup для каждого совпадающего элемента.
18	keyup( fn ) Привяжите функцию к событию keyup каждого совпадающего элемента.
19	load( fn ) Привязывает функцию к событию загрузки каждого совпадающего элемента.
20	mousedown( fn ) Связывает функцию с событием mousedown каждого совпадающего элемента.
21 год	mouseenter( fn ) Свяжите функцию с событием mouseenter каждого совпадающего элемента.
22	mouseleave( fn ) Привяжите функцию к событию mouseleave каждого совпадающего элемента.
23	mousemove( fn ) Свяжите функцию с событием mousemove каждого совпадающего элемента.
24	mouseout( fn ) Привяжите функцию к событию mouseout каждого совпадающего элемента.
25	mouseover( fn ) Привяжите функцию к событию наведения курсора мыши на каждый совпавший элемент.
26	mouseup( fn ) Привяжите функцию к событию mouseup каждого совпадающего элемента.
27	resize( fn ) Привяжите функцию к событию изменения размера каждого совпадающего элемента.
28	scroll( fn ) Привяжите функцию к событию прокрутки каждого совпадающего элемента.
29	select( ) Запускает событие выбора для каждого совпадающего элемента.
30	select( fn ) Привяжите функцию к событию select каждого совпадающего элемента.
31 год	submit( ) Инициируйте событие отправки для каждого совпадающего элемента.
32	submit( fn ) Свяжите функцию с событием отправки каждого совпадающего элемента.
33	unload( fn ) Связывает функцию с событием выгрузки каждого совпадающего элемента.

AJAX - это аббревиатура от Asynchronous JavaScript и XML, и эта технология помогает нам загружать данные с сервера без обновления страницы браузера.

Если вы новичок в AJAX, я бы порекомендовал вам ознакомиться с нашим учебником по Ajax, прежде чем продолжить.

JQuery - отличный инструмент, который предоставляет богатый набор методов AJAX для разработки веб-приложений следующего поколения.

Загрузка простых данных

С помощью JQuery AJAX очень легко загрузить любые статические или динамические данные. JQuery предоставляетload() способ сделать работу -

Синтаксис

Вот простой синтаксис для load() метод -

[selector].load( URL, [data], [callback] );

Вот описание всех параметров -

URL- URL-адрес серверного ресурса, на который отправляется запрос. Это может быть сценарий CGI, ASP, JSP или PHP, который генерирует данные динамически или из базы данных.
data- Этот необязательный параметр представляет объект, свойства которого сериализованы в правильно закодированные параметры, передаваемые в запрос. Если указано, запрос выполняется с использованиемPOSTметод. Если опущено,GET используется метод.
callback- Функция обратного вызова, вызываемая после загрузки данных ответа в элементы согласованного набора. Первый параметр, переданный этой функции, - это текст ответа, полученный от сервера, а второй параметр - это код состояния.

пример

Рассмотрим следующий HTML-файл с небольшой кодировкой JQuery -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){ $('#stage').load('/jquery/result.html');
            });
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load /jquery/result.html file −</p>
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

Вот load() инициирует запрос Ajax на указанный URL /jquery/result.htmlфайл. После загрузки этого файла все содержимое будет заполнено внутри <div> с тегом ID stage . Предположим, наш файл /jquery/result.html имеет только одну строку HTML -

<h1>THIS IS RESULT...</h1>

Когда вы нажимаете данную кнопку, загружается файл result.html.

Получение данных JSON

Может возникнуть ситуация, когда сервер вернет строку JSON против вашего запроса. Служебная функция JQuerygetJSON() анализирует возвращенную строку JSON и делает полученную строку доступной для функции обратного вызова в качестве первого параметра для выполнения дальнейших действий.

Синтаксис

Вот простой синтаксис для getJSON() метод -

[selector].getJSON( URL, [data], [callback] );

Вот описание всех параметров -

URL - URL-адрес ресурса на стороне сервера, к которому осуществляется связь с помощью метода GET.
data - Объект, свойства которого служат парами имя / значение, используемыми для построения строки запроса, добавляемой к URL-адресу, или предварительно отформатированной и закодированной строки запроса.
callback- Функция, вызываемая после завершения запроса. Значение данных, полученное в результате переваривания тела ответа в виде строки JSON, передается в качестве первого параметра для этого обратного вызова, а статус - в качестве второго.

пример

Рассмотрим следующий HTML-файл с небольшой кодировкой JQuery -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { $("#driver").click(function(event){
				
               $.getJSON('/jquery/result.json', function(jd) { $('#stage').html('<p> Name: ' + jd.name + '</p>');
                  $('#stage').append('<p>Age : ' + jd.age+ '</p>'); $('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
               });
					
            });
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load result.json file −</p>
		
      <div id = "stage" style = "background-color:#eee;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

Здесь служебный метод JQuery getJSON() инициирует запрос Ajax на указанный URL result.jsonфайл. После загрузки этого файла все содержимое будет передано функции обратного вызова, которая, наконец, будет заполнена внутри <div> с тегом ID stage . Предполагая, что наш файл result.json имеет следующее содержимое в формате json:

{
   "name": "Zara Ali",
   "age" : "67",
   "sex": "female"
}

Когда вы нажимаете данную кнопку, загружается файл result.json.

Передача данных на сервер

Много раз вы собираете ввод от пользователя и передаете его на сервер для дальнейшей обработки. JQuery AJAX упростил передачу собранных данных на сервер, используяdata параметр любого доступного метода Ajax.

пример

Этот пример демонстрирует, как передать пользовательский ввод в сценарий веб-сервера, который отправит тот же результат обратно, и мы его распечатаем -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { $("#driver").click(function(event){
               var name = $("#name").val(); $("#stage").load('/jquery/result.php', {"name":name} );
            });
         });
      </script>
   </head>
	
   <body>
      <p>Enter your name and click on the button:</p>
      <input type = "input" id = "name" size = "40" /><br />
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Show Result" />
   </body>
</html>

Вот код, написанный на result.php сценарий -

<?php
   if( $_REQUEST["name"] ){ $name = $_REQUEST['name']; echo "Welcome ". $name;
   }
?>

Теперь вы можете ввести любой текст в данное поле ввода, а затем нажать кнопку «Показать результат», чтобы увидеть, что вы ввели в поле ввода.

Методы JQuery AJAX

Вы ознакомились с базовой концепцией AJAX с использованием JQuery. В следующей таблице перечислены все важные методы JQuery AJAX, которые вы можете использовать в зависимости от ваших потребностей в программировании.

Sr.No.	Методы и описание
1	jQuery.ajax (параметры) Загрузите удаленную страницу с помощью HTTP-запроса.
2	jQuery.ajaxSetup (параметры) Установите глобальные настройки для запросов AJAX.
3	jQuery.get (URL, [данные], [обратный вызов], [тип]) Загрузите удаленную страницу с помощью HTTP-запроса GET.
4	jQuery.getJSON (URL, [данные], [обратный вызов]) Загрузите данные JSON с помощью HTTP-запроса GET.
5	jQuery.getScript (URL, [обратный вызов]) Загружает и выполняет файл JavaScript с помощью запроса HTTP GET.
6	jQuery.post (URL, [данные], [обратный вызов], [тип]) Загрузите удаленную страницу с помощью запроса HTTP POST.
7	load (url, [данные], [callback]) Загрузите HTML из удаленного файла и вставьте его в DOM.
8	сериализовать () Сериализует набор входных элементов в строку данных.
9	serializeArray () Сериализует все формы и элементы форм, такие как метод .serialize (), но возвращает структуру данных JSON, с которой вы можете работать.

События JQuery AJAX

Вы можете вызывать различные методы JQuery в течение жизненного цикла выполнения вызова AJAX. На основе различных событий / этапов доступны следующие методы -

Вы можете просмотреть все события AJAX .

Sr.No.	Методы и описание
1	ajaxComplete (обратный вызов) Присоедините функцию, которая будет выполняться при завершении запроса AJAX.
2	ajaxStart (обратный вызов) Прикрепите функцию, которая будет выполняться всякий раз, когда начинается запрос AJAX, и ни один из них еще не активен.
3	ajaxError (обратный вызов) Присоедините функцию, которая будет выполняться при сбое запроса AJAX.
4	ajaxSend (обратный вызов) Присоедините функцию, которая будет выполняться перед отправкой запроса AJAX.
5	ajaxStop (обратный вызов) Прикрепите функцию, которая будет выполняться после завершения всех запросов AJAX.
6	ajaxSuccess (обратный вызов) Прикрепите функцию, которая будет выполняться всякий раз, когда запрос AJAX завершается успешно.

jQuery предоставляет тривиально простой интерфейс для создания разнообразных потрясающих эффектов. Методы jQuery позволяют быстро применять часто используемые эффекты с минимальной конфигурацией. В этом руководстве рассматриваются все важные методы jQuery для создания визуальных эффектов.

Отображение и скрытие элементов

Команды для отображения и скрытия элементов в значительной степени соответствуют нашим ожиданиям - show() чтобы показать элементы в обернутом наборе и hide() чтобы скрыть их.

Синтаксис

Вот простой синтаксис для show() метод -

[selector].show( speed, [callback] );

Вот описание всех параметров -

speed - Строка, представляющая одну из трех предопределенных скоростей («медленная», «нормальная» или «быстрая») или количество миллисекунд для запуска анимации (например, 1000).
callback- Этот необязательный параметр представляет функцию, которая будет выполняться всякий раз, когда анимация завершается; выполняется один раз для каждого анимированного элемента.

Ниже приводится простой синтаксис для hide() метод -

[selector].hide( speed, [callback] );

Вот описание всех параметров -

speed - Строка, представляющая одну из трех предопределенных скоростей («медленная», «нормальная» или «быстрая») или количество миллисекунд для запуска анимации (например, 1000).
callback- Этот необязательный параметр представляет функцию, которая будет выполняться всякий раз, когда анимация завершается; выполняется один раз для каждого анимированного элемента.

пример

Рассмотрим следующий HTML-файл с небольшой кодировкой JQuery -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { $("#show").click(function () {
               $(".mydiv").show( 1000 ); }); $("#hide").click(function () {
               $(".mydiv").hide( 1000 );
            });
				
         });
      </script>
		
      <style>
         .mydiv{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:100px; 
            height:100px;
         }
      </style>
   </head>
	
   <body>
      <div class = "mydiv">
         This is a SQUARE
      </div>

      <input id = "hide" type = "button" value = "Hide" />   
      <input id = "show" type = "button" value = "Show" />
   </body>
</html>

Это даст следующий результат -

Переключение элементов

jQuery предоставляет методы для переключения состояния отображения элементов между открытыми и скрытыми. Если элемент изначально отображается, он будет скрыт; если он скрыт, он будет показан.

Синтаксис

Вот простой синтаксис для одного из toggle() методы -

[selector]..toggle([speed][, callback]);

Вот описание всех параметров -

speed - Строка, представляющая одну из трех предопределенных скоростей («медленная», «нормальная» или «быстрая») или количество миллисекунд для запуска анимации (например, 1000).
callback- Этот необязательный параметр представляет функцию, которая будет выполняться всякий раз, когда анимация завершается; выполняется один раз для каждого анимированного элемента.

пример

Мы можем анимировать любой элемент, например простой <div>, содержащий изображение -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $(".clickme").click(function(event){ $(".target").toggle('slow', function(){
                  $(".log").text('Transition Complete');
               });
            });
         });
      </script>
		
      <style>
         .clickme{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:100px; 
            height:50px;
         }
      </style>
   </head>
	
   <body>
      <div class = "content">
         <div class = "clickme">Click Me</div>
         <div class = "target">
            <img src = "./images/jquery.jpg" alt = "jQuery" />
         </div>
         <div class = "log"></div>
      </div>
   </body>
</html>

Это даст следующий результат -

Методы JQuery Effect

Вы ознакомились с базовой концепцией jQuery Effects. В следующей таблице перечислены все важные методы для создания различных эффектов.

Sr.No.	Методы и описание
1	animate (params, [продолжительность, замедление, обратный вызов]) Функция для создания пользовательских анимаций.
2	fadeIn (скорость, [обратный вызов]) Исчезните все совпадающие элементы, отрегулировав их непрозрачность и запустив дополнительный обратный вызов после завершения.
3	fadeOut (скорость, [обратный вызов]) Уберите все совпадающие элементы, установив их непрозрачность на 0, затем установив display на «none» и запустив дополнительный обратный вызов после завершения.
4	fadeTo (скорость, непрозрачность, обратный вызов) Уменьшить непрозрачность всех согласованных элементов до указанной непрозрачности и запустить дополнительный обратный вызов после завершения.
5	скрывать( ) Скрывает каждый из набора совпадающих элементов, если они отображаются.
6	скрыть (скорость, [обратный вызов]) Скройте все совпадающие элементы, используя изящную анимацию и запустив дополнительный обратный вызов после завершения.
7	Показать( ) Отображает каждый из набора совпадающих элементов, если они скрыты.
8	показать (скорость, [обратный вызов]) Показать все совпадающие элементы с помощью изящной анимации и срабатывания дополнительного обратного вызова после завершения.
9	slideDown (скорость, [обратный вызов]) Выявите все совпадающие элементы, отрегулировав их высоту и запустив дополнительный обратный вызов после завершения.
10	slideToggle (скорость, [обратный вызов]) Переключите видимость всех совпадающих элементов, отрегулировав их высоту и запустив дополнительный обратный вызов после завершения.
11	slideUp (скорость, [обратный вызов]) Скройте все совпадающие элементы, отрегулировав их высоту и запустив дополнительный обратный вызов после завершения.
12	стоп ([clearQueue, gotoEnd]) Останавливает все текущие анимации для всех указанных элементов.
13	переключить () Переключить отображение каждого набора совпадающих элементов.
14	переключить (скорость, [обратный вызов]) Переключите отображение каждого набора совпадающих элементов с помощью изящной анимации и срабатывания дополнительного обратного вызова после завершения.
15	Переключить переключатель ) Переключить отображение каждого из набора совпавших элементов на основе переключателя (true показывает все элементы, false скрывает все элементы).
16	jQuery.fx.off Глобально отключить все анимации.

Эффекты на основе библиотеки пользовательского интерфейса

Чтобы использовать эти эффекты, вы можете загрузить последнюю версию библиотеки пользовательского интерфейса jQuery. jquery-ui-1.11.4.custom.zipиз библиотеки пользовательского интерфейса jQuery или используйте Google CDN, чтобы использовать его так же, как мы это сделали для jQuery.

Мы использовали Google CDN для пользовательского интерфейса jQuery, используя следующий фрагмент кода на странице HTML, поэтому мы можем использовать пользовательский интерфейс jQuery:

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
   </script>
</head>

Sr.No.	Методы и описание
1	Слепой Ослепляет элемент или показывает его, закрывая его.
2	Отказов Отражает элемент по вертикали или горизонтали n раз.
3	Клип Обрезает элемент или снимает его по вертикали или горизонтали.
4	Падение Отбрасывает элемент или показывает его, отбрасывая.
5	Взорваться Разрывает элемент на несколько частей.
6	Сложить Складывает элемент как лист бумаги.
7	Выделить Выделяет фон заданным цветом.
8	Слойка Масштабирование и постепенное уменьшение анимации создают эффект затяжки.
9	Пульсировать Несколько раз изменяет непрозрачность элемента.
10	Шкала Уменьшайте или увеличивайте элемент в процентном соотношении.
11	Встряхнуть Встряхните элемент по вертикали или горизонтали n раз.
12	Размер Измените размер элемента до указанной ширины и высоты.
13	Горка Выдвигает элемент из области просмотра.
14	Перечислить Переносит очертание одного элемента на другой.

К любому элементу можно было бы добавить базовое поведение на основе мыши. Используя взаимодействия, мы можем создавать сортируемые списки, элементы с изменяемым размером, поведение перетаскивания и отпускания. Взаимодействия также являются отличными строительными блоками для более сложных виджетов и приложений.

Sr.No.	Взаимодействие и описание
1	Возможность перетаскивания Включите функцию перетаскивания для любого элемента DOM.
2	Drop в состоянии Включите возможность удаления любого элемента DOM.
3	Возможность изменения размера Включите возможность изменения размера любого элемента DOM.
4	Выберите способный Включение возможности выбора элемента DOM (или группы элементов).
5	Возможность сортировки Включение сортировки группы элементов DOM.

Виджет jQuery UI - это специализированный плагин jQuery. Используя плагин, мы можем применять поведения к элементам. Однако в подключаемых модулях отсутствуют некоторые встроенные возможности, такие как способ связывать данные с его элементами, предоставлять методы, объединять параметры со значениями по умолчанию и контролировать время жизни подключаемого модуля.

Sr.No.	Виджеты и описание
1	Аккордеон Включите, чтобы свернуть содержимое, разбитое на логические разделы.
2	Автозаполнение Включите, чтобы предлагать варианты при вводе в поле.
3	Кнопка Кнопка - это вход типа submit и якорь.
4	Datepicker Он предназначен для открытия интерактивного календаря в небольшом оверлее.
5	Диалог Диалоговые окна - один из удобных способов представления информации на странице HTML.
6	Меню Меню показывает список пунктов.
7	Индикатор Он показывает информацию о прогрессе.
8	Выбрать меню Включите стиль с возможностью выбора элемента / элементов.
9	Слайдер Базовый ползунок расположен горизонтально и имеет одну ручку, которую можно перемещать с помощью мыши или клавиш со стрелками.
10	Спиннер Он обеспечивает быстрый способ выбора одного значения из набора.
11	Вкладки Он используется для переключения между содержимым, разбитым на логические разделы.
12	Подсказка Он дает советы пользователям.

В JQuery есть две разные темы оформления: A и B, каждая с разными цветами для кнопок, полос, блоков содержимого и т. Д.

Синтаксис темы J-запроса, как показано ниже -

<div data-role = "page" data-theme = "a|b">

Простой пример темы, как показано ниже -

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" 
         href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
			
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js">
      </script>
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js">
      </script>
      <script 
         src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
      </script>
   </head>
	
   <body>
      <div data-role = "page" id = "pageone" data-theme = "a">
        <div data-role = "header">
            <h1>Tutorials Point</h1>
         </div>

         <div data-role = "main" class = "ui-content">
			
            <p>Text link</p>
            <a href = "#">A Standard Text Link</a>
            <a href = "#" class = "ui-btn">Link Button</a>
            <p>A List View:</p>
				
            <ul data-role = "listview" data-autodividers = "true" data-inset = "true">
               <li><a href = "#">Android </a></li>
               <li><a href = "#">IOS</a></li>
            </ul>
				
            <label for = "fullname">Input Field:</label>
            <input type = "text" name = "fullname" id = "fullname" 
               placeholder = "Name..">    
            <label for = "switch">Toggle Switch:</label>
				
            <select name = "switch" id = "switch" data-role = "slider">
               <option value = "on">On</option>
               <option value = "off" selected>Off</option>
            </select>
				
         </div>

         <div data-role = "footer">
            <h1>Tutorials point</h1>
         </div>
      </div>
   </body>
</html>

Это должно дать следующий результат -

Простой пример темы B, как показано ниже -

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" 
         href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js">
      </script>
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js">
      </script>
      <script 
         src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
      </script>
   </head>
	
   <body>
      <div data-role = "page" id = "pageone" data-theme = "b">
        <div data-role = "header">
            <h1>Tutorials Point</h1>
         </div>

         <div data-role = "main" class = "ui-content">
            <p>Text link</p>
            <a href = "#">A Standard Text Link</a>
            <a href = "#" class = "ui-btn">Link Button</a>
            <p>A List View:</p>
				
            <ul data-role = "listview" data-autodividers = "true" data-inset = "true">
               <li><a href = "#">Android </a></li>
               <li><a href = "#">IOS</a></li>
            </ul>
				
            <label for = "fullname">Input Field:</label>
            <input type = "text" name = "fullname" id = "fullname" 
               placeholder = "Name..">    
            <label for = "switch">Toggle Switch:</label>
				
            <select name = "switch" id = "switch" data-role = "slider">
               <option value = "on">On</option>
               <option value = "off" selected>Off</option>
            </select>
				
         </div>

         <div data-role = "footer">
            <h1>Tutorials point</h1>
         </div>
      </div>
   </body>
</html>

Это должно дать следующий результат -

JQuery предоставляет несколько служебных программ в формате $ (пространство имен). Эти методы полезны для выполнения задач программирования. Некоторые из служебных методов показаны ниже.

$ .trim ()

$ .trim () используется для удаления начальных и конечных пробелов

$.trim( "    lots of extra whitespace    " );

$ .each ()

$ .each () используется для перебора массивов и объектов.

$.each([ "foo", "bar", "baz" ], function( idx, val ) {
   console.log( "element " + idx + " is " + val );
});
 
$.each({ foo: "bar", baz: "bim" }, function( k, v ) {
   console.log( k + " : " + v );
});

.each () может быть вызван в выделении для перебора элементов, содержащихся в выделении. .each (), а не $ .each (), следует использовать для перебора элементов в выделенной области.

$ .inArray ()

$ .inArray () используется для возврата индекса значения в массиве или -1, если значение отсутствует в массиве.

var myArray = [ 1, 2, 3, 5 ];
 
if ( $.inArray( 4, myArray ) !== -1 ) {
   console.log( "found it!" );
}

$ .extend ()

$ .extend () используется для изменения свойств первого объекта, используя свойства последующих объектов.

var firstObject = { foo: "bar", a: "b" };
var secondObject = { foo: "baz" };
 
var newObject = $.extend( firstObject, secondObject );
 
console.log( firstObject.foo ); 
console.log( newObject.foo );

$ .proxy ()

$ .proxy () используется для возврата функции, которая всегда будет выполняться в предоставленной области, то есть устанавливает значение this внутри переданной функции для второго аргумента

var myFunction = function() {
   console.log( this );
};

var myObject = {
   foo: "bar"
};
 
myFunction(); // window
 
var myProxyFunction = $.proxy( myFunction, myObject );
 
myProxyFunction();

$ .browser

$ .browser используется для предоставления информации о браузерах

jQuery.each( jQuery.browser, function( i, val ) {
   $( "<div>" + i + " : <span>" + val + "</span>" )
   .appendTo( document.body );
});

$ .contains ()

$ .contains () используется для возврата истины, если элемент DOM, предоставленный вторым аргументом, является потомком элемента DOM, предоставленного первым аргументом, независимо от того, является ли он прямым дочерним элементом или более глубоко вложенным.

$.contains( document.documentElement, document.body ); $.contains( document.body, document.documentElement );

$ .data ()

$ .data () используется для предоставления информации о данных

<html lang = "en">
   <head>
      <title>jQuery.data demo</title>
      <script src = "https://code.jquery.com/jquery-1.10.2.js">
      </script>
   </head>
	
   <body>
      <div>
         The values stored were <span></span>
            and <span></span>
      </div>
 
      <script>
         var div = $( "div" )[ 0 ]; jQuery.data( div, "test", { first: 25, last: "tutorials" }); $( "span:first" ).text( jQuery.data( div, "test" ).first );
         $( "span:last" ).text( jQuery.data( div, "test" ).last );
      </script>
   </body>
</html>

Результат будет следующим

The values stored were 25 and tutorials

$ .fn.extend ()

$ .fn.extend () используется для расширения прототипа jQuery

<html lang = "en">
   <head>
      <script src = "https://code.jquery.com/jquery-1.10.2.js">
      </script>
   </head>
	
   <body>
      <label><input type = "checkbox" name = "android"> 
         Android</label>
      <label><input type = "checkbox" name = "ios"> IOS</label>
 
      <script>
         jQuery.fn.extend({
			
            check: function() {
               return this.each(function() {
                  this.checked = true;
               });
            },
            uncheck: function() {
               return this.each(function() {
                  this.checked = false;
               });
            }
         });
 
         // Use the newly created .check() method
         $( "input[type = 'checkbox']" ).check();
			
      </script>
   </body>
</html>

Он обеспечивает вывод, как показано ниже -

$ .isWindow ()

$ .isWindow () используется для распознавания окна

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery.isWindow demo</title>
      <script src = "https://code.jquery.com/jquery-1.10.2.js">
      </script>
   </head>
	
   <body>
      Is 'window' a window? <b></b>
 
      <script>
         $( "b" ).append( "" + $.isWindow( window ) );
      </script>
   </body>
</html>

Он обеспечивает вывод, как показано ниже -

$ .now ()

Возвращает число, представляющее текущее время.

(new Date).getTime()

$ .isXMLDoc ()

$ .isXMLDoc () проверяет, является ли файл xml или нет

jQuery.isXMLDoc( document )
jQuery.isXMLDoc( document.body )

$ .globalEval ()

$ .globalEval () используется для глобального выполнения javascript

function test() {
   jQuery.globalEval( "var newVar = true;" )
}
test();

$ .dequeue ()

$ .dequeue () используется для выполнения следующей функции в очереди

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery.dequeue demo</title>
		
      <style>
         div {
            margin: 3px;
            width: 50px;
            position: absolute;
            height: 50px;
            left: 10px;
            top: 30px;
            background-color: green;
            border-radius: 50px;
         }
         div.red {
            background-color: blue;
         }
      </style>
		
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
   </head>

   <body>
      <button>Start</button>
      <div></div>
 
      <script>
         $( "button" ).click(function() {
            $( "div" ) .animate({ left: '+ = 400px' }, 2000 ) .animate({ top: '0px' }, 600 ) .queue(function() { $( this ).toggleClass( "red" );
               $.dequeue( this );
            })
				
            .animate({ left:'10px', top:'30px' }, 700 );
         });
      </script>
   </body>
</html>

Он обеспечивает вывод, как показано ниже -