Javascript常用代码

在前端开发中，Javascript是必不可少的一种编程语言。无论是网页交互还是动态特效，都需要使用Javascript来实现。这篇文章将分享一些Javascript常用代码，希望能够对初学者有所帮助。

获取元素

// 通过id获取元素
var element = document.getElementById("my-id");
// 通过class获取元素
var elements = document.querySelectorAll(".my-class");
// 通过标签名获取元素
var elements = document.getElementsByTagName("div");

以上是三种常见的获取元素的方式。其中，querySelectorAll可以根据CSS选择器获取元素，使用起来非常方便。

操作元素

// 添加class
element.classList.add("my-class");
// 移除class
element.classList.remove("my-class");
// 切换class
element.classList.toggle("my-class");
// 设置css样式
element.style.setProperty("color", "red");
// 获取属性值
var value = element.getAttribute("href");
// 设置属性值
element.setAttribute("href", "http://www.baidu.com");

以上是一些常见的操作元素的方法。在实际开发中，我们通常会使用DOM操作来动态修改页面内容，这些方法可以实现页面呈现和交互的效果。

事件处理

// 监听点击事件
element.addEventListener("click", function() {
// 处理点击事件
});
// 阻止默认事件
event.preventDefault();
// 阻止事件冒泡
event.stopPropagation();

在交互过程中，我们需要监听用户的行为并作出相应的反应。事件处理可以让页面呈现出更加丰富的交互效果。

函数封装

// 封装ajax请求
function ajax(url, successCallback, errorCallback) {
var xmlhttp;
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
successCallback(xmlhttp.responseText);
} else {
errorCallback(xmlhttp.status);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
// 封装cookie操作
function setCookie(name, value, expires, path, domain, secure) {
var cookieText = name + "=" + value;
if (expires instanceof Date) {
cookieText += "; expires=" + expires.toGMTString();
}
if (path) {
cookieText += "; path=" + path;
}
if (domain) {
cookieText += "; domain=" + domain;
}
if (secure) {
cookieText += "; secure";
}
document.cookie = cookieText;
}
function getCookie(name) {
var cookieName = encodeURIComponent(name) + "=",
cookieStart = document.cookie.indexOf(cookieName),
cookieValue = null;
if (cookieStart >-1) {
var cookieEnd = document.cookie.indexOf(";", cookieStart);
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
}
return cookieValue;
}
function deleteCookie(name, path, domain) {
document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
if (path) {
document.cookie += "; path=" + path;
}
if (domain) {
document.cookie += "; domain=" + domain;
}
}

函数封装可以让代码更加模块化，避免代码重复和代码冗余。以上是两个常见的函数封装示例。

总结

Javascript是非常强大的一种编程语言，在前端开发中有着不可替代的地位。本文简单介绍了一些常见的Javascript代码，希望能够对初学者有所帮助。在实际开发中，多动手编写代码，才能更好地掌握这门语言。