Penjelasan terperinci tentang label skrip dan akses halaman html

Penulis：Eve Cole Waktu Pembaruan：2025-03-15 18:00:04

Salin kode kode sebagai berikut:

<img src = "1_nder1000.jpg" id = "img2" onclick = "alert ('ontClick');

var img2 = document.geteLementById ("img2");

Waspada (img2.onmouseover);

// keluarkan gambar berikut

</script>

IE Output:

Firefox:

Salin kode kode sebagai berikut:

var img1 = document.geteLementById ("img1");

img1.onmouseover = putar;

Fungsi rotate () {) {

this.src = '1_yylklshmyt20090217.jpg';

}

var img1 = document.geteLementById ("img1");

img1.onmouseover = onmouseover;

Function onmouseover (event) {

this.src = '1_yylklshmyt20090217.jpg';

}

// Faktanya, Document.GetElementById ("IMG1");

/* var img1 = {src: "1_nder1000.jpg" ,,

ID: "IMG1",

alt: "" ,,

Judul: "Gambar Pembalikan"

}*/

</script>

Salin kode kode sebagai berikut:

< %@Page language = "c#" autoeeventwireup = "true" codebeHind = "webForm1.aspx.cs" mewariskan = "webapplication1.webform1" %>

<iteme> halaman non -title </iteme>

// Semua atribut gambar IMG siklus, Anda dapat melihat banyak atribut yang tidak spesifik yang tidak ditentukan

Window.onload = ulangi;

Function repeat () {) {)

var img1 = document.geteLementById ('img1');

untuk (var i di img1) {

peringatan (i+":"+img1 [i]);

}

</script>

</head>

<body>

<div>

</div>

</form>

</body>

</html>

Label skrip dan akses halaman html

Tag skrip

Tag skrip digunakan di halaman html yang tertanam dalam beberapa skrip yang jelas

// Beberapa skrip pergi ke sini

</script> Label skrip memiliki tiga atribut khusus (tentu saja, ia juga memiliki atribut seperti ID, kelas, dan hampir setiap elemen di halaman HTML dapat memiliki kelas, atribut ID))

<bahasa skrip = "javascript"> // atribut bahasa menunjukkan bahasa yang digunakan dalam label

// memiliki tiga nilai umum javascript, jscript, vbscript

// Beberapa skrip pergi ke sini

</script>

// Hanya IE yang dapat dikenali untuk JScript, dan browser lainnya akan mengabaikan konten label ini

// Untuk vbscript, hanya IE di windows yang dapat dikenali, berjalan

// Namun, atribut bahasa kemudian digantikan oleh atribut tipe di xhtml

// Beberapa skrip pergi ke sini

</script> Di browser web, kami hanya akan menggunakan JavaScript, ketik properti untuk teks/javascript. Javascript

Waspada ("halo!");

</script>

// Kode di atas akan berjalan dengan cara JavaScript akan berjalan di JavaScript

// Bahkan jika ada IE, blok skrip tanpa deklarasi akan dilakukan sebagai javascript, bukan vbscript

msgbox "halo!"

</script>

// 上面的代码在 IE 中也会报错, yaitu 也会将其当成 JavaScript 执行以前在 html 页面中, 一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如Kami akan menjelaskan secara rinci di masa depan, jangan khawatir). Ini digunakan untuk menentukan kode JavaScript yang dieksekusi ketika elemen tertentu pada halaman HTML ada pada elemen tertentu (tentu saja, itu juga bisa menjadi skrip klien lain )

<img src = "../ gambar/stack_heap.jpg" onclick = "waspada ('Anda menyakiti saya!"/> Kode akan menampilkan gambar pada halaman html, saat Anda mengklik klik mouse. Pada saat itu, Akan ada jendela pop -up yang menunjukkan 'Anda Hurt Me!', Nilai atribut OnClick sebenarnya adalah kode JavaScript;

OnClick, jalankan sekali saat mouse diklik

Onmouseover, jalankan sekali saat mouse dipasang

Onmouseout, jalankan sekali saat mouse bergerak keluar

onmouseTown, jalankan sekali saat mouse ditekan

OnmouseUp, jalankan sekali saat mouse dilepaskan (bouncing)

OnmousedBlClick, jalankan sekali saat mouse -ganda -klik

Online, jalankan sekali saat objek dimuat

Efek dari menjadi populer di internet sebelumnya sebenarnya adalah efek dari rollverimages

<img src = "../ gambar/ stack_heap.jpg"

onmouseover = "this.src = '../images/over.jpg'"

