[Интеллект-карта] Front-end разработка на JavaScript — консолидация вашей системы знаний по JavaScript

JavaScript
[Интеллект-карта] Front-end разработка на JavaScript — консолидация вашей системы знаний по JavaScript

Базовый синтаксис JavaScript

var a = [1, 2, 5];
for(var k in a){
    console.log(k);   // k 为当前元素的下标
}
for(var m of a){
    console.log(m);   // m 为当前元素的值
}
VM215:3 0
VM215:3 1
VM215:3 2
VM215:6 1
VM215:6 2
VM215:6 5

объявление переменной

  • varОбъявите переменную, которой можно присвоить начальное значение.
  • letОбъявите локальную переменную блочной области, которой можно присвоить начальное значение.
  • constОбъявите именованную константу блочной области, доступную только для чтения.
  • Имя переменной также называют «идентификатором»,必须以字母、下划线（_）或者美元符号（$）开头，并且区分大小写.
  • Если переменной не присвоено начальное значение, значение по умолчанию равноundefined
  • Если переменная не объявлена ​​и не используется напрямую, выброситьReferenceErrorошибка
  • Когда значение переменнойundefined, булевское окружение рассматривается какfalse
  • Когда значение переменнойnull, булевское окружение рассматривается какfalse

тип данных

  • Логические, истинные и ложные
  • null чувствителен к регистру
  • undefined пустой тип, значение переменной, когда оно не определено
  • Числовой тип
  • Строковый тип строки
  • Символ (новый в ES6) представляет собой уникальные и неизменяемые данные.

буквальный

  • Литералы используются, чтобы указать, как выразить значение
  • При присвоении переменной правая сторона является литералом
  • литерал массива
  • логический литерал
  • литерал числа с плавающей запятой
  • литерал объекта
  • целочисленный литерал
  • Обычный литерал
  • строковый литерал

глобальная переменная

Код:

// ES5

var a = 'web';

window.a; // 'web'

// ES6

let b = 'web';

window.b; // undefined

Примечания

Код:

// 单行注释

/*

多行注释

*/

переменная область видимости

  • Глобальные переменные: то есть объявлены вне функции, и к ним можно получить доступ везде в текущем документе.
  • Локальный обход: то есть объявленный внутри функции, доступный только внутри текущей функции.

Код:

// ES5及之前

console.log(a); // undefined

var a = 1;

console.log(a); // 1

// ES6开始

console.log(b); // Uncaught ReferenceError: b1 is not defined

let b = 2;

console.log(b); // 2

Есть два способа объявить функцию

Код:

// 函数声明

f(); // 'web'

function(){

console.log('web');

};

// 函数表达式

g(); // Uncaught TypeError: g is not a function

var g = function(){ // 换成 let 声明也一样

console.log('web');

}

постоянный

  • Используйте const для объявления константы только для чтения
  • Переменные, объявленные const, не могут напрямую изменять значение, но для объектов и массивов они не защищены и могут быть изменены.
  1. полныйjavascriptРеализация состоит из 3 частей: ядроECMAScript, объектная модель документаDOM, объектная модель браузераBOM.
  2. JavaScript— это буквальный язык сценариев, динамически типизированный, слабо типизированный, основанный на прототипах язык со встроенной поддержкой типов.
  3. JavaScriptОсобенности: интерпретируемый язык сценариев, в основном используемый для добавления интерактивного поведения к HTML-страницам, может быть непосредственно встроен в HTML-страницы, но написание отдельного js-файла способствует разделению структуры и поведения,
  4. Кроссплатформенные функции, поддерживаемые большинством браузеров, могут работать на различных платформах.
  5. JavaScriptОтличие в синтаксисе: чувствителен к регистру, переменная слабого типа, точка с запятой в конце необязательна, интерпретация такая же, какjava，c和phpАннотации в языке те же, фигурные скобки обозначают блоки кода.

Пример{}Содержит для представления блока кода

Код:

if(test1=="red") {
    test1 = "blue";
    alert(test1);
}

JavaScriptКлючевые слова:

break,else,new,var
case,finally,return,void
catch,for,switch,while
continue,function,this,with
default,if,throw
delete,in,try
do,instanceof,typeof

JavaScriptПеременные

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

  1. JavaScriptпримитивный тип , т.е.Undefined,Null,Boolean,Numberа такжеStringтип.
  2. нитьStringдаJavaScriptбазовый тип данных.
  3. Тип данных указывает тип данных,JavaScriptКаждое значение языка принадлежит определенному типу данных.
  4. JavaScriptСуществует два типа типов данных: типы значений (примитивные значения) и ссылочные типы данных (ссылочные значения).
  5. Тип значения: строка, число, логическое значение, нуль для нуля, неопределенный, символ — это новый примитивный тип данных, введенный es6, представляющий уникальное значение.
  6. Справочные типы данных: объект-объект, массив-массив, функция-функция.
  7. JavaScriptпоставкаtypeofОператоры используются для определения того, находится ли значение в диапазоне определенного типа.
  8. UndefinedТип имеет только одно значение, т.undefined.
  9. Когда объявленная переменная не инициализирована, значением по умолчанию переменной являетсяundefined.
  10. NullТип имеет только одно значениеnull,стоимостьundefinedна самом деле от стоимостиnullпроизводное, так чтоJavaScriptопределить их как равные.
  11. nullа такжеundefinedУказывает, что два значения равны, но имеют разные значения.
  12. undefinedэто значение, присвоенное переменной, когда она была объявлена, но не инициализирована,nullПредставляет объект, который еще не существует.

Код:

console.log( null == undefined); // true
  1. BooleanДва значения типаtrueа такжеfalse.
  2. Numberтип, все математические операции возвращают десятичные результаты.
  3. Number.MAX_VVALUEа такжеNumber.MIN_VALUE, они определяютNumberВнешняя граница заданного значения.
  4. Если полученный числовой результат больше, чемNumber.MAX_VALUE, будет присвоено значениеNumber.POSITIVE_INFINITY, что больше не означаетNumberстоимость. Полученное значение меньшеNumber.MIN_VALUE, будет присвоено значениеNumber.NEGATIVE_INFINITY, что больше не означаетNumberстоимость.
  5. имеет значение, представляющее бесконечностьInfinity.
  6. Number.POSITIVE_INFINITYценностьInfinity,Number.NEGATIVE_INFINITYценность-Infinity.

использоватьisFinite()Метод определяет, является ли значение параметра конечным.

  1. особыйNaN, что указывает на не число. как бесконечность,NaNЕго также нельзя использовать для арифметических вычислений. Уведомление,NaNне равно себе.

Пример:

console.log(NaN == NaN) // false
console.log(isNaN("66")); // false
  1. StringТипы — это единственные примитивные типы, не имеющие фиксированного размера, а строковые литералы объявляются в двойных или одинарных кавычках.

Типовое суждение

  1. typeofоператор для получения типа переменной или выражения.

возвращаемое значение:

undefined，变量是Undefined类型
boolean，变量是Boolean类型的
number，变量是Number类型的
string，变量是String类型的
object，变量是一种引用类型或者Null类型

Пример:

console.log(typeof 12); // number

typeofпара операторовnullвернуть значениеObject.

  1. instanceofоператор, чтобы определить, к какому типу относится ссылочный тип.

Пример:

<script>
 var a = new Array();
 if(a instanceof Array) {
     console.log('a是一个数组类型');
 }else{
     console.log('a不是一个数组类型');
 }
</script>

преобразование типов

  1. Numberпеременная, которая преобразует переменную в числовой тип.
  2. Stringпеременная, преобразовать переменную в строковый тип.
  3. Booleanпеременная, преобразует переменную в логический тип.
  4. parseFloatпеременная, преобразует переменную в тип с плавающей запятой.
  5. parseIntпеременная, преобразует переменную в целочисленный тип.

оператор

  1. Операторы: оператор присваивания, арифметический оператор, оператор сравнения, логический оператор, унарный оператор, бинарный оператор, тернарный оператор.
имя оператор имея в виду
назначать x = y x = y
Аддитивное назначение x += y x = x + y
Назначение вычитания x -= y x = x - y
назначение умножения x *= y x = x * y
назначение дивизии x /= y x = x / y
присвоение остатка x %= y x = x % y
присвоение возведения в степень x **= y x = x ** y
задание на левую смену x <<= y x = x << y
назначение правой смены x >>= y x = x >> y
назначение сдвига вправо без знака x >>>= y x = x >>> y
побитовое И присваивание x &= y x = x & y
Побитовое XOR-присваивание x ^= y x = x ^ y

Пример:

赋值运算符的符号为=

算数运算符：+，-，*，/，%

比较运算符：>，>=，<，<=，!=，==，===，！==

逻辑运算符： 

&&，逻辑与，表示表达式前后全为true才能返回true

||，逻辑或，表示表达式前后只要有一个true就返回true

!，逻辑取反，表示表达式后若为true，则返回false，否则反之。
  1. ++Самовозрастание, добавляйте 1 каждый раз при его выполнении,--Уменьшать себя, уменьшать себя на 1 каждый раз, когда он выполняется.
  2. i++, значение сначала участвует в операции внешнего выражения, а затем добавляет 1 к своему собственному значению.
  3. ++i, i сначала прибавляет 1 к собственному значению, а затем участвует в работе внешнего выражения.
  4. +=,a+=3равныйa=a+3. То же похоже.
  5. Формат выражения тернарного оператора: условие? положительный: ложный
  6. Приоритет оператора: арифметические операторы > операторы сравнения > логические операторы > операторы присваивания.
  • арифметические операторы
  • оператор сравнения
  • Логические операторы
  • оператор присваивания

ответвление петли

  1. if-elseусловное заявление
  2. switch-caseоператор выбора
  3. forоператор цикла
  4. for-inзаявление о пересечении
  5. whileоператор цикла
  6. do-whileоператор цикла

Пример:

if(条件 1) {
    当条件1为true时执行的代码
}else if(条件 2){
    当条件2为true时执行的代码
}else{
    当条件1和条件2都不为true时执行的代码
}

Пример:

switch(n){
    case1:
    执行代码块1
    break;
    case2:
    执行代码块2
    break;
    default:
    ...
}

Пример:

for(语句1;语句2;语句3){
    被执行的代码块
}
  1. continueЭто означает пропустить этот цикл и перейти к следующему циклу
  2. breakУказывает на выход из всего цикла, и цикл заканчивается

траверс

  1. for inОператор перебирает свойства объекта и в основном используется в составных типах, таких как объекты и массивы, для обхода свойств и методов в нем.

Пример:

for(键 in 对象) {
    代码块
}
  1. whileТолько выражение истинно, можно войти в цикл.

Пример:

while(表达式){
    代码块
}
  1. do-while

Пример:

do {
    代码
}while(表达式)

множество

Свойства и методы массива:

метод иллюстрировать
concat() Объедините два или более массива и верните результат
join() Поместите все элементы массива в строку, элементы разделены указанным разделителем
pop() Удалить и вернуть последний элемент массива
push() Добавьте один или несколько элементов в конец массива и верните новую длину
reverse() Обратный порядок элементов в массиве
shift() Удалить и вернуть первый элемент массива
slice() Возвращает выбранный элемент из существующего массива
sort() Сортировать элементы массива
splice() Удалить элементы и добавить новые элементы в массив
toSource() Возвращает исходный код для этого объекта
toString() Преобразовать массив в строку и вернуть результат
toLocalString() Преобразовать массив в локальный массив и вернуть результат
unshift() Добавьте один или несколько элементов в начало массива и верните новую длину
valueOf() Возвращает исходное значение объекта массива
indexOf() Ищет в массиве указанный элемент и возвращает индекс первого совпадения
lastIndexOf() Ищет в массиве указанный элемент и возвращает индекс последнего совпадения

concat()

Объединяет два или более массива и возвращает новый массив.

грамматика:

arr.concat(a1, a2, ..., an)

параметр:

  1. arr: целевой массив
  2. a1,a2,...,an: элементы для слияния

join()

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

определение массива

  1. использоватьnewключевое слово для созданияarrayObject, вы можете создать пространство массива в памяти, добавить элементы.
  2. использоватьnewключевое слово для созданияarrayОбъект также присваивает массиву n начальных значений.
  3. Не нужноnew, использовать напрямую[]Объявите массив, которому можно напрямую присвоить начальное значение.

операции с массивами

  1. добавить элемент
  2. Удалить элементы, метод выталкивания, метод сдвига, метод сращивания.
  3. перебирать массив
  4. Вставка элементов, метод unshift, метод соединения для вставки.
  5. Объединить массивы
  6. массив в строку
  7. Элементы массива в обратном порядке
  • popметод, удаление из хвоста, удаление элемента из массива после удаления и возврат.
  • shiftметод, удаляющий элемент из головы и возвращающийся.
  • spliceметод, который удаляет указанный элемент из указанной позиции.
  • unshiftметод, который вставляется из головы.
  • spliceметод для вставки указанного количества элементов из указанной позиции.
  • concatметод объединяет несколько массивов в один массив.
  • joinМетод объединяет элементы массива в строку, которая объединяется с указанным разделителем.
  • reverseМетод может расположить элементы в массиве в обратном порядке и напрямую изменить исходный массив, не создавая новый массив.
  • sortМетод может автоматически сортировать элементы в массиве в соответствии с определенными правилами (по умолчанию используется сортировка в соответствии с порядком символов в коде ASCII).

поп() и пуш()

  1. pop(): удаляет и возвращает последний элемент массива, изменяя исходный массив.
  2. push(item): добавьте один или несколько элементов в конец массива, измените исходный массив и верните новую длину массива.

сдвиг() и сброс()

  1. shift(): удалить и вернуть первый элемент массива, изменив исходный массив.
  2. unshift(item): добавьте один или несколько элементов в начало массива, измените исходный массив и верните новую длину массива.

Пример:

let arr = [1, 2, 3, 5, 6];
let a1 = arr.slice(2);    // [3, 5, 6]
let a2 = arr.slice(2,3);  // [3]

let arr = [1, 2, 3, 4];
let a = arr.splice(1, 2, "web", "a");
// a =>  [2, 3]
// arr =>  [1, "web", "a", 4]

forEach()

Код:

let a = [1,3,5,7];
a.forEach(function(val, index, arr){
    arr[index] = val * 2
})
a ; // [2, 6, 10, 14]

Код:

arr.every(callback)

测试数组的所有元素是否都通过了指定函数的测试。

some()

测试数组中的某些元素是否通过由提供的函数实现的测试。

filter()

Пример:

let a = [1, "", "aa", 2, 6];
let res = a.filter(function(val, index, arr){
    return typeof val == "number";
})
res;//[1, 2, 6]

map()

Выполните этот метод для каждого элемента и верните массив после выполнения.

Пример:

let a = [1, 3, 5];
let b = a.map(function(val, index, arr){
    return val + 1;
})
b; //[2, 4, 6]

спред оператор

Распространение использования оператора(...)

Пример:

console.log(...[1, 2, 3]);   // 1 2 3 
console.log(1, ...[2,3], 4); // 1 2 3 4

// 通常情况 浅拷贝
let a1 = [1, 2];
let a2 = a1; 
a2[0] = 3;
console.log(a1,a2); // [3,2] [3,2]

// 拓展运算符 深拷贝
let a1 = [1, 2];
let a2 = [...a1];
// let [...a2] = a1; // 作用相同
a2[0] = 3;
console.log(a1,a2); // [1,2] [3,2]

let [a, ...b] = [1, 2, 3, 4]; 
// a => 1  b => [2,3,4]

let [a, ...b] = [];
// a => undefined b => []

let [a, ...b] = ["abc"];
// a => "abc"  b => []

fill()

  1. Используется для заполнения массива указанными значениями
  2. Используется для инициализации пустого массива и удаления существующих элементов в массиве.
  3. Второй и третий параметры fill() определяют начальную и конечную позиции заливки.
new Array(3).fill('a');   // ['a','a','a']
[1,2,3].fill('a');        // ['a','a','a']
[1,2,3].fill('a',1,2);//  [1, "a", 3]

entries(),keys(),values()

  1. entries()Перебирать пары ключ-значение
  2. keys()перебирать ключи
  3. values()Итерация по ключам и значениям.

includes()

  1. includes()Используется, чтобы указать, содержит ли массив заданное значение
  2. Второй параметр — это начальная позиция, которая по умолчанию равна 0. Если он отрицательный, это означает позицию обратной величины, если он больше длины массива, он будет сброшен на 0.

Код:

[1,2,3].includes(3,3);    // false
[1,2,3].includes(3,4);    // false
[1,2,3].includes(3,-1);   // true
[1,2,3].includes(3,-4);   // true

flat(),flatMap()

Пример:

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]

грамматика

var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
    // return element for new_array
}[, thisArg])

var arr1 = [1, 2, 3, 4];

arr1.map(x => [x * 2]); 
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

// only one level is flattened
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]

let arr1 = ["it's Sunny in", "", "California"];

arr1.map(x => x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]

arr1.flatMap(x => x.split(" "));
// ["it's","Sunny","in", "", "California"]

Array.prototype.reduce()

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

var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
// 和为 6

var total = [ 0, 1, 2, 3 ].reduce(
  ( acc, cur ) => acc + cur,
  0
);

грамматика

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

initialValue可选

作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

Свойства строкового объекта

Свойства строкового объекта

Атрибуты иллюстрировать
constructor ссылка на функцию, которая создала объект
length длина строки
prototype Позволяет добавлять свойства и методы к объектам

Строковые методы объекта

Строковые методы объекта

Атрибуты иллюстрировать
anchor() Создание привязок HTML
big() Отображать строки крупным шрифтом
blink() показать мигающую строку
bold() Используйте жирный шрифт для строк
charAt() Возвращает символ в указанной позиции
charCodeAt() Возвращает кодировку Unicode символа в указанной позиции
concat() строка подключения
fixed() Отображение строки в тексте пишущей машинки
fontcolor() Отобразить строку с указанным цветом
fontsize() Отобразить строку с указанными размерами
fromCharCode() Создать строку из кодировки символов
indexOf() проверить строку
italics() Используйте курсив для отображения строк
lastIndexOf() Поиск строки сзади наперед
link() Отображать строки как ссылки
localeCompare() Сравнивает две строки в определенном локальном порядке
match() Найдите совпадение для одного или нескольких регулярных выражений
replace() Заменить подстроки, соответствующие регулярному выражению
search() Получить значения, соответствующие регулярному выражению
slice() Извлечь фрагмент строки и вернуть извлеченную часть в новой строке
small() Отображать строки с мелким шрифтом
split() Разделить строку на массив строк
strike() Отображать строки с зачеркиванием
sub() Отображать строки как индексы
substr() Извлечь указанное количество символов из строки из начального порядкового номера
substring() Извлекает символы между двумя указанными порядковыми номерами в строке
sup() Отображать строку как верхний индекс
toLocaleLowerCase() Преобразует строку в строчные
toLocaleUpperCase() преобразовать строку в верхний регистр
toLowerCase() преобразовать строку в нижний регистр
toUpperCase() преобразовать строку в верхний регистр
toString() возвращаемая строка
valueOf() Возвращает исходное значение строкового объекта
toSource() исходный код, представляющий объект

Поиск строки

indexOf(),lastIndexOf(),search()а такжеmatch().

  1. indexOf(),indexOf(搜索词，起始索引位置), если второй параметр не прописан, поиск начинается с 0 по умолчанию.indexOf()Извлекает первое вхождение указанного строкового значения в строку.
  2. lastIndexOf(),lastIndexOf(搜索词，起始索引位置), извлечение назад, возвращая последнее вхождение указанного значения подстроки.
  3. search(), синтаксис представляет собой строку,search(搜索词)или строкаsearch(正则表达式).
  4. match(), синтаксис представляет собой строку.match()Извлекает указанное значение в строке или находит совпадение для одного или нескольких регулярных выражений. Если результат не найден, вернитеnull. Если есть совпадение, будет возвращен массив, а 0-й элемент массива сохранит совпадающий текст.

Перехват строки

3 метода перехвата строк:substring(),slice(),substr()

  1. substring(), синтаксис представляет собой строку,substring(截取开始位置，截取结束位置),substring()Это широко используемый метод перехвата строк, который получает два параметра, которые не могут быть отрицательными, и возвращает новую строку.
  2. slice(), синтаксис представляет собой строку,slice(截取开始位置，截取结束位置),slice()Параметр in может быть отрицательным.Если параметр отрицательный, параметр начинается с конца строки.-1относится к последнему символу строки.
  3. substr(),substr(截取开始位置，length), извлекает указанное количество символов из строки, начиная с нижнего индекса начальной позиции усечения. Возвращает строку. Если начальная позиция перехвата отрицательная, это означает начало с конца строки.

замена строки

replace(),replace(正则表达式/要被替换的字符串，要替换成为的子字符串).

Струнная резка

split()Используется для разделения строки на массив строк, синтаксис — строка.split(用于分割的子字符串，返回数组的最大长度), максимальная длина возвращаемого массива обычно не устанавливается.

Три этапа JS-событий

Поток событий:

  1. всплывающий поток событий
  2. поток захвата событий

Существует три основных этапа обработки событий: этап захвата, целевой этап и этап всплытия. Поток событий состоит из трех фаз: фаза захвата события, фаза попадания в цель и фаза всплытия события.

  • Захват, события принимаются элементами страницы, вплоть до конкретных элементов
  • target, сам конкретный элемент
  • Пузырь, сам элемент, шаг вверх, к элементу страницы
  1. Захват событий: при использовании захвата событий родительский элемент запускается первым, а дочерний элемент запускается позже.
  2. Всплывающие события При использовании всплывающих событий дочерний элемент срабатывает первым, а родительский элемент срабатывает позже.

Всплывающие события и захват событий

  1. Возникновение события генерирует поток событий
  2. DOMПоток событий:DOMСтруктура представляет собой древовидную структуру.Когда элемент HTML генерирует событие, событие будет распространяться в определенном порядке между узлом элемента и корневым узлом, и узлы, пройденные путем, получат событие.
  3. Существует два типа последовательностей потока событий: всплывающее всплывающее окно и захват событий.

триггер события

Код:

addEventListener("click","doSomething","true")

Третий параметр имеет значение true, что означает использование перехвата событий, если значение false, означает использование всплывающих событий.

<!DOCTYPE html>
<html lang="en>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body{
    width:100%;
    height:100%;
}
</style>
<script>
 window.onload=function(){
     d1 = document.getElementById("d1");
     d2 = document.getElementById("d2");
     d3 = document.getElementById("d3");
     // true 表示在捕获阶段响应
     // false 表示在冒泡阶段响应

     d1.addEventListener("click",function(event){
         console.log("d1")
     },"true");

     d2.addEventListener("click",function(event){
         console.log("d2")
     },"true")

     d3.addEventListener("click",function(event){
         console.log("d3")
     },"true")
 }
</script>
</head>
<body>
<div id="d1" style="background: #0000ff; width: 500px; height: 500px">
<div id="d2" style="background: #00ff00; width: 400px; height: 400px">
<div id="d3" style="background: #ff0000; width: 200px; height: 200px">
</div>
</div>
</div>
</body>
</html>

addEventListener, нажмите на прыжок:addEventListener.html

делегация мероприятия

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

<ul id="btn">
    <li id="btn1">按钮1</li>
    <li id="btn2">按钮2</li>
    <li id="btn3">按钮3</li>
</ul>

var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');

webbtn.myAddFun(btn1, 'click', function(event){
    alert('1点击');
});

webbtn.myAddFun(btn2, 'click', function(event){
    alert('2点击');
});

webbtn.myAddFun(btn3, 'click', function(event){
    alert('3点击');
});

Добавьте обработчик событий для делегирования событий.

var btn = document.getElementById('btn');
webbtn.myAddFun(btn, 'click', function(event){
    event = webbtn.getMyEvent(event);
    var target = webbtn.getMyTarget(event);
    switch(target.id){
        case "btn1":
            alert('1点击');
            break;
        case "btn2":
            alert('2点击');
            break;
        case "btn3":
            alert('3点击');
            break;
    }
});

событие клавиатуры

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

События клавиатуры:

метод иллюстрировать
keydown Запускается, когда пользователь нажимает любую клавишу на клавиатуре. Нажмите и удерживайте, он будет срабатывать повторно
keypress Запускается, когда пользователь нажимает символьную клавишу на клавиатуре. Нажмите и удерживайте, он будет срабатывать повторно
keyup Запускается, когда пользователь отпускает клавишу на клавиатуре

эффект перетаскивания мышью

привязка мышиonmousedown(),onmousemove(),onmouseup()мероприятие.

страница мыши, нажмите, чтобы перейти:mouse.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mouse</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        #dd {
            width: 120px;
            height: 120px;
            background: #00ff00;
            position: absolute;
        }
    </style>
    <script>
        var dd;
        var mflag = false;
        function ondown() {
            dd = document.getElementById('dd');
            mflag = true;
        }
        function onmove(e){
            if(mflag) {
                dd.style.left = e.clientX - 60 + "px";
                dd.style.top = e.clientY - 60 + "px";
            }
        }
        function onup() {
            mflag = false;
        }
    </script>

</head>
    <body onmousemove="onmove(event)">
        <div id="dd" onmousedown="ondown()" onmouseup="onup()" style="left: 80px;top: 120px;"
    </body>
</html>

событие мыши

События мыши:

метод иллюстрировать
click Пользователь щелкает левой кнопкой мыши или нажимаетEnterключевой триггер
dbclick Запускается двойным щелчком мыши пользователем
mousedown Запускается, когда пользователь нажимает любую кнопку мыши
mouseenter Запускается, когда курсор мыши впервые перемещается из-за пределов элемента в границы элемента без всплытия
mouseleave Запускается, когда курсор над элементом выходит за границы элемента, пузырьков нет
mousemove Запускается, когда курсор продолжает двигаться внутри элемента
mouseover Срабатывает, когда указатель пользователя находится за пределами элемента, а затем пользователь впервые перемещается в пределах границ другого элемента.
mouseout Запускается, когда пользователь перемещает курсор с одного элемента на другой
mouseup Запускается, когда пользователь отпускает мышь
mousewheel Срабатывает при прокрутке колеса

Пример:

function web(e) {
    mouseX = e.clientX;
    mouseY = e.clientY;
    console.log("x:"+mouseX + "," + "y:"+mouseY)
}

<body onclick="web(event)">
  1. наведение мыши даonmouseover
  2. мышь далекоonmouseout

оконное событие

Оконные события:

  1. load
  2. unload
  3. abort
  4. error
  5. select
  6. resize
  7. scroll

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

Пример:

window.onload=function(){}

Эта функция выполняется, когда страница полностью загружена.

Пример:

<script>
 window.onload = function() {
     var mydiv = document.getElementById("mydiv");
     console.log(mydiv.innerText);
 }
</script>

<body>
 <div id="mydiv"></div>
</body>

Пример:

function imgLoad() {
    myimg = document.getElementById("myimg");
    // 图片加载完成后，给图片加载框
    myimg.style.border = "9px solid $00ff00";
}

<img id="myimg src="" onload="imgLoad()">

событие изменения размера

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

Пример:

document.body.clientWidthа такжеdocument.body.clientHeightПолучите ширину и высоту окна.

html,body {
    width: 100%;
    height: 100%;
}

<script>
 function winChange() {
     winWidth = document.body.clientWidth;
     winHeight = document.body.clientHeight;
 }
</script>

<body onresize="winChange()">
</body>

scrolСобытие, вызываемое при прокрутке документа или окна браузераscrollмероприятие

Пример:

<script>
 function scrollChange() {
     srpos = document.getElementById("srpos");
     srpos.innerText = document.documentElement.scrollTop;
     srpos.style.top = docuemnt.documentElement.scrollTop+"px";
 }
</script>

<body onscroll="scrollChange()">
 <div style="height:300%;">
 <br/>
 <font id="srpos" style="position: relative;top: 0px">滚动条滚动到0px</font>
 </div>
</body>

событие фокуса

метод иллюстрировать
blur Запускается, когда элемент теряет фокус, поддерживается всеми браузерами
focus Запускается, когда элемент получает фокус, поддерживается всеми браузерами

Пример:

<script>
var note;
function myfocus(fname,notename) {
    note = document.getElementById(notename);
    note.innerText = fname+'获得焦点';
}

function myblur(fname,notename) {
    note = document.getElementById(notename);
    note.innerText = fname + '失去焦点';
}
</script>

<body>

<form name="myform">

<input type="text" name="uname" onfocus="myfocus('uname','unote')" onblur="myblur('uname','unote')"/><font id="unote"></font>

<br/>

<input type="text" name="pwd" onfocus="myfocus('pwd','pnot')" onblur="myblur('pwd','pnote')"/><font id="pnote"></font>

</form>

</body>

Введение события

метод события

метод иллюстрировать
onabort Загрузка изображения была прервана
onblur Элемент теряет фокус
onchange Пользователь изменяет содержимое домена
onclick щелчок мышью по объекту
ondblclick Двойной щелчок по объекту
onerror Произошла ошибка при загрузке документа или изображения
onfocus элемент получает фокус
onkeydown Клавиша на клавиатуре нажата
onkeypress Клавиша на клавиатуре нажата или удерживается
onkeyup Клавиша на клавиатуре была отпущена
onload Страница или изображение завершили загрузку
onmousedown Кнопка мыши нажата
onmousemove мышь перемещается
onmouseout Отведите мышь от элемента
onmouseover Мышь перемещается по элементу
onmouseup Кнопка мыши была отпущена
onreset кнопка сброса нажата
onresize Размер окна или рамки изменен
onselect текст выделен
onsubmit кнопка отправки нажата
onunload Страница выхода пользователя

оконное событие

  1. loadмероприятие
  2. resizeмероприятие
  3. scrollмероприятие
  4. событие фокуса

событие мыши

  1. Получить позицию щелчка мыши
  2. наведи курсор мыши и уходи
  3. перетаскивание мышью

События клавиатуры и всплывающие окна событий, получите

Встроенные объекты JavaScript

  1. windowобъект
  2. documentобъект
  3. locationобъект
  4. navigatorобъект
  5. screenобъект
  6. historyобъект

JavaScriptизDOMОперации, включая получение узлов, получение, установку значений атрибутов элементов, создание, добавление узлов, удаление узлов и операции с атрибутами.

DOMобъект

  1. Когда веб-страница загружается, браузер создает объектную модель страницы,Document Object Model, объектная модель документа принадлежитBOMчастьBOMосновной объект вdocumentработать.
  2. html domМодель строится в виде дерева объектов.

DOMдействовать

Как получить узел:

  1. ЭтикеткаidПолучать:
document.getElementById(idName)
  1. ЭтикеткаnameПриобретение свойства: возвращает массив элементов
document.getElementsByName(name)
  1. Получить имя категории: вернуть массив элементов
document.getElementsByClassName(className)
  1. Получить имя тега: вернуть массив элементов
document.getElementsByTagName(tagName)

Получить, установить значение атрибута элемента

  1. getAttribute(attributeName)Метод, //Квадратные скобки вводят и выводят входное имя, возвращают значение атрибута соответствующего атрибута
  2. setAttribute(attributeName,attributeValue)метод, // передаем имя свойства и установленное значение

Пример:

<script>
window.onload=function(){
    mytable = document.getElementById('mytable');
    // 获取mytable中标签名为tr的字节点
    trs = mytable.getElementsByTagName("tr");
    len = trs.length;
    flag = true;
    for(i=0;i<len;i++){
        if(flag){
            trs[i].setAttribute('bgcolor','#cccccc');
            flag = false;
        }else{
            flag = true;
        }
    }
    ww = mytable.getAttribute('width');
}
</script>

<body>
<table id="mytable' align='center' width="80%" border="1">
<tr bgcolor = "#cccccc">
 <td>aaa</td>
 <td>bbb</td>
 <td>ccc</td>
</tr>
</table>
</body>

Создавать, добавлять узлы

  1. Создайте узел:

Код:

// 创建节点：

document.createElement("h1");
document.createTextNode(String);
document.createAttribute("class");
  1. Добавить узел:

Код:

element.appendChild(Node);

element.insertBefore(newNode, existingNode);
  1. удалить узел

Код:

element.removeChild(Node)

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

  • Получить родительский узел текущего элемента

Код:

element.parentNode
  • Получить дочерние узлы текущего элемента

Код:

element.chlidren
  • Получить родственный элемент текущего элемента

Код:

element.nextElementSibling

element.previousElementSibling
  • Получить текст текущего элемента

Код:

element.innerHTML

element.innerText
  • Получить тип узла текущего узла

Код:

node.nodeType

объект спецификации

  1. BOMОбъекты, называемые встроенными объектами, представляют собой объектную модель браузера, а такжеJavaScriptважные части.
  2. window-》document,location,navigator,screen,history
  3. windowОбъект, представляющий окно браузера
  4. window.innerHeightПолучить внутреннюю высоту окна браузера,window.innerWidthПолучает внутреннюю ширину окна браузера.
  5. document.documentElement.clientHeight,document.documentElement.clientWidth;document.body.clientHeight,document.body.clientWidth.
  6. открыть новое окно,window.open(url).
  7. закрыть текущее окно,window.close().
  8. изменить размер текущего окна,window.resizeTo(宽，高)

объект документа

documentСвойства и методы:

свойства и методы иллюстрировать
document.bgColor Установить цвет фона страницы
document.fgColor установить цвет переднего плана
document.linkColor Цвет ненажатой ссылки
document.alinkCOlor Цвет активной ссылки
document.vlinkColor Цвет кликнутой ссылки
document.URL Установите свойство URL, чтобы открыть другую веб-страницу в том же окне.
document.cookie установить или прочитатьcookie
document.write() Динамически записывать контент на страницу
document.createElement(Tag) Создайте объект тега HTML
document.getElementById(ID) получить назначениеidобъект значения
document.getElementsByName(Name) получить назначениеnameобъект значения
document.body Определяет начало и конец тела документа
document.location.href полный URL
document.location.reload() обновить текущую страницу
document.location.reload(url) Открыть новую веб-страницу

объект местоположения

locationСвойства и методы:

свойства и методы иллюстрировать
location.href Отображает URL-ссылку текущей веб-страницы
location.port Показать порт текущей ссылки веб-страницы
location.reload() Обновить текущую страницу

navigatorобъект

navigatorОбъект содержит информацию о браузере

Атрибуты иллюстрировать
appName Возвращает имя браузера
appVersion Возвращает информацию о платформе и версии браузера.
cookieEnabled Возвращает, включен ли браузерcookieлогическое значение
platform Возвращает платформу операционной системы, на которой работает браузер

экранный объект

  1. каждыйwindowобъектscreenсвойства относятся кscrrenобъект.
  2. screenОбъект содержит информацию об отображении экрана браузера.

screenСвойства объекта:

Атрибуты иллюстрировать
availHeight Возвращает высоту экрана дисплея
availWidth Возвращает ширину экрана дисплея
bufferDepth Задает или возвращает битовую глубину палитры
Height Возвращает высоту экрана монитора
Width Возвращает ширину экрана монитора

объект истории

  1. historyОбъект содержит доступ пользователя по URL-адресу.

historyСвойства объекта:

Атрибуты иллюстрировать
history.length Возвращает количество URL-адресов в списке истории браузера.
history.back() нагрузкаhistoryпредыдущий адрес в списке
history.forward() нагрузкаhistoryследующий адрес в списке
history.go() нагрузкаhistoryконкретная страница в списке

встроенная функция

  1. Строковые функции
  2. функция массива
  3. математическая функция
  4. функция даты

математическая функция

Атрибуты иллюстрировать
ceil наименьшее целое число, большее или равное этому числу, округленное в большую сторону
floor наибольшее целое число, меньшее или равное этому числу, округленное в меньшую сторону
min(参数1，参数2) вернуть минимальное значение
max(参数1，参数2) вернуть максимальное значение
pow(参数1,参数2) Возвращает значение 1, возведенное в степень 2.
random() вернуть случайное число
round(数值) округление
sqrt(数值) квадратный корень

функция даты

  • set: для настройкиDateЗначение даты и времени объекта.
  • get: используется для полученияDateЗначение даты и времени объекта.
  • to: на возвратDateЗначение объекта в строковом формате.
  • parse和UTC: для разбораDateнить.
Атрибуты иллюстрировать
getFullYear() На полный год
getMonth() получить текущий месяц
getDate() получить текущий день
getDay() Получить текущий день недели
getTime() Получить текущее время (из 1970.1.1)
getHours() Получить текущий час
getMinutes() Получить текущий счет
getSeconds() Получить текущие секунды
toLocalDateString() получить текущую дату
toLocalTimeString() получить текущее время
toLocalString() Получить дату и время
  1. сек/мин: 0 - 59;
  2. час: 0 - 23;
  3. Неделя: 0 (воскресенье) - 6 (суббота)
  4. Дата: 1 - 31
  5. Месяц: 0 (январь) - 11 (декабрь)
  6. Год: количество лет с 1900 г.

функция таймера

  1. setInterval(), который вызывает функцию или вычисляет выражение в указанном цикле.
  2. setTimeout(), который вызывает функцию или оценивает выражение через указанное количество миллисекунд.
  3. разница:setTimeout()запустить только один раз,setInterval()выполняется циклически.

функция

  1. Функция состоит из четырех частей: имени функции, параметров, тела функции и возвращаемого значения.

Код:

function 函数名(参数){
    函数体
    return 返回值
}
  1. Существует 3 типа объявления функций: объявленное по имени функции, которое может быть выполнено при вызове программы; путем присвоения анонимной функции переменной, она может выполняться при вызове; объявленное по новому методу, которое выполняется непосредственно без звонка.

Код:

function web1 () {
    document.write("1");
}
web1();

var web2 = function(){
    document.write("2")
}
web2();

// 无须调用，直接执行，此方法不常用
var web3 = new function(
    document.write("3")
);
  1. Функция возвращает значение, и функция может иметь или не иметь возвращаемое значение после выполнения.
  2. Вызов функции: вызов по значению, вызов по ссылке, вызов по функции.

Функция закрытия

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

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

Closure, сокращение от Lexical Closure, — это функция, которая ссылается на свободные переменные.

Особенности замыкающих функций:

  1. Замыкания, как данные в паре с функциями, относятся к активному состоянию во время выполнения функции.
  2. После выполнения замыкания сохраните окончательное состояние данных в запущенном процессе.
  3. Замыкания, также известные как лексические замыкания или замыкания функций.
  4. Замыкание реализовано как структура, в которой хранится функция (обычно ее адрес входа) и связанное с ней окружение (эквивалент таблицы поиска символов).
  5. лексический объем

Код:

function init() {
    var name = "web"; // name 是一个被 init 创建的局部变量
    function displayName() { // displayName() 是内部函数，一个闭包
        alert(name); // 使用了父函数中声明的变量
    }
    displayName();
}
init();

init()создал локальную переменнуюnameи имяdisplayName()Функция.

displayName()определяется вinit()внутренняя функция в , и только вinit()Функция доступна in vivo.

displayName()не имеет собственных локальных переменных. Однако, поскольку он имеет доступ к переменным внешней функции, поэтомуdisplayName()Можно использовать родительскую функциюinit()переменные, объявленные вname.

displayName()внутри функцииalert()Оператор успешно отобразил переменнуюnameзначение (переменная объявлена ​​в родительской функции).

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

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

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

JavaScriptвсе вfunctionЭто все закрытие. В общем, однако, вложенныйfunctionПолученное замыкание является более мощным, и большую часть времени мы называем его «замыканием».

Роль замыканий

После того, как a выполнено и возвращено, закрытие заставляет механизм сборки мусора Javascript GC не возвращать ресурсы, занятые a, потому что выполнение внутренней функции b должно зависеть от переменных в a.

  1. Контекст выполнения функции
  2. вызов объекта
  3. объем
  4. цепочка прицелов

Таймеры и замыкания

код показывает, как показано ниже:

for(var i = 0 ; i<10; i++){
    setTimeout(function(){
        console.log(i);
    },100);
}

Он возвращает 10 10 с.

решить:

  1. Используйте новый let ES6.
  2. Используйте замыкания
for(var i = 0; i<10 ; i++){
    (function(i){
        setTimeout(function(){
            console.log(i);
        }, i*100);
    })(i);
}

До ES6 объявление переменных с помощью var вызывало проблемы с подъемом переменных:

for(var i = 0 ; i<10; i++)
{
    console.log(i)
};

console.log(i);  

// 变量提升 返回10

объект

  1. Есть два способа объявить объект:new Object()а также{}выполнить.

Пример:

// 1
var Person = function(id,name){
    this.id = di;
    this.name = name;
}
var user1 = new Person(1,"web");

// 2
var web1 = {id:1,name:"web"};
var web2 = Object.create({id:2,name:"web"});

Регулярные выражения слишком сложны

Создание регулярных выражений

Используйте литерал регулярного выражения:

let reg = /ab+c/;
let reg = /^[a-zA-z]/gi;
  1. Не могу вспомнить, не могу вспомнить, не могу вспомнить.
  2. Регулярные выражения — это буквенные шаблоны, состоящие как из обычных символов, так и из специальных символов.
  3. Регулярные выражения содержат сопоставители, локаторы, квалификаторы, escape-символы и т. д.
  4. В регулярных выражениях есть два метода: строковые методы и обычные методы объекта.

строковый метод

Атрибуты иллюстрировать
search() Получить значения, соответствующие регулярному выражению
match() Найдите совпадение для одного или нескольких регулярных выражений
replace() заменить строку на регулярное выражение
split() разбить строку на массив строк

Обычные методы объекта

Методы объекта RegExp

Атрибуты иллюстрировать
test() Используется для проверки соответствия строки шаблону
exec() Этот метод используется для поиска регулярного выражения в строке, который возвращает массив 
[a-z]
匹配小写字母从a到z中的任意一个字符

[A-Z]
匹配大写字母从a到z中的任意一个字符

[0-9]
匹配数字0到9中任意一个字符，等于 \d

[0-9a-z]
匹配数字0到9或者小写字母a到z中任意一个字符。

[0-9a-zA-Z]
匹配数字0到9或小写a到z或大写A到Z中任意一个字符

[abcd]
匹配字符abcd中的任意一个字符

[^a-z]
匹配除小写字母a到z外的任意一个字符

[^0-9]
匹配除数字0到9外的任意一个字符

[^abcd]
匹配除abcd外的任意一个字符

Метасимволы — это символы со специальными значениями:

.
查找单个字符，除了换行和行结束符。

\w
查找单词字符。

\W
查找非单词字符。

\d
查找数字。

\D
查找非数字字符。

\s
查找空白字符。
\S
查找非空白字符。

\0
查找 NUL 字符。
\n
查找换行符。
\f
查找换页符。
\r
查找回车符。
\t
查找制表符。
\v
查找垂直制表符。

\xxx
查找以八进制数 xxx 规定的字符。
\xdd
查找以十六进制数 dd 规定的字符。
\uxxxx
查找以十六进制数 xxxx 规定的 Unicode 字符。

квантификатор

Описание квантификатора

квантификатор описывать
n+ Строка, состоящая хотя бы из одного n.
n* Строка из нуля или более n s.
n? Строка из нуля или одного n.
n{X} Строка из X последовательностей n s.
n{X,Y} Строка от X до Y последовательностей n.
n{X,} Строка последовательностей не менее X n s.
n$ Соответствует любой строке, оканчивающейся на n.
^n Соответствует любой строке, начинающейся с n.
?=n Соответствует любой строке, за которой непосредственно следует указанная строка n.
?!n Соответствует любой строке, за которой непосредственно не следует указанная строка n. 
.定位符

定位符可以将一个正则表达式固定在一行的开始或者结束，也可以创建只在单词内或者只在单词的开始或者结尾处出现的正则表达式。

^

匹配输入字符串的开始位置

$

匹配输入字符串的结束位置

\b

匹配一个单词边界

\B

匹配非单词边界

/^[\d]{4}-[\d]{1,2}-[\d]{1,2}${1,2}$]/
日期字符

转义符

使用转义符（反斜杠\)进行转义

new RegExp(str[, attr])получает 2 параметра,strстрока, определяющая правило сопоставления регулярных выражений,attrНеобязательный, указывающий на соответствие шаблону, значениеg(全局匹配),i(区分大小写的匹配)和m(多行匹配).

表达式：g,i,m

g 表示全局模式

应用于所有字符串，而非在发现第一个匹配项就停止

i 表示不区分大小写模式

m 表示多行模式

继续查找下一行中是否存在模式匹配的项
модификатор описывать
i Выполните сопоставление без учета регистра.
g Выполните глобальное совпадение.
m Выполните многострочное сопоставление.

объект аргументов

Фактические параметры функции хранятся в объекте аргументов, подобном массиву, а доступ к конкретным параметрам осуществляется по индексу:

var a = arguments[i]
  1. использоватьarguments.lengthчтобы получить фактическое количество входящих параметров
  2. argumentsобъект для получения каждого параметра

Текстовое поле теряет событие фокуса, получает событие фокуса

onBlur: это событие генерируется, когда фокус ввода теряется

onFocus: когда ввод получает фокус, файл генерируется

Onchange: это событие происходит при изменении текстового значения

При выборе: когда текст выделен, файл создается

Три лучших периода времени для памяти

  1. за 2 часа до сна
  2. через час после пробуждения
  3. 8-10 утра
Категории