1. Temukan elemen:
document.geteLementById ("id"); temukan sesuai dengan id, dan temukan paling banyak;
var a = docunment.getElementById ("id"); Tempatkan elemen yang ditemukan dalam variabel;
document.geteLementsByName ("name"); Temukan sesuai nama, dan array ditemukan;
document.geteLementsbyTagname ("name"); Temukan array sesuai dengan nama tag;
Document.getElementsByClassName ("name") temukan sesuai dengan className, dan array ditemukan;
2. Konten Operasi:
1. Elemen Non-Formulir:
(1) Dapatkan konten:
waspada (a.innerhtml); Kode dan teks HTML dalam tag diperoleh, dan semua konten dalam tag diperoleh.
Misalnya: ada div seperti itu di dalam tubuh:
<Div id = "Me"> <b> Cobalah </b> </div>
Gunakan InnerHTML untuk mendapatkan konten di Div in Script:
var a = document.geteLementById ("me");
waspada (a.innerhtml);
Hasilnya adalah sebagai berikut:
peringatan (A.innerText); hanya mengambil teks di dalam
waspada (a.outerhtml); Termasuk konten tag itu sendiri (pemahaman sederhana)
(2) Atur konten:
a.innerHtml = "<font color = red> halo world </font>";
Jika hasilnya adalah sebagai berikut dengan kode konten pengaturan, konten di DIV diganti:
A.Innertext akan menyajikan konten sebagaimana adanya
Hapus Konten: Tetapkan string kosong
2. Elemen bentuk:
(1) Ada dua cara untuk mendapatkan konten:
var t = document.f1.t1; bentuk bentuk bentuk bentuk id adalah input dengan t1 di f1;
var t = document.getElementById ("id"); Dapatkan langsung dengan ID.
peringatan (t.value); Mendapat nilai nilai dalam input;
peringatan (t.innerhtml); Dapatkan nilainya di sini <TexTarea> </textarea>;
(2) mengatur konten: t.value = "perubahan konten";
3. Sedikit titik pengetahuan:
<a href = "http://www.baidu.com" onsclick = "return false"> beralih ke baidu </a>; Jika return flase ditambahkan, itu tidak akan melompat, defaultnya adalah return true akan melompat. Hal yang sama berlaku untuk tombol. Jika return flase diatur dalam tombol, pengiriman tidak akan dibuat. Ini dapat digunakan untuk mengontrol lompatan pengiriman.
3. Properti Operasi
Pertama, gunakan ID elemen untuk menemukan elemen dan menyimpannya dalam variabel:
var a = document.geteLementById ("id");
Kemudian Anda dapat beroperasi pada properti elemen:
a.setAttribute ("nama atribut", "nilai atribut"); Atur atribut, tambahkan atau ubah;
a.getAttribute ("nama atribut"); Dapatkan nilai atribut;
A.Removeattribute ("nama atribut"); Hapus atribut.
Contoh 1: Lakukan pertanyaan. Jika jawaban input benar, itu akan muncul dengan benar, dan kesalahan akan muncul kesalahan;
Berikut adalah atribut Daan yang ditulis dalam teks, yang berisi nilai jawaban. Saat mengklik untuk memeriksa jawabannya, input konten dengan Cheak sama dengan jawabannya:
Kode dalam tubuh:
<sorm> Pada tahun berapa pendirian Republik Tiongkok? <input type = "text" daan = "1912" value = "" id = "t1" name = "t1" /> <input type = "Tombol" onclick = "check ()" id = "t2" name = "t2" value = "periksa jawaban" /> </form>
Kode di JS:
function check () {var a = document.geteLementById ("t1"); var a1 = a.value; var a2 = a.getAttribute ("daan"); if (a1 == a2) {alert ("Selamat untuk menjawab dengan benar!"); } else {alert ("idiot!"); }}Hasil ketika jawabannya benar:
Contoh 2: Tombol Setuju, Countdown hingga 10 detik, tombol Setuju dapat diserahkan. Di sini, atribut operasi: dinonaktifkan digunakan untuk mengubah keadaan tombol. Saat dinonaktifkan = "Dinonaktifkan" tidak tersedia.
Kode dalam tubuh:
<norm> <input type = "kirim" id = "b1" name = "b1" value = "setuju (10)" dinonaktifkan = "dinonaktifkan" /> </form>
Kode di JS:
var n = 10; var a = document.geteLementById ("b1"); function bian () {n--; if (n == 0) {A.Removeattribute ("Disabled"); a.value = "Setuju"; kembali; } else {a.value = "setuju ("+n+")"; window.setTimeout ("bian ()", 1000); }} window.setTimeout ("bian ()", 1000);Hasil Lari:
4. Gaya Operasi
Pertama, gunakan ID elemen untuk menemukan elemen dan menyimpannya dalam variabel:
var a = document.geteLementById ("id");
Kemudian Anda dapat beroperasi pada properti elemen:
A. ; Mengoperasikan properti gaya ID ini.
Gaya adalah gaya dalam CSS, dan semua gaya dapat dioperasikan dengan kode.
document.body.style.backgroundColor = "color"; Warna latar belakang seluruh jendela.
Kelas Gaya Operasi: A.ClassName = "ClassName in Style Sheet" mengoperasikan batch gaya
Contoh 1: Pengalihan gambar tampilan otomatis dan manual;
Kode dalam tubuh, untuk membuat div dengan gambar latar belakang dan objek kontrol di kedua sisi:
<Div id = "TUijian" style = "latar belakang-gambar: url (imges/tj1.jpg);"> <div id = "p1" onclick = "dodo (-1)"> </div> <div id = "p2" onclick = "dodo (1)"> </div> </div>
Kode dalam stylesheet:
<style type = "text/css"> *{margin: 0px auto; padding: 0px; Font-Family: "Microsoft Yahei"; } #tuijian {width: 760px; Tinggi: 350px; Latar belakang-repeat: No-Repeat; } .pages {top: 200px; Latar Belakang:#000; Latar belakang posisi: tengah; Latar belakang-repeat: No-Repeat; Opacity: 0.4; Lebar: 30px; Tinggi: 60px; } #p1 {latar belakang-gambar: url (imges/prev.png); float: kiri; margin: 150px 0px 0px 10px; } #p2 {latar belakang-gambar: url (imges/next.png); float: benar; margin: 150px 10px 0px; } </style>Kode dalam JS terutama memanggil fungsi huan () setiap 3 detik untuk memodifikasi gaya gambar latar belakang. Saat mengklik sakelar kiri dan kanan, itu akan diaktifkan secara manual, dan sakelar otomatis berhenti:
<bahasa skrip = "javascript"> var jpg = array baru (); jpg[0]="url(imges/tj1.jpg)";jpg[1]="url(imges/tj2.jpg)";jpg[2]="url(imges/tj3.jpg)";var tjimg = document.getElementById("tuijian");var xb=0;var n=0;function huan() { xb++; if (xb == jpg.length) {xb = 0; } tjimg.style.backgroundImage = jpg [xb]; if (n == 0) {var id = window.setTimeout ("huan ()", 3000); }} fungsi dodo (m) {n = 1; xb = xb+m; if (xb <0) {xb = jpg.length-1; } else if (xb> = jpg.length) {xb = 0; } tjimg.style.backgroundImage = jpg [xb]; } window.setTimeout ("huan ()", 3000); </script>Efeknya adalah sebagai berikut:
5. Operasi Elemen Terkait:
var a = document.geteLementById ("id"); temukan;
var b = a.nextsibling, temukan elemen rekan berikutnya dari a, perhatikan ruang yang mengandung;
var b = a.previoussibling, temukan elemen teman sebaya sebelumnya dari A, perhatikan ruang yang mengandung;
var b = a.parentnode, temukan elemen induk sebelumnya dari a;
var b = a.childnodes, array ditemukan, dan elemen anak tingkat berikutnya ditemukan;
var b = A.firstchild, elemen anak pertama, lastchild last, childnodes [n] temukan jumlah yang pertama;
peringatan (node [i] instance dari teks); Tentukan apakah itu teks, mengembalikan true, bukan flase, gunakan jika menentukan apakah nilainya salah, dan Anda dapat menghapus spasi.
6. Penciptaan, Penambahan, dan Penghapusan Elemen:
var a = document.geteLementById ("id"); temukan;
var obj = document.createelement ("name tag"); Buat elemen
obj.innerhtml = "Hello World"; Saat menambahkan, Anda perlu membuat elemen terlebih dahulu.
A.AppendChild (OBJ); tambahkan elemen anak ke a.
A.Removechild (OBJ); Hapus elemen anak.
A.SelectedIndex dalam daftar: jumlah yang dipilih;
//a.Options−A.SelectIndex] Hapus objek opsi dari subskrip sesuai dengan indeks.
7. Operasi String:
var s = string baru (); atau var s = "aaaa";
var s = "halo dunia";
alert (s.tolowercase ()); untuk menumpukan touppercase () untuk huruf besar
peringatan (s.substring (3,8)); mencegat dari posisi ketiga ke posisi kedelapan
peringatan (s.substr (3,8)); Mulai mencegat dari posisi ketiga, mencegat delapan karakter panjangnya, dan jangan menulis angka -angka berikut ke akhir.
s.split (''); Bongkar karakter sesuai dengan karakter yang ditentukan, masukkan ke dalam array, dan secara otomatis mengurutkannya
S.Length adalah properti
S.indexof ("dunia"); kejadian pertama di dunia dalam string tidak kembali -1
S.LastIndexof ("o"); o Di mana kejadian terakhir s.lastindexof ("o"); o di string
8. Operasi Tanggal dan Waktu
var d = tanggal baru (); waktu saat ini
D.Setlyar (2015,11,6);/*Kurangi 1 pengaturan pada bulan Anda ingin mengatur*/
D.Getisear: Ambil tahun;
d.getmonth (): Ambil bulan, dan semakin sedikit yang Anda dapatkan;
d.getDate (): Ambil langit;
d.getday (): Ambil hari dalam seminggu
D.getHours (): Luangkan waktu;
D.GetMinutes (): luangkan menit; D.GetSeconds (): Ambil detik
D.SetlyEar (): Tetapkan tahun dan perhatikan -1 saat mengatur bulan.
9. Operasi Fungsi Matematika
Math.ceil (); Bilangan bulat terkecil lebih besar dari desimal saat ini
Math.floor (); Bilangan bulat terbesar dari jumlah desimal ikan kecil saat ini
Math.sqrt (); buka kuadrat
Math.round (); bulat(); bulat
Math.random (); Angka acak, antara 0-1
10. Beberapa tips
Kutipan ganda di luar, dan kutipan ganda di dalam diubah menjadi kutipan tunggal;
Saat mengatur ketinggian baris di div, tidak peduli seberapa tinggi pengaturannya, baris yang ditempati berada di posisi tengah secara default (tengah area atas dan bawah dari div - [default] berpusat secara vertikal).
Nilai yang diambil dari kotak teks adalah string, dan perlu dikonversi menjadi angka menggunakan parseInt ().
S.Match (Reg); S mewakili string, REG mewakili string, dan keduanya cocok. Jika kedua string tidak cocok, nol dikembalikan.
Penjelasan terperinci di atas tentang Operasi JavaScript-dom-window. Objek Dokumen adalah semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.