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 —

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>