1.事件監聽：
document.getElementById('myButton').addEventListener('click',?function() {?alert('按鈕被點擊了！');});
2.動態創建元素：
var?newDiv =?document.createElement('div');newDiv.innerHTML?=?'這是新創建的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'); ? ? ??// 根據ID查詢
5.處理表單數據：
var formData = new?FormData(document.forms[0]);?//?獲取表單數據異步JavaScript和XML?(AJAX) 請求：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); // 將對象轉換為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.使用定時器：
setTimeout(function(){?alert("Hello"); },?3000);?clearTimeout(timer); // 清除定時器var timer = setInterval(function(){ console.log("Interval"); }, 3000); // 每3秒執行一次clearInterval(timer); // 清除定時器
9.處理字符串：
var str =?"Hello, world!";var result = str.split(", "); ? ? ? ? ?//?分割字符串result = str.toUpperCase(); ? ? ? ? ? ?//?轉換為大寫result = str.substring(0,?5); ? ? ? ? ?//?截取字符串result = str.indexOf('world'); ? ? ? ?//?查找字符串
這些是原生JavaScript的基礎知識點，每個點都可以展開討論很多。根據具體需求，可以使用更多的JavaScript特性和方法。
該文章在 2024/12/26 10:44:08 編輯過
400 186 1886
