JavaScriptWindow (шесть)

window объект (Dom объект верхнего уровня в )

Объект window представляет текущее окно браузера.
При использовании свойств и методов объекта window вы можете опустить window.
Например:
- window.alert('hello'); может быть опущен как alert('hello');
- window.document может напрямую писать документ
Не пишите, если вы не можете написать окно, что может уменьшить количество байтов файла js.

window методы объекта

window.alert('Всем привет!');//Всплывает диалоговое окно с предупреждением
window.confirm('Вы уверены, что хотите удалить?');//ОК, отменить диалог, вернуть true или false;
window.navigate(url);//Повторный переход веб-страницы по URL-адресу, поддерживает только IE, Opera11.6, рекомендуется использовать window.location.href='url';//поддерживает большинство браузеров

window.setInterval(code,delay)//Выполнять указанный код через равные промежутки времени (аналогично элементу управления Timer в winForm.)
- Первый параметр: указанная строка кода
- Второй параметр: интервал времени (в миллисекундах)
- var intervalId=setInterval("оповещение('привет');",1000);

Пример. Пусть значение текстового поля увеличивается автоматически.

<html>

<head>

setInterval(function ()

{

var num = txt.value;

num = parseInt(num) + 1;

txt.value = num;

}, 1000)

</script>

</head>

<body>

</body>

</html>

window.clearInterval(intervalId);//Остановить таймер
- clearInterval() отменяет синхронизацию выполнения setInterval, что эквивалентно Enabled=False в Timer. Поскольку setInterval может устанавливать несколько временных интервалов, в clearInterval необходимо указать идентификатор таймера, который необходимо сбросить, то есть возвращаемое значение setInterval.

Примечание:

При каждом вызове setInterval генерируется новый таймер, а старый не останавливается автоматически. Так это похоже на "бег быстрее"!

clearInterval(setInterval('scroll()', 500)), неправильно, не остановит исходный таймер, потому что setInterval сгенерирует новый таймер, который будет очищен, как только он будет сгенерирован

Примеры применения:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "Я 3.org/TR/XHTML1/D…">

<head>

Пекин приветствует вас

var timerId;

function scroll() {

var title = document.title;

var lastCh = title.charAt(title.length - 1);// подвержен ошибкам

var leftStr = title.substring(0, title.length - 1);

document.title = lastCh + leftStr;

}

//Каждый раз при вызове setInterval будет генерироваться новый таймер, а старый не остановится автоматически. Так это похоже на "бег быстрее"!

</script>

</head>

<body>

</body>

</html>

Пример: использование таймера для достижения эффекта выделения.

<html>

<head>

var dir = "left";

setInterval(function () {

var title = document.title;

var first;

var last;

if (dir == 'left') {

first = title.substr(0, 1);

last = title.substr(1);

} else {

first = title.substring(0, title.length - 1);

last = title.substring(title.length - 1, title.length);

}

document.title = last + first;

}, 1000)

function setDir(d)

{

dir = d;

}

</script>

</head>

<body>

</body>

</html>

body , document события объекта

