Код кода копирования следующим образом:
<img src = "1_nder1000.jpg" id = "img2" onclick = "alert ('onclick');
<script type = "text/javascript">
var img2 = document.getElementbyId ("img2");
Предупреждение (img2.onmouseover);
// Вывод следующие изображения
</script>
Т.е. вывод:
Firefox:
Код кода копирования следующим образом:
<img src = "1_nder1000.jpg" id = "img1" />
<script type = "text/javascript">
var img1 = document.getElementbyId ("img1");
img1.onmouseover = utate;
Функция rotate () {) {
this.src = '1_yylklshmyt20090217.jpg';
}
var img1 = document.getElementbyId ("img1");
img1.onmouseover = onmouseover;
Функция OnmouseOver (Event) {
this.src = '1_yylklshmyt20090217.jpg';
}
// На самом деле Document.getElementById ("IMG1");
/* var img1 = {src: "1_nder1000.jpg" ,,
ID: "Img1",
alt: "" ,,,
Название: "Перебрать картинку"
}*/
</script>
Код кода копирования следующим образом:
< %@Page language = "c#" autoeeventwireup = "true" codebehind = "webform1.aspx.cs" inherits = "webapplication1.webform1" %>
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
<TILE> НЕ -ТИТЛА СТРАНИЦА </TITE>
<script type = "text/javascript">
// Все атрибуты изображения цикла IMG вы можете увидеть много неспецифических атрибутов, которые не определены
Window.onload = repeat;
Функция repeat () {) {)
var img1 = document.getElementbyId ('img1');
для (var i in img1) {
Alert (i+":"+img1 [i]);
}
}
</script>
</head>
<тело>
<sud id = "form1" runat = "server">
<div>
<img src = "1_nder1000.jpg" id = "img1" />
</div>
</form>
</body>
</html>
Метка сценария и доступ к HTML
Тег сценария
Тег сценария используется на странице HTML, встроенной в некоторые очевидные сценарии
<Скрипт>
// какой -то скрипт идет здесь
</Script> метка скрипта имеет три специальных атрибута (конечно, у него также есть такие атрибуты, как ID, класс и почти каждый элемент на странице HTML, может иметь класс, атрибуты ID))))
<script language = "javascript"> // Атрибут языка указывает на язык, используемый на этикетке
// имеет три общих значения JavaScript, JScript, VBScript
// какой -то скрипт идет здесь
</script>
// Только т.е. может быть распознан для JScript, а другие браузеры будут игнорировать содержимое этой ярлыки
// для VBScript можно распознать только т.е.
// Однако атрибут языка был позже заменен атрибутом типа в XHTML
<script type = "text/javascript"> //
// какой -то скрипт идет здесь
</Script> В веб -браузере мы будем использовать только Javascript, тип свойства в текст/JavaScript. JavaScript
<Скрипт>
Оповещение ("Привет!");
</script>
// Код выше будет работать так, как JavaScript будет работать в JavaScript
// Даже если есть IE, блок сценария без объявлений будет выполняться как JavaScript, а не VBScript
<Скрипт>
msgbox "Привет!"
</script>
// 上面的代码在 IE 中也会报错, то есть 也会将其当成 javaScript 执行以前在 html 页面中, 一些标签常会加一些诸如 onclick, onmouseover 这样的属性, 这是一种事件绑定 (关于事件, Мы подробно объясним в будущем, не волнуйтесь). )
<img src = "../ Images/stack_heap.jpg" onclick = "alert ('Вы причиняете мне боль! Там будет окно поп -музыки, которое показывает, что «ты меня больно!», Значение атрибута Onclick на самом деле является кодом JavaScript;
onclick, выполните его один раз, когда нажимает мышь
Onmouseover, выполнить один раз, когда мышь выставлена
Onmouseout, выполнить один раз, когда мышь выходит
Onmousetown, выполните его один раз, когда мышь нажимает
Onmouseup, выполнить один раз, когда мышь выпущена (отскочит)
Onmouseedblclick, выполнить один раз, когда мышь двойной
Онлайн, выполните один раз при загрузке объекта
Эффект популярного в Интернете до на самом деле является эффектом Rollverimages
<img src = "../ Images/ stack_heap.jpg"
onmouseover = "this.src = '../images/over.jpg'"
onmouseout = "this.src = '../ images/out.jpg'"/>, как вы можете знать, строка в атрибутах, таких как Onmouseover, будет выполняться как сценарий во время инцидента, но приведенный выше код зависит от Код выше.
//, чтобы облегчить просмотр, мы извлеките их внизу
this.src = '../images/over.jpg'
This.src = '../images/out.jpg' анализирует приведенный выше код Этот объект является объектом, который всегда существовал. Для тега IMG ниже он будет проанализирован в следующем объекте:
<img src = "../ Images/stack_heap.jpg" onclick = "alert ('hello!)"/>
// Обратите внимание, что на самом деле это не может быть назначено вручную или объявлено вручную.
это = {
src: "../ Images/ stack_heap.jpg" ,,
Alt: "стек памяти",
Onclick: "alert (" Привет! ') ",
Tagname: "Img"
};
// Фактически, не только эти атрибуты, теги IMG будут проанализированы как объект, с такими атрибутами, как SRC, ALT, SRC, ALT -атрибуты, записываются в HTML, а Tagname автоматически генерируется системой. Название метки! Мы можем использовать следующий код для тестирования:
<img src = "../ Images/stack_heap.jpg" onclick = "alert (this.src); alert (this.tagname);"/> Природа, мы также можем изменить его значение, поэтому эффект образа изображения. эффект изображения изображения только что преуспел
Есть некоторое внимание к такому привязке событий в линии.
<голова>
<Скрипт>
Функция myfn () {
оповещение («изображение загружено!»);
}
</script>
</head>
// ................ после нескольких кодов
<img src = "../ Images/stack_heap.jpg" Online = "myfn ()" /// Когда изображение загружается успешно
Вышеприведенное выполнение кода в порядке, но заказ перевернут (сценарий может быть размещен в любом юридическом месте)
<img src = "../ Images/stack_heap.jpg" Online = "myfn ()" /// Когда изображение загружается успешно
// ................ после нескольких кодов
<Скрипт>
Функция myfn () {
оповещение («изображение загружено!»);
}
</Script> HTML -страница загружается и выполняется вверху сверху вниз. Вот почему этикетка сценария состоит в том, чтобы поместить часть сценария в часть головы, потому что голова перед телом, когда элемент в теле загружается, сценарий определенно будет загружен.
Но затем был XHTML, с «тремя слоями разделения», W3C запустил DOM2, нам нужно связать события другим образом, получить элементы HTML.
<голова>
<Скрипт>
var img = document.getElementbyId ("myimg");
//document.getElementByID имеет параметр, идентификатор строки
// тогда IMG означает, что объект метки изображения
img.onclight = myfn;
/*Разве мы не даем код JavaScript к его свойству OnClick со значением символов строки
Прямо назначено, чтобы дать ему имя функции
Вы также скажете, почему бы не img.onclick = myfn ();
Потому что теперь это в области кода JavaScript
Добавить "()", чтобы указать эту функцию, а затем дать возвращаемое значение этой функции img.onclick*/
Функция myfn () {
оповещение («изображение загружено!»);
}
</script>
</head>
// .......
<img src = "../ Images/stack_heap.jpg" id = "myimg"/>
// Мы больше не добавляем атрибут OnClick, но даем ему идентификатор
Тем не менее, приведенный выше код все равно будет ошибочно, потому что HTML загружается сверху вниз. Загружено, поэтому будут ошибки; Пустой объект, поэтому он сделает ошибку здесь!
<img src = "../ Images/stack_heap.jpg" id = "myimg"/>
// .................... после нескольких кодов
<Скрипт>
var img = document.getElementbyId ("myimg");
// В настоящее время, поскольку положение метки сценария помещается в тег IMG, тег IMG определенно загружается при загрузке в скрипт
img.onclight = myfn;
Функция myfn () {
оповещение («изображение загружено!»);
}
</Script> Но стандарт по -прежнему рекомендуется поставить сценарий на часть головы!
Window.onload = initall;
// Окно представляет собой окно.
функция initial () {
var img = document.getElementbyId ("myimg");
img.onclight = myfn;
Функция myfn () {
оповещение («изображение загружено!»);
}
} Итак, код не ошибается.
Посетите HTML -страницу: HTML DOM
HTML DOM использует всю страницу в качестве объекта документа.
<p id = "p1"> мы используем P -тег для демонстрации </p>, он будет преобразован в следующий объект
// Всегда помните буквальную грамматику объекта, верно?
{{
Tagname: "P",
ClassName: «Демо»,
Название: «Первый абзац: Дерево Дома»,
ID: "P1",
Innerhtml: «Мы используем P -метку для демонстрации»
}
// Вы можете быть странным, почему атрибут класса метки становится атрибутом ClassName объекта вместо класса.
// класс - это javascript зарезервированные слова !!!
// Tagname представляет его имя метки, и innerhtml означает, что HTML -код, просматривая в нем Получите доступ к этому объекту !!
// Сначала добавьте идентификатор на метку, а затем используйте метод Document.GetElementByID, чтобы получить к нему доступ к нему
Window.onload = initall;
функция initial () {
var p = document.getElementById ("p1");
Оповещение (p.classname);
оповещение (p.tagname);
блюд (P.Tital);
блюд (P.ID);
Оповещение (p.innerhtml);
} Доступ к HTML -странице настолько прост!
Window.onload = initall;
функция initial () {
var p = document.getElementById ("p1");
p.title = "javaScript";
p.classname = "Load"; // Мы можем изменить его стиль
} Используйте их, мы уже можем сделать что -то захватывающее!
// некоторые CSS
.oder {
Цвет: красный;
Фон: синий;
Размер шрифта: больше;
}
.вне {
Цвет: черный;
Фон: белый;
Размер шрифта: меньше;
}
.click {{
Цвет: желтый;
Фон: желтый;
размер шрифта: 12px;
}
// html -код
<P ID = "P1"> Большая строка текста, они - это обычный текст!
// код JavaScript
Window.onload = initall;
функция initial () {
var p = document.getElementById ("p1");
p.onclick = clickfn;
p.onmouseover = Overfn;
p.onmouseout = outfn;
}
Функция clickfn () {
This.classname = "click"; // Здесь также доступно
// Обратите внимание, что это имя класса, а не класс
}
функция Overfn () {
this.classname = "Over";
}
функция outfn () {
this.classname = "out";
} Конечно, получение элементов страницы не только этот метод. Имя идентификационного имени единственное, и большинство имен метки одинаковы, поэтому метод getelementsbytagname имеет только один параметр, то есть Tagname в форме строки, а возвратное значение - список HTML Элементы, похожие на массив.
Window.onload = initall;
функция initial () {
var plist = document.getElementsbytagname ("p");
// Зачем вам использовать столицу P?
Предупреждение (plist.length);
Оповещение (plist [0] .innerhtml);
} Кроме того, для метода document.getElementsbytagname вы также можете передать число «*» в качестве параметра для получения всех элементов страницы, аналогично проходящему символу в CSS
Window.onload = initall;
функция initial () {
var allthings = document.body.getelementsbytagname ("*");
// Вы можете вызвать метод GetElementsBytagName на любом элементе DOM.
Предупреждение (Allthings.length);
Предупреждение (Allthings [3] .innerhtml);
} Другой Javascript: псевдо-протокол
Псевдокол отличается от реального существования в Интернете, например, http: //, https: //, ftp: //, но для связанных приложений. :
Мы можем ввести «JavaScript: Alert ('JS!») и значение результата возвращается на текущую страницу
Точно так же мы можем использовать псевдо -протокол JavaScript в атрибуте Href тега A
<a href = "javascript: alert ('JS!');"> </a>
// Нажмите на ссылку на эту сторону.
<A href = "javascript: window.prompt ('Входной контент заменит текущую страницу!', '');"> A </a> Решение очень простое
<A href = "javascript: window.prompt ('Входной контент заменит текущую страницу!', ''); Undefined;"> a </a>
// Добавить неопределенного к концу, хотя псевдо -протокол JavaScript обеспечивает определенную гибкость, но старайтесь не использовать его на странице!