jquery标签选择器

jQuery 标签选择器

jQuery 标签选择器是最基础的选择器之一，用于通过 HTML 标签名称选取元素。语法简单直接，直接使用标签名称即可。

语法示例：

$("tagname")

实际使用案例：

$("div") // 选择所有<div>元素
$("p")   // 选择所有<p>元素
$("a")   // 选择所有<a>元素

结合其他选择器使用

标签选择器可以与其他选择器组合使用，实现更精确的选择。

组合类选择器：

$("p.intro") // 选择所有class="intro"的<p>元素

组合ID选择器：

$("div#header") // 选择id="header"的<div>元素

多层标签选择

可以通过空格分隔标签名称，实现层级选择。

选择子元素：

$("div p") // 选择所有<div>内的<p>元素

直接子元素选择：

$("div > p") // 选择<div>直接子元素的<p>

过滤选择

可以结合过滤方法对标签选择结果进一步筛选。

选择第一个元素：

$("p:first") // 选择第一个<p>元素

选择最后一个元素：

$("p:last") // 选择最后一个<p>元素

性能优化建议

虽然标签选择器简单易用，但在大型文档中可能影响性能。

缩小选择范围：

$("#container p") // 优于直接使用$("p")

缓存选择结果：

var $paragraphs = $("p");
$paragraphs.css("color", "red");

常见应用场景

修改所有同类标签样式：

$("a").css("color", "blue");

绑定事件处理器：

$("button").click(function(){
    alert("Button clicked");
});

获取特定标签内容：

var firstParagraphText = $("p:first").text();