jquery标签选择器

jQuery 标签选择器

jQuery 标签选择器用于直接选取 HTML 元素，通过标签名（如 div、p、a 等）匹配 DOM 元素。语法简单高效，适合快速操作特定类型的元素。

语法格式

$("标签名")

示例

<p>段落1</p>
<p>段落2</p>
<div>非段落内容</div>

// 选中所有 <p> 标签并修改文字颜色
$("p").css("color", "red");

组合使用类或 ID

标签选择器可与其他选择器（如类、ID）组合，实现更精确的定位。

示例

<p class="highlight">高亮段落</p>
<p>普通段落</p>

// 选中 class 为 "highlight" 的 <p> 标签
$("p.highlight").css("font-weight", "bold");

多标签选择

通过逗号分隔可同时选择多种标签。

示例

<h2>标题</h2>
<p>段落</p>

// 同时选中 <h2> 和 <p> 标签
$("h2, p").addClass("text-blue");

层级嵌套选择

结合层级关系（空格、> 等）可定位嵌套结构中的标签。

示例

<div class="container">
  <p>内部段落</p>
</div>
<p>外部段落</p>

// 仅选中 .container 内的 <p> 标签
$(".container p").css("border", "1px solid #ccc");

性能优化建议

• 避免过度使用：直接标签选择器（如 $("div")）可能遍历整个 DOM，影响性能。推荐结合更具体的选择器缩小范围。
• 缓存结果：重复操作同一组元素时，建议将选择结果存入变量。

  const $paragraphs = $("p");
  $paragraphs.css("color", "blue");

与其他选择器对比

选择器类型	示例	作用
标签选择器	$("div")	选中所有 <div> 元素
ID 选择器	$("#header")	选中 id="header" 的元素
类选择器	$(".item")	选中 class="item" 的所有元素