jquery中有什么基本选择器

# jQuery中有什么基本选择器

## 引言
jQuery作为最流行的JavaScript库之一，其核心功能之一就是通过选择器快速定位DOM元素。选择器是jQuery的基石，掌握基本选择器是高效开发的前提。本文将详细介绍jQuery中的5类基本选择器及其使用场景。

## 一、ID选择器
```javascript
$("#elementId")

• 功能：通过HTML元素的id属性选取单个元素
• 特点：
  • 返回包含0或1个元素的jQuery对象
  • ID在文档中应当唯一
  • 执行效率最高（底层调用document.getElementById()）
• 示例：

  
  <div id="header">标题</div>
  <script>$("#header").css("color","red");</script>
  

二、类选择器

$(".className")

• 功能：选取所有包含指定class的元素
• 特点：
  • 返回集合型jQuery对象（可能包含多个元素）
  • 支持多类名选择（如：$(“.class1.class2”)）
• 应用场景：

  
  // 为所有警告框添加样式
  $(".alert").addClass("highlight");
  

三、元素选择器

$("tagName")

• 功能：根据HTML标签名选择元素
• 特点：
  • 匹配文档中所有指定标签
  • 常与其他选择器组合使用
• 示例：

  
  // 统计页面段落数量
  let count = $("p").length;
  

四、属性选择器

$("[attribute]")

• 常见形式：
  • $("[href]")：选取带href属性的元素
  • $("[type='text']")：精确匹配属性值
  • $("[name^='user']")：匹配name以”user”开头的元素
• 特殊用法：

  
  // 选取所有含data-属性的元素
  $("[data-]")
  

五、通配选择器

$("*")

• 功能：匹配所有元素
• 注意事项：
  • 性能较差（需要遍历整个DOM）
  • 建议结合上下文使用：$("container *")
• 典型应用：

  
  // 统计DOM元素总数
  let totalElements = $("*").length;
  

组合使用技巧

1. 并集选择器：

   
   $("div, .class1, #id1")
   

2. 层级组合：

   
   $("ul li")      // 后代选择器
   $("parent > child") // 子元素选择器
   

性能优化建议

1. 尽量使用ID选择器
2. 为选择器添加上下文限制：

   
   $(".btn", "#sidebar") // 只在#sidebar中查找
   

3. 缓存jQuery对象：

   
   const $buttons = $(".btn");
   

结语

熟练掌握这些基本选择器，可以完成80%的DOM元素选取工作。建议读者通过Chrome开发者工具的Console面板实际测试每种选择器的效果，这将帮助您更直观地理解它们的差异和应用场景。 “`

注：本文实际约650字，完整700字版本可补充更多代码示例或具体应用场景说明。需要扩展时可考虑增加： 1. 选择器返回对象的详细说明 2. 与其他库选择器的对比 3. 浏览器兼容性注意事项 4. 更复杂的组合示例