onmouseout = "this.src = '../ gambar/out.jpg'"/> Anda mungkin tahu, string dalam atribut seperti Onmouseover akan dieksekusi sebagai skrip pada saat kejadian, tetapi kode di atas tergantung pada pada Kode di atas.

// Untuk membuatnya mudah dilihat, kami akan mengekstraknya di bawah

this.src = '../images/over.jpg'

This.src = '../images/out.jpg' menganalisis kode di atas Objek ini adalah objek yang selalu ada. Untuk tag IMG di bawah ini, itu akan diuraikan ke objek berikut:

// Perhatikan bahwa pada kenyataannya, ini tidak dapat ditugaskan secara manual atau dinyatakan secara manual.

ini = {

src: "../ gambar/ stack_heap.jpg" ,,

Alt: "Tumpukan Memori",

OnClick: "Peringatan ('Halo!')",

Tagname: "IMG"

};

// Faktanya, tidak hanya atribut ini, tag IMG akan diuraikan sebagai objek, dengan atribut seperti SRC, ALT, SRC, ATTRIBUT ALT ditulis dalam HTML, dan Tagname secara otomatis dihasilkan oleh sistem. Nama label label!

<img src = "../ gambar/stack_heap.jpg" onclick = "waspada (this.src); waspada (this.tagname);"/> alam, kita juga dapat memodifikasi nilainya, sehingga efek flip gambar gambar Efek gambar dari gambar yang baru saja berhasil

Ada beberapa perhatian pada ikatan acara dalam garis seperti itu.

<head>

Fungsi myfn () {

peringatan ("Gambar dimuat!");

}

</script>

</head>

// ................ setelah beberapa kode

<img src = "../ gambar/stack_heap.jpg" online = "myfn ()" /// Saat gambar dimuat dengan sukses

Eksekusi kode di atas tidak apa -apa, tetapi pesanan dibalik (skrip dapat ditempatkan di tempat hukum mana pun)

<img src = "../ gambar/stack_heap.jpg" online = "myfn ()" /// Saat gambar dimuat dengan sukses

// ................ setelah beberapa kode

Fungsi myfn () {

peringatan ("Gambar dimuat!");

}

</script> Halaman HTML dimuat dan dieksekusi secara berurutan dari atas ke bawah. ;

Tapi kemudian ada xhtml, dengan "tiga lapisan pemisahan", W3C meluncurkan DOM2, kita perlu mengikat acara dengan cara lain, mendapatkan elemen halaman HTML.

<head>

var img = document.geteLementById ("myimg");

//document.getElementById Metode memiliki parameter, ID string

// Lalu IMG berarti objek label gambar itu

img.onClight = myfn;

/*Apakah kami tidak memberikan kode JavaScript ke properti OnClick dengan nilai karakter string

Itu langsung ditugaskan untuk memberikan nama fungsi

Anda juga akan mengatakan, mengapa tidak img.onClick = myfn ();

Karena sekarang berada di area kode JavaScript

Tambahkan "()" untuk menunjukkan fungsi ini, dan kemudian berikan nilai pengembalian fungsi ini ke img.onClick*/

Fungsi myfn () {

peringatan ("Gambar dimuat!");

}

</script>

</head>

// .......

// Kami tidak lagi menambahkan atribut OnClick, tetapi berikan ID

Namun, kode di atas masih akan membuat kesalahan, karena HTML dimuat dari atas ke bawah. dimuat, jadi akan ada kesalahan; Objek kosong, itu akan membuat kesalahan di sini!

// .................... setelah beberapa kode

var img = document.geteLementById ("myimg");

// Saat ini, karena posisi label skrip ditempatkan di tag IMG, tag IMG pasti dimuat saat memuat ke skrip

img.onClight = myfn;

Fungsi myfn () {

peringatan ("Gambar dimuat!");

}

</script> tetapi standar masih disarankan untuk meletakkan skrip di bagian kepala!

Window.onload = initall; // tulis semua kode dalam satu fungsi, dan kemudian mendaftar ke atribut acara online dari objek jendela

// Jendela mewakili objek jendela.

fungsi inisial () {

var img = document.geteLementById ("myimg");

img.onClight = myfn;

Fungsi myfn () {

peringatan ("Gambar dimuat!");

}

} Jadi, kodenya tidak salah.

Kunjungi HTML Page: HTML DOM

HTML DOM menggunakan seluruh halaman sebagai objek dokumen.

<p id = "p1"> Kami menggunakan tag p untuk menunjukkan </p> itu akan dikonversi ke objek berikut

// Selalu ingat tata bahasa kuantitas literal objek, kan?

