Berbagi Catatan Pembelajaran Javaweb (harus dibaca)

Penulis：Eve Cole Waktu Pembaruan：2025-04-09 04:32:01

Daftar Kustom

<dl> </ll>: mewakili kisaran daftar

** di dalam <dt> </dt>: konten atas

** di dalam <dd> </dd>: konten yang lebih rendah

Daftar yang dipesan

<Ol> </ol>: Rentang daftar yang dipesan

--Tattribute Tipe: Setel metode penyortiran, 1 (default), a, i,

** Di ol Tag <li> Konten spesifik </li>

Daftar yang tidak dipesan

<ul> </ul>: Rentang daftar yang tidak tertib

-Tipe Aattribute: Circle (Hollow Circle), Disc (Default Solid Circle), Square (Solid Square)

** Dalam tag UL <li> Konten spesifik </li>

Tag gambar

--Attributes: SRC, lebar, tinggi, alt (teks yang ditampilkan pada gambar, pindahkan mouse ke gambar, tetap untuk sementara waktu untuk menampilkan konten atau teks yang ditampilkan saat gambar ditampilkan secara tidak benar, tetapi beberapa browser tidak menampilkannya, dan tidak ada efek)

** <img src = "halaman gambar"/>

Pengantar jalur

*Kategori: Dua Kategori

** Jalur absolut misalnya. http://www.baidu.com/b.jpg

*** Tiga Jalur Relatif Lokasi satu file relatif terhadap file lain

-File dan gambar HTML berada di jalur yang sama (direktori), dan nama file dapat ditulis secara langsung

--dalam file HTML, gunakan file a.jpg di bawah folder IMG di bawah jalur yang sama seperti: img/a.jpg

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

** D: /HTMLSTUDY/CODE/IMG/A.JPG

-Gambar ada di direktori atas file HTML. Saat ini, metode penggunaan gambar: ../c.png ../ mewakili jalur atas

Tag hyperlink

** Sumber Daya Tautan

- <a href = "path ke tautan ke sumber daya"> konten yang ditampilkan pada halaman </a>

** href: alamat sumber daya ditautkan

** Target: Atur metode pembukaan, standarnya adalah untuk membuka pada halaman saat ini

--_ kosong: terbuka di jendela baru

--_ self: buka halaman default

-<a href = " #"> judul tautan </a>: Ketika hyperlink tidak perlu melompat ke halaman, cukup tambahkan # (placeholder) ke href

** Sumber Daya Lokasi

--Jika Anda ingin menemukan sumber daya: Tentukan lokasi

--K-BACK UNTUK LOKASI INI

<a href = "#top"> kembali ke atas </a>

-As-IS-Output Tag: Konten <pr pre> yang perlu dimasukkan AS-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 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-is-is-is-is-is-is -sis-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-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

Tag tabel

* Fungsi: Ini dapat memformat data untuk membuat tampilan data lebih jelas

*Batas atribut (Ketebalan Garis Tabel) BorderColor (Warna Garis Tabel) Tinggi Lebar Sel (Jarak Sel)

*<able> </able>: menunjukkan kisaran tabel

** Dalam tabel, itu berarti garis <tr> </tr>

--Set Alignment Align: Kiri Kiri Kanan

*** Dalam TR, ini menunjukkan sel dalam satu baris <td> </td>

** Gunakan TH juga dapat mewakili sel: ia dapat mencapai pemusatan dan tebal

*Judul tabel ditempatkan di tabel <laption> </comption>

*Keterampilan Operasi:

** Pertama Hitung Berapa banyak baris yang ada, dan hitung berapa banyak sel yang ada di setiap baris

*Menggabungkan sel

** ROWSPAN: Cross-Row (Vertikal Gabungan)

** Colspan: Cross-Column (Horizontal Gabungan)

<td colspan = "3" align = "center"> Formulir Formulir </td>

Bentuk tag

*Misalnya, saat mendaftarkan Kaixin.com, Anda dapat mengirimkan data ke server Kaixin.com. Proses ini dapat diimplementasikan menggunakan tag formulir.

* <sorm> </form>: Tentukan lingkup formulir

*milik:

** Tindakan: Alamat yang dikirimkan ke, pengiriman default ke halaman saat ini

** Metode: Metode pengiriman formulir

-Ada dua yang biasa digunakan: dapatkan dan posting, yang merupakan permintaan mendapatkan default

** Perbedaan antara get dan post

1) Bilah Alamat Permintaan Dapatkan akan membawa data yang dikirimkan, dan pos tidak akan membawanya (data ada di badan permintaan)

2) Dapatkan permintaan tingkat keamanan lebih rendah dan posting lebih tinggi

3) Ada batasan ukuran data dari permintaan GET, tetapi tidak ada batasan pada posting

** Enctype: Properti ini tidak diperlukan untuk permintaan, dan properti ini perlu ditetapkan saat mengunggah file.

** Item Input: Bagian di mana konten dapat dimasukkan atau dipilih

