页面所有资源加载完成后

window.onload事件在页面中的所有资源（包括图片、样式表、脚本等）完全加载完成后触发

window.onload = function() {
    // 页面资源加载完成后的代码
    console.log("所有资源加载完成");
};

页面链接新窗口打开

当页面出现三方链接的情况下，点击会将原网站的内容覆盖，如果想保留原页面的窗口就可以这样操作

document.querySelectorAll('#content a').forEach(item => {
  item.setAttribute('target', '_blank')
})

返回页面顶部

document.body.scrollTop = 0
document.documentElement.scrollTop = 0

动态设置网页标题

document.title = '首页'

页面上下滚动事件

var scrollFunc = function (e) {
  e = e || window.event;
  if (e.wheelDelta) { //第一步：先判断浏览器IE，谷歌滑轮事件
    if (e.wheelDelta > 0) { //当滑轮向上滚动时
      console.log("滑轮向上滚动");
    }
    if (e.wheelDelta < 0) { //当滑轮向下滚动时
      console.log("滑轮向下滚动");
    }
  } else if (e.detail) { //Firefox滑轮事件
    if (e.detail > 0) { //当滑轮向上滚动时
      console.log("滑轮向上滚动");
    }
    if (e.detail < 0) { //当滑轮向下滚动时
      console.log("滑轮向下滚动");
    }
  }
}
//给页面绑定滑轮滚动事件
if (document.addEventListener) {//firefox
  document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
//滚动滑轮触发scrollFunc方法 //ie 谷歌
window.onmousewheel = document.onmousewheel = scrollFunc;

filter过滤

let arr = [1, 1, 2]
arr = arr.filter(item => {
  return item != 1
})

数组转字符

var a = [1,2,3]
a.join('').toString()) // 自定义拼接，结果：123
a.join('-').toString()) // 自定义拼接，结果：1-2-3

下载视频

function videoDownload(filePath, fileName) {
  const a = document.createElement('a');
  document.body.append(a);
  a.style.display = 'none';
  a.href = filePath
  a.download = fileName;
  a.click();
  setTimeout(() => {
    document.body.removeChild(a);
  }, 300);
}

对象数组排序

allArticleArray.sort(function(a, b) {
  return b.time - a.time
})

js三种弹窗

浏览器自带对象

// 提示框
alert('提示内容')
// 确认框，返回布尔值
confirm('文字提示')
// 输入框（第二个参数可选）
var name = prompt('新的分类名称', oldName)

操作URL

// 发起GET请求
window.location.href = '/hello'
// 刷新本页（可以保存URL中的参数刷新）
window.location.reload()
// 返回上一页
window.history.back()
// 获取上一页URL（含有上一页面的参数）
document.referrer
// 更改URL不刷新
window.history.pushState({}, 0,  window.location.href + '?type=china');

解析地址栏参数

// 解析参数
function getQuery(url) {
  // result为存储参数键值的集合
  const result = {}
  if (url.indexOf('?') > -1) {
    // str为？之后的参数部分字符串
    const str = url.substr(url.indexOf('?') + 1)
    // arr每个元素都是完整的参数键值
    const arr = str.split('&')
    for (let i = 0; i < arr.length; i++) {
      // item的两个元素分别为参数名和参数值
      const item = arr[i].split('=')
      result[item[0]] = item[1]
    }
  }
  return result
}

// 获取地址栏完整路径
let urlFull = window.location.href

原生事件

document.querySelector('.btn').addEventListener('click', function() {
})

事件类型：

鼠标事件
- click：鼠标点击
- mouseEnter：鼠标经过
- mouseLeave：鼠标离开
焦点事件
- focus：获得焦点
- blur：失去焦点
键盘事件
- keyDown：键盘按下触发
- keyUp：键盘弹起触发
文本事件表单输入触发
- input：用户输入事件（获取输入数据：input.value）

获取所有子元素

document.querySelector('.editor').childNodes

Yaml插件

Js读取和加载Yaml文件

npm inastall yamljs

const yaml = require('yamljs')
let config = yaml.load('../config.yaml')
console.log(config);

第二种插件下载地址：https://www.bootcdn.cn/js-yaml/

let fs = require('fs')
let yaml = require('./lib/js-yaml.min')
// 加载配置文件
const config = yaml.load(fs.readFileSync('config.yml', 'utf8'));
console.log(config);

获取当前日期时间串

new Date().toISOString().slice(0, 10)

textarea回车跳到顶部修复

<textarea id="myTextarea" rows="10" cols="30"></textarea>
 
<script>
document.getElementById('myTextarea').addEventListener('keydown', function(event) {
    if (event.key === 'Enter') {
        // 阻止默认行为以避免换行
        event.preventDefault();
        // 在当前光标位置插入文本，例如换行符或者特定格式的文本
        const startPos = this.selectionStart; // 获取光标位置
        const endPos = this.selectionEnd; // 获取光标位置结束点（通常与开始点相同）
        this.value = this.value.substring(0, startPos) + '\n' + this.value.substring(endPos); // 插入换行符
        this.selectionStart = this.selectionEnd = startPos + 1; // 设置新的光标位置
    } else if (event.key === ' ') {
        // 处理空格键的逻辑，例如不进行任何操作或添加特定文本等
    }
});
</script>

