Пользовательский список
<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 name = "top"> top </a>
-Обратно от этого места
<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 (вертикальное слияние)
<td rowspan = "3" align = "center"> 13 </td>
** 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"/>
*** Выпадающий элемент ввода (не во входном теге)
<select name = "рождение">
<option value = "0"> Пожалуйста, выберите </option>
<option value = "1991"> 1991 </option>
<option value = "1992"> 1992 </option>
<option value = "1993"> 1993 </option>
</select>
**** Реализуйте выбранные свойства по умолчанию
---- selected = "selected"
*** Текстовое поле (например: заполните поле для профиля личной информации при регистрации учетной записи)
<textarea cols = "5" Rows = "20"> </textarea>
*** Скрытый элемент (не отображается на странице, но существует в коде HTML)
<input type = "hidden"/>
*** Отправить кнопку
<input type = "Отправить"/>
<input type = "Отправить" value = "title"/>
-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 = значение ввода и
** Параметры похожи на форму ключа
*** Используйте (клик) изображения для отправки
<input type = "image" src = "path wath"/>
*** Кнопка сброса: вернуться к начальному состоянию входного элемента
<input type = "сбросить"/>
<input type = "reset" value = "Название кнопки"/>
*** Нормальные кнопки (используются с JS)
<input type = "button" value = ""/>
Случай: используйте теги формы для реализации страницы регистрации
Когда содержание табличной ячейки пустое, заполнители ((сбежавшие пространства)), как правило, заполняются.
Использование других общих тегов в 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/>
<Frameset Rows = "80,*">
<name = "top" src = "a.html">
<Frameset Cols = "120,*">
<кадр name = "Left" src = "b.html">
<Frame name = "right" src = "http://www.baidu.com">
</frameset>
</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 id = "">
Путь небес уменьшает избыток и компенсирует дефицит. Следовательно, пустота преодолевает реальную, и отсутствие дефицита преодолевает избыток.
</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>
<p> 2222 </p>
** Установите теги Div и P в один и тот же стиль и установите разные теги в один и тот же стиль
-<Head>
<стиль типа = "text/css">
div, p {
фоновый цвет: синий;
Цвет: красный;
}
</style>
</head>
-<body>
<div> 1111 </div>
<p> 2222 </p>
</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 -адреса
-Кнопка размещена на странице, а событие связано с кнопкой. При нажатии на эту кнопку страница может перейти на другую страницу
<тело>
<input type = "button" value = "Jumpbaidu" onclick = "href1 ();"/>
<script type = "text/javascript">
функция 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
<тело>
<input type = "text" id = "nameid" value = "aaaaaa"/> <br/>
<script type = "text/javascript">
// Использовать GetElementByID для получения объекта ввода тега
var input1 = document.getElementbyId ("nameid");
// Получить значение значения при входе
оповещение (input1.value);
// Установить значение на вход
input1.value = "BBBBBBBB";
</script>
</body>
- getElementsbyName (); Атрибут имени тега достойна тега, а возвращение - это коллекция (массив)
<тело>
<input type = "text" name = "name1" value = "aaaaaa"/> <br/>
<input type = "text" name = "name1" value = "bbbb"/> <br/>
<input type = "text" name = "name1" value = "cccccc"/> <br/>
<script type = "text/javascript">
var input1 = document.getElementsbyname ("name1"); // Переполненный параметр является значением имени на метке
для (var i = 0; i <input1.length; i ++) {// через обход, получите конкретное значение в каждом теге
var inputs = input1 [i]; // Каждый цикл получает входной объект и присваивает значение входам
предупреждение (inputs.value); // Получить значение значения в каждом входном теге
}
</script>
</body>
- getElementsbytagname («имя тега»); Возвращает коллекцию (массив)
<тело>
<input type = "text" name = "name1" value = "aaaaaa"/> <br/>
<input type = "text" name = "name1" value = "bbbb"/> <br/>
<input type = "text" name = "name1" value = "cccccc"/> <br/>
<script type = "text/javascript">
var inputs1 = document.getElementsbytagname ("input"); // Перепущенный параметр - это имя тега
for (var i = 0; i <inputs1.length; i ++) {
var input1 = inputs1 [i];
оповещение (input1.value);
}
</script>
</body>
**** ПРИМЕЧАНИЕ. Существует только одна метка, и эту метку можно получить только с помощью имени. В настоящее время использование GetElementsByName возвращает массив, но теперь есть только один элемент. В настоящее время нет необходимости пересекать, но вы можете напрямую получить значение с помощью индекса массива.
<input type = "text" name = "name1" value = "aaaaaa"/>
var input1 = document.getElementsbyname ("name1") [0];
оповещение (input1.value);
Случай: всплывающее окно в окне
** Процесс реализации: 1) Вам необходимо создать страницу: два ввода элементы и кнопку, а на кнопке есть событие, которое представляет собой новое всплывающее окно
2) Создать всплывающую страницу: каждая строка таблицы имеет кнопку, номер и имя; В кнопке есть событие: назначьте текущее число и имя в соответствующую позицию первой страницы.
** Открытие операций по перекрестным страницам: вы можете получить окно, которое создает это окно, то есть вы можете получить родительское окно
Случай: добавить узел в конце
1) Создать тег LI
2) Создать текст
3) Добавьте текст в LI
4) Добавить LI в UL
<тело>
<ul id = "ulid">
<li> 1111 </li>
<li> 2222 </li>
<li> 3333 </li>
</ul> <br/>
<input type = "button" value = "add" onclick = "add1 ();"/>
<script type = "text/javascript">
функция 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 ("Имя атрибута"); Значение не может быть удалено
<input type = "text" name = "name1" id = "inputId" value = "aaaa"/>
<script type = "text/javascript">
// сначала получить входной метку
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
<тело>
<ul id = "ulid1">
<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>
<script type = "text/javascript">
// Получить объект тега
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 : 返回一个给定节点的上一个兄弟节点
<тело>
<ul id="ulid">
<li id="li1">aaaaa</li>
<li id="li2">bbbbb</li>
<li id="li3">ccccc</li>
<li id="li4">ddddd</li>
</ul>
<script type = "text/javascript">
/* // 得到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 id="ulid21">
<li id="li11">西施</li>
<li id="li12">王昭君</li>
<li id="li13">貂蝉</li>
<li id="li14">杨玉环</li>
</ul>
<input type="button" value="insert" onclick="insert1();"/>
<script type = "text/javascript">
// 在<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 id="ulid31">
<li id="li21">西施</li>
<li id="li22">王昭君</li>
<li id="li23">貂蝉</li>
<li id="li24">杨玉环</li>
</ul>
<input type="button" value="remove" onclick="remove1();"/>
<script type = "text/javascript">
// 删除<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 id="ulid41">
<li id="li31">西施</li>
<li id="li32">王昭君</li>
<li id="li33">貂蝉</li>
<li id="li34">杨玉环</li>
</ul>
<div id="divv">
</div>
<input type="button" value="clone" onclick="clone1();"/>
<script type = "text/javascript">
// 把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代码)
<тело>
<span id="sid">测试文本</span>
<div id="div11">
</div>
<script type = "text/javascript">
// 获取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 id="times">
</div>
<script type = "text/javascript">
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/>
<input type="button" value="全选" onclick="selAll();"/>
<input type="button" value="全不选" onclick="selNo();"/>
<input type="button" value="反选" onclick="selOther();"/>
<script type = "text/javascript">
// 实现全选操作
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>
<option>111</option>
<option>111</option>
</select>
** 创建一个页面
** 两个下拉框设置属性multiple
** 四个按钮, 都有事件
** 代码实现:
<тело>
<div id="s1" style="float:left;">
<div>
<select id="select1" multiple="multiple">
<option>1111111</option>
<option>22222222</option>
<option>33333333</option>
<option>444444444</option>
</select>
</div>
<div>
<input type="button" value="选中添加到右边" onclick="selToRight();"/><br/>
<input type="button" value="全部添加到右边" onclick="allToRight();"/>
</div>
</div>
<div id="s2">
<div>
<select id="select2" multiple="multiple">
<option>AAAAAAAA</option>
<option>BBBBBBBB</option>
</select>
</div>
<div>
<input type="button" value="选中添加到左边" onclick="selToLeft();"/><br/>
<input type="button" value="全部添加到左边" onclick="allToLeft();"/>
</div>
</div>
<script type = "text/javascript">
// 实现选中添加到右边
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 id="countryid" onchange="add1(this.value);">
<option value="0">--请选择--</option>
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="德国">德国</option>
<option value="日本">日本</option>
</select>
<select id="cityid">
<option value="" selected>
<option value="">
</select>
<script type = "text/javascript">
// 创建一个数组存储数据
// 使用二维数组
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学习笔记分享(必看篇)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持武林网。