关于原生JS选择元素

关于原生JS选择元素

this.domArray = [];
this.addDom();  
addDom(){
    const menuNum = $(".menu-item>a").length;
    for(let i = 0; i < menuNum; i++) {
      this.domArray.push($(".menu-item>a").eq(i));
    }
  }

jQuery 语法

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

基础语法是：$(selector).action()

• 美元符号定义 jQuery
• 选择符（selector）“查询”和“查找” HTML 元素
• jQuery 的 action() 执行对元素的操作

eq()方法

在 JavaScript 中，$是类似于 jQuery 的库函数，那么.eq()方法主要用于从一个匹配的元素集合中选取特定索引位置的元素。

假设我们有一个匹配的元素集合$('selector')，那么使用.eq(index)的方式来选取特定位置的元素，其中index是要选取的元素在集合中的索引位置，索引从 0 开始。

// 假设有以下 HTML 结构
// <ul>
//   <li>Item 1</li>
//   <li>Item 2</li>
//   <li>Item 3</li>
// </ul>

const secondListItem = $('li').eq(1);
// 这里选取了第二个 <li> 元素（索引为 1），此时 secondListItem 就代表了 <li>Item 2</li> 这个元素。

jquery选择器

使用 $("menu-item>a") 这个选择器可以非常准确地定位到具有 “menu-item” 类的元素下的直接子元素<a>标签。

通过这个选择器选中的元素集合，可以方便地应用各种 jQuery 方法。例如，可以使用.css()方法来修改链接的样式，让菜单在视觉上更加突出或与页面整体风格相匹配。

$("menu-item>a").css("color", "blue");

还可以使用.click()方法为链接添加点击事件处理程序，实现交互功能。

$("menu-item>a").click(function() {
    // 处理点击事件的代码
});