- Sebagian besar item input dapat digunakan dengan <input type = "Jenis item input"/>

********** Di item input, Anda harus memiliki atribut nama

*** Input Normal: <Input Type = "Text"/>

*** Item Input Kata Sandi: <input type = "password"/>

*** Input pilihan tunggal: <input type = "Radio"/>

-nama atribut diperlukan di dalam

-Nilai atribut-nama harus sama

- Harus ada nilai nilai

**** Menerapkan properti yang dipilih default

*** checked = "checked"

*** Centang Input: <Input Type = "CheckBox"/>

** Nama atribut diperlukan di dalam

** NAMA Nilai atribut harus sama

** Harus ada nilai nilai

**** Menerapkan properti yang dipilih default

---- checked = "checked"

*** Item Input File: <Input Type = "File"/>

*** item input pull-down (tidak di tag input)

<Option value = "0"> Pilih </potion>

</pilih>

**** Menerapkan properti yang dipilih default

---- dipilih = "dipilih"

*** Bidang Teks (seperti: Isi kotak untuk profil informasi pribadi saat mendaftarkan akun)

*** item tersembunyi (tidak ditampilkan di halaman, tetapi ada dalam kode HTML)

*** Kirim tombol

--Address Sebelum pengiriman: c: /users/happydog/desktop/index.html

** Saat atribut nama ditulis dalam item input

--File: /// c: /users/happydog/desktop/index.html? Telepon = 123123 & pwd = 12321312 & seks = pria & cinta = y & cinta = pp & kelahiran = 1992 & Tex = 1231245

**? Nilai nama item input = nilai input &

** Parameter mirip dengan bentuk nilai kunci

*** Gunakan (klik) Gambar untuk mengirimkan

*** Tombol Reset: Kembali ke keadaan awal item input

*** Tombol Normal (Digunakan dengan JS)

Kasus: Gunakan tag formulir untuk mengimplementasikan halaman pendaftaran

Ketika kandungan sel meja kosong, placeholder ((ruang yang melarikan diri)) umumnya diisi.

Penggunaan tag umum lainnya dalam HTML

** B (BOLD) S (Line Strike) U (Underline) I (Italic) Pre (Output As Is) Sub (Subscript) SUP (SuperScript) Div (Line Wrap) Span (Tampilan pada satu baris) P (label paragraf)

Penggunaan tag header html

** html dua bagian membentuk kepala dan tubuh

** Label di kepala adalah label kepala

** Judul Tag: Menunjukkan konten yang ditampilkan pada tag

** <meta> Tag: Beberapa konten terkait dari halaman pengaturan

-<meta name = "kata kunci" konten = "" />

-<meta http-equiv = "refresh" konten = "10; url = test_form.html" /> kecepatan ke halaman yang ditentukan secara teratur

** Tag dasar: atur pengaturan dasar untuk hyperlinks

-Metode pembukaan hyperlink dapat diatur secara seragam <target dasar = "_ blank" />

** TAG LINK: Perkenalkan file eksternal

Penggunaan tag bingkai

** <fameset>

** Baris: Bagi dengan baris

<Frameset Rows = "80,*"> Bagilah menjadi dua bagian, teratas 80, bawah 80

** COLS: Bagi dengan kolom

<frameset cols = "80,*"> Bagilah menjadi dua bagian, kiri dan kanan di 80, siapa pun di sebelah kiri dan kanan kapan saja

** <pangka> Halaman spesifik yang ditampilkan

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

*Saat menggunakan tag bingkai, mereka tidak dapat ditulis di kepala dan tubuh. Jika tag bingkai digunakan, tubuh perlu dilepas dan ditulis di luar kepala.

*Jika hyperlink pada halaman di sebelah kiri dan ingin konten ditampilkan di halaman di sebelah kanan, Anda dapat mengatur properti target di hyperlink dan mengatur nilai target ke nama di bingkai.

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

</fameset>

Ringkasan Pengetahuan

1) Ide operasi HTML: Gunakan tag untuk membungkus data yang akan dioperasikan, dan mengubah gaya data dalam tag dengan memodifikasi nilai atribut tag.

2) Atribut Tag Font: Kisaran Nilai Ukuran 1-7 Warna: Hexadecimal Number #FFFFFFF

3) Tag Judul <h1> </h1> ...... <h6> </h6>: Dari H1 ke H6, font semakin kecil dan lebih kecil, dan salurannya secara otomatis diubah

4) Komentar

Pengantar CSS

** CSS: Lembar Gaya Cascading

** Lapis: Lapisan demi lapisan

** Stylesheet: Banyak atribut dan nilai atribut

** Buat tampilan halaman lebih baik

** CSS memisahkan konten halaman web dan gaya tampilan, meningkatkan fungsi tampilan

Cara menggabungkan css dan html (empat cara untuk menggabungkan)

1) Ada gaya properti pada setiap tag HTML, menggabungkan CSS dan HTML bersama -sama

