jQuery 选择器详解：基础用法与常见问题解答

在现代网页开发中，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; 不能提交.