onload (срабатывает после загрузки страницы)
- Срабатывает при загрузке веб-страницы, браузер загружает документ во время его анализа и выполнения. Возможно, существует элемент, которым необходимо управлять при выполнении JavaScript. Этот элемент не был загружен. В этом случае код операции следует поместить в событие onload тела, или вы можете поместить JavaScript после элемента. Событие onload элемента запускается, когда загружается сам элемент, и загружается все тело.
- window.ControlId (устарело)
- document.getElementById("Идентификатор элемента управления"); (рекомендуется)
В дополнение к атрибутам, конечно, есть общие события элемента HTML: onclick (щелчок), ondblclick (двойной щелчок), onkeydown (нажатие клавиши), onkeypress (нажатие кнопки), onkeyup (отпускание клавиши), onmousedown (нажатие мыши)), onmousemove (перемещение мыши), onmouseout (мышь покидает диапазон элементов), onmouseover (мышь перемещается в диапазон элементов), onmouseup (отпускание кнопки мыши), oncontextmenu (срабатывает при нажатии правой кнопки мыши в браузере для отображения «правой щелкните меню") Подождите.

window свойства объекта

объект window.location:
- window.location.href='';//Повторный переход на новую страницу, вы можете взять значение или присвоить значение.
- window.location.reload();//Обновить текущую страницу
window.event — очень важный атрибут в IE, используемый для получения информации, когда происходит событие.Событие не ограничивается событием объекта окна, и события всех элементов могут получать соответствующую информацию через атрибут события. Аналогично e(EventArgs) в winForm. //Совместимо с IE, Chrome, несовместимо с FF (с параметром события).
- Свойство window.event.altKey, тип bool, указывает, была ли нажата клавиша alt, когда произошло событие. Подобно ctrlKey, shiftKey. Демонстрация: ;

Координаты мыши в клиентской области, когда происходит событие clientX, clientY; координаты мыши на экране, когда происходит событие screenX, screenY; координаты мыши относительно источника события (например, срабатывание при щелчке, когда кнопка нажата), когда происходит событие offsetX, offsetY.

document.onmousemove = function ()

{//Положение мыши в документе.

// document.title = window.event.clientX + "==" + window.event.clientY;

//Положение мыши на экране.

//document.title = window.event.screenX + '==' + window.event.screenY;

//Позиция относительно источника события.

document.title = window.event.offsetX + '==' + window.event.offsetY;

}

</script>

(window.event.returnValue) returnValue свойство, если для returnValue установлено значение false, оно отменит обработку поведения по умолчанию. При клике по гиперссылке доступ на страницу href запрещен. Запрещено отправлять форму на сервер во время проверки формы, чтобы предотвратить отправку неверных данных на сервер и обновление страницы. (οnsubmit="window.event.returnValue=false;")
window.event.returnValue не совместим с Firefox

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

<head>

Пекин приветствует вас

function btn_click() {

var txt = document.getElementById("txt").value;

if (txt.length == 0) {

Сообщить("Пожалуйста, введите ваше имя пользователя!");

document.getElementById("txt").focus();//Текстовое поле получает курсор

window.event.returnValue = false;

}

</script>

</head>

<body>

<br />

</form>

</body>

</html>

Пример 2: определить, может ли гиперссылка перейти

<head>

Пекин приветствует вас

function link_click(a) {

if (a) {

}

else {

Сообщить("Нет разрешения")

window.event.returnValue = false;

}

</script>

</head>

<body>

<a id="link" href="HTMLPage2.htm" οnclick="link_click(0)">hjijiodhoih</a>

</body>

</html>

FireFox: e. preventDefault(); Отменить действие по умолчанию для события.
Напишите return false напрямую; можно использовать IE, FF, Chrome. Для этого требуется динамическая регистрация событий.

Пример 1: www.w3.org/1999/xhtml">

<head>

Пекин приветствует вас

window.onload = function() {

document.getElementById("Submit1").onclick = function() {

var txt = document.getElementById("txt").value;

if (txt.length == 0) {

Сообщить("Пожалуйста, введите ваше имя пользователя!");

Document.getElementById("txt").focus();//Текстовое поле получает курсор

return false;

}

</script>

</head>

<body>

<br />

</form>

</body>

</html>

Пример 2: недействительные гиперссылки

<head>

Пекин приветствует вас

window.onload = function() {

document.getElementById("link").onclick = function() {

return false;

}

</script>

</head>

<body>

<a id="link" href="HTMLPage2.htm">hjijiodhoih</a>

</body>

</html>

//Запись под FF

****function ****bodyClickHandlerOnFF ( e ) {

****if ( e . altKey ) {

****alert («нажать клавишу Alt»);

} else {

****alert («Нормальный щелчок! ');

}

//Запись под IE

****function ****bodyClickHandler () {

****if ( window . event . altKey ) {

****alert ( 'press alt key' );

} else {

****alert ( 'normal click' );

}

==========================Совместимое письмо ====================== = =========

****document . body . onmousemove ****= ****function () {

****if ( window . event ) {

****document . title ****= ****'(' ****+ ****window . event . clientX ****+ ****',' ****+ ****window . event . clientY ****+ ****')' ;

} else {

****document . title ****= ****'(' ****+ ****arguments [ 0 ]. clientX ****+ ****',' ****+ ****arguments [ 0 ]. clientY ****+ ****')' ;

}

****</script>

Свойства window.event (продолжение с предыдущей страницы):
- srcElement: получить объект источника события. Несколько кнопок имеют общую функцию ответа на событие. ****_click(отправитель объекта,EventArgs e)//IE, поддержка Chrome. См. Примечание 1. //Используйте e.target под FF;

В IE:

****function ****MyEventHandler () {

****var ****obj ****= ****window . event . srcElement ;

****alert ( obj . value );

}

Под ФФ:

****function ****MyEventHandlerFF ( e ) {

****var ****obj ****= ****e . target ;

****alert ( obj . value );

}

//IE and FF

function ****TNB ( e ) {

****if ( e . target ) {

****alert ( e . target . value );

} else ****if ( e . srcElement ) {

****alert ( e . srcElement . value );

}

- кнопка, кнопка мыши при возникновении события, IE: 1 — левая кнопка, 2 — правая кнопка, 4 — колесо//Если вы хотите проверить значение event.button, пожалуйстаonmousedownтест на мероприятии. В событии onclick распознаются только щелчки левой кнопки мыши. Разные браузеры могут возвращать разные значения. (разные значения браузера разные)

function mousedown()

{

alert(event.button);

}

</script>

- За исключением браузера IE, другие браузеры имеют параметр по умолчанию, объект события, при привязке функции обработчика событий.
(*) экранный объект, получить информацию об экране:

alert("Разрешение: " + screen.width + "*" + screen.height);

if (screen.width < 1024 || screen.height < 768) {

Сообщить("Разрешение слишком низкое!");

}

объект clipboardData, операции с буфером обмена. // Поддерживается только IE,FF использованная литература
- setData("Text",val), установить значение в монтажном столе.

пример:

function f1()

{

var t = document.getElementById("txt").value;

window.clipboardData.setData("text", t);

}

</script>

<body>

</body>

- getData("Text") считывает значение монтажного стола, а возвращаемое значение представляет собой содержимое монтажного стола;
- clearData("Текст") очищает монтажный стол;
- Дело: Скопируйте адрес в дружественный. См. примечания.
- При копировании срабатывает метод oncopy тела, а прямой возврат false — запрет копирования.
- Многие элементы также имеют события oncopy (копирование), onpaste (вставка): oncut
- Случай: Вставка номера счета запрещена.

- Кейс: При копировании статей на сайте, чтобы "копирующие стороны" не добавили источник статьи, код:

function ff()

{

var t = clipboardData.getData("text");

t = t + "
Авторские права:www.srtc.org.cn";

clipboardData.setData("text", t);

}

</script>

<span>shiusdhfiusdhuihfiusdh</span>

</body>

Пользователь может изменить содержимое монтажного стола через 0,1 секунды после выполнения действия копирования. 100мс это просто частое значение, пишем 1000, 10, 50, 200... все. Монтажный стол нельзя изменить непосредственно в oncopy. Операция монтажного стола не может выполняться непосредственно в oncopy, поэтому установите таймер и выполните ее через 0,1 секунды, чтобы ее больше не было в стеке вызовов выполнения oncopy.

история операции история.

window.history.back() идет назад, window.history.forward() идет вперед.

window.history.go(-1) идет назад, window.history.go(1) идет вперед

свойство документа:
- Свойство документа является наиболее сложным свойством в объекте окна.
- Поскольку при использовании элементов объекта окна значение window. может быть опущено, документ обычно записывается напрямую.
- метод документа:
  - write();//Записываем содержимое в документ. writeln() похож на write, за исключением того, что в конце добавляется возврат каретки. Код, написанный в таких событиях, как onclick, удалит содержимое страницы, и только в процессе загрузки страницы запись будет интегрирована с исходным содержимым. writeln() — это новая строка в исходном коде. Не то же самое, что
    .
  - document.write() часто используется в рекламном коде и коде встроенного ресурса.
  - Контент-альянс, рекламный код, cnzz не должны поддерживаться веб-мастером главной страницы, пока контент изменяется встроенным поставщиком контента js, отображаемый контент будет меняться. пример:

write часто используется в рекламном коде и коде встроенного ресурса

Пример рекламного кода: зарегистрируйте аккаунт на http://heima8.com/ (имя аккаунта для тестирования: itcast0710 пароль: 123456), подайте заявку на рекламный код, а затем разместите его на странице

Пример интеграции ресурсов: Baidu Newsnews.Baidu.com/код новостей.Контракт…

Код Baidu News эквивалентен файлу js, встроенному в другой веб-сайт на странице. Файл js представляет собой большой оператор записи. Преимущество этого в том, что главной странице не нужно записывать мертвый контент, а встроенный контент js меняется. при изменении встроенного содержимого.

Преимущества скрипта:

1. Автоматическое выполнение

2. Динамическая генерация.

=================example==================

var reffer = "";

var url = "";

if (window.parent != window.self) {

try { reffer = parent.document.referrer; }

catch (err) { reffer = document.referrer; }

try { url = parent.document.location; }

catch (err) { url = document.location; }

} else { reffer = document.referrer; url = document.location; }

document.writeln("<iframe marginwidth='0' marginheight='0' frameborder='0' bordercolor='#000000' scrolling='no' src='PV. Dark Horse 8.com/index.PHP? Боюсь…" + escape(reffer) + "&url=" + escape(url) + "' width='468' height='60'></iframe>");

</script>

- - (Используйте тег pre, чтобы увидеть разницу между write() и writeln(), эффект). пример:

document.write('<pre>');

document.write('1');

document.writeln('2');

document.write('3');

document.write('</pre>');

</script>

- - Самая простая демонстрация обхода DOM.

// Обходим прямые дочерние узлы, если вам нужно получить все узлы. Его нужно разместить в финальном тесте страницы (или в onload, иначе страница еще не загружена.)

var objHtml = document.documentElement;

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

alert(objHtml.childNodes[i].nodeName);

}

- - getElementById() (очень часто используется), получить объект в соответствии с идентификатором элемента, идентификатор не может повторяться на веб-странице. Также можно напрямую обращаться к элементу по его id, но есть проблемы, такие как допустимый диапазон, form1.textbox1 (когда элемент помещается в форму (идентификатор form.element нужно передать в html-странице )), поэтому не рекомендуется напрямую управлять элементами с помощью идентификатора, а с помощью getElementById.

Примечание. Если на веб-странице есть элементы с повторяющимися идентификаторами, то getElementById() получает

//Первый идентификатор - это элемент с указанным идентификатором, а не массив

var txtctrl = document.getElementById('txt1');

- - getElementsByName() получает объект в соответствии с именем элемента.Поскольку имя элемента на странице может повторяться, например имена нескольких RadioButton, возвращаемое значение getElementsByName представляет собой массив объектов.
  - getElementsByTagName(), получить массив элементов с указанным именем тега, например, getElementsByTagName("p"), чтобы получить все теги
    . * Указывает все теги.
  - Не используйте здесь циклы forin (циклы forin перебирают пары ключ-значение, а не сами объекты). (Есть много проблем: радио имеет одинаковую клавишу, первая клавиша имеет длину и т. д..) Предложение: Использовать для цикла Случай: реализовать все флажки, обратный выбор
Случай: нажмите кнопку, нажатая кнопка отобразит «woohoo», а другие кнопки отобразят «ха-ха».

первое написание

<head>

Пекин приветствует вас

function g() {

var strls = document.getElementsByName("11");

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

strls[i].value = "ха-ха";

}

window.event.srcElement.value = "Вооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооо!!"

}

</script>

</head>

<body>

<br />

<br />

<br />

</body>

</html>

Второй способ написания

<head>

window.onload = function () {

var inputs = document.getElementsByTagName("input");

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

if (inputs[i].type == "button") {

inputs[i].onclick = function () {

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

if (inputs[i].type == "button") {

inputs[i].value = "ха-ха";

}

//Объект, вызывающий событие

event.srcElement.value = "woohoo";

}

</script>

</head>

<body>

</body>

</html>

Упражнение: Калькулятор сложения. Введите числа в два текстовых поля и нажмите кнопку [=], чтобы поместить добавленный результат в третье текстовое поле.

function calc() {

var s1 = document.getElementById("num1").value;

var s2 = document.getElementById("num2").value;

var i3 = parseInt(s1) + parseInt(s2);

document.getElementById("num3").value = i3;

}

Случай: кнопку регистрации под текстовым полем соглашения можно нажать через десять секунд, и часы начнут обратный отсчет. (btn.disabled = "", сделать элемент доступным. disabled=disabled, недоступен)disabled=true;

<head>

Пекин приветствует вас

var count = 10;

var tmrId = setInterval("test()", 1000);

function test() {

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

if (count > 0) {

btn.value = "Пожалуйста, прочтите (" + count + ") секунд";

count--;

} else {

btn.value = "Согласен";

btn.disabled = false;

clearInterval(tmrId);

}

window.onload = function() {

test();

}

</script>

</head>

<body>

</body>

</html>

Упражнение: просмотрщик изображений.

<head>

window.onload = function () {

var ul = document.getElementById("mv");

//Получить тег a в ul

var links = ul.getElementsByTagName("a");

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

links[i].onclick = function () {//зарегистрировать событие

var href = event.srcElement.href;

document.getElementById("i1").src = href;

return false;

}

</script>

</head>

<body>

</ul>

<br />

</body>

</html>