-<div style = "latar belakang-warna: merah; warna: hijau;" id = ""> Jalan Surga mengurangi kelebihan dan menebus kekurangan. Oleh karena itu, kekosongan mengalahkan yang nyata, dan yang tidak mencukupi mengatasi kelebihannya. </div>

2) Gunakan tag HTML untuk mengimplementasikan tag <yesty> dan tulis di kepala

- <type style = "text/css">

kode CSS;

</tyle>

--- Implementasi Kode <Ead>

Div {

Latar Belakang: Biru;

Warna: Merah;

}

</tyle>

</head>

<body>

Jalan Surga mengurangi kelebihan dan menebus kekurangannya. Oleh karena itu, kekosongan mengatasi yang nyata, dan kurangnya kekurangan mengatasi kelebihannya.

</div>

</body>

3) Gunakan pernyataan dalam tag gaya

@Import URL (jalur file CSS);

- Langkah 1: Buat file CSS

--- <gaya tipe = "Teks/CSS">

@Import URL (div.css);

</tyle>

4) Gunakan tautan tag header untuk memperkenalkan file CSS eksternal dan menempatkannya di <adep> </head>

- Langkah 1: Buat file CSS

- <tautan rel = "stylesheet" type = "text/css" href = "path of css file"/>

**** Kerugian dari metode kombinasi ketiga: tidak berfungsi di beberapa browser, dan metode keempat umumnya digunakan

**** Prioritas (Umum)

Dari atas ke bawah, dari dalam ke luar, prioritas dari rendah ke tinggi.

Prioritas pasca-beban tinggi

**** Format: Nama Selector {Name Atribut: Nilai Atribut; Nama Atribut: Nilai Atribut; ......}

Pemilih Dasar untuk CSS (tiga jenis)

** mengoperasikan data di tag itu

1) Tag pemilih div {css code}

-gunakan nama label sebagai nama pemilih

<head>

Div {

Latar Belakang: Biru;

Warna: Merah;

}

</tyle>

</head>

<body>

<div> aaaaa </div>

</body>

2) Pemilih Kelas. Nama {}

** Setiap tag HTML memiliki kelas properti

** <head>

Div.test {

Latar Belakang: Biru;

Warna: Merah;

}

P. Test {

Latar Belakang: Biru;

Warna: Merah;

}

Itu bisa disingkat sebagai:

.tes{

Latar Belakang: Biru;

Warna: Merah;

}

</tyle>

</head>

** <tody>

<div> aaaaa </div>

<p> BBBBBBBBBB </p>

</body>

3) ID selector #name {}

** Setiap tag HTML memiliki ID atribut

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

-<head>

Div#test {

Latar Belakang: Biru;

Warna: Merah;

}

p#tes {

Latar Belakang: Biru;

Warna: Merah;

}

Itu bisa disingkat sebagai:

#tes {

Latar Belakang: Biru;

Warna: Merah;

}

</tyle>

</head>

-<body>

<Div id = "test"> aaaaa </div>

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

</body>

** Gaya Prioritas> Pemilih ID> Pemilih Kelas> Pemilih Tag

Pemilih Ekstensi CSS (Pelajari)

1) Pengaturan gaya untuk label bersarang untuk pemilih asosiasi

** <div> <p> wwwwwwwww </p> </div>

** Atur gaya tag p dalam tag div dan gaya tag bersarang

-<head>

Div P {

Latar Belakang: Biru;

Warna: Merah;

}

</tyle>

</head>

-<body>

<div> <p> wwwwwwwww </p> </div>

<p> Aaaaa </p>

</body>

2) Menggabungkan pemilih label yang berbeda mengatur gaya yang sama

** <VET> 1111 </Div>

** Atur tag div dan p ke gaya yang sama, dan atur tag yang berbeda ke gaya yang sama

-<head>

Div, p {

Latar Belakang: Biru;

Warna: Merah;

}

</tyle>

</head>

-<body>

</body>

3) Pemilih Elemen Pseudo (Kelas)

** CSS menyediakan beberapa gaya yang jelas, yang dapat digunakan

** Misalnya, hyperlink

** Status hyperlink

--Setelah mengklik dan mengklik keadaan asli

: tautan: hover: aktif: dikunjungi

Implementasi Kode:

<head>

/*Keadaan asli*/

A: link {

Latar Belakang: Merah;

}

/*Status hoom*/

A: Hover {

Latar Belakang: Hijau;

}

/*Klik Status*/

A: Active {

Latar Belakang: Biru;

}

/*Status setelah klik*/

A: Dikunjungi {

Latar Belakang: Gray;

}

</tyle>

</head>

<body>

<a href = "http://www.baidu.com"> Klik tautan ke halaman web Baidu </a>

</body>

Model kotak CSS (mengerti) untuk beroperasi pada data, Anda perlu memasukkan data ke dalam suatu area (div)

1) Perbatasan Perbatasan: Pengaturan Terpadu

