当前位置：首页 > news >正文

Javascript忘记了，好像又想起来了一点？

news 2025/9/13 5:47:59

一、你可能“手打过”的代码：

// 公式应用1：点击按钮显示隐藏菜单
document.querySelector('.menu-btn').addEventListener('click', function() {document.querySelector('.nav-menu').classList.toggle('show');
});// 公式应用2：鼠标悬停显示提示
document.querySelector('.tooltip').addEventListener('mouseover', function() {this.nextElementSibling.style.visibility = 'visible';
});// 公式应用3：输入时实时验证
document.querySelector('#email').addEventListener('input', function() {if(this.value.includes('@')) {this.style.borderColor = 'green';} else {this.style.borderColor = 'red';}
});

二、这些看起来是官方命名的可以直接使用的事件？我哪知道有哪些？

积木1：获取元素的多种方式

// 这些都是“选择元素”的方法
const byId = document.getElementById('header');      // 通过ID
const byClass = document.getElementsByClassName('item'); // 通过类名(集合)
const byTag = document.getElementsByTagName('div');  // 通过标签名(集合)
const bySelector = document.querySelector('.main');  // 通过CSS选择器(第一个)
const bySelectorAll = document.querySelectorAll('.btn'); // 通过CSS选择器(所有)

积木2：常用的事件类型

element.addEventListener('click', function() {});      // 点击
element.addEventListener('mouseenter', function() {}); // 鼠标移入
element.addEventListener('mouseleave', function() {}); // 鼠标移出
element.addEventListener('input', function() {});      // 输入框输入时
element.addEventListener('submit', function() {});     // 表单提交时
element.addEventListener('scroll', function() {});     // 滚动时

积木3：常用的操作

// 内容操作
element.innerHTML = '<strong>新内容</strong>'; // 可以包含HTML
element.textContent = '纯文本内容';           // 只是纯文本// 样式操作
element.style.color = 'red';                // 直接修改样式
element.classList.add('active');            // 添加类
element.classList.remove('active');         // 移除类
element.classList.toggle('active');         // 切换类（有就删，没有就加）// 显示/隐藏
element.style.display = 'block';    // 显示
element.style.display = 'none';     // 隐藏// 属性操作
element.setAttribute('data-value', '123');  // 设置属性
element.getAttribute('data-value');         // 获取属性

三、运行这个实例看看？

<!-- HTML 部分 -->
<img src="small.jpg" class="gallery-img" data-fullsize="large.jpg">
<div class="lightbox" style="display:none;"><span class="close">&times;</span><img class="lightbox-img">
</div><script>
// JavaScript 部分
// 点击小图显示大图
document.querySelector('.gallery-img').addEventListener('click', function() {const largeUrl = this.getAttribute('data-fullsize');document.querySelector('.lightbox').style.display = 'block';document.querySelector('.lightbox-img').setAttribute('src', largeUrl);
});// 点击关闭按钮隐藏灯箱
document.querySelector('.close').addEventListener('click', function() {document.querySelector('.lightbox').style.display = 'none';
});
</script>

是不是很熟悉？
我去！？这不就是点击商品图小图查看大图，然后可以叉掉吗？自己试着优化吧？

四、其他问题

1、data-fullsize的fullsize是啥意思？除了fullsize还有什么？

data-fullsize 这个名字不是 JavaScript 的关键字，而是开发者自己取的名字。
命名规则：data- + 你自己取的名字（例如：data-size, data-user-id, data-price）

2、`×`又是啥，好像是一个叉号，还有别的么？和`&nbsp；`是同种东西吗？

它们都是 HTML 实体，用于安全地显示特殊字符。
×：是一个可见的符号 (×)，常用作关闭图标。
 ：是一个不可见的空格，用于防止换行和强制显示空格。

其他常用的 HTML 实体：

HTML 实体	显示结果	描述	常用场景
`<`	`<`	小于号 (Less Than)	在网页中显示 HTML 代码示例，避免被浏览器解析
`>`	`>`	大于号 (Greater Than)	同上
`&`	`&`	与符号 (Ampersand)	在代码或URL中显示“&”字符本身
`"`	`"`	引号 (Quotation Mark)	在属性值里嵌套引号时使用
`©`	©	版权符号 (Copyright)	显示版权信息
`…`	…	省略号 (Horizontal Ellipsis)	表示“更多”或文本未完全显示
`→` 或 `&rightarrow;`	→	右箭头	表示方向、导航