jquery元素选择器
jQuery元素选择器基础
jQuery元素选择器通过CSS选择器语法定位DOM元素，返回一个包含匹配元素的jQuery对象。基本语法为$("selector")，其中selector可以是标签名、类名、ID或组合表达式。
示例代码：
// 选择所有<p>元素
$("p").css("color", "red");
// 选择class为highlight的元素
$(".highlight").hide();
// 选择ID为header的元素
$("#header").addClass("active");常用选择器类型
标签选择器
通过HTML标签名选择元素，例如$("div")选择所有<div>元素。
类选择器
通过class属性选择元素，语法为$(".className")。支持多类选择，如$(".class1.class2")选择同时具有两个类的元素。
ID选择器
通过id属性选择唯一元素，语法为$("#idName")。注意ID在文档中应唯一。
属性选择器
通过属性条件选择元素：
$("[name='email']") // 属性等于
$("[name^='em']") // 属性开头为
$("[name$='ail']") // 属性结尾为
$("[name*='ma']") // 属性包含组合与层级选择器
并集选择器
用逗号分隔多个选择器，如$("div, p, .class")选择所有匹配任意条件的元素。
后代选择器
用空格表示层级关系，如$("ul li")选择<ul>内所有<li>（包括嵌套）。
子元素选择器
用>选择直接子元素，如$("ul > li")仅选择第一层<li>。
相邻兄弟选择器
用+选择紧接的同级元素，如$("h2 + p")选择紧挨<h2>的<p>。
通用兄弟选择器
用~选择后续所有同级元素，如$("h2 ~ p")选择<h2>之后的所有<p>。
过滤选择器
基础过滤:first、:last、:even、:odd等按位置过滤：
$("tr:even") // 偶数行
$("li:gt(2)") // 索引大于2的元素内容过滤:contains(text)、:empty、:has(selector)根据内容过滤：
$("p:contains('Hello')") // 包含文本的段落
$("div:has(img)") // 包含图片的div可见性过滤:visible和:hidden选择显示或隐藏的元素。
表单相关选择器
:input
选择所有表单元素（input、select、textarea等）。
:text/:password
选择特定类型的输入框。
:checked
选择被选中的复选框或单选按钮。
:selected
选择被选中的<option>元素。
示例代码：
$(":text").val(""); // 清空所有文本框
$(":checkbox:checked").each(function() {
console.log($(this).val()); // 输出选中复选框的值
});性能优化建议
避免过度使用通用选择器如$("*")，优先使用ID或具体类名缩小范围。缓存重复使用的选择器结果：
const $elements = $(".items"); // 缓存结果
$elements.hide();
$elements.addClass("processed");对于复杂选择器，考虑使用find()方法替代：
$("#container").find("li.active"); // 优于$("#container li.active")
