jquery选择

jQuery选择器基础

jQuery选择器基于CSS选择器语法，用于快速定位和操作DOM元素。通过$()或jQuery()函数传入选择器字符串实现。

常见选择器类型：

• 元素选择器：$("p") 选择所有<p>元素
• ID选择器：$("#header") 选择ID为header的元素
• 类选择器：$(".active") 选择所有包含active类的元素
• 属性选择器：$("[type='text']") 选择type属性为text的元素

组合与层级选择器

多条件组合
$("div.active") 选择同时是<div>且含active类的元素
$("input, select") 选择所有<input>和<select>元素

层级关系
$("ul li") 选择<ul>内所有嵌套的<li>（后代选择器）
$("parent > child") 仅选择直接子元素

过滤选择器

位置过滤
$("li:first") 选择第一个<li>
$("tr:odd") 选择奇数行表格行

内容过滤
$("div:contains('text')") 选择内容包含text的<div>
$("input:checked") 选择所有被勾选的复选框

表单相关选择器

$(":input") 选择所有表单元素（包括<input>、<select>等）
$(":text") 选择类型为text的输入框
$(":selected") 选择下拉列表中选中的选项

动态元素处理

使用.on()方法确保动态添加的元素也能绑定事件：

$(document).on("click", ".dynamic-element", function() {
  // 处理逻辑
});

性能优化建议

• 优先使用ID选择器（速度最快）
• 避免过度嵌套（如$("body div#content ul li a")）
• 缓存选择结果：var $elements = $(".items");

示例代码

// 修改所有段落文本
$("p").text("新内容");

// 隐藏所有类名为temp的元素
$(".temp").hide();

// 为按钮添加点击事件
$("#submit-btn").click(function() {
  alert("提交成功");
});

选择器是jQuery的核心功能，熟练掌握能显著提升开发效率。建议结合官方文档和实际场景练习使用。