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 .