这次给大家带来JS的8个必须注意的基础知识，JS的8个必须注意的基础知识注意事项有哪些，下面就是实战案例，一起来看一下。
1 JS 中修改元素的类名: 可以通过className修改,不能使用class
function toRed() { var tobox = document.getElementById('box1');
tobox.className = 'tmpBox';
}2 函数传参
<html lang="en"><head>
<meta charset="UTF-8">
<title>02-函数传参数</title>
<style>
#div1{width: 200px; height: 200px; border: 1px solid #000;} </style>
<script>
function setColor(color) { var oDiv = document.getElementById('div1');
oDiv.style.backgroundColor = color;
} </script></head><body><input type="button" value="变绿" onclick="setColor('green')"><input type="button" value="变黄" onclick="setColor('yellow')"><input type="button" value="变黑" onclick="setColor('black')"><div id="div1"></div></body></html>3修改属性的第二种方法:(3499910bf9dac5ae3c52d5ede7383485要修改的属性不固定时使用5db79b134e9f6b82c0b36e0489ee08ed)
可以通过 oDiv.style[属性名字] = value;来动态修改属性和值
//括号里放的是变量
function setStyle(propertyName,value) {
var oDiv = document.getElementById('div1');
oDiv.style[propertyName] = value;
}<html lang="en"><head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{ width: 100px;height: 100px;border: 1px solid #000;background-color: skyblue;
} </style>
<script>
function setStyle(propertyName,value) { var oDiv = document.getElementById('div1');
oDiv.style[propertyName] = value;
} </script></head><body><input type="button" value="变高" onclick="setStyle('height','200px')"><input type="button" value="变宽" onclick="setStyle('width','200px')"><input type="button" value="变红" onclick="setStyle('background','red')"><div id="div1"></div></body></html>4.style和className的区别
元素.style.属性 = xxx;是修改的行间(行内)样式,它的优先级比较高 !!! 例如:oDiv.style.backgroundColor = 'red';
className : 可以通过指定的类名,去找到对应的样式;
但是如果使用了style之后,再使用className指定样式,就会没有效果!!!!
注意:要么都是用style设置样式,要么单独使用className指定样式,不可混合使用,会有未知的错误发生!
5.提取行间事件
window.onload 页面加载完成时才执行
行为、样式、结构三者分离: JS CSS HTML 分离
提取事件
为元素添加事件
<html lang="en"><head>
<meta charset="UTF-8">
<title>05-提取行间事件</title>
<script>
//window.onload 页面加载完成时才执行
window.onload = function () { var oBtn = document.getElementById('btn1'); //给元素添加事件
oBtn.onclick = function () { //匿名函数
alert('我是打酱油的');
};
} </script></head><body><input id="btn1" type="button" value="按钮"></body></html>6.JS从父元素获取子元素
从下面代码中获取到input
<div id="box1">
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br></div>放下如下:
window.onload =function (){ var oDiv = document.getElementById('box1'); //现获取父元素div
var inputs = oDiv.getElementsByTagName('input'); //再通过div获取到里面所有的input}7. innerHTML
用于设置容器标签的内容,可以是文字,也可以是 HTML(标签)。
<html lang="en"><head>
<meta charset="UTF-8">
<title>08-innerHTML</title>
<style>
.content{ width: 200px; height: 200px; border: 1px solid #000;
} </style>
<script>
window.onload = function () { var oText = document.getElementById('textField'); var oBtn = document.getElementById('button'); var oContent = document.getElementById('div-content');
oBtn.onclick = function () {
oContent.innerHTML = oText.value;//可以往里放文字,标签等
}
} </script></head><body><input type="text" id="textField"><input type="button" value="点击" id="button"><div class="content" id="div-content"></div></body></html>8.字符串的拼接:
var str = '我叫小明'+12+'岁'+168+'2017'; >>> 结果:我叫小明12岁1682017var num = '9+6等于'+(9+6); >>> 结果: 9 + 6 等于 15
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci JS的8个必须注意的基础知识. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Enjin JavaScript: Membandingkan PelaksanaanApr 13, 2025 am 12:05 AMEnjin JavaScript yang berbeza mempunyai kesan yang berbeza apabila menguraikan dan melaksanakan kod JavaScript, kerana prinsip pelaksanaan dan strategi pengoptimuman setiap enjin berbeza. 1. Analisis leksikal: Menukar kod sumber ke dalam unit leksikal. 2. Analisis Tatabahasa: Menjana pokok sintaks abstrak. 3. Pengoptimuman dan Penyusunan: Menjana kod mesin melalui pengkompil JIT. 4. Jalankan: Jalankan kod mesin. Enjin V8 mengoptimumkan melalui kompilasi segera dan kelas tersembunyi, Spidermonkey menggunakan sistem kesimpulan jenis, menghasilkan prestasi prestasi yang berbeza pada kod yang sama.
Beyond the Browser: JavaScript di dunia nyataApr 12, 2025 am 12:06 AMAplikasi JavaScript di dunia nyata termasuk pengaturcaraan sisi pelayan, pembangunan aplikasi mudah alih dan Internet of Things Control: 1. Pengaturcaraan sisi pelayan direalisasikan melalui node.js, sesuai untuk pemprosesan permintaan serentak yang tinggi. 2. Pembangunan aplikasi mudah alih dijalankan melalui reaktnatif dan menyokong penggunaan silang platform. 3. Digunakan untuk kawalan peranti IoT melalui Perpustakaan Johnny-Five, sesuai untuk interaksi perkakasan.
Membina aplikasi SaaS Multi-penyewa dengan Next.js (Integrasi Backend)Apr 11, 2025 am 08:23 AMSaya membina aplikasi SaaS multi-penyewa berfungsi (aplikasi edTech) dengan alat teknologi harian anda dan anda boleh melakukan perkara yang sama. Pertama, apakah aplikasi SaaS multi-penyewa? Aplikasi SaaS Multi-penyewa membolehkan anda melayani beberapa pelanggan dari Sing
Cara Membina Aplikasi SaaS Multi-Tenant dengan Next.js (Integrasi Frontend)Apr 11, 2025 am 08:22 AMArtikel ini menunjukkan integrasi frontend dengan backend yang dijamin oleh permit, membina aplikasi edtech SaaS yang berfungsi menggunakan Next.Js. Frontend mengambil kebenaran pengguna untuk mengawal penglihatan UI dan memastikan permintaan API mematuhi dasar peranan
JavaScript: meneroka serba boleh bahasa webApr 11, 2025 am 12:01 AMJavaScript adalah bahasa utama pembangunan web moden dan digunakan secara meluas untuk kepelbagaian dan fleksibiliti. 1) Pembangunan front-end: Membina laman web dinamik dan aplikasi satu halaman melalui operasi DOM dan kerangka moden (seperti React, Vue.js, sudut). 2) Pembangunan sisi pelayan: Node.js menggunakan model I/O yang tidak menyekat untuk mengendalikan aplikasi konkurensi tinggi dan masa nyata. 3) Pembangunan aplikasi mudah alih dan desktop: Pembangunan silang platform direalisasikan melalui reaktnatif dan elektron untuk meningkatkan kecekapan pembangunan.
Evolusi JavaScript: Trend Semasa dan Prospek Masa DepanApr 10, 2025 am 09:33 AMTrend terkini dalam JavaScript termasuk kebangkitan TypeScript, populariti kerangka dan perpustakaan moden, dan penerapan webassembly. Prospek masa depan meliputi sistem jenis yang lebih berkuasa, pembangunan JavaScript, pengembangan kecerdasan buatan dan pembelajaran mesin, dan potensi pengkomputeran IoT dan kelebihan.
Demystifying JavaScript: Apa yang berlaku dan mengapa pentingApr 09, 2025 am 12:07 AMJavaScript adalah asas kepada pembangunan web moden, dan fungsi utamanya termasuk pengaturcaraan yang didorong oleh peristiwa, penjanaan kandungan dinamik dan pengaturcaraan tak segerak. 1) Pengaturcaraan yang didorong oleh peristiwa membolehkan laman web berubah secara dinamik mengikut operasi pengguna. 2) Penjanaan kandungan dinamik membolehkan kandungan halaman diselaraskan mengikut syarat. 3) Pengaturcaraan Asynchronous memastikan bahawa antara muka pengguna tidak disekat. JavaScript digunakan secara meluas dalam interaksi web, aplikasi satu halaman dan pembangunan sisi pelayan, sangat meningkatkan fleksibiliti pengalaman pengguna dan pembangunan silang platform.
Adakah Python atau JavaScript lebih baik?Apr 06, 2025 am 12:14 AMPython lebih sesuai untuk sains data dan pembelajaran mesin, manakala JavaScript lebih sesuai untuk pembangunan front-end dan penuh. 1. Python terkenal dengan sintaks ringkas dan ekosistem perpustakaan yang kaya, dan sesuai untuk analisis data dan pembangunan web. 2. JavaScript adalah teras pembangunan front-end. Node.js menyokong pengaturcaraan sisi pelayan dan sesuai untuk pembangunan stack penuh.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Dreamweaver CS6
Alat pembangunan web visual
Pelayar Peperiksaan Selamat
Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.
EditPlus versi Cina retak
Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Versi Mac WebStorm
Alat pembangunan JavaScript yang berguna