复制到剪贴板

// 代码复制
function copyCodeBtn() {
  // 代码复制
  if (!store.editMode) {
    document.querySelectorAll('.aie-content pre').forEach((item) => {
      // 已经添加过按钮的跳过
      if (!item.querySelector('.copy-btn')) {
        item.innerHTML +=
          '<div contenteditable="false" class="copy-btn" onclick="copyCode(this)">复制</div>'
      }
    })
  }
}

window.copyCode = function copyCode(item) {
  // 获取要复制的代码文本
  let code = item.parentNode.querySelector('code').innerText
  // 尝试使用 Clipboard API
  if (navigator.clipboard && window.isSecureContext) {
    navigator.clipboard
      .writeText(code)
      .then(() => {
        item.innerText = '复制成功'
        setTimeout(() => {
          item.innerText = '复制'
        }, 2000)
      })
      .catch((err) => {
        console.error('复制失败，请手动复制:', err)
        fallbackCopyTextToClipboard(code, item)
      })
  } else {
    // 使用兼容性处理方法
    fallbackCopyTextToClipboard(code, item)
  }
}

// 兼容性处理函数
function fallbackCopyTextToClipboard(text, item) {
  let textArea = document.createElement('textarea')
  textArea.value = text
  // 隐藏textarea元素
  textArea.style.position = 'fixed'
  textArea.style.top = '0'
  textArea.style.left = '0'
  textArea.style.width = '2em'
  textArea.style.height = '2em'
  textArea.style.padding = '0'
  textArea.style.border = 'none'
  textArea.style.outline = 'none'
  textArea.style.boxShadow = 'none'
  textArea.style.background = 'transparent'
  document.body.appendChild(textArea)
  textArea.select()
  try {
    let successful = document.execCommand('copy')
    let msg = successful ? '成功' : '失败'
    item.innerText = `复制${msg}`
    setTimeout(() => {
      item.innerText = '复制'
    }, 2000)
  } catch (err) {
    console.error('Fallback: 复制失败，请手动复制:', err)
  }
  document.body.removeChild(textArea)
}

通用AJAX请求

方法：

/**
 * 简洁版通用 AJAX 请求方法（不兼容 IE5/6）
 * @param {string} method - 请求方式 ('GET' 或 'POST')
 * @param {string} url - 请求地址（GET请求请直接将参数拼在url里）
 * @param {object|null} data - 发送的数据（仅POST请求时传入对象，GET请求传null）
 * @param {function} successCallback - 请求成功的回调函数
 * @param {function} errorCallback - 请求失败的回调函数
 */
function sendRequest(method, url, data, successCallback, errorCallback) {
    const xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
                let result = xhr.responseText;
                try {
                    result = JSON.parse(xhr.responseText);
                } catch (e) {}
                successCallback(result);
            } else {
                errorCallback && errorCallback(xhr.status, xhr.statusText);
            }
        }
    };

    xhr.open(method.toUpperCase(), url, true);

    if (method.toUpperCase() === 'POST') {
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.send(JSON.stringify(data));
    } else {
        xhr.send();
    }
}

调用：

// GET
sendRequest('GET', 'https://example.com/api/getData?id=123&type=user', null, function(res) {
    console.log('GET请求成功：', res);
}, function(status, msg) {
    console.error('GET请求失败：', status, msg);
});

// POST
const postData = { username: 'admin', password: '123456' };
sendRequest('POST', 'https://example.com/api/login', postData, function(res) {
    console.log('POST请求成功：', res);
}, function(status, msg) {
    console.error('POST请求失败：', status, msg);
});

data-xx

HTML5 引入的自定义数据属性，它允许开发者在不影响页面显示效果的情况下，将额外的自定义数据或元数据直接存储在 HTML 元素内部，以便后续通过 JavaScript 或 CSS 进行访问和操作

<!-- 存储用户ID -->
<div id="user" data-id="12345" data-user-role="admin">用户信息</div>

<!-- 存储配置参数 -->
<button data-action="submit" data-page="3">提交</button>

如何通过 JavaScript 访问与修改

JavaScript 通过 DOM 元素的 dataset 属性来暴露这些自定义数据。注意：带有连字符的属性名会自动转换为驼峰命名法（camelCase）

const el = document.getElementById("user");

// 读取数据
console.log(el.dataset.id);       // 输出: "12345"
console.log(el.dataset.userRole); // 输出: "admin" (data-user-role 转换为 userRole)

// 修改/设置数据
el.dataset.id = "67890"; 

// 删除数据属性
delete el.dataset.userRole;

如何通过 CSS 进行样式控制

可以利用 CSS 的属性选择器，根据 data-id 的值来动态应用样式，而无需额外添加 class

button[data-action="submit"] {
    background-color: green;
    color: white;
}

鼠标事件

// 点击事件
docment.addEventListener('click', function() {

})
// 双击事件
docment.addEventListener('dblclick', function() {

})
// 按下事件
docment.addEventListener('mousedown', function() {

})
// 松开事件
docment.addEventListener('mouseup', function() {

})
// 移入事件
docment.addEventListener('mouseenter', function() {

})
// 移出事件
docment.addEventListener('mouseleave', function() {

})
// 移动事件
docment.addEventListener('mousemove', function() {

})