jquery 选择器
jQuery 选择器基础
jQuery 选择器基于 CSS 选择器语法，用于快速定位和操作 DOM 元素。核心语法是 $() 或 jQuery()，参数为选择器字符串。
常见选择器类型：
- 元素选择器：
$("p")选择所有<p>元素。 - ID 选择器：
$("#myId")选择 ID 为myId的元素。 - 类选择器：
$(".myClass")选择所有类名为myClass的元素。 - 属性选择器：
$("[href]")选择所有带href属性的元素。
组合与层级选择器
- 多条件选择：
$("div, p")选择所有<div>和<p>元素。 - 后代选择器：
$("ul li")选择<ul>内所有<li>后代。 - 子元素选择器：
$("ul > li")仅选择<ul>的直接子元素<li>。
过滤选择器
- 首尾元素：
$("li:first")和$("li:last")分别选择第一个和最后一个<li>。 - 偶数/奇数行：
$("tr:even")和$("tr:odd")选择表格偶数或奇数行。 - 内容过滤：
$("p:contains('text')")选择内容包含text的<p>元素。
表单相关选择器
- 输入类型：
$(":text")选择所有文本输入框，$(":checkbox")选择复选框。 - 选中状态：
$(":checked")获取所有被选中的复选框或单选按钮。 - 表单元素：
$(":input")选择所有<input>、<textarea>、<select>元素。
动态选择器方法
- find()：
$("#container").find("p")在#container内查找<p>元素。 - filter()：
$("div").filter(".highlight")筛选出带highlight类的<div>。 - not()：
$("p").not(".exclude")排除类名为exclude的<p>元素。
示例代码
// 修改所有段落文本
$("p").text("Hello jQuery!");
// 隐藏所有类名为 'temp' 的元素
$(".temp").hide();
// 为表格奇数行添加背景色
$("tr:odd").css("background-color", "#f2f2f2");
// 提交表单时验证必填字段
$("form").submit(function() {
if ($(":text").val() === "") {
alert("请输入内容");
return false;
}
});性能优化建议
- 优先使用 ID 选择器，效率最高。
- 避免过度嵌套，如
$("body div#main ul li a")可简化为$("#main a")。 - 缓存重复使用的选择器：
var $links = $("a");。