Anda juga dapat mengaturnya secara terpisah: Lower Border-Top Lower: Border-Bottom Left: Border-Left Right: Border-Right

-<head>

Div {

Lebar: 200px;

Tinggi: 100px;

Perbatasan: 2px Solid Blue;

}

#Div12 {

Border-Right: 2px putus-putus kuning;

}

</tyle>

</head>

-<body>

<Div ID = "Div11"> aaaaaaaaaaa </div>

<Div ID = "Div12"> BBBBBBBBB </Div>

</body>

2) bantalan margin dalam: atur jarak antara konten dari sisi atas, bawah, kiri dan kanan

Anda juga dapat mengaturnya secara terpisah: naik, bawah, kiri dan kanan

<head>

Div {

Lebar: 200px;

Tinggi: 100px;

Perbatasan: 2px Solid Blue;

}

#Div21 {

padding: 20px;

}

#Div22 {

Padding-left: 30px;

}

</tyle>

</head>

<body>

<Div ID = "Div21"> aaaaaaaaaaa </div>

<Div ID = "Div22"> BBBBBBBBB </Div>

</body>

3) Margin: Tetapkan jarak antara div dari empat sisi terluar

Anda juga dapat mengaturnya secara terpisah: atas, ke bawah, kiri dan kanan. . .

Float tata letak CSS (mengerti) float: kiri kanan

Posisi tata letak CSS (mengerti)

*posisi

** Nilai atribut:

--Static: Nilai default, tidak ada posisi khusus

--mutlak:

Seret objek dari aliran dokumen dan gunakan properti kiri, kanan, atas, bawah dan lainnya untuk benar -benar menemukannya

--Relative: Objek tidak akan diseret keluar dari aliran dokumen. Objek tidak dapat ditumpuk, tetapi akan diimbangi dalam aliran dokumen normal berdasarkan properti seperti kiri, kanan, atas, bawah, dll.

Kasing: Gambar dan teks campuran

** Gambar dan teks ditampilkan bersama

Kasus: Tanda Tangan Gambar

Pengantar JavaScript: Ini adalah bahasa skrip yang digerakkan oleh objek, terutama digunakan di klien

*Berbasis Objek: Banyak objek disediakan, Anda dapat menggunakannya secara langsung

* Event-Driven: HTML Membuat Efek Statis Situs Web, Efek Dinamis JavaScript

*Klien: Secara khusus mengacu pada browser

* Fitur JS:

1) Interaksi Dinamis Informasi Interaktif

2) Keamanan JS tidak dapat mengakses file di disk lokal

3) Java lintas platform, mesin virtual; Selama browser yang dapat mendukung JS, mereka dapat berlari

*Perbedaan antara JavaScript dan Java: Tidak ada hubungan antara keduanya

1) Java adalah Sun Company, sekarang Oracle; JS adalah perusahaan Netscape

2) Java berorientasi objek, dan JS berbasis objek

3) Java adalah bahasa yang sangat diketik, dan JS adalah bahasa yang diketik lemah

-untuk contoh: int i = "10" di java; akan melaporkan kesalahan

--js: var i = 10; var i = "10"; Tidak ada kesalahan yang dilaporkan

4) JS hanya perlu diuraikan untuk dieksekusi, sementara Java perlu dikompilasi ke dalam file bytecode terlebih dahulu, dan kemudian jalankan

*Komposisi JS (tiga bagian):

1) ecmascript

- ECMA: Asosiasi Komputer Eropa

--JS Sintaks dan pernyataan yang diselenggarakan oleh ECMA ...

2) Bom

-Model Objek BROSWER: Model Objek Browser

3) dom

-Model Objek Dokumen: Model Objek Dokumen

Cara menggabungkan js dan html (dua jenis)

1) Gunakan tag <type skrip = "Text/JavaScript"> JS Code; </ptript>

2) Gunakan tag skrip untuk memperkenalkan file JS eksternal

- Buat file JS dan tulis kode JS

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

Catatan: Saat menggunakan metode kedua, jangan menulis kode JS di tag skrip, itu tidak akan dieksekusi.

tipe primitif JS dan mendeklarasikan variabel

*Jenis data dasar Java: byte pendek int long float double char bolean

*JS mendefinisikan variabel dengan kata kunci var

*Tipe asli JS (lima)

-string string var str = "ABC";

--Number numerik tipe var m = 123;

-Boolean True dan False Var Flag = True;

--Null VAR Tanggal = Tanggal baru ();

** Dapatkan referensi ke objek. Null berarti bahwa referensi objek kosong, dan semua referensi ke objek juga objek.

--Sundifined mendefinisikan variabel, tetapi tidak menetapkan var aa;

* typeof (nama variabel) Lihat tipe data dari variabel saat ini

Pernyataan JS

** Pernyataan jika penilaian di java ("=" berarti penugasan; "==" sama dengan, berarti penilaian) Pernyataan Lingkaran Pernyataan (untuk saat do-while)

** Pernyataan JS

