Учебники

JQuery — Краткое руководство

Ноябрь 20, 2018

JQuery — Обзор

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

  • Манипулирование DOM — JQuery упростил выбор элементов DOM, согласование их и изменение их содержимого с помощью кросс-браузерного движка с открытым исходным кодом, называемого Sizzle .

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

  • Поддержка AJAX — JQuery очень помогает вам в разработке адаптивного и многофункционального сайта с использованием технологии AJAX.

  • Анимации — JQuery поставляется с множеством встроенных анимационных эффектов, которые вы можете использовать на своих сайтах.

  • Легкий — jQuery — очень легкая библиотека — размером около 19 КБ (Minified и gzipped).

  • Кросс-браузерная поддержка — JQuery имеет кросс-браузерную поддержку и хорошо работает в IE 6.0+, FF 2.0+, Safari 3.0+, Chrome и Opera 9.0+.

  • Новейшая технология — JQuery поддерживает селекторы CSS3 и базовый синтаксис XPath.

Манипулирование DOM — JQuery упростил выбор элементов DOM, согласование их и изменение их содержимого с помощью кросс-браузерного движка с открытым исходным кодом, называемого Sizzle .

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

Поддержка AJAX — JQuery очень помогает вам в разработке адаптивного и многофункционального сайта с использованием технологии AJAX.

Анимации — JQuery поставляется с множеством встроенных анимационных эффектов, которые вы можете использовать на своих сайтах.

Легкий — jQuery — очень легкая библиотека — размером около 19 КБ (Minified и gzipped).

Кросс-браузерная поддержка — JQuery имеет кросс-браузерную поддержку и хорошо работает в IE 6.0+, FF 2.0+, Safari 3.0+, Chrome и Opera 9.0+.

Новейшая технология — JQuery поддерживает селекторы CSS3 и базовый синтаксис XPath.

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

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

  • Локальная установка — вы можете загрузить библиотеку jQuery на свой локальный компьютер и включить ее в свой HTML-код.

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

Локальная установка — вы можете загрузить библиотеку jQuery на свой локальный компьютер и включить ее в свой HTML-код.

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

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

  • Перейдите на https://jquery.com/download/, чтобы загрузить последнюю доступную версию.

  • Теперь поместите загруженный файл jquery-2.1.3.min.js в каталог вашего сайта, например, / jquery.

Перейдите на 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.

Live Demo 

<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 script, как показано ниже —

Live Demo 

<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-файл следующим образом:

Live Demo 

<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>

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

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

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

Что дальше ?

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

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

JQuery — Основы

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 может быть истинным или ложным . Если число равно нулю, по умолчанию используется значение 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];

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

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 известное ключевое слово, это всегда относится к текущему контексту. Внутри функции этот контекст может меняться в зависимости от того, как вызывается функция — 

$(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 будет иметь только две области видимости.

  • Глобальные переменные — глобальная переменная имеет глобальную область видимости, что означает, что она определяется везде в вашем коде JavaScript.

  • Локальные переменные — локальная переменная будет видна только внутри функции, в которой она определена. Параметры функции всегда локальны для этой функции.

Глобальные переменные — глобальная переменная имеет глобальную область видимости, что означает, что она определяется везде в вашем коде JavaScript.

Локальные переменные — локальная переменная будет видна только внутри функции, в которой она определена. Параметры функции всегда локальны для этой функции.

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

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;
});

Затворы

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

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

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

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

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

Прокси шаблон

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

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

