javascript使用以下知识点进行网页设计和js特效并写出代码1、 常用鼠标与键盘事件 2、 事件对象的绑定与使用 3、 排他操作 4、 Bom获取窗体属性 5、 Bom相关属性的使用 6、 Bom相关方法的使用 7、 Offset的使用 8、

DOM节点的操作和属性

1. 常用鼠标与键盘事件：

// 鼠标事件
element.addEventListener('click', function(event) {
  // 点击事件
});

element.addEventListener('mousedown', function(event) {
  // 按下鼠标键事件
});

element.addEventListener('mouseup', function(event) {
  //开鼠标键事件
});

element.addEventListener('mousemove', function(event) {
  // 鼠标移动事件
});

element.addEventListener('mouseover', function(event) {
  // 鼠标移入事件
});

element.addEventListener('mouseout', function(event) {
  // 鼠标移出事件
});

// 键盘事件
element.addEventListener('keydown', function(event) {
  // 按下键盘事件
});

element.addEventListener('keyup', function(event) {
  // 松开键盘事件
});

element.addEventListener('keypress', function(event) {
  // 按键事件
});

2. 事件对象的绑定与使用：

element.addEventListener('click', function(event) {
  // 阻止默认行为
  event.preventDefault();

  // 阻止事件冒泡
  event.stopPropagation();

  // 获取事件目标
  event.target;

  // 获取事件类型
  event.type;

  // 获取触发事件的元素
  event.currentTarget;
});

3. 排他操作：

const elements = document.querySelectorAll('.item');

elements.forEach(function(element) {
  element.addEventListener('click', function(event) {
    // 移除所有元素的 active 类
    elements.forEach(function(item) {
      item.classList.remove('active');
    });

    // 添加当前元素的 active 类
    element.classList.add('active');
  });
});

4. Bom获取窗体属性：

// 获取窗口宽度
window.innerWidth;

// 获取窗口高度
window.innerHeight;

// 获取文档宽度
document.documentElement.clientWidth;

// 获取文档高度
document.documentElement.clientHeight;

5. Bom相关属性的使用：

// 获取当前页面的url
window.location.href;

// 获取当前页面的域名
window.location.hostname;

// 获取当前页面的路径
window.location.pathname;

// 获取当前页面的协议
window.location.protocol;

6. Bom相关方法的使用：

// 跳转到指定url
window.location.href = 'https://www.example.com';

// 刷新页面
window.location.reload();

// 后退一页
window.history.back();

// 前进一页
window.history.forward();

7. Offset的使用：

// 获取元素距离文档顶部的距离
element.offsetTop;

// 获取元素距离文档左侧的距离
element.offsetLeft;

// 获取元素的宽度
element.offsetWidth;

// 获取元素的高度
element.offsetHeight;

8. DOM节点的操作和属性：

// 创建元素节点
const element = document.createElement('div');

// 设置元素属性
element.setAttribute('id', 'my-div');
element.setAttribute('class', 'my-class');

// 获取元素属性
element.getAttribute('id');
element.getAttribute('class');

// 添加元素到文档中
document.body.appendChild(element);

// 删除元素
document.body.removeChild(element);

// 获取元素的子元素
element.children;

// 获取元素的父元素
element.parentNode;