-jika pernyataan penilaian

--switch (a) {

Kasus 5: ...

merusak;

Kasus 6: ...

merusak;

bawaan:...

...........

}

** Pernyataan loop untuk while-while

--var i = 5;

while (i> 0) {

waspada (i);

Saya--;

}

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

waspada (i);

}

Operator JS

** JS tidak membedakan antara bilangan bulat dan desimal

--var j = 123;

Peringatan (J/1000*1000);

** J/1000*1000 Hasil Java adalah 0

** Dalam JS, tidak ada perbedaan antara bilangan bulat dan desimal, 123/1000*1000 = 0,123*1000 = 123

** Tambah dan Mengurangi Operasi String

--var str = "123";

peringatan (str + 1); Hasil dalam Java dan JS adalah 1231, yang merupakan koneksi string

peringatan (str - 1); Saat mengurangi, lakukan operasi pengurangan. Jika STR bukan angka, itu akan meminta Nan: itu berarti itu bukan angka

** Jenis Bolean juga dapat dioperasikan

*** Jika diatur ke true, itu setara dengan 1; Jika diatur ke false, itu setara dengan 0;

** == dan === Perbedaan

** Ini semua tentang membuat penilaian

** == Perbandingan hanyalah nilainya; === Perbandingan adalah nilai dan jenisnya

** Kalimat yang langsung output ke halaman (konten dapat ditampilkan pada halaman) dapat menghasilkan variabel, nilai tetap, dan kode HTML ke halaman. Document.write ("") berisi kutipan ganda, dan jika Anda mengatur atribut label, Anda perlu menggunakan satu kutipan.

- Document.write ("AAAA");

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

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

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

Latihan: Menerapkan tabel multiplikasi 99

array JS

*Definisi array di java int [] arr = {1,2,3};

*Metode definisi array JS (tiga jenis)

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

2) Gunakan objek objek objek bawaan

var arr1 = array baru (5); // Tentukan array, panjang array adalah 5

arr1 [0] = "1";

......

3) Gunakan objek array objek bawaan

var arr2 = array baru (3,4,5); // Tentukan array, elemen dalam array adalah 3,4,5

* Ada panjang properti dalam array: dapatkan panjang array

* Panjang array adalah variabel, dan array dapat menyimpan data dari berbagai tipe data.

fungsi JS (metode)

** Tentukan fungsi (metode) di JS. Ada tiga cara untuk mendefinisikan fungsi. Dalam daftar parameter fungsi, Anda tidak perlu menulis var, cukup tulis nama parameter.

1) Gunakan fungsi kata kunci

*** Metode Fungsi Nama (Daftar Parameter) {

Badan Metode;

Nilai pengembalian adalah opsional (tergantung pada kebutuhan aktual);

}

Implementasi kode: // Buat fungsi menggunakan metode pertama

function test () {

peringatan ("qqqqqq");

}

// Metode panggilan

tes();

// Tentukan metode dengan parameter untuk mengimplementasikan penambahan dua angka

fungsi add1 (a, b) {

var sum = a+b;

peringatan (jumlah);

}

add1 (3,5);

fungsi add2 (a, b, c) {

var sum1 = a+b+c;

return sum1;

}

peringatan (add2 (7,8,9));

2) Fungsi anonim

var add = function (daftar parameter) {

Metode Badan dan Nilai Pengembalian;

}

Implementasi kode: var add3 = fungsi (m, n) {

peringatan (m+n);

}

// Metode panggilan

add3 (8,9);

3) Ini juga secara umum disebut fungsi dinamis. Jika Anda lebih sedikit menggunakannya, cukup pahami.

*Gunakan fungsi objek bawaan di JS

var add = fungsi baru ("Daftar parameter", "Badan Metode dan Nilai Pengembalian");

var add4 = fungsi baru ("x, y", "var sum; jumlah = x+y; return sum;");

peringatan (add4 (9,10));

// atau kode berikut

var canshu = "x, y";

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

var add4 = fungsi baru (canshu, fangfati);

peringatan (add4 (5,3));

Variabel JS global dan lokal

** Variabel Global: Tentukan variabel dalam tag skrip, yang dapat digunakan di bagian JS dari halaman

-gunakan di luar metode, di dalam metode, gunakan dalam tag skrip lain

** Variabel Lokal: Tentukan variabel di dalam metode, dan hanya dapat digunakan di dalam metode.

-itu hanya bisa digunakan di dalam metode. Jika variabel ini dipanggil di luar metode, kesalahan akan ditampilkan

--ie dilengkapi dengan alat debugging. Dalam versi IE8 atau di atas, F12 pada keyboard, dan sebuah bilah muncul di bagian bawah halaman untuk melihat kesalahan saat Anda melihat konsol.

Di mana tag skrip harus ditempatkan

** Disarankan untuk meletakkan tag skrip di belakang </body>

** Jika ada persyaratan sekarang:

-Dalam JS, Anda perlu mendapatkan nilainya dalam input. Jika Anda memasukkan tag skrip di kepala, akan ada masalah

-HTML Parsing diuraikan dari atas ke bawah. Tag skrip ditempatkan di kepala dan secara langsung mengambil nilai input. Karena halaman belum diuraikan ke baris input, itu pasti tidak akan bisa mendapatkannya.

JS Overloading JS tidak memiliki kelebihan beban, tetapi dapat disimulasikan dan diimplementasikan.

Contoh: fungsi add11 (a, b) {

mengembalikan A+B;

}

fungsi add11 (a, b, c) {

mengembalikan A+B+C;

}

fungsi add11 (a, b, c, d) {

mengembalikan A+B+C+D;

}

peringatan (add11 (2,2)); // nan

peringatan (add11 (2,2,3)); // nan

peringatan (add11 (2,2,4,5)); // 13

Objek string JS

** Buat Objek String var str = "ABC ';

** Metode dan Properti (Dokumen)

--Attribute Length: Panjang string

--metode

1) Metode yang terkait dengan HTML

- bold (): bold fontcolor (): atur warna string fontSize (): atur ukuran tautan font (): Tampilkan string sebagai hyperlink

2) Metode serupa dengan Java

--concat (): Hubungkan string chARAT (): Kembalikan string indexOf (): Kembalikan posisi string dari string split (): Iris string ke dalam array ganti ("", ""): Ganti string-pass dua parameter: parameter pertama adalah karakter asli, dan parameter kedua adalah karakter yang akan diganti dengan substr (5,3). Mulai dari bit kelima dan mencegat tiga karakter mundur Substring (3,5) Mulai dari bit ketiga, termasuk bit ketiga ke akhir bit kelima, tidak termasuk bit kelima [3,5)

Objek array untuk JS

** Tiga cara untuk membuat array

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

2) var arr1 = array baru (3); // Panjangnya tiga

3) var arr1 = array baru (1,2,3); // Elemennya adalah 1,2,3

var arr = []; // Buat array kosong

** Panjang atribut: Lihat panjang array

**metode

concat (); bergabung(); membagi array sesuai dengan karakter yang ditentukan PUSH (); Tambahkan elemen ke akhir array, kembalikan panjang baru array ** Jika array yang ditambahkan adalah array, tambahkan array sebagai pop string (); hapus dan kembalikan elemen terakhir dari array reverse (); membalikkan urutan elemen dalam array

Tanggal Objek JS

** Dapatkan waktu saat ini di java

Tanggal Tanggal = Tanggal Baru ();

// format // tolocalestring ()

** Dapatkan waktu saat ini di JS

var date = new date ();

// Konversi ke tanggal format biasa.tolocalestring ();

Objek matematika matematika JS

** Semua bagian dalam adalah metode statis, Anda dapat menggunakan matematika. method () langsung saat menggunakannya;

Fungsi Global JS

** Karena itu bukan milik objek apa pun, tulis nama secara langsung untuk menggunakannya

** eval (); Jalankan kode JS (jika string adalah kode JS, gunakan metode untuk menjalankannya secara langsung)

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

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

Eval (str); // 1234

** .....

Kelebihan fungsi JS Apa itu kelebihan muatan? Nama metode sama, parameternya berbeda

*JS tidak memiliki kelebihan fungsi, dan hanya metode terakhir yang akan dipanggil, tetapi kelebihan beban dapat disimulasikan dengan cara lain. Fungsi JS menyimpan parameter yang ditularkan ke dalam array argumen. Anda dapat menggunakan penilaian panjang array argumen untuk mengembalikan hasil pemrosesan yang berbeda.

Simulasi Implementasi Kode Efek Reload:

fungsi add1 () {

if (arguments.length == 2) {

pengembalian argumen [0] + argumen [1];

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

pengembalian argumen [0] + argumen [1] + argumen [2];

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

pengembalian argumen [0] + argumen [1] + argumen [2] + argumen [3];

} kalau tidak {

kembali 0;

}

// Panggilan

peringatan (add1 (1,2)); // 3

peringatan (add1 (1,2,3)); // 6

peringatan (add1 (1,2,3,4)); // 10

peringatan (add1 (1,2,3,4,5)); // 0

Objek Bom JS

** BOM: Model Objek Broswer: Model Objek Browser

** Apa saja objeknya?

- Navigator: Dapatkan informasi klien (informasi browser)

- Layar: Dapatkan informasi layar

- Lokasi: Alamat URL yang diminta

*** atribut href

1) Dapatkan alamat URL yang diminta

--document.write (location.href);

2) Atur alamat URL

-Sebuah tombol ditempatkan di halaman, dan acara terikat pada tombol. Saat mengklik tombol ini, halaman dapat melompat ke halaman lain

<body>

fungsi href1 () {

// alert ("aaaa");

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

}

</script>

</body>

- Sejarah: Sejarah URL yang diminta

- Buat tiga halaman (simulasikan efek sejarah naik dan turun)

