jquery标签选择器
jQuery 标签选择器基础
jQuery 标签选择器通过 HTML 标签名称直接选取元素,语法为 $("tagname")。例如 $("div") 会选取文档中所有 <div> 元素。
// 选中所有段落标签并修改样式
$("p").css("color", "blue");
结合类或 ID 选择器
标签选择器可与类(.)或 ID(#)选择器组合使用,实现更精确的定位。
// 选中 class="highlight" 的所有 <span> 标签
$("span.highlight").addClass("active");
// 选中 id="header" 的 <h1> 标签
$("h1#header").text("New Title");
多标签选择
通过逗号分隔多个标签名称,可同时选中多种类型的元素。
// 同时选中 <h1>, <h2>, <h3> 标签
$("h1, h2, h3").css("font-weight", "bold");
层级嵌套选择
结合空格或 > 符号,可以基于层级关系选择标签。
// 选中 <ul> 内嵌套的所有 <li> 标签
$("ul li").hide();
// 仅选中直接子级 <li> 标签
$("ul > li").css("list-style", "none");
属性筛选
通过 [attribute] 语法可筛选带特定属性的标签。
// 选中所有带 title 属性的 <a> 标签
$("a[title]").tooltip();
// 选中 type="checkbox" 的 <input> 标签
$("input[type='checkbox']").prop("checked", true);
伪类选择器
支持 CSS 伪类如 :first, :last, :even 等动态筛选标签。
// 选中表格中偶数行 <tr> 标签
$("tr:even").addClass("striped");
// 选中第一个 <p> 标签
$("p:first").prepend("★ ");
性能优化建议
避免过度使用通用标签选择器。优先通过 ID 或类缩小范围,减少 DOM 遍历开销。

// 不推荐:全局遍历所有 <div>
$("div").hide();
// 推荐:限定父容器
$("#container div").hide();






