1.事件監(jiān)聽(tīng)：
document.getElementById('myButton').addEventListener('click',?function() {?alert('按鈕被點(diǎn)擊了！');});
2.動(dòng)態(tài)創(chuàng)建元素：
var?newDiv =?document.createElement('div');newDiv.innerHTML?=?'這是新創(chuàng)建的div元素';document.body.appendChild(newDiv);
3.類名的操作：
var element = document.getElementById('myElement');element.classList.add('new-class'); ? ??//?添加類element.classList.remove('existing-class');?//?移除類element.classList.toggle('class-name'); ??//?切換類
4.查詢DOM元素：
var?elements =?document.querySelectorAll('.my-class');?var element = document.getElementById('myId'); ? ? ??// 根據(jù)ID查詢
5.處理表單數(shù)據(jù)：
var formData = new?FormData(document.forms[0]);?//?獲取表單數(shù)據(jù)異步JavaScript和XML?(AJAX) 請(qǐng)求：var xhr = new?XMLHttpRequest();xhr.open('GET',?'ajax/test.html',?true);xhr.onreadystatechange = function() {?if?(xhr.readyState ==4?&& xhr.status ==?200) {?document.getElementById('myDiv').innerHTML = xhr.responseText;?}};xhr.send();
6.使用JSON:
var?jsonData?=?'{"name":"John",?"age":30}';var?obj?=?JSON.parse(jsonData);?var myJSON = JSON.stringify(obj); // 將對(duì)象轉(zhuǎn)換為JSON字符串
7.處理Cookie:
document.cookie?=?"username=John Doe;?expires=Thu, 18 Dec 2043 12:00:00 UTC; path=/";var?username =?document.cookie.replace(/(?:(?:^|.*;\s*)username\s*\=\s*([^;]*).*$)|^.*$/,?"$1");
8.使用定時(shí)器：
setTimeout(function(){?alert("Hello"); },?3000);?clearTimeout(timer); // 清除定時(shí)器var timer = setInterval(function(){ console.log("Interval"); }, 3000); // 每3秒執(zhí)行一次clearInterval(timer); // 清除定時(shí)器
9.處理字符串：
var str =?"Hello, world!";var result = str.split(", "); ? ? ? ? ?//?分割字符串result = str.toUpperCase(); ? ? ? ? ? ?//?轉(zhuǎn)換為大寫(xiě)result = str.substring(0,?5); ? ? ? ? ?//?截取字符串result = str.indexOf('world'); ? ? ? ?//?查找字符串
這些是原生JavaScript的基礎(chǔ)知識(shí)點(diǎn)，每個(gè)點(diǎn)都可以展開(kāi)討論很多。根據(jù)具體需求，可以使用更多的JavaScript特性和方法。
該文章在 2024/12/26 10:44:08 編輯過(guò)
400 186 1886