1) Buat halaman A.html dan tulis hyperlink ke B.html

2) Buat hyperlink b.html ke C.html

3) Buat C.html

- ke halaman sebelumnya yang dikunjungi

history.back ();

Sejarah, go (-1);

- Pergi ke halaman berikutnya yang Anda kunjungi

history.forward ();

history.go (1);

-Window (penguasaan kunci) Objek tingkat atas objek jendela (semua objek bom dioperasikan di jendela)

**metode

- window.alert (); Singkatan adalah: alert (); Jendela muncul di halaman untuk menampilkan konten

- konfirmasi ("Tampilkan konten pesan"); Kotak prompt konfirmasi memiliki nilai pengembalian benar dan salah

-- mengingatkan(); Kotak dialog input (tidak banyak yang digunakan sekarang), memiliki dua parameter: konten tampilan dan nilai default

- Buka ("Alamat URL", "", "fitur jendela, seperti lebar dan tinggi jendela"); Buka Jendela Baru

-- menutup(); Tutup jendela (kompatibilitas browser relatif buruk)

- Buat beberapa timer

*** SetInterval ("Kode JS", milidetik); window.setInterval ("Peringatan ('123');", 3000); Menunjukkan bahwa metode peringatan dieksekusi setiap tiga detik

*** setTimeOut ("Kode JS", milidetik); berarti bahwa itu dieksekusi setelah milidetik, tetapi hanya akan dieksekusi sekali.

*** clearInterval (); Hapus Pengatur Waktu Set oleh SetInterval

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

ClearInterval (ID1);

*** clearTimeout (); Hapus Pengatur Pengatur Waktu

Objek JS DOM

** DOM: Model Objek Dokumen: Jenis Objek Dokumen

** Dokumen: Dokumen HyperText (Dokumen Tag HyperText) HTML, XML

** Objek: Properti dan metode yang disediakan

** Model: Gunakan properti dan metode untuk memanipulasi dokumen yang ditandai Hypertext

*** Anda dapat menggunakan objek yang disediakan di DOM di JS, gunakan properti dan metode objek ini untuk beroperasi pada dokumen markup.

*** Untuk beroperasi pada dokumen yang ditandai, Anda harus terlebih dahulu merangkum semua konten dalam dokumen yang ditandai ke dalam objek

- Anda perlu merangkum tag, atribut, dan konten teks dalam html menjadi objek

*** untuk beroperasi pada dokumen penanda, dokumen penanda parse

*** Proses Parse: Menurut struktur hierarkis HTML, struktur pohon akan dialokasikan dalam memori, dan setiap bagian dari HTML perlu dienkapsulasi ke dalam suatu objek

*Hanya satu node root

Mungkin ada beberapa node anak di bawah node root. Node tanpa node anak disebut node daun

- Objek Dokumen: Seluruh Dokumen HTML

- Objek Elemen: Tag Objek

- Objek atribut

- objek teks

** Objek simpul simpul: adalah objek induk dari objek ini

DHTML: Ini adalah singkatan dari banyak teknologi

** HTML: Mengenak data

** CSS: Gunakan atribut dan nilai atribut untuk bergaya

** DOM: Mengoperasikan dokumen HTML (dokumen yang ditandai)

** JavaScript: Secara khusus mengacu pada pernyataan sintaks JS (ECMASCRIPT)

Objek dokumen mewakili seluruh dokumen

** Metode umum

- tulis () Metode: 1) Variabel output ke halaman 2) output kode html ke halaman

- getElementById (); berarti mendapatkan elemen (label) melalui id

<body>

// Gunakan getElementById untuk mendapatkan objek tag input

var input1 = document.getElementById ("nameId");

// Dapatkan nilai nilai dalam input

peringatan (input1.value);

// Tetapkan nilai ke dalam input

input1.value = "BBBBBBBB";

</script>

</body>

- GetElementsByName (); Atribut nama tag layak untuk tag, dan return adalah koleksi (array)

<body>

var input1 = document.geteLementsByName ("name1"); // Parameter yang dilewatkan adalah nilai nama dalam label

untuk (var i = 0; i <input1.length; i ++) {// melalui traversal, dapatkan nilai spesifik di setiap tag

input var = input1 [i]; // Setiap loop mendapatkan objek input dan memberikan nilai ke input

waspada (inputs.value); // Dapatkan nilai nilai di setiap tag input

}

</script>

</body>

- GetElementsByTagname ("Name of Tag"); Mengembalikan koleksi (array)

<body>

var inputs1 = document.getElementsbyTagname ("input"); // Parameter yang disahkan adalah nama tag

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

var input1 = inputs1 [i];

peringatan (input1.value);

}

</script>

</body>

**** Catatan: Hanya ada satu label, dan label ini hanya dapat diperoleh menggunakan nama. Pada saat ini, menggunakan GetElementsByName mengembalikan array, tetapi sekarang hanya ada satu elemen. Pada saat ini, tidak perlu melintasi, tetapi Anda dapat secara langsung mendapatkan nilainya melalui subskrip array.

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

