JS中获取选择器的方式：
vscode 默认浏览器：Live Server › Settings
重点
querySelector 通过 CSS 选择器提供了一种简洁、灵活的方式操作 DOM，是替代传统 getElementById、getElementsByClassName 的现代方法。结合 querySelectorAll 可以覆盖绝大多数 DOM 查询需求。
querySelectorAll
作用
返回文档中所有匹配指定 CSS 选择器的元素集合（静态的 NodeList）。
语法
const elements = document.querySelectorAll(selector);
特点
-
支持所有 CSS 选择器语法（包括复杂选择器）。
-
返回的是静态的
NodeList（不会随 DOM 变化自动更新）。 -
需要遍历操作元素（例如
forEach）。 -
示例
// 获取所有类名为 item 的元素 const items = document.querySelectorAll('.item'); // 获取所有 input 类型为 checkbox 的元素 const checkboxes = document.querySelectorAll('input[type="checkbox"]'); // 遍历操作 items.forEach(item => {item.style.backgroundColor = 'yellow'; });
getElementById
作用
通过 ID 获取单个元素（ID 在文档中唯一）。
语法
const element = document.getElementById(id);
特点
-
直接通过 ID 查找，性能最优。
-
返回单个元素（不存在返回
null）。 -
不支持组合选择器，仅接受纯 ID 字符串。
示例
// 获取 ID 为 header 的元素
const header = document.getElementById('header');
// 修改内容
header.textContent = 'New Header';
3. getElementsByClassName
作用
通过 类名 获取元素的动态集合（HTMLCollection）。
语法
const elements = document.getElementsByClassName(className);
特点
-
返回的是动态的
HTMLCollection（DOM 变化时会自动更新）。 -
可同时传入多个类名（空格分隔）。
-
需要转换为数组才能使用
forEach等方法。
示例
// 获取所有包含 active 类的元素
const activeItems = document.getElementsByClassName('active');
// 获取同时包含 btn 和 primary 类的元素
const buttons = document.getElementsByClassName('btn primary');
// 转换为数组操作
Array.from(buttons).forEach(btn => {btn.disabled = true;
});onlick与click的用法
1. onclick 属性
定义
-
HTML 内联事件：
onclick是 HTML 元素的属性，用于直接绑定点击事件的 JavaScript 代码。 -
直接执行代码或调用函数：可以内联编写 JavaScript 逻辑，或调用已定义的函数。
用法示例
<!-- 内联直接编写逻辑 -->
<button onclick="alert('按钮被点击了！')">点击我</button>
<!-- 调用外部函数 -->
<button onclick="handleClick()">点击我</button>
<script>
function handleClick() {console.log("按钮被点击");
}
</script>特点
-
简单直接：适合快速实现简单逻辑。
-
局限性：
-
只能绑定一个事件处理函数（重复赋值会覆盖）。
-
HTML 和 JavaScript 代码耦合，不利于维护。
-
无法控制事件传播（冒泡或捕获阶段）。
-
2. click 事件（JavaScript 的 addEventListener）
定义
-
通过 JavaScript 绑定事件：使用
addEventListener('click', callback)动态绑定点击事件。 -
灵活且符合标准：是推荐的事件绑定方式，支持更复杂的场景。
用法示例
<button id="myButton">点击我</button>
<script>
const button = document.getElementById("myButton");
// 绑定事件
button.addEventListener("click", function() {console.log("按钮被点击（方式1）");
});
// 绑定多个事件（不会覆盖）
button.addEventListener("click", function() {console.log("按钮被点击（方式2）");
});
// 使用箭头函数
button.addEventListener("click", () => {console.log("箭头函数处理点击");
});
</script>特点
-
支持多个事件监听器：可绑定多个函数，按顺序执行。
-
控制事件传播：通过第三个参数
useCapture指定事件在捕获阶段（true）或冒泡阶段（false，默认）触发。 -
解绑事件灵活：通过
removeEventListener移除特定事件。
3. jQuery 的 .click() 方法
定义
-
jQuery 的简化语法：
.click()是 jQuery 提供的快捷方法，底层基于addEventListener。 -
兼容性和简化代码：主要用于旧项目或简化事件绑定。
用法示例
<button id="jqButton">点击我</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$("#jqButton").click(function() {console.log("jQuery 方式点击");
});
// 等效于 addEventListener
$("#jqButton").on("click", function() {console.log("另一种 jQuery 绑定方式");
});
</script>特点
-
链式调用：支持 jQuery 的链式语法（如
.click().css()）。 -
隐式遍历：自动为匹配的所有元素绑定事件（如多个同类元素）。
-
兼容性：处理了浏览器兼容性问题（如 IE 旧版本）。
（1）button 变量未定义
-
代码中直接使用了
button.style.color = 'red'，但button变量未被定义。 -
如果
button是全局变量（如通过const button = document.querySelector('button')定义），则可能仅对第一个按钮生效，且不符合 jQuery 操作逻辑。 -
如果
button未定义，代码会直接报错ReferenceError: button is not defined。
（2）this 指向错误
-
使用箭头函数
() => { ... }时，this不会指向触发事件的 DOM 元素，而是继承外层作用域的this（通常是window或undefined）。 -
在 jQuery 事件处理函数中，必须通过 this 或 event.target 获取当前元素，但箭头函数破坏了这一机制。
（3）混合原生 DOM 和 jQuery 操作
-
button.style.color是原生 DOM 操作，而$('button').on(...)是 jQuery 方法，混用会导致代码风格不一致且易出错。 -
推荐统一使用 jQuery 方法（如
.css()）操作元素。
（4）事件绑定对象语法问题
-
$('button').on({ "click": handler })语法虽然合法，但通常用于绑定多个事件（如同时绑定click和mouseover）。对于单一事件，更推荐直接使用.on('click', handler)。 -
（1）避免混合操作
-
统一使用 jQuery：
$(this).css('color', 'red'); // 推荐 -
统一使用原生 DOM：
const button = document.querySelector('button'); button.addEventListener('click', function() {this.style.color = 'red'; });
（2）处理多个按钮
-
如果页面上有多个
<button>元素，$('button').on(...)会为所有按钮绑定事件。 -
通过
$(this)或event.target可确保仅修改当前点击的按钮样式。
5. 最终建议
-
优先使用方案 1（普通函数 +
this），保持 jQuery 的简洁性和一致性。 -
如果必须用箭头函数，选择方案 2 并显式使用
event.target。
修正后的代码示例：
-
// 最佳实践：普通函数 + jQuery 方法
$('button').on('click', function() {$(this).css('color', 'red');
});