Web开发中常用的函数及使用技巧
1. document.getElementById()
这个函数可以获取到 HTML 标签中的 id 为某个值的标签。可以通过这个函数来操作该标签。使用方法示例:
var element = document.getElementById("myId");
2. document.createElement()
这个函数可以创建一个新的 HTML 元素标签,并且可以设置标签的属性。使用方法示例:
var element = document.createElement("div");
element.setAttribute("class", "myClass");
element.innerHTML = "This is my new element.";
3. document.querySelector()
这个函数可以获取到某个 CSS 选择器所匹配的第一个元素。如果有多个匹配项,则返回第一个匹配项。使用方法示例:
var element = document.querySelector(".myClass");
4. window.onload
这个事件会在页面完全加载完毕后触发,可以在这个事件中执行一些初始化的操作。使用方法示例:
window.onload = function() {
// 页面加载完成后的操作
};
5. addEventListener()
这个函数可以给某个 HTML 元素添加一个事件监听器,当事件发生时可以执行指定的函数。使用方法示例:
document.getElementById("myId").addEventListener("click", function() {
// 当 myId 标签被点击时执行的代码
});
6. getElementById vs querySelector
getElementById 只能根据 id 属性找到元素,而 querySelector 可以使用各种 CSS 选择器来找到元素。如果需要根据 id 查找元素,用 getElementById 更快捷。
7. innerHTML vs textContent
innerHTML 会返回标签内部的所有 HTML 代码,包括标签本身,而 textContent 只会返回标签的文本内容。一般情况下,如果只需要取出文本内容,用 textContent 更好。
8. CSS 操作
可以通过 JavaScript 来操作 CSS 样式,使用样式需要使用 element.style.property。property 是具体的样式属性,比如 "color"、"background-color" 等。使用方法示例:
document.getElementById("myId").style.color = "red";
9. setInterval()
这个函数可以周期性地执行一个指定的函数。使用方法示例:
var intervalId = setInterval(function() {
// 执行周期性的代码
}, 1000); // 间隔时间为 1 秒
10. setTimeout()
这个函数可以在指定的时间之后执行一次指定的函数。使用方法示例:
var timeoutId = setTimeout(function() {
// 等待一段时间后执行的代码
}, 5000); // 等待时间为 5 秒
11. 数组操作
可以使用 JavaScript 来操作数组,包括创建、添加、删除、遍历等操作。数组创建的方法示例:
var myArray = [1, 2, 3, "four", "five"];
12. 数组遍历
可以使用 for 循环或者 forEach 方法来遍历数组。for 循环的方法:
for(var i=0; i<myArray.length; i++) {
console.log(myArray[i]);
}
forEach 方法的方法:
myArray.forEach(function(item) {
console.log(item);
});
13. 类型判断
可以使用 typeof 运算符来判断一个变量的类型。使用方法示例:
typeof "hello"; // 返回 "string"
typeof 3; // 返回 "number"
typeof true; // 返回 "boolean"
14. 正则表达式
正则表达式可以用来匹配一定模式的字符串,用来检验合法性或者提取信息等。RegExp 对象是 JavaScript 中的正则表达式对象。使用方法示例:
var str = "Hello world!";
var pattern = /world/;
console.log(pattern.test(str)); // 返回 true
15. JSON
JSON 是 JavaScript 对象的一种格式化方式。可以使用 JSON.stringify() 将 JavaScript 对象转换成 JSON 字符串,使用 JSON.parse() 将 JSON 字符串转换成 JavaScript 对象。使用方法示例:
var obj = {name: "Alice", age: 20};
var str = JSON.stringify(obj); // 转换成 JSON 字符串
var obj2 = JSON.parse(str); // 转换成 JavaScript 对象
