20 个实用的 JavaScript 代码片段：简化你的开发工作

20 个实用的 JavaScript 代码片段：简化你的开发工作/n/n本文整理了 20 个实用的 JavaScript 代码片段，涵盖 URL 处理、防抖节流、浏览器判断、滚动操作、DOM 操作、事件监听等方面，帮助你快速解决开发中遇到的常见问题，提高开发效率。/n/n1. 获取 URL 中的参数值/n/njavascript/nfunction getParameterByName(name) {/n name = name.replace(/[/[]/, '//[').replace(/[/]]/, '//]');/n var regex = new RegExp('[//?&]' + name + '=([^&#]*)');/n var results = regex.exec(location.search);/n return results === null ? '' : decodeURIComponent(results[1].replace(//+/g, ' '));/n}/n/n/n2. 防抖函数/n/njavascript/nfunction debounce(func, wait, immediate) {/n var timeout;/n return function() {/n var context = this, args = arguments;/n var later = function() {/n timeout = null;/n if (!immediate) func.apply(context, args);/n };/n var callNow = immediate && !timeout;/n clearTimeout(timeout);/n timeout = setTimeout(later, wait);/n if (callNow) func.apply(context, args);/n };/n};/n/n/n3. 节流函数/n/njavascript/nfunction throttle(func, limit) {/n var inThrottle;/n return function() {/n var context = this, args = arguments;/n if (!inThrottle) {/n func.apply(context, args);/n inThrottle = true;/n setTimeout(function() {/n inThrottle = false;/n }, limit);/n }/n };/n}/n/n/n4. 判断浏览器是否支持 webp 格式图片/n/njavascript/nfunction supportsWebp() {/n var elem = document.createElement('canvas');/n if (!!(elem.getContext && elem.getContext('2d'))) {/n return elem.toDataURL('image/webp').indexOf('data:image/webp') == 0;/n }/n return false;/n}/n/n/n5. 判断是否为移动设备/n/njavascript/nfunction isMobile() {/n return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);/n}/n/n/n6. 判断是否为微信浏览器/n/njavascript/nfunction isWechat() {/n return /MicroMessenger/i.test(navigator.userAgent);/n}/n/n/n7. 获取滚动条位置/n/njavascript/nfunction getScrollPosition() {/n return {/n x: window.pageXOffset || document.documentElement.scrollLeft,/n y: window.pageYOffset || document.documentElement.scrollTop/n };/n}/n/n/n8. 滚动到顶部/n/njavascript/nfunction scrollToTop() {/n window.scrollTo({/n top: 0,/n behavior: 'smooth'/n });/n}/n/n/n9. 滚动到指定元素位置/n/njavascript/nfunction scrollToElement(element) {/n window.scrollTo({/n behavior: 'smooth',/n left: 0,/n top: element.offsetTop/n });/n}/n/n/n10. 获取元素相对于文档的位置/n/njavascript/nfunction getElementPosition(element) {/n var rect = element.getBoundingClientRect();/n var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;/n var scrollTop = window.pageYOffset || document.documentElement.scrollTop;/n return { top: rect.top + scrollTop, left: rect.left + scrollLeft };/n}/n/n/n11. 获取元素的样式值/n/njavascript/nfunction getStyleValue(element, property) {/n return window.getComputedStyle(element, null).getPropertyValue(property);/n}/n/n/n12. 添加 CSS 类/n/njavascript/nfunction addClass(element, className) {/n if (element.classList) {/n element.classList.add(className);/n } else {/n element.className += ' ' + className;/n }/n}/n/n/n13. 移除 CSS 类/n/njavascript/nfunction removeClass(element, className) {/n if (element.classList) {/n element.classList.remove(className);/n } else {/n element.className = element.className.replace(new RegExp('(^|//b)' + className.split(' ').join('|') + '(//b|$)', 'gi'), ' ');/n }/n}/n/n/n14. 判断元素是否有指定的 CSS 类/n/njavascript/nfunction hasClass(element, className) {/n if (element.classList) {/n return element.classList.contains(className);/n } else {/n return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);/n }/n}/n/n/n15. 获取兄弟元素/n/njavascript/nfunction getSiblings(element) {/n return Array.prototype.filter.call(element.parentNode.children, function(child) {/n return child !== element;/n });/n}/n/n/n16. 获取元素的子元素/n/njavascript/nfunction getChildren(element) {/n return Array.prototype.filter.call(element.children, function(child) {/n return child.nodeType === 1;/n });/n}/n/n/n17. 创建元素/n/njavascript/nfunction createElement(tagName, attributes, text) {/n var element = document.createElement(tagName);/n if (attributes) {/n for (var key in attributes) {/n element.setAttribute(key, attributes[key]);/n }/n }/n if (text) {/n element.appendChild(document.createTextNode(text));/n }/n return element;/n}/n/n/n18. 移除元素/n/njavascript/nfunction removeElement(element) {/n if (element.parentNode) {/n element.parentNode.removeChild(element);/n }/n}/n/n/n19. 监听事件/n/njavascript/nfunction addEvent(element, eventName, handler) {/n if (element.addEventListener) {/n element.addEventListener(eventName, handler, false);/n } else if (element.attachEvent) {/n element.attachEvent('on' + eventName, handler);/n } else {/n element['on' + eventName] = handler;/n }/n}/n/n/n20. 取消监听事件/n/njavascript/nfunction removeEvent(element, eventName, handler) {/n if (element.removeEventListener) {/n element.removeEventListener(eventName, handler, false);/n } else if (element.detachEvent) {/n element.detachEvent('on' + eventName, handler);/n } else {/n element['on' + eventName] = null;/n }/n}/n/n/n希望这些代码片段能帮助你提高开发效率，如有任何问题或建议，欢迎留言讨论！/n