{{

Tagname: "P",

ClassName: "Demo",

Judul: "Paragraf Pertama: Dom Tree",

ID: "P1",

InnerHTML: "Kami menggunakan label P untuk mendemonstrasikan"

}

// Anda mungkin aneh, mengapa atribut kelas label menjadi atribut ClassName dari objek alih -alih kelas.

// Kelas adalah JavaScript Cadangan Kata -kata !!!

// Tagname mewakili nama labelnya, dan bagian dalam HTML berarti bahwa kode HTML menjelajahi di dalamnya mengubah label HTML menjadi objek seperti itu, dan atribut atau konten di dalam tag dalam javascript jauh lebih sederhana, tetapi pertanyaannya adalah cara mengakses cara untuk mengakses caranya. mengaksesnya ke objek ini !!

// Pertama tambahkan ID ke label, dan kemudian gunakan metode Document.GetElementById untuk mengaksesnya

Window.onload = initall; // Perhatikan bahwa kode untuk mengakses halaman HTML ditempatkan pada acara Onload Window!

fungsi inisial () {

var p = document.geteLementById ("p1");

Alert (p.classname);

peringatan (p.tagname);

Peringatan (P.Tital);

waspada (p.id);

Peringatan (p.innerhtml);

} Mengakses halaman HTML sangat sederhana!

Window.onload = initall;

fungsi inisial () {

var p = document.geteLementById ("p1");

P.Title = "JavaScript";

p.classname = "muat";

} Gunakan ini, kita sudah bisa melakukan sesuatu yang menarik!

// Beberapa CSS

.oder {

Warna: Merah;

Latar Belakang: Biru;

Ukuran font: lebih besar;

}

.keluar {

Warna: Hitam;

Latar Belakang: Putih;

Ukuran font: lebih kecil;

}

.click {{

Warna: Kuning;

Latar Belakang: Kuning;

font-size: 12px;

}

// kode html

<P ID = "P1"> Sejumlah besar teks, semuanya adalah teks biasa!

// Kode JavaScript

Window.onload = initall;

fungsi inisial () {

var p = document.geteLementById ("p1");

p.onClick = clickfn; // Pendaftaran acara di sini kurang dari tanda kurung daripada cara metode pendaftaran terdaftar, dan yang lain sama

p.onmouseover = overfn;

p.onmouseout = outfn;

}

Fungsi clickfn () {

This.classname = "klik";

// Perhatikan bahwa itu adalah classname, bukan kelas

}

fungsi overfn () {

this.className = "over";

}

fungsi outfn () {

this.classname = "out";

} Tentu saja, mendapatkan elemen halaman tidak hanya metode ini. Nama nama ID adalah satu -satunya, dan sebagian besar nama labelnya sama, sehingga metode GetElementsByTagname hanya memiliki satu parameter, yaitu, tagname dalam bentuk string, dan nilai pengembalian adalah daftar HTML elemen mirip dengan array.

Window.onload = initall;

fungsi inisial () {

var plist = document.geteLementsByTagname ("p");

// Mengapa Anda perlu menggunakan modal P?

Waspada (plist.length);

Peringatan (Plist [0] .InnerHTML); // Gunakan ini untuk mengakses elemen P pertama

} Selain itu, untuk metode Document.getElementsByTagname, Anda juga dapat melewati angka "*" sebagai parameter untuk mendapatkan semua elemen halaman, mirip dengan karakter yang lewat di CSS

Window.onload = initall;

fungsi inisial () {

var allthings = document.body.getElementsbyTagname ("*");

// Anda dapat memanggil metode GetElementsByTagname pada elemen DOM apa pun.

Peringatan (Allthings.Length);

Peringatan (Allthings [3] .innerhtml);

} Other-Javascript: Protokol Pseudo

Pseudo -protocol berbeda dari keberadaan nyata di internet, seperti http: //, https: //, ftp: //, tetapi untuk aplikasi yang terkait. :

Kami dapat memasukkan "JavaScript: Alert ('JS!');" dan nilai hasilnya dikembalikan ke halaman saat ini

Demikian pula, kita dapat menggunakan protokol pseudo JavaScript di atribut HREF dari tag

// Klik tautan di sisi ini.

<A href = "javascript: window.promppt ('konten input akan menggantikan halaman saat ini!', '');"> Solusi </a> sangat sederhana

// Tambahkan tidak terdefinisi sampai akhir, meskipun protokol semu Javascript memberikan fleksibilitas tertentu, tetapi cobalah untuk tidak menggunakannya di halaman!