在现代网页开发中，jQuery 是一种非常流行的 JavaScript 库，它极大地简化了 DOM 操作。了解 jQuery 的选择器不仅能提高开发效率，还能帮助开发者灵活地对网页元素进行操作。本文将通过丰富的示例介绍 jQuery 的基本选择器、层次选择器、过滤选择器等，旨在为开发者提供实用的参考和灵感。
1. jQuery 基本选择器用法示例
基本选择器用于选择页面中的元素，以下是一些常见的示例：
// 选择 id 为 "one" 的元素
$("#btn1").click(function () {
$("#one").css("background", "#bfa");
});
// 选择 class 为 "mini" 的所有元素
$("#btn2").click(function () {
$(".mini").css("background", "#bfa");
});
// 选择所有 div 元素
$("#btn3").click(function () {
$("div").css("background", "#bfa");
});
// 选择所有元素
$("#btn4").click(function () {
$("*").css("background", "#bfa");
});
// 选择所有 span 元素和 id 为 "two" 的 div 元素
$("#btn5").click(function () {
$("span,#two").css("background", "#bfa");
});
2. jQuery 层次选择器用法示例
层次选择器帮助开发者更精确地选择 DOM 元素，常用示例如下：
// 选择 body 内的所有 div 元素
$("#btn1").click(function () {
$("body div").css("background", "#bbffaa");
});
// 选择 body 内的子元素 div
$("#btn2").click(function () {
$("body > div").css("background", "#bbffaa");
});
// 选择 class 为 "one" 的下一个 div 元素
$("#btn3").click(function () {
$(".one + div").css("background", "#bbffaa");
});
// 选择 id 为 "two" 的元素后面的所有 div 兄弟元素
$("#btn4").click(function () {
$("#two ~ div").css("background", "#bbffaa");
});
3. jQuery 过滤选择器用法示例
过滤选择器允许开发者更细致地选择元素，以下是一些实用示例：
// 选择第一个 div 元素.
$("#btn1").click(function () {
$("div:first").css("background", "#bfa");
});
// 选择最后一个 div 元素.
$("#btn2").click(function () {
$("div:last").css("background", "#bfa");
});
// 选择 class 不为 one 的所有 div 元素.
$("#btn3").click(function () {
$("div:not(.one)").css("background", "#bfa");
});
// 选择索引值为偶数的 div 元素。
$("#btn4").click(function () {
$("div:even").css("background", "#bfa");
});
// 选择索引值为奇数的 div 元素。
$("#btn5").click(function () {
$("div:odd").css("background", "#bfa");
});
// 选择索引等于 3 的元素
$("#btn6").click(function () {
$("div:eq(3)").css("background", "#bfa");
});
// 选择索引大于 3 的元素
$("#btn7").click(function () {
$("div:gt(3)").css("background", "#bfa");
});
// 选择索引小于 3 的元素
$("#btn8").click(function () {
$("div:lt(3)").css("background", "#bfa");
});
// 选择所有的标题元素.比如 h1, h2, h3 等等...
$("#btn9").click(function () {
$(":header").css("background", "#bfa");
});
// 选择当前正在执行动画的所有元素.
$("#btn10").click(function () {
$(":animated").css("background", "#bfa");
});
4. jQuery 内容过滤选择器用法示例
通过内容过滤选择器，可以根据元素的文本或子元素进行选择，示例如下：
// 选取含有文本 "di" 的 div 元素.
$("#btn1").click(function () {
$("div:contains(di)").css("background", "#bbffaa");
});
// 选取不包含子元素(或者文本元素)的 div 空元素.
$("#btn2").click(function () {
$("div:empty").css("background", "#bbffaa");
});
// 选取含有 class 为 mini 元素的 div 元素.
$("#btn3").click(function () {
$("div:has(.mini)").css("background", "#bbffaa");
});
// 选取含有子元素(或者文本元素)的 div 元素.
$("#btn4").click(function () {
$("div:parent").css("background", "#bbffaa");
});
5. jQuery 可见性过滤选择器用法示例
可见性过滤选择器用于选择可见或不可见的元素，以下是相关示例：
// 选取所有不可见的元素
$("#btn_hidden").click(function () {
alert(
"不可见的元素有：" +
$("body :hidden").length +
"个!\n" +
"其中不可见的div元素有:" +
$("div:hidden").length +
"个!"
);
});
// 选取所有可见的元素
$("#btn_visible").click(function () {
$("div:visible").css("background", "#FF6500");
});
6. jQuery 属性选择器用法示例
属性选择器用于选择根据属性的值进行筛选的元素，示例如下：
// 选取含有属性 title 的 div 元素.
$("#btn1").click(function () {
$("div[title]").css("background", "#bbffaa");
});
// 选取属性 title 值等于 test 的 div 元素.
$("#btn2").click(function () {
$("div[title=test]").css("background", "#bbffaa");
});
// 选取属性 title 值不等于 test 的 div 元素.
$("#btn3").click(function () {
$("div[title!=test]").css("background", "#bbffaa");
});
// 选取属性 title 值以 te 开始的 div 元素.
$("#btn4").click(function () {
$("div[title^=te]").css("background", "#bbffaa");
});
// 选取属性 title 值以 est 结束的 div 元素.
$("#btn5").click(function () {
$("div[title$=est]").css("background", "#bbffaa");
});
// 选取属性 title 值含有 es 的 div 元素.
$("#btn6").click(function () {
$("div[title*=es]").css("background", "#bbffaa");
});
// 组合属性选择器,首先选取有属性 id 的 div 元素，然后在结果中选取属性title值含有 es 的元素.
$("#btn7").click(function () {
$("div[id][title*=es]").css("background", "#bbffaa");
});
7. jQuery 子元素过滤选择器用法示例
// 选取每个父元素下的第二个子元素
$("#btn1").click(function () {
$("div.one :nth-child(2)").css("background", "#bbffaa");
});
// 选取每个父元素下的第一个子元素
$("#btn2").click(function () {
$("div.one :first-child").css("background", "#bbffaa");
});
// 选取每个父元素下的最后一个子元素
$("#btn3").click(function () {
$("div.one :last-child").css("background", "#bbffaa");
});
// 如果父元素下的仅仅只有一个子元素，那么选中这个子元素
$("#btn4").click(function () {
$("div.one :only-child").css("background", "#bbffaa");
});
8. jQuery 表单对象属性过滤选择器用法示例
// 重置表单元素
$(":reset").click(function () {
setTimeout(function () {
countChecked();
$("select").change();
}, 0);
});
// 对表单内可用 input 赋值操作.
$("#btn1").click(function () {
$("#form1 input:enabled").val("这里变化了！");
return false;
});
// 对表单内不可用 input 赋值操作.
$("#btn2").click(function () {
$("#form1 input:disabled").val("这里变化了！");
return false;
});
// 使用 :checked 选择器，来操作多选框.
$(":checkbox").click(countChecked);
function countChecked() {
var n = $("input:checked").length;
$("div")
.eq(0)
.html("<strong>有" + n + " 个被选中!</strong>");
}
countChecked(); // 进入页面就调用.
// 使用 :selected 选择器，来操作下拉列表.
$("select")
.change(function () {
var str = "";
$("select :selected").each(function () {
str += $(this).text() + ",";
});
$("div")
.eq(1)
.html("<strong>你选中的是：" + str + "</strong>");
})
.trigger("change");
// trigger('change') 在这里的意思是：
// select 加载后，马上执行 onchange.
// 也可以用 .change() 代替.
9. jQuery 表单选择器用法示例
表单选择器专门用于操作表单元素，以下是一些有用的示例：
var $alltext = $("#form1 :text");
var $allpassword = $("#form1 :password");
var $allradio = $("#form1 :radio");
var $allcheckbox = $("#form1 :checkbox");
var $allsubmit = $("#form1 :submit");
var $allimage = $("#form1 :image");
var $allreset = $("#form1 :reset");
var $allbutton = $("#form1 :button"); // <input type=button /> 和 <button ></button> 都可以匹配
var $allfile = $("#form1 :file");
var $allhidden = $("#form1 :hidden"); // <input type="hidden" /> 和 <div style="display:none">test</div> 都可以匹配.
var $allselect = $("#form1 select");
var $alltextarea = $("#form1 textarea");
var $AllInputs = $("#form1 :input");
var $inputs = $("#form1 input");
$("div")
.append(" 有" + $alltext.length + " 个（ :text 元素）<br/>")
.append(" 有" + $allpassword.length + " 个（ :password 元素）<br/>")
.append(" 有" + $allradio.length + " 个（ :radio 元素）<br/>")
.append(" 有" + $allcheckbox.length + " 个（ :checkbox 元素）<br/>")
.append(" 有" + $allsubmit.length + " 个（ :submit 元素）<br/>")
.append(" 有" + $allimage.length + " 个（ :image 元素）<br/>")
.append(" 有" + $allreset.length + " 个（ :reset 元素）<br/>")
.append(" 有" + $allbutton.length + " 个（ :button 元素）<br/>")
.append(" 有" + $allfile.length + " 个（ :file 元素）<br/>")
.append(" 有" + $allhidden.length + " 个（ :hidden 元素）<br/>")
.append(" 有" + $allselect.length + " 个（ select 元素）<br/>")
.append(" 有" + $alltextarea.length + " 个（ textarea 元素）<br/>")
.append(" 表单有 " + $inputs.length + " 个（input）元素。<br/>")
.append(" 总共有 " + $AllInputs.length + " 个(:input)元素。<br/>")
.css("color", "red");
$("form").submit(function () {
return false;
}); // return false; 不能提交.
常见问题解答 (FAQ)
1. jQuery 的选择器有哪些类型？
jQuery 的选择器主要分为基本选择器、层次选择器、过滤选择器、内容过滤选择器、可见性过滤选择器、属性选择器和表单选择器。
2. 如何优化 jQuery 选择器的性能？
选择器的性能可以通过限制选择器的范围来提高，例如，使用 ID 或 class 来精确定位元素，而不是使用通配符选择器。
3. jQuery 选择器与 CSS 选择器有什么区别？
虽然 jQuery 选择器的语法与 CSS 选择器类似，但 jQuery 选择器不仅能选择元素，还能对其进行操作，例如添加事件处理程序和更改样式。
结论
jQuery 提供了强大的选择器功能，使开发者能够轻松操控 DOM 元素。通过本篇文章中的示例，可以更好地理解和运用 jQuery 选择器，从而提高开发效率。希望这些实用的示例和技巧能为您的网页开发工作带来帮助和灵感。