peringatan (input1.value);

Kasus: Kasus pop-up jendela

** Proses Implementasi: 1) Anda perlu membuat halaman: dua item input dan tombol, dan ada acara pada tombol, yang merupakan popup jendela baru

2) Buat halaman pop-up: Setiap baris tabel memiliki tombol, nomor dan nama; Ada acara pada tombol: Tetapkan nomor dan nama saat ini ke posisi yang sesuai dari halaman pertama.

** Pembuka Operasi Lintas halaman: Anda bisa mendapatkan jendela yang membuat jendela ini, yaitu, Anda bisa mendapatkan jendela induk

Kasing: Tambahkan Node di akhir

1) Buat tag li

2) Buat teks

3) Tambahkan teks ke li

4) Tambahkan li ke ul

<body>

</ul> <br/>

fungsi add1 () {

// Dapatkan tag UL

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

// Buat tag

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

// Buat teks

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

// tambahkan teks ke li

Li1.AppendChild (Tex1);

// tambahkan li ke ul

UL1.AppendChild (LI1);

}

</script>

</body>

Objek elemen (objek elemen): Untuk mengoperasikan elemen, Anda harus terlebih dahulu mendapatkan elemen menggunakan metode yang sesuai dalam dokumen untuk mendapatkannya.

**metode

**** Dapatkan nilai di atribut getAttribute ("nama atribut");

**** Atur nilai Atribut SetAttribute (Name, Value);

**** Hapus atribut RemoveAttribute ("Atribut Name"); Nilai tidak dapat dihapus

// Dapatkan tag input terlebih dahulu

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

// peringatan (input1.value);

peringatan (input1.getAttribute ("value")); // Dapatkan nilainya di atribut

peringatan (input1.getAttribute ("class"));

input1.setAttribute ("class", "haha"); // Atur nilai atribut

peringatan (input1.getAttribute ("class"));

input1.removeattribute ("name");

</script>

** Ingin mendapatkan subtitle di bawah tag

** Gunakan Atribut Childnodes, tetapi atribut ini memiliki kompatibilitas yang buruk

** Satu -satunya cara yang efektif untuk mendapatkan tag di bawah tag, gunakan metode GetElementsByTagname

<body>

<li> aaaaaa </li>

<li> BBBBBB </li>

<li> CCCCCCCC </li>

</ul>

// Dapatkan tag UL

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

// Dapatkan subtitle di bawah UL

// var lis = ul1.childnodes; // kompatibilitas yang buruk

// peringatan (lis.length); // Beberapa tampilan 3 beberapa tampilan 7

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

peringatan (lis.length);

</script>

</body>

Properti Objek Node

** nodename

** nodetype

** NODEVALUE

** Saat parsing html menggunakan dom, tag, atribut dan teks dalam html perlu dienkapsulasi ke dalam objek

** Nilai yang sesuai dengan node tag

NODETYPE: 1

Nodename: Nama tag Caps, seperti Span

NODEVALUE: NULL

** Nilai yang sesuai dengan node atribut

Nodetype: 2

Nodename: Nama Atribut

NODEVALUE: Nilai properti

** Nilai yang sesuai dengan node teks

Nodetype: 3

Nodename: #Text

NODEVALUE: konten teks

** <tody>

<span id = "spanid"> konten teks </span>

// Dapatkan objek tag

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

// peringatan (span1.nodetype); // 1

// peringatan (span1.nodename); // SAPN

// peringatan (span1.nodevalue); // null

// atribut

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

// peringatan (id1.nodetype); // 2

// alert(id1.nodeName); //pengenal

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

//获取文本

var text1 = span1.getfirstChild;

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

// alert(text1.nodeName); //#teks

// 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 : 返回一个给定节点的上一个兄弟节点

<body>

<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>）

<body>

</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>

<body>

</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里面

<body>

</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代码）

<body>

</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属性

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

<body>

</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; 未选中

** 创建一个页面

** 复选框和按钮

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

*** There is also a checkbox operation to select all and not select all. ada acara

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

**代码实现

<body>

<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;

}

kalau tidak {

love1.checked = true;

}

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

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

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

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

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

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

if(box1.checked == true) {

selAll();

}

kalau tidak {

selNo();

}

</script>

</body>

案例：下拉列表左右选择

** 下拉选择框

</pilih>

** 创建一个页面

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

** 四个按钮，都有事件

** 代码实现：

<body>

<div>

</pilih>

</div>

<div>

</div>

<div>

<option>AAAAAAAA</option>

<option>BBBBBBBB</option>

</pilih>

</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);

Saya--; // 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);

Saya--;

}

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

</script>

</body>

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

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

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

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

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

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

**代码实现：

<body>

</pilih>

</pilih>

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

// 使用二维数组

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>

The above JavaWeb Learning Notes Sharing (must-read) is all the content I share with you. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.