(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

для каждого()

Вызывает функцию для каждого элемента в массиве.

4

индекс()

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

5

длина ()

Возвращает длину строки.

6

поп ()

Удаляет последний элемент из массива и возвращает этот элемент.

7

От себя()

Добавляет один или несколько элементов в конец массива и возвращает новую длину массива.

8

задний ход()

Меняет порядок элементов массива — первый становится последним, а последний становится первым.

9

Сортировать()

Сортирует элементы массива.

10

зиЬзЬг ()

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

11

toLowerCase ()

Возвращает значение вызывающей строки, преобразованное в нижний регистр.

12

нанизывать()

Возвращает строковое представление значения числа.

13

toUpperCase ()

Возвращает значение вызывающей строки, преобразованное в верхний регистр.

Charat ()

Возвращает символ по указанному индексу.

CONCAT ()

Объединяет текст из двух строк и возвращает новую строку.

для каждого()

Вызывает функцию для каждого элемента в массиве.

индекс()

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

длина ()

Возвращает длину строки.

поп ()

Удаляет последний элемент из массива и возвращает этот элемент.

От себя()

Добавляет один или несколько элементов в конец массива и возвращает новую длину массива.

задний ход()

Меняет порядок элементов массива — первый становится последним, а последний становится первым.

Сортировать()

Сортирует элементы массива.

зиЬзЬг ()

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

toLowerCase ()

Возвращает значение вызывающей строки, преобразованное в нижний регистр.

нанизывать()

Возвращает строковое представление значения числа.

toUpperCase ()

Возвращает значение вызывающей строки, преобразованное в верхний регистр.

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

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

Live Demo 

<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>.

  • Аналогичным образом, помимо того, что он является предком <head> и <body>, <html> также является их родителем.

  • Элементы <p> являются дочерними элементами (и потомками) элемента <div>, потомками элементов <body> и <html> и родственными элементами друг друга элементов <p>.

<Html> является предком всех других элементов; другими словами, все остальные элементы являются потомками <html>.

Элементы <head> и <body> являются не только потомками, но и потомками <html>.

Аналогичным образом, помимо того, что он является предком <head> и <body>, <html> также является их родителем.

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

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

JQuery — Селекторы

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

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

Функция фабрики $ ()

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

Sr.No. Селектор и описание
1

Название тэга

Представляет имя тега, доступное в DOM. Например, $ (‘p’) выбирает все абзацы <p> в документе.

2

ID тега

Представляет тег, доступный с данным идентификатором в DOM. Например, $ (‘# some-id’) выбирает единственный элемент в документе, который имеет идентификатор some-id.

3

Tag Class

Представляет тег, доступный для данного класса в DOM. Например, $ (‘. Some-class’) выбирает все элементы в документе, которые имеют класс some-class.

Название тэга

Представляет имя тега, доступное в DOM. Например, $ (‘p’) выбирает все абзацы <p> в документе.

ID тега

Представляет тег, доступный с данным идентификатором в DOM. Например, $ (‘# some-id’) выбирает единственный элемент в документе, который имеет идентификатор some-id.

Tag Class

Представляет тег, доступный для данного класса в DOM. Например, $ (‘. Some-class’) выбирает все элементы в документе, которые имеют класс some-class.

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

ПРИМЕЧАНИЕ. — Фабричная функция $ () является синонимом функции jQuery () . Так что если вы используете любую другую библиотеку JavaScript, где $ sign конфликтует с чем-то другим, вы можете заменить $ sign на имя jQuery и использовать функцию jQuery () вместо $ () .

пример

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

Live Demo 

<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 #Я БЫ

Выбирает один элемент, который соответствует данному идентификатору .

3 .Учебный класс

Выбирает все элементы, которые соответствуют данному классу .

4 Универсальный (*)

Выбирает все элементы, доступные в DOM.

5 Несколько элементов E, F, G

Выбирает объединенные результаты всех указанных селекторов E, F или G.

Выбирает все элементы, которые соответствуют данному элементу Name .

Выбирает один элемент, который соответствует данному идентификатору .

Выбирает все элементы, которые соответствуют данному классу .

Выбирает все элементы, доступные в DOM.

Выбирает объединенные результаты всех указанных селекторов E, F или G.

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

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

Sr.No. Селектор и описание
1

$ ( ‘*’)

Этот селектор выбирает все элементы в документе.

2

$ («p> *»)

Этот селектор выбирает все элементы, которые являются дочерними для элемента абзаца.

3

$ ( «# Особая личность»)

Эта селекторная функция получает элемент с id = «specialID».

4

$ ( «specialClass»)

Этот селектор получает все элементы, которые имеют класс specialClass .

5

$ ( «ли: нет (.MyClass)»)

Выбирает все элементы, соответствующие <li>, которые не имеют class = «myclass».

6

$ ( «# specialID.specialClass»)

Этот селектор сопоставляет ссылки с идентификатором specialID и классом specialClass .

7

$ («p a.specialClass»)

Этот селектор сопоставляет ссылки с классом specialClass, объявленным в элементах <p>.

8

$ («ul li: first»)

Этот селектор получает только первый элемент <li> из <ul>.

9

$ («# контейнер p»)

Выбирает все элементы, соответствующие <p>, которые являются потомками элемента с идентификатором контейнера .

10

$ («li> ul»)

Выбирает все элементы, соответствующие <ul>, которые являются потомками элемента, соответствующего <li>

11

$ («сильный + их»)

Выбирает все элементы, совпадающие с <em>, которые следуют сразу за элементом-родителем, совпадающим с <strong>.

12

$ («p ~ ul»)

Выбирает все элементы, совпадающие с <ul>, которые следуют за родственным элементом, совпадающим с <p>.

13

$ («код, их, сильный»)

Выбирает все элементы, соответствующие <code> или <em> или <strong>.

14

$ («p strong, .myclass»)

Выбирает все элементы, соответствующие <strong>, которые являются потомками элемента, соответствующего <p>, а также все элементы, имеющие класс myclass .

15

$ ( «: пусто»)

Выбирает все элементы, которые не имеют дочерних элементов.

16

$ ( «р: пусто»)

Выбирает все элементы, соответствующие <p>, которые не имеют дочерних элементов.

17

$ ( «ДИВ [р]»)

Выбирает все элементы, соответствующие элементу <div>, которые содержат элемент, соответствующий элементу <p>.

18

$ ( «р [.MyClass]»)

Выбирает все элементы, соответствующие <p>, которые содержат элемент с классом myclass .

19

$ ( «а [@rel]»)

Выбирает все элементы, соответствующие <a>, которые имеют атрибут rel.

20

$ («input [@name = myname]»)

Выбирает все элементы, совпадающие с <input>, которые имеют значение имени, точно равное myname.

21

$ ( «вход [@ имя = MyName]»)

Выбирает все элементы, соответствующие <input>, которые имеют значение name, начинающееся с myname .

22

$ ( «а [@ $ отн = сам]»)

Выбирает все элементы, соответствующие <a>, которые имеют значение атрибута rel, заканчивающееся self .

23

$ ( «а [@ HREF = domain.com]»)

Выбирает все элементы, соответствующие <a>, которые имеют значение href, содержащее domain.com.

24

$ ( «ли: даже»)

Выбирает все элементы, соответствующие <li>, которые имеют четное значение индекса.

25

$ ( «тр: нечетный»)

Выбирает все элементы, соответствующие <tr>, которые имеют нечетное значение индекса.

26

$ ( «Ли: первый»)

Выбирает первый элемент <li>.

27

$ ( «Ли: последняя»)

Выбирает последний элемент <li>.

28

$ ( «Ли: видимый»)

Выбирает все элементы, соответствующие <li>, которые являются видимыми.

29

$ ( «Ли: скрытый»)

Выбирает все элементы, соответствующие <li>, которые скрыты.

30

$ ( «: радио»)

Выбирает все переключатели в форме.

31

$ ( «: проверено»)

Выбирает все флажки в форме.

32

$ ( «: вход»)

Выбирает только элементы формы (ввод, выбор, текстовое поле, кнопка).

33

$ ( «: текст»)

Выбирает только текстовые элементы (input [type = text]).

34

$ ( «Ли: экв (2)»)

Выбирает третий элемент <li>.

35

$ ( «Ли: экв (4)»)

Выбирает пятый элемент <li>.

36

$ ( «Li: л (2)»)

Выбирает все элементы, соответствующие элементу <li> перед третьим; другими словами, первые два элемента <li>.

37

$ ( «р: л (3)»)

выбирает все элементы, соответствующие элементам <p> перед четвертым; другими словами, первые три элемента <p>.

38

$ ( «Li: GT (1)»)

Выбирает все элементы, соответствующие <li> после второго.

39

$ ( «р: GT (2)»)

Выбирает все элементы, соответствующие <p> после третьего.

40

$ ( «DIV / р»)

Выбирает все элементы, соответствующие элементу <p>, которые являются дочерними элементами элемента, соответствующего элементу <div>.

41

$ ( «ДИВ // код»)

Выбирает все элементы, соответствующие <code>, которые являются потомками элемента, соответствующего <div>.

42

$ ( «// р // а»)

Выбирает все элементы, соответствующие <a>, которые являются потомками элемента, соответствующего <p>

43

$ ( «Ли: первый-ребенок»)

Выбирает все элементы, соответствующие <li>, которые являются первыми дочерними элементами их родителей.

44

$ ( «ли: последний ребенок»)

Выбирает все элементы, соответствующие <li>, которые являются последними дочерними элементами их родителя.

45

$ ( «: родитель»)

Выбирает все элементы, которые являются родительскими для другого элемента, включая текст.

46

$ ( «Ли: содержит (второй)»)

Выбирает все элементы, соответствующие <li>, которые содержат второй текст.

$ ( ‘*’)

Этот селектор выбирает все элементы в документе.

$ («p> *»)

Этот селектор выбирает все элементы, которые являются дочерними для элемента абзаца.

$ ( «# Особая личность»)

Эта селекторная функция получает элемент с id = «specialID».

$ ( «specialClass»)

Этот селектор получает все элементы, которые имеют класс specialClass .

$ ( «ли: нет (.MyClass)»)

Выбирает все элементы, соответствующие <li>, которые не имеют class = «myclass».

$ ( «# specialID.specialClass»)

Этот селектор сопоставляет ссылки с идентификатором specialID и классом specialClass .

$ («p a.specialClass»)

Этот селектор сопоставляет ссылки с классом specialClass, объявленным в элементах <p>.

$ («ul li: first»)

Этот селектор получает только первый элемент <li> из <ul>.

$ («# контейнер p»)

Выбирает все элементы, соответствующие <p>, которые являются потомками элемента с идентификатором контейнера .

$ («li> ul»)

Выбирает все элементы, соответствующие <ul>, которые являются потомками элемента, соответствующего <li>

$ («сильный + их»)

Выбирает все элементы, совпадающие с <em>, которые следуют сразу за элементом-родителем, совпадающим с <strong>.

$ («p ~ ul»)

Выбирает все элементы, совпадающие с <ul>, которые следуют за родственным элементом, совпадающим с <p>.

$ («код, их, сильный»)

Выбирает все элементы, соответствующие <code> или <em> или <strong>.

$ («p strong, .myclass»)

Выбирает все элементы, соответствующие <strong>, которые являются потомками элемента, соответствующего <p>, а также все элементы, имеющие класс myclass .

$ ( «: пусто»)

Выбирает все элементы, которые не имеют дочерних элементов.

$ ( «р: пусто»)

Выбирает все элементы, соответствующие <p>, которые не имеют дочерних элементов.

$ ( «ДИВ [р]»)

Выбирает все элементы, соответствующие элементу <div>, которые содержат элемент, соответствующий элементу <p>.

$ ( «р [.MyClass]»)

Выбирает все элементы, соответствующие <p>, которые содержат элемент с классом myclass .

$ ( «а [@rel]»)

Выбирает все элементы, соответствующие <a>, которые имеют атрибут rel.

$ («input [@name = myname]»)

Выбирает все элементы, совпадающие с <input>, которые имеют значение имени, точно равное myname.

$ ( «вход [@ имя = MyName]»)

Выбирает все элементы, соответствующие <input>, которые имеют значение name, начинающееся с myname .

$ ( «а [@ $ отн = сам]»)

Выбирает все элементы, соответствующие <a>, которые имеют значение атрибута rel, заканчивающееся self .

$ ( «а [@ HREF = domain.com]»)

Выбирает все элементы, соответствующие <a>, которые имеют значение href, содержащее domain.com.

$ ( «ли: даже»)

Выбирает все элементы, соответствующие <li>, которые имеют четное значение индекса.

$ ( «тр: нечетный»)

Выбирает все элементы, соответствующие <tr>, которые имеют нечетное значение индекса.

$ ( «Ли: первый»)

Выбирает первый элемент <li>.

$ ( «Ли: последняя»)

Выбирает последний элемент <li>.

$ ( «Ли: видимый»)

Выбирает все элементы, соответствующие <li>, которые являются видимыми.

$ ( «Ли: скрытый»)

Выбирает все элементы, соответствующие <li>, которые скрыты.

$ ( «: радио»)

Выбирает все переключатели в форме.

$ ( «: проверено»)

Выбирает все флажки в форме.

$ ( «: вход»)

Выбирает только элементы формы (ввод, выбор, текстовое поле, кнопка).

$ ( «: текст»)

Выбирает только текстовые элементы (input [type = text]).

$ ( «Ли: экв (2)»)

Выбирает третий элемент <li>.

$ ( «Ли: экв (4)»)

Выбирает пятый элемент <li>.

$ ( «Li: л (2)»)

Выбирает все элементы, соответствующие элементу <li> перед третьим; другими словами, первые два элемента <li>.

$ ( «р: л (3)»)

выбирает все элементы, соответствующие элементам <p> перед четвертым; другими словами, первые три элемента <p>.

$ ( «Li: GT (1)»)

Выбирает все элементы, соответствующие <li> после второго.

$ ( «р: GT (2)»)

Выбирает все элементы, соответствующие <p> после третьего.

$ ( «DIV / р»)

Выбирает все элементы, соответствующие элементу <p>, которые являются дочерними элементами элемента, соответствующего элементу <div>.

$ ( «ДИВ // код»)

Выбирает все элементы, соответствующие <code>, которые являются потомками элемента, соответствующего <div>.

$ ( «// р // а»)

Выбирает все элементы, соответствующие <a>, которые являются потомками элемента, соответствующего <p>

$ ( «Ли: первый-ребенок»)

Выбирает все элементы, соответствующие <li>, которые являются первыми дочерними элементами их родителей.

$ ( «ли: последний ребенок»)

Выбирает все элементы, соответствующие <li>, которые являются последними дочерними элементами их родителя.

$ ( «: родитель»)

Выбирает все элементы, которые являются родительскими для другого элемента, включая текст.

$ ( «Ли: содержит (второй)»)

Выбирает все элементы, соответствующие <li>, которые содержат второй текст.

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

JQuery — Атрибуты

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

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

  • имя класса
  • название тэга
  • Я бы
  • HREF
  • заглавие
  • отн
  • ЦСИ

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

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

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

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

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

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

пример

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

Live Demo 

<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 тега изображения в правильном месте.

Live Demo 

<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 (классы) можно использовать для применения определенных таблиц стилей ко всем соответствующим элементам. Вы можете указать несколько классов, разделенных пробелом.

пример

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

Live Demo 

<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 (ключ, фн)

Установите единственное свойство в вычисляемое значение для всех соответствующих элементов.

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>, тогда будет выбран переданный параметр, если он вызывается в переключателе или переключателе все соответствующие флажки и радиобоксы будут проверены.

Установите объект ключ / значение в качестве свойств для всех соответствующих элементов.

Установите единственное свойство в вычисляемое значение для всех соответствующих элементов.

Удалить атрибут из каждого сопоставленного элемента.

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

Удаляет все или указанный класс (ы) из набора соответствующих элементов.

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

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

Установите HTML-содержание каждого соответствующего элемента.

Получить объединенное текстовое содержимое всех соответствующих элементов.

Установите текстовое содержимое всех соответствующих элементов.

Получить входное значение первого соответствующего элемента.

Задайте атрибут значения каждого соответствующего элемента, если он вызывается для <input>, но если он вызывается для <select> со переданным значением <option>, тогда будет выбран переданный параметр, если он вызывается в переключателе или переключателе все соответствующие флажки и радиобоксы будут проверены.

Примеры

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

Sr.No. Селектор и описание
1

$ ( «# MyId»). атр ( «обычай»)

Это вернет значение атрибута custom для первого элемента, совпадающего с идентификатором myID.

2

$ («img»). attr («alt», «Образец изображения»)

Это устанавливает атрибут alt всех изображений в новое значение «Образец изображения».

3

$ («input»). attr ({value: «», title: «Пожалуйста, введите значение»});

Устанавливает значение всех элементов <input> в пустую строку, а также устанавливает в качестве примера jQuery строку. Введите значение .

4

$ ( «а [HREF = https: //]») .attr ( «мишень», «_blank»)

Выбирает все ссылки с атрибутом href, начиная с https: //, и устанавливает для его целевого атрибута значение _blank .

5

$ ( «а»). removeAttr ( «цель»)

Это удалит целевой атрибут всех ссылок.

6

$ («form»). submit (function () {$ («: submit», this) .attr («disabled», «disabled»);});

Это изменит отключенный атрибут на значение «отключено» при нажатии кнопки «Отправить».

7

$ ( «р: последний»). hasClass ( «выбрано»)

Возвращает true, если последний тег <p> имеет связанный выбранный класс.

8

$ ( «р»). Текст ()

Возвращает строку, содержащую объединенное текстовое содержимое всех соответствующих элементов <p>.

9

$ («p»). text («<i> Hello World </ i>»)

Это установит «<I> Hello World </ I>» как текстовое содержимое соответствующих элементов <p>.

10

$ ( «р»). HTML ()

Это возвращает HTML-содержимое всех соответствующих абзацев.

11

$ («div»). html («Hello World»)

Это установит HTML-содержимое всех соответствующих <div> в Hello World .

12

$ ( «вход: Флажок: проверено»). Вал ()

Получить первое значение из отмеченного флажка.

13

$ ( «вход: радио [имя = бар]: проверено»). Вал ()

Получить первое значение из набора переключателей.

14

$ ( «кнопка»). Вал ( «Hello»)

Устанавливает атрибут значения каждого соответствующего элемента <button>.

15

$ ( «вход»). Вал ( «на»)

Это будет проверять все радио или флажок кнопку, значение которой «вкл».

16

$ ( «выбрать»). Val ( «Orange»)

Это выберет опцию Orange в выпадающем списке с опциями Orange, Mango и Banana.

17

$ («выберите»). val («апельсин», «манго»)

Это выберет параметры Orange и Mango в выпадающем списке с параметрами Orange, Mango и Banana.

$ ( «# MyId»). атр ( «обычай»)

Это вернет значение атрибута custom для первого элемента, совпадающего с идентификатором myID.

$ («img»). attr («alt», «Образец изображения»)

Это устанавливает атрибут alt всех изображений в новое значение «Образец изображения».

$ («input»). attr ({value: «», title: «Пожалуйста, введите значение»});

Устанавливает значение всех элементов <input> в пустую строку, а также устанавливает в качестве примера jQuery строку. Введите значение .

$ ( «а [HREF = https: //]») .attr ( «мишень», «_blank»)

Выбирает все ссылки с атрибутом href, начиная с https: //, и устанавливает для его целевого атрибута значение _blank .

$ ( «а»). removeAttr ( «цель»)

Это удалит целевой атрибут всех ссылок.

$ («form»). submit (function () {$ («: submit», this) .attr («disabled», «disabled»);});

Это изменит отключенный атрибут на значение «отключено» при нажатии кнопки «Отправить».

$ ( «р: последний»). hasClass ( «выбрано»)

Возвращает true, если последний тег <p> имеет связанный выбранный класс.

$ ( «р»). Текст ()

Возвращает строку, содержащую объединенное текстовое содержимое всех соответствующих элементов <p>.

$ («p»). text («<i> Hello World </ i>»)

Это установит «<I> Hello World </ I>» как текстовое содержимое соответствующих элементов <p>.

$ ( «р»). HTML ()

Это возвращает HTML-содержимое всех соответствующих абзацев.

$ («div»). html («Hello World»)

Это установит HTML-содержимое всех соответствующих <div> в Hello World .

$ ( «вход: Флажок: проверено»). Вал ()

Получить первое значение из отмеченного флажка.

$ ( «вход: радио [имя = бар]: проверено»). Вал ()

Получить первое значение из набора переключателей.

$ ( «кнопка»). Вал ( «Hello»)

Устанавливает атрибут значения каждого соответствующего элемента <button>.

$ ( «вход»). Вал ( «на»)

Это будет проверять все радио или флажок кнопку, значение которой «вкл».

$ ( «выбрать»). Val ( «Orange»)

Это выберет опцию Orange в выпадающем списке с опциями Orange, Mango и Banana.

$ («выберите»). val («апельсин», «манго»)

Это выберет параметры Orange и Mango в выпадающем списке с параметрами Orange, Mango и Banana.

JQuery — DOM Traversing

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

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

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

Live Demo 

<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) и так далее.

Над каждым списком есть свой собственный индекс, и его можно найти непосредственно с помощью метода eq (index), как показано в примере ниже.

Каждый дочерний элемент начинает свой индекс с нуля, поэтому к элементу списка 2 можно получить доступ с помощью $ («li»). Eq (1) и так далее.

пример

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

Live Demo 

<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) можно использовать для фильтрации всех элементов из набора совпадающих элементов, которые не соответствуют указанным селекторам. Селектор может быть написан с использованием любого синтаксиса селектора.

пример

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

Live Demo 

<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> —

Live Demo 

<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>

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

Методы JOM-фильтра DOM

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

Sr.No. Метод и описание
1 экв (индекс)

Сократите набор подходящих элементов до одного элемента.

2 фильтр (селектор)

Удаляет все элементы из набора совпадающих элементов, которые не соответствуют указанным селекторам.

3 фильтр (фн)

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

4 есть (селектор)

Проверяет текущий выбор по выражению и возвращает true, если хотя бы один элемент выбора соответствует данному селектору.

5 карта (обратный звонок)

Переведите набор элементов в объекте jQuery в другой набор значений в массиве jQuery (который может содержать или не содержать элементы).

6 нет (селектор)

Удаляет элементы, соответствующие указанному селектору, из набора соответствующих элементов.

7 ломтик (начало, [конец])

Выбирает подмножество подходящих элементов.

Сократите набор подходящих элементов до одного элемента.

Удаляет все элементы из набора совпадающих элементов, которые не соответствуют указанным селекторам.

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

Проверяет текущий выбор по выражению и возвращает true, если хотя бы один элемент выбора соответствует данному селектору.

Переведите набор элементов в объекте jQuery в другой набор значений в массиве jQuery (который может содержать или не содержать элементы).

Удаляет элементы, соответствующие указанному селектору, из набора соответствующих элементов.

Выбирает подмножество подходящих элементов.

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

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

Sr.No. Методы и описание
1 добавить (селектор)

Добавляет больше элементов, соответствующих данному селектору, к набору соответствующих элементов.

2 andSelf ()

Добавить предыдущий выбор к текущему.

3 дети ([селектор])

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

4 ближайший (селектор)

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

5 содержание ()

Найдите все дочерние узлы внутри совпадающих элементов (включая текстовые узлы) или документа содержимого, если элемент является iframe.

6 конец( )

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

7 найти (селектор)

Поиск элементов-потомков, соответствующих указанным селекторам.

8 следующий ([селектор])

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

9 nextAll ([селектор])

Найти все родственные элементы после текущего элемента.

10 offsetParent ()

Возвращает коллекцию jQuery с позиционированным родителем первого сопоставленного элемента.

11 родитель ([селектор])

Получить прямой родительский элемент. Если вызывается для набора элементов, parent возвращает набор их уникальных прямых родительских элементов.

12 родители ([селектор])

Получите набор элементов, содержащий уникальных предков соответствующего набора элементов (кроме корневого элемента).

13 предыдущая ([селектор])

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

14 prevAll ([селектор])

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

15 братья и сестры ([селектор])

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

Добавляет больше элементов, соответствующих данному селектору, к набору соответствующих элементов.

Добавить предыдущий выбор к текущему.

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

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

Найдите все дочерние узлы внутри совпадающих элементов (включая текстовые узлы) или документа содержимого, если элемент является iframe.

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

Поиск элементов-потомков, соответствующих указанным селекторам.

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

Найти все родственные элементы после текущего элемента.

Возвращает коллекцию jQuery с позиционированным родителем первого сопоставленного элемента.

Получить прямой родительский элемент. Если вызывается для набора элементов, parent возвращает набор их уникальных прямых родительских элементов.

Получите набор элементов, содержащий уникальных предков соответствующего набора элементов (кроме корневого элемента).

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

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

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

jQuery — методы выбора CSS

Библиотека jQuery поддерживает почти все селекторы, включенные в спецификации каскадных таблиц стилей (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 может быть строкой или целым числом.

пример

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

Live Demo 

<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 как его значение, как описано выше.

пример

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

Live Demo 

<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) можно использовать для установки ширины и высоты соответственно любого элемента.

пример

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

Live Demo 

<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>

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

Методы JQuery CSS

В следующей таблице перечислены все методы, которые вы можете использовать для игры со свойствами 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 ([margin])

Получите внешнюю ширину (включая границы и отступы по умолчанию) для первого соответствующего элемента.

12 позиция( )

Получает верхнюю и левую позиции элемента относительно его родительского смещения.

13 scrollLeft (val)

Когда передается значение, левое смещение прокрутки устанавливается на это значение для всех соответствующих элементов.

14 scrollLeft ()

Получает смещение прокрутки влево первого сопоставленного элемента.

15 scrollTop (val)

Когда передается значение, верхнее смещение прокрутки устанавливается на это значение для всех соответствующих элементов.

16 scrollTop ()

Получает верхнее смещение прокрутки первого сопоставленного элемента.

17 ширина (val)

Установите ширину CSS каждого соответствующего элемента.

18 ширина ()

Получить текущее значение в пикселях, ширину первого сопоставленного элемента.

Вернуть свойство стиля для первого соответствующего элемента.

Установите для одного свойства стиля значение для всех совпадающих элементов.

Установите объект ключ / значение в качестве свойств стиля для всех соответствующих элементов.

Установите высоту CSS каждого соответствующего элемента.

Получить текущее значение в пикселях, высоту первого сопоставленного элемента.

Получает внутреннюю высоту (исключая границу и включает отступы) для первого сопоставленного элемента.

Получает внутреннюю ширину (исключая границу и включает отступы) для первого сопоставленного элемента.

Получить текущее смещение первого сопоставленного элемента в пикселях относительно документа.

Возвращает коллекцию jQuery с позиционированным родителем первого сопоставленного элемента.

Получает внешнюю высоту (по умолчанию включает границы и отступы) для первого сопоставленного элемента.

Получите внешнюю ширину (включая границы и отступы по умолчанию) для первого соответствующего элемента.

Получает верхнюю и левую позиции элемента относительно его родительского смещения.

Когда передается значение, левое смещение прокрутки устанавливается на это значение для всех соответствующих элементов.

Получает смещение прокрутки влево первого сопоставленного элемента.

Когда передается значение, верхнее смещение прокрутки устанавливается на это значение для всех соответствующих элементов.

Получает верхнее смещение прокрутки первого сопоставленного элемента.

Установите ширину CSS каждого соответствующего элемента.

Получить текущее значение в пикселях, ширину первого сопоставленного элемента.

JQuery — DOM Manipulation

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

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

Контент Манипулирование

Метод html () получает содержимое html (innerHTML) первого сопоставленного элемента.

Вот синтаксис для метода — 

selector .html( )

пример

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

Live Demo 

<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>» —

Live Demo 

<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, чтобы отфильтровать набор удаляемых элементов.

пример

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

Live Demo 

<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 ( метод ) вставляет содержимое перед каждым из сопоставленных элементов.

Вот синтаксис для метода — 

selector .after( content )

or

selector .before( content )

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

пример

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

Live Demo 

<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 Elements и выберите клонов.

7 пусто ()

Удалите все дочерние узлы из набора соответствующих элементов.

8 html (val)

Установите HTML-содержание каждого соответствующего элемента.

9 html ()

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

10 insertAfter (селектор)

Вставьте все соответствующие элементы за другим, указанным набором элементов.

11 insertBefore (селектор)

Вставьте все соответствующие элементы перед другим, указанным набором элементов.

12 prepend (содержание)

Добавлять содержимое внутрь каждого соответствующего элемента.

13 prependTo (селектор)

Добавить все сопоставленные элементы к другому указанному набору элементов.

14 удалить (expr)

Удаляет все подходящие элементы из 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.

Вставьте содержимое после каждого из соответствующих элементов.

Добавить содержимое внутрь каждого соответствующего элемента.

Добавить все подходящие элементы к другому указанному набору элементов.

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

Клон соответствует элементам DOM и всем их обработчикам событий и выбирает клонов.

Клон соответствует DOM Elements и выберите клонов.

Удалите все дочерние узлы из набора соответствующих элементов.

Установите HTML-содержание каждого соответствующего элемента.

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

Вставьте все соответствующие элементы за другим, указанным набором элементов.

Вставьте все соответствующие элементы перед другим, указанным набором элементов.

Добавлять содержимое внутрь каждого соответствующего элемента.

Добавить все сопоставленные элементы к другому указанному набору элементов.

Удаляет все подходящие элементы из DOM.

Заменяет элементы, сопоставленные указанным селектором, с сопоставленными элементами.

Заменяет все соответствующие элементы указанными элементами HTML или DOM.

Установите текстовое содержимое всех соответствующих элементов.

Получить объединенное текстовое содержимое всех соответствующих элементов.

Оберните каждый соответствующий элемент указанным элементом.

Оберните каждый соответствующий элемент указанным HTML-содержимым.

Оберните все элементы в соответствующем наборе в один элемент-обертку.

Оберните все элементы в соответствующем наборе в один элемент-обертку.

Оберните внутреннее дочернее содержимое каждого сопоставленного элемента (включая текстовые узлы) элементом DOM.

Оберните внутреннее дочернее содержимое каждого сопоставленного элемента (включая текстовые узлы) структурой HTML.

jQuery — обработка событий

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

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

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

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

Обязательные обработчики событий

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

Live Demo 

<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>

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

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

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

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

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

  • eventType — Строка, содержащая тип события JavaScript, например, click или submit. Обратитесь к следующему разделу для получения полного списка типов событий.

  • eventData — это необязательный параметр, представляющий собой карту данных, которые будут переданы в обработчик событий.

  • handler — функция, которая выполняется каждый раз, когда событие инициируется.

eventType — Строка, содержащая тип события JavaScript, например, click или submit. Обратитесь к следующему разделу для получения полного списка типов событий.

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

handler — функция, которая выполняется каждый раз, когда событие инициируется.

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

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

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

selector .unbind(eventType, handler)

or 

selector .unbind(eventType)

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

  • eventType — Строка, содержащая тип события JavaScript, например, click или submit. Обратитесь к следующему разделу для получения полного списка типов событий.

  • handler — если указан, определяет конкретного слушателя, которого нужно удалить.

eventType — Строка, содержащая тип события JavaScript, например, click или submit. Обратитесь к следующему разделу для получения полного списка типов событий.

handler — если указан, определяет конкретного слушателя, которого нужно удалить.

Типы событий

Sr.No. Тип события и описание
1

пятно

Происходит, когда элемент теряет фокус.

2

менять

Происходит, когда элемент изменяется.

3

щелчок

Происходит при щелчке мышью.

4

DblClick

Происходит при двойном щелчке мыши.

5

ошибка

Происходит при ошибке загрузки или выгрузки и т. Д.

6

фокус

Происходит, когда элемент получает фокус.

7

KeyDown

Происходит при нажатии клавиши.

8

нажатие клавиши

Происходит при нажатии и отпускании клавиши.

9

KeyUp

Происходит, когда ключ отпущен.

10

нагрузка

Происходит, когда документ загружен.

11

MouseDown

Происходит при нажатии кнопки мыши.

12

MouseEnter

Происходит, когда мышь входит в область элемента.

13

MouseLeave

Происходит, когда мышь покидает область элемента.

14

MouseMove

Происходит при перемещении указателя мыши.

15

MouseOut

Происходит, когда указатель мыши выходит за пределы элемента.

16

Mouseover

Происходит, когда указатель мыши перемещается над элементом.

17

MouseUp

Происходит при отпускании кнопки мыши.

18

изменить размер

Происходит при изменении размера окна.

19

свиток

Происходит, когда окно прокручивается.

20

Выбрать

Происходит при выделении текста.

21

Отправить

Происходит при отправке формы.

22

разгружать

Происходит, когда документы выгружены.

пятно

Происходит, когда элемент теряет фокус.

менять

Происходит, когда элемент изменяется.

щелчок

Происходит при щелчке мышью.

DblClick

Происходит при двойном щелчке мыши.

ошибка

Происходит при ошибке загрузки или выгрузки и т. Д.

фокус

Происходит, когда элемент получает фокус.

KeyDown

Происходит при нажатии клавиши.

нажатие клавиши

Происходит при нажатии и отпускании клавиши.

KeyUp

Происходит, когда ключ отпущен.

нагрузка

Происходит, когда документ загружен.

MouseDown

Происходит при нажатии кнопки мыши.

MouseEnter

Происходит, когда мышь входит в область элемента.

MouseLeave

Происходит, когда мышь покидает область элемента.

MouseMove

Происходит при перемещении указателя мыши.

MouseOut

Происходит, когда указатель мыши выходит за пределы элемента.

Mouseover

Происходит, когда указатель мыши перемещается над элементом.

MouseUp

Происходит при отпускании кнопки мыши.

изменить размер

Происходит при изменении размера окна.

свиток

Происходит, когда окно прокручивается.

Выбрать

Происходит при выделении текста.

Отправить

Происходит при отправке формы.

разгружать

Происходит, когда документы выгружены.

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

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

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

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

Sr.No. Описание недвижимости
1

клавишу Alt

Установите в значение true, если клавиша Alt была нажата при запуске события, в противном случае — значение false. Клавиша Alt помечена как Option на большинстве клавиатур Mac.

2

ctrlKey

Установите в значение true, если клавиша Ctrl была нажата, когда событие было инициировано, в противном случае — значение false.

3

данные

Значение, если оно есть, передается в качестве второго параметра команде bind () при установке обработчика.

4

ключевой код

Для событий keyup и keydown это возвращает нажатую клавишу.

5

metaKey

Установите в значение true, если мета-клавиша была нажата при запуске события, в противном случае — значение false. Мета-клавиша — это клавиша Ctrl на ПК и клавиша Command на Mac.

6

pageX

Для событий мыши указывает горизонтальную координату события относительно источника страницы.

7

Пейджи

Для событий мыши указывает вертикальную координату события относительно источника страницы.

8

relatedTarget

Для некоторых событий мыши, идентифицирует элемент, который курсор оставил или ввел, когда событие было запущено.

9

ScreenX

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

10

Screeny

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

11

shiftKey

Установите в значение true, если клавиша Shift была нажата при запуске события, в противном случае — значение false.

12

цель

Определяет элемент, для которого было инициировано событие.

13

TIMESTAMP

Отметка времени (в миллисекундах), когда событие было создано.

14

тип

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

15

который

Для событий клавиатуры указывает числовой код клавиши, вызвавшей событие, а для событий мыши — какая кнопка была нажата (1 для левой стороны, 2 для средней, 3 для правой).

клавишу Alt

Установите в значение true, если клавиша Alt была нажата при запуске события, в противном случае — значение false. Клавиша Alt помечена как Option на большинстве клавиатур Mac.

ctrlKey

Установите в значение true, если клавиша Ctrl была нажата, когда событие было инициировано, в противном случае — значение false.

данные

Значение, если оно есть, передается в качестве второго параметра команде bind () при установке обработчика.

ключевой код

Для событий keyup и keydown это возвращает нажатую клавишу.

metaKey

Установите в значение true, если мета-клавиша была нажата при запуске события, в противном случае — значение false. Мета-клавиша — это клавиша Ctrl на ПК и клавиша Command на Mac.

pageX

Для событий мыши указывает горизонтальную координату события относительно источника страницы.

Пейджи

Для событий мыши указывает вертикальную координату события относительно источника страницы.

relatedTarget

Для некоторых событий мыши, идентифицирует элемент, который курсор оставил или ввел, когда событие было запущено.

ScreenX

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

Screeny

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

shiftKey

Установите в значение true, если клавиша Shift была нажата при запуске события, в противном случае — значение false.

цель

Определяет элемент, для которого было инициировано событие.

TIMESTAMP

Отметка времени (в миллисекундах), когда событие было создано.

тип

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

который

Для событий клавиатуры указывает числовой код клавиши, вызвавшей событие, а для событий мыши — какая кнопка была нажата (1 для левой стороны, 2 для средней, 3 для правой).

Live Demo 

<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>

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

Методы мероприятия

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

Sr.No. Метод и описание
1 preventDefault ()

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

2 isDefaultPrevented ()

Возвращает, был ли когда-либо вызван event.preventDefault () для этого объекта события.

3 stopPropagation ()

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

4 isPropagationStopped ()

Возвращает, был ли когда-либо вызван event.stopPropagation () для этого объекта события.

5 stopImmediatePropagation ()

Останавливает выполнение остальных обработчиков.

6 isImmediatePropagationStopped ()

Возвращает, был ли когда-либо вызван event.stopImmediatePropagation () для этого объекта события.

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

Возвращает, был ли когда-либо вызван event.preventDefault () для этого объекта события.

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

Возвращает, был ли когда-либо вызван event.stopPropagation () для этого объекта события.

Останавливает выполнение остальных обработчиков.

Возвращает, был ли когда-либо вызван event.stopImmediatePropagation () для этого объекта события.

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

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

Sr.No. Метод и описание
1 связать (тип, [данные], FN)

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

2 выкл (события [, селектор] [, обработчик (eventObject)])

Это противоположно прямому эфиру, оно удаляет связанное живое событие.

3 зависать

Имитирует зависание, например, при перемещении мыши и выключении объекта.

4 вкл (события [, селектор] [, данные], обработчик)

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

5 один (тип, [данные], фн)

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

6 готов (фн)

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

7 триггер (событие, [данные])

Инициировать событие на каждый соответствующий элемент.

8 triggerHandler (событие, [данные])

Запускает все связанные обработчики событий для элемента.

9 unbind ([тип], [фн])

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

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

Это противоположно прямому эфиру, оно удаляет связанное живое событие.

Имитирует зависание, например, при перемещении мыши и выключении объекта.

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

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

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

Инициировать событие на каждый соответствующий элемент.

Запускает все связанные обработчики событий для элемента.

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

Методы Помощника по Событию

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

Методы запуска

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

$("p").blur();

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

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

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

Sr.No. Метод и описание
1

размытие ()

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

2

размытие (фн)

Привязать функцию к событию размытия каждого соответствующего элемента.

3

менять( )

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

4

изменить (фн)

Связывает функцию с событием изменения каждого соответствующего элемента.

5

нажмите ()

Инициирует событие щелчка для каждого соответствующего элемента.

6

нажмите (FN)

Связывает функцию с событием щелчка каждого соответствующего элемента.

7

dblclick ()

Инициирует событие dblclick каждого соответствующего элемента.

8

dblclick (фн)

Связывает функцию с событием dblclick каждого соответствующего элемента.

9

ошибка( )

Запускает событие ошибки каждого соответствующего элемента.

10

ошибка (фн)

Привязывает функцию к событию ошибки каждого соответствующего элемента.

11

фокус ()

Запускает событие фокуса каждого соответствующего элемента.

12

фокус (фн)

Связывает функцию с событием фокуса каждого соответствующего элемента.

13

keydown ()

Инициирует событие keydown каждого соответствующего элемента.

14

Keydown (FN)

Привязать функцию к событию keydown каждого соответствующего элемента.

15

нажатие клавиши( )

Инициирует событие нажатия клавиши каждого соответствующего элемента.

16

нажатие клавиши (фн)

Привязывает функцию к событию нажатия клавиши каждого соответствующего элемента.

17

keyup ()

Запускает событие keyup каждого соответствующего элемента.

18

Keyup (FN)

Привязать функцию к событию keyup каждого соответствующего элемента.

19

нагрузка (фн)

Привязывает функцию к событию загрузки каждого соответствующего элемента.

20

mousedown (фн)

Связывает функцию с событием mousedown каждого соответствующего элемента.

21

мышиный центр (фн)

Привязать функцию к событию mouseenter каждого соответствующего элемента.

22

отпуск мышью (фн)

Привязать функцию к событию mouseleave каждого соответствующего элемента.

23

перемещение мыши (фн)

Привязать функцию к событию mousemove каждого соответствующего элемента.

24

мышка (фн)

Привязать функцию к событию mouseout каждого соответствующего элемента.

25

наведение мыши (фн)

Привязать функцию к событию mouseover каждого соответствующего элемента.

26

mouseup (fn)

Привязать функцию к событию mouseup каждого соответствующего элемента.

27

изменить размер (FN)

Привязать функцию к событию изменения размера каждого соответствующего элемента.

28

свиток (фн)

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

29

Выбрать( )

Инициируйте событие выбора каждого соответствующего элемента.

30

выберите (фн)

Привязать функцию к событию выбора каждого соответствующего элемента.

31

Отправить( )

Инициируйте событие отправки каждого соответствующего элемента.

32

представить (фн)

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

33

выгрузить (фн)

Связывает функцию с событием unload каждого соответствующего элемента.

размытие ()

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

размытие (фн)

Привязать функцию к событию размытия каждого соответствующего элемента.

менять( )

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

изменить (фн)

Связывает функцию с событием изменения каждого соответствующего элемента.

нажмите ()

Инициирует событие щелчка для каждого соответствующего элемента.

нажмите (FN)

Связывает функцию с событием щелчка каждого соответствующего элемента.

dblclick ()

Инициирует событие dblclick каждого соответствующего элемента.

dblclick (фн)

Связывает функцию с событием dblclick каждого соответствующего элемента.

ошибка( )

Запускает событие ошибки каждого соответствующего элемента.

ошибка (фн)

Привязывает функцию к событию ошибки каждого соответствующего элемента.

фокус ()

Запускает событие фокуса каждого соответствующего элемента.

фокус (фн)

Связывает функцию с событием фокуса каждого соответствующего элемента.

keydown ()

Инициирует событие keydown каждого соответствующего элемента.

Keydown (FN)

Привязать функцию к событию keydown каждого соответствующего элемента.

нажатие клавиши( )

Инициирует событие нажатия клавиши каждого соответствующего элемента.

нажатие клавиши (фн)

Привязывает функцию к событию нажатия клавиши каждого соответствующего элемента.

keyup ()

Запускает событие keyup каждого соответствующего элемента.

Keyup (FN)

Привязать функцию к событию keyup каждого соответствующего элемента.

нагрузка (фн)

Привязывает функцию к событию загрузки каждого соответствующего элемента.

mousedown (фн)

Связывает функцию с событием mousedown каждого соответствующего элемента.

мышиный центр (фн)

Привязать функцию к событию mouseenter каждого соответствующего элемента.

отпуск мышью (фн)

Привязать функцию к событию mouseleave каждого соответствующего элемента.

перемещение мыши (фн)

Привязать функцию к событию mousemove каждого соответствующего элемента.

мышка (фн)

Привязать функцию к событию mouseout каждого соответствующего элемента.

наведение мыши (фн)

Привязать функцию к событию mouseover каждого соответствующего элемента.

mouseup (fn)

Привязать функцию к событию mouseup каждого соответствующего элемента.

изменить размер (FN)

Привязать функцию к событию изменения размера каждого соответствующего элемента.

свиток (фн)

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

Выбрать( )

Инициируйте событие выбора каждого соответствующего элемента.

выберите (фн)

Привязать функцию к событию выбора каждого соответствующего элемента.

Отправить( )

Инициируйте событие отправки каждого соответствующего элемента.

представить (фн)

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

выгрузить (фн)

Связывает функцию с событием unload каждого соответствующего элемента.

JQuery — Ajax

AJAX — это аббревиатура, обозначающая асинхронный 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 — функция обратного вызова, вызываемая после того, как данные ответа были загружены в элементы соответствующего набора. Первый параметр, передаваемый этой функции, представляет собой текст ответа, полученный от сервера, а второй параметр — код состояния.

URL — URL-адрес ресурса на стороне сервера, на который отправляется запрос. Это может быть скрипт CGI, ASP, JSP или PHP, который генерирует данные динамически или из базы данных.

data — этот необязательный параметр представляет объект, свойства которого сериализуются в правильно закодированные параметры для передачи в запрос. Если указано, запрос выполняется методом POST . Если опущен, используется метод GET .

callback — функция обратного вызова, вызываемая после того, как данные ответа были загружены в элементы соответствующего набора. Первый параметр, передаваемый этой функции, представляет собой текст ответа, полученный от сервера, а второй параметр — код состояния.

пример

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

Live Demo 

<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 против вашего запроса. Служебная функция JQuery getJSON () анализирует возвращенную строку JSON и делает полученную строку доступной для функции обратного вызова в качестве первого параметра для выполнения дальнейших действий.

Синтаксис

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

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

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

  • URL — URL-адрес ресурса на стороне сервера, с которым связался метод GET.

  • data — объект, свойства которого служат парами имя / значение, используемыми для создания строки запроса, которая будет добавлена ​​к URL-адресу, или предварительно отформатированной и закодированной строки запроса.

  • обратный вызов — функция вызывается после завершения запроса. Значение данных, полученное в результате переваривания тела ответа в виде строки JSON, передается в качестве первого параметра этому обратному вызову, а состояние — в качестве второго.

URL — URL-адрес ресурса на стороне сервера, с которым связался метод GET.

data — объект, свойства которого служат парами имя / значение, используемыми для создания строки запроса, которая будет добавлена ​​к URL-адресу, или предварительно отформатированной и закодированной строки запроса.

обратный вызов — функция вызывается после завершения запроса. Значение данных, полученное в результате переваривания тела ответа в виде строки JSON, передается в качестве первого параметра этому обратному вызову, а состояние — в качестве второго.

пример

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

Live Demo 

<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. Предполагается, что наш файл result.json имеет следующее содержимое в формате json — 

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

При нажатии на данную кнопку загружается файл result.json.

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

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

пример

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

Live Demo 

<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, [data], [callback], [type])

Загрузите удаленную страницу с помощью HTTP-запроса GET.

4 jQuery.getJSON (url, [data], [callback])

Загрузите данные JSON с помощью HTTP-запроса GET.

5 jQuery.getScript (url, [callback])

Загружает и выполняет файл JavaScript, используя HTTP-запрос GET.

6 jQuery.post (url, [data], [callback], [type])

Загрузите удаленную страницу с помощью HTTP-запроса POST.

7 загрузить (URL, [данные], [обратный вызов])

Загрузите HTML из удаленного файла и вставьте его в DOM.

8 serialize ()

Сериализует набор входных элементов в строку данных.

9 serializeArray ()

Сериализует все формы и элементы формы, такие как метод .serialize (), но возвращает структуру данных JSON для работы с вами.

Загрузите удаленную страницу с помощью HTTP-запроса.

Настройте глобальные параметры для запросов AJAX.

Загрузите удаленную страницу с помощью HTTP-запроса GET.

Загрузите данные JSON с помощью HTTP-запроса GET.

Загружает и выполняет файл JavaScript, используя HTTP-запрос GET.

Загрузите удаленную страницу с помощью HTTP-запроса POST.

Загрузите HTML из удаленного файла и вставьте его в DOM.

Сериализует набор входных элементов в строку данных.

Сериализует все формы и элементы формы, такие как метод .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 завершается успешно.

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

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

Присоедините функцию, которая будет выполняться всякий раз, когда AJAX-запрос не выполняется.

Присоедините функцию, которая должна быть выполнена перед отправкой AJAX-запроса.

Присоедините функцию, которая будет выполняться всякий раз, когда все запросы AJAX закончились.

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

jQuery — Эффекты

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

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

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

Синтаксис

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

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

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

  • скорость — строка, представляющая одну из трех предопределенных скоростей («медленная», «нормальная» или «быстрая») или количество миллисекунд для запуска анимации (например, 1000).

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

скорость — строка, представляющая одну из трех предопределенных скоростей («медленная», «нормальная» или «быстрая») или количество миллисекунд для запуска анимации (например, 1000).

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

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

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

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

  • скорость — строка, представляющая одну из трех предопределенных скоростей («медленная», «нормальная» или «быстрая») или количество миллисекунд для запуска анимации (например, 1000).

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

скорость — строка, представляющая одну из трех предопределенных скоростей («медленная», «нормальная» или «быстрая») или количество миллисекунд для запуска анимации (например, 1000).

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

пример

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

Live Demo 

<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]);

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

  • скорость — строка, представляющая одну из трех предопределенных скоростей («медленная», «нормальная» или «быстрая») или количество миллисекунд для запуска анимации (например, 1000).

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

скорость — строка, представляющая одну из трех предопределенных скоростей («медленная», «нормальная» или «быстрая») или количество миллисекунд для запуска анимации (например, 1000).

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

пример

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

Live Demo 

<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-эффекта

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

Sr.No. Методы и описание
1 одушевленный (params, [длительность, ослабление, обратный вызов])

Функция для создания пользовательских анимаций.

2 fadeIn (скорость, [обратный вызов])

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

3 fadeOut (скорость, [обратный вызов])

Исчезните все подходящие элементы, установив их непрозрачность на 0, затем установив отображение на «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

Глобально отключите все анимации.

Функция для создания пользовательских анимаций.

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

Исчезните все подходящие элементы, установив их непрозрачность на 0, затем установив отображение на «none» и запустив дополнительный обратный вызов после завершения.

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

Скрывает каждый набор подходящих элементов, если они показаны.

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

Отображает каждый набор подходящих элементов, если они скрыты.

Показать все соответствующие элементы, используя изящную анимацию и запустив необязательный обратный вызов после завершения.

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

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

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

Останавливает все запущенные анимации на всех указанных элементах.

Переключить отображение каждого набора подходящих элементов.

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

Переключить отображение каждого набора подходящих элементов на основе переключателя (true показывает все элементы, false скрывает все элементы).

Глобально отключите все анимации.

Пользовательский интерфейс на основе эффектов

Чтобы использовать эти эффекты, вы можете либо загрузить последнюю версию jQuery UI Library jquery-ui-1.11.4.custom.zip из jQuery UI Library, либо использовать 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 Перечислить

Переносит контур элемента на другой.

Ослепляет элемент или показывает его, ослепляя.

Отскакивает элемент по вертикали или горизонтали n раз.

Зажимает или выключает элемент, вертикально или горизонтально.

Отбрасывает элемент или показывает его, вставляя.

Взрывает элемент на несколько частей.

Складывает элемент, как лист бумаги.

Выделяет фон заданным цветом.

Анимация масштабирования и затухания создает эффект затяжки.

Пульсирует непрозрачность элемента несколько раз.

Уменьшить или увеличить элемент в процентном соотношении.

Встряхивает элемент вертикально или горизонтально n раз.

Изменить размер элемента до указанной ширины и высоты.

Выдвигает элемент из области просмотра.

Переносит контур элемента на другой.

JQuery — Взаимодействия

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

Sr.No. Взаимодействие и описание
1 Перетащить в состоянии

Включите возможность перетаскивания любого элемента DOM.

2 Падение в состоянии

Разрешить любой элемент DOM, чтобы быть в состоянии падения.

3 Изменить размер

Включите любой элемент DOM для изменения размера.

4 Выберите способ

Разрешить выбор элемента DOM (или группы элементов).

5 Сортировать в состоянии

Разрешить сортировку группы элементов DOM.

Включите возможность перетаскивания любого элемента DOM.

Разрешить любой элемент DOM, чтобы быть в состоянии падения.

Включите любой элемент DOM для изменения размера.

Разрешить выбор элемента DOM (или группы элементов).

Разрешить сортировку группы элементов DOM.

JQuery — Виджеты

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

Sr.No. Виджеты и описание
1 аккордеон

Позволяет свернуть контент, разбитый на логические разделы.

2 Автозаполнение

Включите для предоставления предложений при вводе в поле.

3 кнопка

Кнопка является вводом типа submit и якоря.

4 Datepicker

Это открыть интерактивный календарь в небольшом оверлее.

5 диалог

Диалоговые окна являются одним из приятных способов представления информации на HTML-странице.

6 Меню

Меню показывает список пунктов.

7 Индикатор

Он показывает информацию о прогрессе.

8 Выберите меню

Включить стиль, способный выбрать элемент / элементы.

9 ползунок

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

10 волчок

Это обеспечивает быстрый способ выбрать одно значение из набора.

11 Вкладки

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

12 подсказка

Это предоставляет советы для пользователей.

Позволяет свернуть контент, разбитый на логические разделы.

Включите для предоставления предложений при вводе в поле.

Кнопка является вводом типа submit и якоря.

Это открыть интерактивный календарь в небольшом оверлее.

Диалоговые окна являются одним из приятных способов представления информации на HTML-странице.

Меню показывает список пунктов.

Он показывает информацию о прогрессе.

Включить стиль, способный выбрать элемент / элементы.

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

Это обеспечивает быстрый способ выбрать одно значение из набора.

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

Это предоставляет советы для пользователей.

JQuery — Тематика

Jquery имеет две разные стили оформления, такие как A и B. Каждый из них имеет разные цвета для кнопок, панелей, блоков контента и т. Д.

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

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

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

Live Demo 

<!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>

Это должно привести к следующему результату —

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

Live Demo 

<!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 — Утилиты

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 () используется для возврата функции, которая всегда будет выполняться в предоставленной области видимости, то есть устанавливает значение этого параметра внутри переданной функции для второго аргумента 

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 () используется для возврата true, если элемент DOM, предоставленный вторым аргументом, является потомком элемента DOM, предоставленного первым аргументом, является ли он прямым потомком или вложенным более глубоко. 

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

$ .Data ()

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

Live Demo 

<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

Live Demo 

<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 () используется для распознавания окна

Live Demo 

<!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 () используется для выполнения следующей функции в очереди

Live Demo 

<!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>

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

124
Share: