Javaweb Learning Notes Sharing (обязательно прочитать)

Автор：Eve Cole Время обновления：2025-04-09 04:32:01

Пользовательский список

<dl> </dl>: представляет диапазон списка

** Inside <dt> </dt>: верхний контент

** Inside <dd> </dd>: нижний контент

Заказанный список

<ol> </ol>: диапазон упорядоченного списка

-Атрибут Тип: Установите метод сортировки, 1 (по умолчанию), A, I,

** В TAG OL <LI> Специфический контент </li>

Неупомянутый список

<ul> </ul>: диапазон неупорядоченного списка

-Атрибут Тип: Круг (Полый Круг), Диск (Сплошной круг по умолчанию), квадрат (сплошной квадрат)

** В теге UL <li> Специфический контент </li>

Теги изображения

-Атрибуты: SRC, ширина, высота, Alt (текст, отображаемый на рисунке, перемещайте мышь на картинку, оставайтесь на некоторое время, чтобы отобразить содержимое или текст, отображаемый, когда изображение отображается неправильно, но некоторые браузеры не отображают его, и нет эффекта)

** <img src = "Страница изображения"/>

Введение в пути

*Категория: две категории

** Абсолютный путь, например. http://www.baidu.com/b.jpg

*** Три относительных пути местоположение одного файла относительно другого файла

-Файл и изображение HTML находятся в одном пути (каталог), а имя файла можно записать напрямую

-В файле HTML используйте файл A.JPG в папке IMG под тем же путем, что и: IMG/A.JPG

** d: /htmlstudy/code/4.html

** d: /htmlstudy/code/img/a.jpg

-Картинка находится в верхнем каталоге HTML-файла. В настоящее время метод использования изображения: ../c.png ../ представляет верхний путь

Метки гиперссылки

** Ссылка ресурсов

- <a href = "Путь к ссылке на ресурс"> Контент, отображаемый на странице </a>

** href: адрес связанного ресурса

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

-_ Бланк: открывается в новом окне

-_ Self: Откройте страницу по умолчанию

-<a href = " #"> Название ссылки </a>: когда гиперссылка не нужно прыгать на страницу, просто добавьте # (заполнитель) в href

** Ресурсы местоположения

-Если вы хотите найти ресурсы: определить местоположение

-Обратно от этого места

<a href = "#top"> назад к вершине </a>

-как тег-выпускной тег: <pre> Контент, который необходимо ввести As-Is-Is-Is-Is-Is-Is-Is-Is-Is-Is-Is-I-Is-Is-Is-Is-Is-I-Is-Is-Is-I-Is-I-I S-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS -is-Is-Is-Is-Is-I-Is-Is-Is-Is-Is-I-Is-Is-Is-I-Is-Is-Is-Is-Is-Is-Is-is- IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-

Таблицы теги

* Функция: он может отформатировать данные, чтобы прояснить отображение данных

*Атрибут границы (толщина линии таблицы) Bordercolor (цвет линии таблицы) Сотовая полоска (расстояние ячейки) Высота ширины

*<Таблица> </Таблица>: Указывает диапазон таблицы

** В таблице это означает линию <Tr> </tr>

-Установите выравнивание выравнивания: левый центр справа

*** В TR это указывает на ячейку в ряду <TD> </td>

** Использование может также представлять ячейки: он может достичь центрирования и жирного шрифта

*Название таблицы помещается в таблицу </Подпись> </Подпись>

*Навыки операции:

** Сначала подсчитайте, сколько там строк, и подсчитывайте, сколько ячеек в каждом ряду

*Объединять ячейки

** ROWSPAN: Cross-Row (вертикальное слияние)

** Colspan: Cross-Column (горизонтальное слияние)

<td colspan = "3" align = "center"> формировать упражнения </td>

Форма теги

*Например, при регистрации kaixin.com вы можете отправить данные на сервер Kaixin.com. Этот процесс может быть реализован с использованием тегов формы.

* <form> </form>: определить применение формы

*свойство:

** Действие: отправлено адрес, подачу по умолчанию на текущую страницу

** Метод: метод подачи формы

-Есть два широко используемых: get and post, который является запросом по умолчанию

** разница между Get и Post

1) Адресная строка GET будет содержать представленные данные, а в сообщении их не будет содержать (данные находятся в корпусе запроса)

2) Получить уровень безопасности запроса ниже, а пост выше

3) Существует ограничение на размер данных запроса GET, но в сообщении нет ограничений.

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

** Входной элемент: часть, в которую можно ввести или выбрать контент

- Большинство элементов ввода можно использовать с <input type = "type intement"/>

********** В элементе ввода вам нужен атрибут имени

*** Нормальный вход: <input type = "text"/>

*** Пункт пароля ввода: <input type = "password"/>

*** Ввод с одним выбором: <input type = "radio"/>

-Атрибут Имя требуется внутри

-Значение атрибута должно быть таким же

- должно быть значение значения

**** Реализуйте выбранные свойства по умолчанию

*** checked = "проверено"

*** Проверьте вход: <input type = "fackbox"/>

** Имя атрибута требуется внутри

** Значение атрибута имени должно быть таким же

** должно быть значение значения

**** Реализуйте выбранные свойства по умолчанию

---- Проверено = "проверено"

*** Файл ввода: <input type = "file"/>

*** Выпадающий элемент ввода (не во входном теге)

<option value = "0"> Пожалуйста, выберите </option>

</select>

**** Реализуйте выбранные свойства по умолчанию

---- selected = "selected"

*** Текстовое поле (например: заполните поле для профиля личной информации при регистрации учетной записи)

*** Скрытый элемент (не отображается на странице, но существует в коде HTML)

*** Отправить кнопку

-Address перед отправкой: C: /Users/happydog/desktop/index.html

** Когда атрибут имени записано в элементе ввода

---File: /// c: /susers/happydog/desktop/index.html? Телефон = 123123 & Pwd = 12321312 & Sex = Man & Love = Y & Love = Pp & Birth = 1992 & Tex = 1231245

**? Значение входного элемента name = значение ввода и

** Параметры похожи на форму ключа

*** Используйте (клик) изображения для отправки

*** Кнопка сброса: вернуться к начальному состоянию входного элемента

*** Нормальные кнопки (используются с JS)

Случай: используйте теги формы для реализации страницы регистрации

Когда содержание табличной ячейки пустое, заполнители ((сбежавшие пространства)), как правило, заполняются.

Использование других общих тегов в HTML

** b (жирный жирный) s (строка удара) u (подчеркивание) I (курсив) pre (вывод As) sub (suppript) sup (superscript) div (line wrap) span (отображение на одной строке) p (метка параграфа)

Использование тега заголовка HTML

** html две части составляют голову и тело

** Этикетка в голове - это ярлык головы

** Тег заголовка: указывает содержимое, отображаемое на теге

** <Teta> тег: некоторое связанное содержимое страницы настройки

-<meta name = "Keywords" content = "" />

-<meta http-equiv = "refresh" content = "10; url = test_form.html" /> регулярно на указанной странице

** Базовый тег: установите основные настройки для гиперссылок

-Метод открытия гиперссылки может быть установлен равномерно <base target = "_ blank" />

** Тег ссылки: ввести внешние файлы

Использование тегов кадров

** <Frameset>

** ряды: разделить на ряд

<Frameset Rows = "80,*"> Разделите на две части, верхние 80, нижние 80

** Cols: Разделение на столбец

<Frameset Cols = "80,*"> разделите на две части, слева и вправо на 80, любой слева и вправо в любое время

** <Frame> Отображаемая конкретная страница

** <name = "lower_left" src = "b.html">

*При использовании рамных тегов они не могут быть записаны в голову и тело. Если используется тег кадра, тело необходимо удалить и записано вне головы.

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

** <a href = "http://www.baidu.com" target = "right"> baidu </a> <br/>

<кадр name = "Left" src = "b.html">

</frameset>

Краткое изложение знаний

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

2) Атрибут тега шрифта: Диапазон значений размера 1-7 Цвет: шестнадцатеричный номер #ffffff

3) Тег заголовка <h1> </h1> ...... <h6> </h6>: от H1 до H6, шрифт становится меньше и меньше, а линия автоматически изменяется

4) Комментарии

Введение в CSS

** CSS: каскадный лист стиля

** Слоистые: слой за слой

** Стили -таблица: много атрибутов и значений атрибутов

** Сделайте страницу лучше отображаться

** CSS разделяет содержимое веб -страницы и стиль отображения, улучшая функцию отображения

Как объединить CSS и HTML (четыре способа объединить)

1) На каждом тег HTML есть стиль свойства, объединяющий CSS и HTML вместе

-<div style = "фоновый цвет: красный; цвет: зеленый;" id = ""> Путь небес уменьшает избыток и компенсирует дефицит. Следовательно, пустота побеждает реальную, и недостаточный, преодолевает избыток. </div>

2) Используйте тег HTML для реализации тега <style> и написать его в голову

- <стиль типа = "text/css">

CSS -код;

</style>

--- Реализация кода <head>

<стиль типа = "text/css">

div {

фоновый цвет: синий;

Цвет: красный;

}

</style>

</head>

<тело>

Путь небес уменьшает избыток и компенсирует дефицит. Следовательно, пустота преодолевает реальную, и отсутствие дефицита преодолевает избыток.

</div>

</body>

3) Используйте операторы в теге стиля

@Import URL (Path of CSS -файл);

- Шаг 1: Создайте файл CSS

--- <стиль типа = "text/css">

@import url (div.css);

</style>

4) Используйте ссылку тега заголовка, чтобы ввести внешний файл CSS и поместить его в <Head> </head>

- Шаг 1: Создайте файл CSS

- <link rel = "styleSheet" type = "text/css" href = "Путь файла CSS"/>

**** Недостаток третьего метода комбинации: он не работает в некоторых браузерах, а четвертый метод обычно используется

**** Приоритет (общий)

Сверху вниз, изнутри, приоритет от низкого до высокого.

Приоритет пост-загрузки высокий

**** Формат: имя селектора {Имя атрибута: значение атрибута; Имя атрибута: значение атрибута; ......}

Основные селекторы для CSS (три типа)

** Управляйте данными в этом теге

1) Селектор тегов div {css code}

-Используйте имя метки как имя селектора

<голова>

<стиль типа = "text/css">

div {

фоновый цвет: синий;

Цвет: красный;

}

</style>

</head>

<тело>

<div> aaaaa </div>

</body>

2) Селектор класса. Имя {}

** У каждого тега HTML есть класс свойств

** <Head>

<стиль типа = "text/css">

div.test {

фоновый цвет: синий;

Цвет: красный;

}

p.test {

фоновый цвет: синий;

Цвет: красный;

}

Это может быть сокращено как:

.тест{

фоновый цвет: синий;

Цвет: красный;

}

</style>

</head>

** <Body>

<div> aaaaa </div>

<p> bbbbbbbbbb </p>

</body>

3) идентификационный селектор #Name {}

** Каждый тег HTML имеет идентификатор атрибута

-<div id = "test"> cccccccccccc </div>

-<Head>

<стиль типа = "text/css">

div#тест {

фоновый цвет: синий;

Цвет: красный;

}

p#тест {

фоновый цвет: синий;

Цвет: красный;

}

Это может быть сокращено как:

#тест {

фоновый цвет: синий;

Цвет: красный;

}

</style>

</head>

-<body>

<div id = "test"> aaaaaa </div>

<p id = "test"> bbbbbbbbbb </p>

</body>

** Приоритетный стиль> Селектор идентификатора> Селектор класса> Селектор тегов

Селектор расширения CSS (Learn)

1) Настройки стилей для вложенных ярлыков для селекторов ассоциаций

** <div> <p> wwwwwwwwwwwww </p> </div>

** Установите стиль тега P в тег Div и стиль вложенного тега

-<Head>

<стиль типа = "text/css">

div P {

фоновый цвет: синий;

Цвет: красный;

}

</style>

</head>

-<body>

<div> <p> wwwwwwwwwwwwwwww </p> </div>

<p> aaaaa </p>

</body>

2) Объединение селектора разных меток устанавливает один и тот же стиль

** <div> 1111 </div>

** Установите теги Div и P в один и тот же стиль и установите разные теги в один и тот же стиль

-<Head>

<стиль типа = "text/css">

div, p {

фоновый цвет: синий;

Цвет: красный;

}

</style>

</head>

-<body>

</body>

3) Селектор элементов псевдо (класс)

** CSS предоставляет несколько четко определенных стилей, которые можно использовать

** Например, гиперссылка

** Статус гиперссылок

-После щелчка и нажатия на исходное состояние

: Ссылка: Hover: Active: Посещено

Реализация кода:

<голова>

<стиль типа = "text/css">

/*Оригинальное состояние*/

A: ссылка {

фоновый цвет: красный;

}

/*Статус Хума*/

A: Hover {

фоновый цвет: зеленый;

}

/*Нажмите Статус*/

A: Active {

фоновый цвет: синий;

}

/*Статус после нажатия*/

A: посетил {

фоновый цвет: серый;

}

</style>

</head>

<тело>

<a href = "http://www.baidu.com"> Нажмите на ссылку на веб -страницу Baidu </a>

</body>

Модель коробки CSS (понять) для работы на данных необходимо поместить данные в область (DIV)

1) Граница границы: объединенные настройки

Вы также можете установить его отдельно: верхняя граница нижняя часть: пограничная дна слева: левые границы справа: правая границы

-<Head>

<стиль типа = "text/css">

div {

Ширина: 200px;

высота: 100px;

Граница: 2px твердый синий;

}

#div12 {

граница правая: 2px отрезанный желтым;

}

</style>

</head>

-<body>

<div id = "div11"> aaaaaaaaaaaa </div>

<div id = "div12"> bbbbbbbbb </div>

</body>

2) Благодарность внутренней маржи: установите расстояние между содержанием от верхней, нижней, левой и правой стороны

Вы также можете установить его отдельно: вверх, вниз, влево и вправо

<голова>

<стиль типа = "text/css">

div {

Ширина: 200px;

высота: 100px;

Граница: 2px твердый синий;

}

#div21 {

Заполнение: 20px;

}

#div22 {

Лебь набивки: 30px;

}

</style>

</head>

<тело>

<div id = "div21"> aaaaaaaaaaaa </div>

<div id = "div22"> bbbbbbbbb </div>

</body>

3) Поля: установите расстояние между DIV от самых четырех сторон

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

Компания CSS's Mayout float (понимать) поплавок: влево справа

Позиционирование макета CSS (понимать)

*позиция

** Значение атрибута:

-static: значение по умолчанию, без особого позиционирования

-Absolute:

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

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

Случай: смешанная картина и текст

** изображения и тексты отображаются вместе

Случай: подпись изображения

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

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

* Управляемый событиями: HTML делает статические эффекты веб-сайта, динамические эффекты JavaScript

*Клиент: конкретно относится к браузеру

* Особенности JS:

1) Динамическое взаимодействие интерактивной информации

2) Security JS не может получить доступ к файлам на локальном диске

3) кроссплатформенная Java, виртуальные машины; Пока браузеры, которые могут поддерживать JS, они могут работать

*Разница между JavaScript и Java: нет никаких отношений между ними

1) Java - это Sun Company, теперь Oracle; JS - Netscape Company

2) Java ориентирована на объект, а JS основан на объекте

3) Java - сильно напечатанный язык, а JS - слабо напечатанный язык

-Пример: int i = "10" в Java; сообщит об ошибке

--JS: var i = 10; var i = "10"; Ошибки не сообщаются

4) JS должен быть проанализирован только для выполнения, в то время как Java нужно сначала скомпилировать в файл ByteCode, а затем выполнить ее

*Композиция JS (три части):

1) Ecmascript

- ECMA: Европейская компьютерная ассоциация

-JS Синтаксис и заявления, организованные ECMA ...

2) Бом

-Модель объекта Broswer: модель объекта браузера

3) Дом

-Модель объекта-документа: модель объекта документа

Как объединить JS и HTML (два типа)

1) Используйте тег <script type = "text/javascript"> js code; </script>

2) Используйте теги скрипта, чтобы ввести внешний файл JS

- Создать файл JS и написать код JS

- <script type = "text/javascript" src = "js path"> </script>

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

Примитивные типы JS и объявление переменных

*Основной тип данных Java: Byte Short Int Long Float Double Char Bolean

*JS определяет переменные с помощью ключевого слова var

*Оригинальный тип JS (пять)

-String String var str = "abc";

-Number Numeric Type var m = 123;

-boolean true и false var flag = true;

-null var date = new date ();

** Получите ссылку на объект. NULL означает, что ссылка на объект пуста, и все ссылки на объект также являются объектом.

-Сансурированный определяет переменную, но не назначает var aa;

* typeof (имя переменной) Просмотреть тип данных текущей переменной

JS заявление

** Заявление, если суждение в Java ("=" означает назначение; "==" Равное, означает «Сравнение)

** Заявления JS

-Если судебное заявление

-Свитч (а) {

Случай 5: ...

перерыв;

Случай 6: ...

перерыв;

по умолчанию:...

...........

}

** Заглавный цикл, пока он будет

-Вар I = 5;

while (i> 0) {

оповещение (i);

я--;

}

--for (var i = 0; i <= 5; i ++) {

оповещение (i);

}

JS оператор

** JS не различает целые числа и десятичные активы

-Вар J = 123;

предупреждение (J/1000*1000);

** J/1000*1000 Результат в Java равен 0

** В JS нет различия между целыми и десятичными десятичками, 123/1000*1000 = 0,123*1000 = 123

** Добавить и вычитать операции строк

--Вар str = "123";

предупреждение (str + 1); Результат в Java и JS - 1231, что является строковым соединением

оповещение (Str - 1); При вычитании выполните операцию вычитания. Если STR не является числом, он подскажет NAN: это означает, что это не число

** Также можно эксплуатировать тип болея

*** Если установлено в True, это эквивалентно 1; Если установлено на false, он эквивалентен 0;

** == и === Разница

** Это все о вынесении суждений

** == Сравнение - это только значение; === Сравнение - это значение и тип

** Предложения, которые непосредственно выводят на страницу (содержимое может отображаться на странице) могут выходить переменные, фиксированные значения и HTML -код на страницу. Document.Write ("" ") содержит двойные кавычки, и если вы установите атрибуты метки, вам нужно использовать отдельные кавычки.

- document.write ("aaaa");

- document.write ("<hr/>");

*** document.write ("<table border = '1' bordercolor = 'red'>");

*** document.write ("</table>");

Упражнение: реализация таблицы умножения 99

JS Array

*Определение массива в java int [] arr = {1,2,3};

*Метод определения массива JS (три типа)

1) var arr = [1,2,3]; var arr = [1, "2", 3]; var arr = [1,2, true];

2) Использовать встроенный объект объекта массива

var arr1 = новый массив (5); // Определите массив, длина массива составляет 5

arr1 [0] = "1";

......

3) Использовать встроенный объект объекта

var arr2 = новый массив (3,4,5); // определить массив, элементы в массиве 3,4,5

* В массиве есть длина свойства: получить длину массива

* Длина массива является переменной, а массив может хранить данные различных типов данных.

Функция JS (метод)

** Определить функции (методы) в JS. Есть три способа определения функций. В списке параметров функций вам не нужно писать VAR, просто напишите имя параметра.

1) Используйте функцию ключевого слова

*** Имя метода функции (список параметров) {

Метод корпус;

Возвратное значение является необязательным (в зависимости от фактических потребностей);

}

Реализация кода: // Создать функцию с использованием первого метода

функциональный тест () {

Alert ("QQQQQQ");

}

// метод вызова

тест();

// Определите метод с параметрами для реализации добавления двух чисел

функция add1 (a, b) {

var sum = a+b;

предупреждение (сумма);

}

add1 (3,5);

Функция add2 (a, b, c) {

var sum1 = a+b+c;

вернуть сумму1;

}

предупреждение (add2 (7,8,9));

2) анонимные функции

var add = function (список параметров) {

Тело метода и возвращаемое значение;

}

Реализация кода: var add3 = function (m, n) {

предупреждение (M+N);

}

// метод вызова

add3 (8,9);

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

*Используйте встроенную функцию объекта в JS

var add = new Function («Список параметров», «корпус метода и возвращаемое значение»);

var add4 = новая функция ("x, y", "var sum; sum = x+y; return sum;");

оповещение (add4 (9,10));

// или следующий код

var canshu = "x, y";

var fangfati = "var sum; sum = x+y; return sum;";

var add4 = новая функция (Canshu, Fangfati);

предупреждение (add4 (5,3));

Глобальные и местные переменные JS

** Глобальная переменная: определите переменную в теге сценария, которая может использоваться в части JS на странице

-Используйте за пределами метода, внутри метода, используйте в другой теге сценария

** Локальная переменная: определить переменную внутри метода и может использоваться только внутри метода.

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

-Идет с инструментом отладки. В версии IE8 или выше F12 на клавиатуре, и в нижней части страницы появляется полоса, чтобы увидеть ошибку, когда вы смотрите на консоль.

Где должны быть размещены теги сценария

** Рекомендуется поставить теги сценария за </body>

** Если сейчас есть требование:

-in js, вам нужно получить значение при вводе. Если вы положите бирку сценария в голову, будут проблемы

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

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

Пример: функция add11 (a, b) {

вернуть A+B;

}

Функция add11 (a, b, c) {

вернуть A+B+C;

}

Функция add11 (a, b, c, d) {

вернуть A+B+C+D;

}

оповещение (add11 (2,2)); // НАН

предупреждение (add11 (2,2,3)); // НАН

оповещение (add11 (2,2,4,5)); // 13

Строковый объект JS

** Создание строки объекта var str = "abc ';

** Методы и свойства (документ)

-Атрибут Длина: длина строки

-Метон

1) Методы, связанные с HTML

- Bold (): Bold fontcolor (): установите цвет строкового fontsize (): установите размер ссылки на шрифт (): отображать строку в виде гиперссылки

2) Похоже на Java

-concat (): подключить строку charat (): вернуть строку indexof (): вернуть строку позиции строки split (): Нарежьте строку на замену массива ("", ""): замените два параметра String-Pass: первым параметром является исходный символ, а второй параметр-это символ, который должен быть заменен substr (5,3). Начните с пятого бита и перехватывайте три символа задом наперед (3,5) начало с третьего бита, включая третий бит до пятого бита, исключая пятый бит [3,5)

Array объект для JS

** Три способа создать массив

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

2) var arr1 = новый массив (3); // длина три

3) var arr1 = новый массив (1,2,3); // элемент 1,2,3

var arr = []; // Создать пустой массив

** Длина атрибута: просмотреть длину массива

** Метод

concat (); присоединиться(); Разделите массив в соответствии с указанными символами push (); Добавьте элементы в конец массива, верните новую длину массива ** Если добавленный массив - массив, добавьте массив в целую строку Pop (); Удалить и вернуть последний элемент массива reverse (); Отменить порядок элементов в массиве

Дата объект JS

** Получите текущее время на Java

Дата дата = новая дата ();

// формат // tolocalestring ()

** Получите текущее время в JS

var date = new Date ();

// преобразовать в обычный формат date.tolocalestring ();

Математический объект Математика JS

** Все внутренние - статические методы, вы можете использовать математику. method () непосредственно при его использовании;

Глобальные функции JS

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

** eval (); Выполните код JS (если строка является кодом JS, используйте метод для его непосредственно)

- var str = "alert ('1234');";

// alert (str); // alert ('1234');

eval (str); // 1234

** .....

Перегрузка функций JS Что перегрузка? Имя метода одинаково, параметры разные

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

Симулировать реализацию кода эффекта перезагрузки:

функция add1 () {

if (arguments.length == 2) {

вернуть аргументы [0] + аргументы [1];

} else if (arguments.length == 3) {

вернуть аргументы [0] + аргументы [1] + аргументы [2];

} else if (arguments.length == 4) {

вернуть аргументы [0] + аргументы [1] + аргументы [2] + аргументы [3];

} еще {

возврат 0;

}

// Вызов

оповещение (add1 (1,2)); // 3

предупреждение (add1 (1,2,3)); // 6

предупреждение (add1 (1,2,3,4)); // 10

предупреждение (add1 (1,2,3,4,5)); // 0

JS BOM объект

** Bom: Broswer Object Model: модель объекта браузера

** Какие объекты?

- Navigator: получить информацию о клиенте (информация о браузере)

- Экран: Получите информацию о экране

- Местоположение: запрошенный адрес URL-адреса

*** Атрибут Href

1) Получить запрошенный адрес URL -адреса

-document.write (location.href);

2) Установите адрес URL -адреса

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

<тело>

функция href1 () {

// alert ("aaaa");

location.href = "http://www.baidu.com";

}

</script>

</body>

- История: История запрошенного URL

- Создать три страницы (симулировать эффект истории вверх и вниз)

1) Создайте страницу A.HTML и напишите гиперссылку на B.HTML

2) Создать гиперссылку B.HTML для C.HTML

3) Создать C.HTML

- на предыдущую страницу посещение

История.back ();

История, Go (-1);

- перейдите на следующую страницу, которую вы посетили

ИСТОРИЯ.FORWARD ();

ИСТОРИЯ.go (1);

-Окно (мастерство ключа) объект верхнего уровня объекта Window (все объекты BOM работают в окне)

** Метод

- window.alert (); Аббревиатура: alert (); На странице появляется окно, чтобы отобразить контент

- Подтвердить («Показать содержимое сообщения»); В поле «Подтверждение» есть возвратное значение true и false

-- быстрый(); Диалоговое окно ввода (не так много используются сейчас), имеет два параметра: отображение содержимого и значение по умолчанию по умолчанию

- Open («Адрес URL», «», «Особенности окна, такие как ширина окна и высота»); Откройте новое окно

-- закрывать(); Закрыть окно (совместимость браузера относительно плохая)

- Сделайте несколько таймеров

*** setInterval ("JS Code", Milliseconds); window.setInterval ("alert ('123');", 3000); Указывает, что метод оповещения выполняется каждые три секунды

*** setTimeout ("JS Code", Milliseconds); означает, что он выполняется после миллисекундов, но он будет выполнен только один раз.

*** clearInterval (); Очистить таймер, установленную SetInterval

- var id1 = setInterval ("alert ('123');", 3000);

ClearInterval (id1);

*** cleartimeout (); Очистить таймер settimeout

JS DOM объект

** DOM: Модель объекта документа: Тип объекта документа

** Документ: Гипертекстовый документ (гипертектный с тегом документ) HTML, XML

** Объект: предоставленные свойства и методы

** Модель: Используйте свойства и методы для манипулирования гипертектными тегами документов

*** Вы можете использовать объекты, представленные в DOM в JS, использовать свойства и методы этих объектов для работы в документах разметки.

*** Чтобы работать в помеченном документе, вы должны сначала инкапсулировать все содержимое в помеченном документе в объекты

- Вам нужно инкапсулировать теги, атрибуты и текстовое содержание в HTML в объекты

*** Для работы на маркерных документах, документы Marker Parse Marker

*** Процесс разбора: в соответствии с иерархической структурой HTML, в памяти будет выделена структура дерева, и каждая часть HTML должна быть инкапсулирована в объект

*Только один корневой узел

Под корневым узлом может быть несколько дочерних узлов. Узлы без детских узлов называются листовыми узлами

- Объект документа: весь HTML-документ

- объект элемента: объект тега

- атрибут объект

- текстовый объект

** Объект узла узла: является родительским объектом этих объектов

DHTML: Это аббревиатура многих технологий

** html: инкапсулируйте данные

** CSS: используйте атрибуты и значения атрибутов в стиле

** DOM: эксплуатировать HTML -документы (помеченные документы)

** javascript: конкретно относится к синтаксическому утверждению JS (Ecmascript)

Объект документа представляет весь документ

** Общие методы

- method write (): 1) Выходные переменные на страницу 2) Вывод HTML-код на страницу

- getElementbyId (); означает получить элемент (метка) через ID

<тело>

// Использовать GetElementByID для получения объекта ввода тега

var input1 = document.getElementbyId ("nameid");

// Получить значение значения при входе

оповещение (input1.value);

// Установить значение на вход

input1.value = "BBBBBBBB";

</script>

</body>

- getElementsbyName (); Атрибут имени тега достойна тега, а возвращение - это коллекция (массив)

<тело>

var input1 = document.getElementsbyname ("name1"); // Переполненный параметр является значением имени на метке

для (var i = 0; i <input1.length; i ++) {// через обход, получите конкретное значение в каждом теге

var inputs = input1 [i]; // Каждый цикл получает входной объект и присваивает значение входам

предупреждение (inputs.value); // Получить значение значения в каждом входном теге

}

</script>

</body>

- getElementsbytagname («имя тега»); Возвращает коллекцию (массив)

<тело>

var inputs1 = document.getElementsbytagname ("input"); // Перепущенный параметр - это имя тега

for (var i = 0; i <inputs1.length; i ++) {

var input1 = inputs1 [i];

оповещение (input1.value);

}

</script>

</body>

**** ПРИМЕЧАНИЕ. Существует только одна метка, и эту метку можно получить только с помощью имени. В настоящее время использование GetElementsByName возвращает массив, но теперь есть только один элемент. В настоящее время нет необходимости пересекать, но вы можете напрямую получить значение с помощью индекса массива.

var input1 = document.getElementsbyname ("name1") [0];

оповещение (input1.value);

Случай: всплывающее окно в окне

** Процесс реализации: 1) Вам необходимо создать страницу: два ввода элементы и кнопку, а на кнопке есть событие, которое представляет собой новое всплывающее окно

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

** Открытие операций по перекрестным страницам: вы можете получить окно, которое создает это окно, то есть вы можете получить родительское окно

Случай: добавить узел в конце

1) Создать тег LI

2) Создать текст

3) Добавьте текст в LI

4) Добавить LI в UL

<тело>

</ul> <br/>

функция add1 () {

// Получить тег UL

var ul1 = document.getElementbyId ("ulid");

// Создать теги

var li1 = document.createElement ("li");

// Создать текст

var tex1 = document.createTextNode ("4444");

// Добавить текст в LI

li1.appendchild (tex1);

// Добавить LI в UL

ul1.appendchild (li1);

}

</script>

</body>

Element Object (Element Object): Чтобы управлять элементом, необходимо сначала получить элемент, используя соответствующий метод в документе, чтобы получить его.

** Метод

**** Получить значение в атрибуте getAttribute ("Имя атрибута");

**** Установить значение атрибута SetatTribute (имя, значение);

**** Удалить атрибут remoeAttribute ("Имя атрибута"); Значение не может быть удалено

// сначала получить входной метку

var input1 = document.getElementbyId ("inputId");

// предупреждение (input1.value);

alert (input1.getattribute ("value")); // Получить значение в атрибуте

alert (input1.getattribute ("class"));

input1.setattribute ("class", "хаха"); // Установить значение атрибута

alert (input1.getattribute ("class"));

input1.removeatTribute ("name");

</script>

** Хочу получить подзаголовок ниже тега

** Используйте атрибут ChildNodes, но этот атрибут имеет плохую совместимость

** Единственный эффективный способ получить теги под тегом, используйте метод GetElementsBytagName

<тело>

<li> aaaaaa </li>

<li> bbbbbb </li>

<li> cccccccc </li>

</ul>

<Скрипт>

// Получить тег UL

var ul1 = document.getElementbyId ("ulid1");

// Получите подзаголок ниже UL

// var lis = ul1.childnodes; // плохая совместимость

// предупреждение (lis.length); // Некоторые дисплея 3 некоторых дисплеев 7

var lis = ul1.getElementsbytagname ("li");

предупреждение (lis.length);

</script>

</body>

Свойства объекта узла

** nodeName

** Nodetype

** Nodevalue

** При анализе HTML с использованием DOM теги, атрибуты и текст в HTML должны быть инкапсулированы в объекты

** Значение, соответствующее узлу тега

Nodetype: 1

NodeName: имя тега Caps, например, Span

Nodevalue: Null

** Значение, соответствующее узлу атрибута

Nodetype: 2

nodename: атрибут имя

Nodevalue: значение свойства

** Значение, соответствующее текстовому узлу

Nodetype: 3

Nodename: #Text

Nodevalue: текстовое содержание

** <Body>

<span id = "spanid"> текстовое содержимое </span>

// Получить объект тега

var span1 = document.getElementbyId ("spanid");

// предупреждение (span1.nodeType); // 1

// предупреждение (span1.nodeName); // сапн

// предупреждение (span1.nodevalue); // нулевой

// атрибуты

var id1 = span1.getattributeNode ("id");

// alert(id1.nodeType); // 2

// alert(id1.nodeName); //идентификатор

// alert(id1.nodeValue); // spanid

//获取文本

var text1 = span1.getfirstChild;

// alert(text1.nodeType); // 3

// alert(text1.nodeName); //#текст

// alert(text1.nodeValue); // 文本内容

</script>

</body>

Node对象的属性二

<ul>

<li>aaaaaa</li>

<li>bbbbb</li>

</ul>

**父节点ul是li的父节点

*** parentNode ：父节点

**子节点li是ul的子节点

*** childNodes : 得到所有子节点，但是兼容性很差

*** firstChild : 获取第一个子节点

*** lastChild : 获取最后一个子节点

**同辈节点li与li之间是同辈节点

**nextSibling : 返回一个给定节点的下一个兄弟节点

**previousSibling : 返回一个给定节点的上一个兄弟节点

<тело>

<li id="li1">aaaaa</li>

<li id="li2">bbbbb</li>

<li id="li3">ccccc</li>

<li id="li4">ddddd</li>

</ul>

/* // 得到li1

var li1 = document.getElementById("li1");

// 得到ul

var ul1 = li1.parentNode;

alert(ul1.id); */

/* // 获取ul的第一个子节点

// 得到ul

var ul1 = document.getElementById("ulid");

// 第一个子节点

var li1 = ul1.firstChild;

alert(li1.id);

var li4 = ul1.lastChild;

alert(li4.id); */

//获取li的id是li3的上一个和下一个兄弟节点

var li3 = document.getElementById("li3");

var li4 = li3.nextSibling;

var li2 = li3.previousSibling;

alert(li4.id);

alert(li2.id);

</script>

</body>

操作dom树

** appendChild方法：

*** 添加子节点到末尾

*** 特点：类似于剪切粘贴的效果

** insertBefore(newNode,oldNode);

*** 在某个节点之前插入一个新的节点通过父节点添加

*** 两个参数1）要插入的节点2)在谁之前插入

*** 插入一个节点，节点不存在，创建

1）创建标签

2）创建文本

3）把文本添加到标签下面

**代码实现：（在<li>貂蝉</li>之前添加<li>董小宛</li>）

<тело>

</ul>

// 在<li>貂蝉</li>之前添加<li>董小宛</li>

function insert1() {

// 1、获取到li13标签

var li13 = document.getElementById("li13");

// 2、创建li

var li15 = document.createElement("li");

// 3、创建文本

var text15 = document.createTextNode("董小宛");

// 4、把文本添加到li下面

li15.appendChild(text15);

// 5、获取ul

var ul21 = document.getElementById("ulid21");

// 6、把li添加到ul下面（在<li>貂蝉</li>之前添加<li>董小宛</li>）

ul21.insertBefore(li15,li13);

}

</script>

</body>

**removeChild方法：删除节点

***通过父节点删除，不能自己删除自己

**代码实现: 删除<li id="li24">杨玉环</li>

<тело>

</ul>

// 删除<li id="li24">杨玉环</li>

function remove1() {

// 1、获取到li24标签

var li24 = document.getElementById("li24");

// 2、获取父节点ul标签

// 有两种方式1）通过id获取2）通过属性parentNode获取

var ul31 = document.getElementById("ulid31");

// 3、执行删除（通过父节点删除）

ul31.removeChild(li24);

}

</script>

</body>

** replaceChild(newNode,oldNode); 替换节点

***两个参数：1）新的节点（替换成的节点） 2）旧的节点（被替换的节点）

***不能自己替换自己，通过父节点替换

** cloneNode(boolean) : 复制节点

**代码实现：把ul列表复制到另外一个div里面

<тело>

</ul>

</div>

// 把ul列表复制到另外一个div里面

1、获取到ul

2、执行复制方法cloneNode方法复制参数true

3、把复制之后的内容放到div里面去

** 获取到div

** appendChild方法

function clone1() {

// 1、获取ul

var ul41 = document.getElementById("ulid41");

// 2、复制ul，放到类似剪切板里面

var ulcopy = ul41.cloneNode(true);

// 3、获取到div

var divv = document.getElementById("divv");

// 4、把副本放到div里面去

divv.appendChild(ulcopy);

}

</script>

</body>

**操作dom总结：

**获取节点使用方法

getElementById() : 通过节点的id属性，查找对应节点

getElementsByName() : 通过节点的name属性，查找对应节点

getElementsByTagName() : 通过节点名称，查找对应节点

**插入节点的方法

insertBefore方法: 在某个节点之前插入

appendChild方法: 在末尾添加，类似于剪贴粘贴

**删除节点的方法

removeChild方法: 通过父节点删除

**替换节点的方法

replaceChild方法: 通过父节点替换

innerHTML属性（重点）

** 这个属性不是dom的组成部分，但是大多数浏览器都支持的属性

** 第一个作用：获取文本内容

var span1 = document.getElementById("sid");

alert(span1.innerHTML);

** 第二个作用：向标签里面设置内容（可以是html代码）

<тело>

</div>

// 获取span标签

var span1 = document.getElementById("sid");

//alert(span1.innerHTML); // 测试文本

// 向div里面设置内容<h1>AAAAA</h1>

// 获取div

var div11 = document.getElementById("div11");

div11.innerHTML = "<h1>AAAAA</h1>"; // 设置内容

</script>

</body>

** 练习：向div里面添加一个表格

var tab = "<table border='1'><tr><td>aaaaa</td></tr><tr><td>bbbb</td></tr></table>";

div11.innerHTML = tab;

案例：动态显示时间

** 得到当前时间

var date = new Date();

var d1 = date.toLocaleString();

** 需要让页面每一秒获取时间

setInterval方法定时器

** 显示到页面上

每一秒向div里面写一次时间使用innerHTML属性

** 代码实现动态显示时间

<тело>

</div>

function getD1() {

// 当前时间

var date = new Date();

// 格式化

var d1 = date.toLocaleString();

// 获取div

var div1 = document.getElementById("times");

div1.innerHTML = d1;

}

// 使用定时器实现每一秒写一次时间

setInterval("getD1();",1000);

</script>

</body>

案例：全选练习

** 使用复选框上面一个属性判断是否选中

** checked 属性

** checked = true; 选中

** checked = false; 未选中

** 创建一个页面

** 复选框和按钮

***四个复选框表示爱好

***还有一个复选框操作全选和全不选有一个事件

***三个按钮全选全不选反选每个按键都分别有事件

**代码实现

<тело>

<input type="checkbox" id="boxid" onclick="selAllNo();"/>全选/全不选

<br/>

<input type="checkbox" name="love"/>篮球

<input type="checkbox" name="love"/>排球

<input type="checkbox" name="love"/>羽毛球

<input type="checkbox" name="love"/>乒乓球

<br/>

// 实现全选操作

function selAll() {

1、获取要操作的复选框使用getElementsByName();

2、返回的是数组

**属性checked 判断复选框是否选中

** checked = true; // 表示选中

** checked = false; // 表示未选中

**遍历数组，得到的是每一个checkbox

** 把每一个checkbox属性设置为true 即checked = true;

// 获取要操作的复选框

var loves = document.getElementsByName("love");

// 遍历数组，得到每一个复选框

for(var i=0;i<loves.length;i++) {

var love1 = loves[i]; // 得到每一个复选框

love1.checked = true; // 设置属性为true

}

// 实现全不选操作

function selNo() {

1、获取到要操作的复选框

2、返回的是数组，遍历数组

3、得到每一个复选框

4、设置复选框的属性checked = false;

// 获取要操作的复选框

var loves = document.getElementsByName("love");

// 遍历数组，得到每一个复选框

for(var i=0;i<loves.length;i++) {

var love1 = loves[i]; // 得到每一个复选框

love1.checked = false; // 设置属性为true

}

function selOther() { // 实现反选

var loves = document.getElementsByName("love");

// 遍历数组，得到每一个复选框

for(var i=0;i<loves.length;i++) {

var love1 = loves[i]; // 得到每一个复选框

if(love1.checked == true) {

love1.checked = false;

}

еще {

love1.checked = true;

}

function selAllNo() { // 一个多选框实现全选全不选切换

1、得到上边的复选框通过id来获取

2、判断该复选框是否选中if条件checked == true

3、如果是选中，下面是全选

4、如果不是选中，下面是全不选

var box1 = document.getElementById("boxid");

if(box1.checked == true) {

selAll();

}

еще {

selNo();

}

</script>

</body>

案例：下拉列表左右选择

** 下拉选择框

</select>

** 创建一个页面

** 两个下拉框设置属性multiple

** 四个按钮，都有事件

** 代码实现：

<тело>

<div>

</select>

</div>

<div>

</div>

<div>

<option>AAAAAAAA</option>

<option>BBBBBBBB</option>

</select>

</div>

<div>

</div>

// 实现选中添加到右边

function selToRight() {

1、获取select1 里面的option

* 使用getElementsByTagName(); 返回的是数组

* 遍历数组，得到每一个option

2、判断option是否被选中

* 属性selected ，判断是否被选中

** selected = true; 选中

** selected = false;未选中

3、如果选中，把选择的添加到右边去

4、得到select2

5、添加选择的部分

* appendChild 方法

// 获取到select1 里面的option

// 得到select1

var select1 = document.getElementById("select1");

// 得到select2

var select2 = document.getElementById("select2");

// 得到option

var options1 = select1.getElementsByTagName("option");

// 遍历数组

for(var i=0;i<options1.length;i++) {

// 第一次循环i=0 length:5

// 第二次循环i=1 length:4

// 第三次循环i=2 length:3

// 再往后就不满足条件了后边的都循环不到了

var option1 = options1[i]; // 得到每一个option对象

// 判断是否被选中

if(option1.selected == true) {

// 添加到select2 里面

select2.appendChild(option1);

я--; // Pay attention to this point, if you don’t write it, you will have problems

}

// 全部添加到右边

function allToRight() {

var select2 = document.getElementById("select2");

var select1 = document.getElementById("select1");

var options1 = select1.getElementsByTagName("option");

for(var i=0;i<options1.length;i++) {

var option1 = options1[i];

select2.appendChild(option1);

я--;

}

// 右边的添加到左边的操作类似

</script>

</body>

案例：下拉框联动效果(省市联动)

** 创建一个页面，有两个下拉选择框

** 在第一个下拉框里面有一个事件：改变事件onchange事件

** 方法add1(this.value); 表示当前改变的option 里面的value值

** 创建一个二维数组，存储数据

** 每个数组中第一个元素是国家名称，后面的元素是国家里面的城市

**代码实现：

<тело>

</select>

</select>

// 创建一个数组存储数据

// 使用二维数组

var arr = new Array(4);

arr[0] = ["中国","南京","抚州","临洮","日喀则","哈密"];

arr[1] = ["美国","华盛顿","底特律","休斯顿","纽约"];

arr[2] = ["德国","慕尼黑","柏林","法兰克福","狼堡"];

arr[3] = ["日本","东京","北海道","大阪","广岛","长崎"];

function add1(val) {

/* 实现步骤：

1、遍历二维数组

2、得到的也是一个数组（国家对应关系）

3、拿到数组中的第一个值和传递过来开的值作比较

4、如果相同，获取到第一个值后面的元素

5、得到city 的select

6、添加过去使用appendChild 方法

** 需要创建option （三步操作）

// 由于每次都要向city里面添加option，第二次添加，前边第一次的会保留，追加

// 所以每次添加之前，判断一下city里面是否有option，如果有，删除

// 获取city 的select

var city1 = document.getElementById("cityid");

// 得到city 里面的option

var options1 = city1.getElementsByTagName("option");

// 遍历数组

for(var k=0;k<options1.length;k++) {

// 得到每一个option

var op = options1[k];

// 删除这个option 通过父节点删除

city1.removeChild(op);

k--;// 每次删除长度都会减一k都会增加一不执行此操作会出错

}

// 遍历二维数组

for(var i=0;i<arr.length;i++) {

// 得到二维数组里面的每一个数组

var arr1 = arr[i];

// 得到遍历之后的数组的第一个值

var firstvalue = arr1[0];

// 判断传递过来的值和第一个值是否相同

if(firstvalue == val) { // 相同

// 得到第一个值后面的元素

// 遍历数组arr1

for(var j=1;j<arr1.length;j++) {

var value1 = arr1[j]; // 得到国家之后城市的名称

// alert(value1);

// 创建option

var option1 = document.createElement("option");

// 创建文本

var text1 = document.createTextNode(value1);

// 把文本添加到option里面

option1.appendChild(text1);

// 添加值到city 的select 里面

city1.appendChild(option1);

}

</script>

</body>

以上这篇JavaWeb学习笔记分享(必看篇)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。