编程开发
#jQuery #选择器 #DOM操作 #过滤选择器 #开发效率

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

 2012-03-15  |  6 分钟  |  2531 字  |  - 阅读  |  - 评论
文章目录

在现代网页开发中，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 选择器，从而提高开发效率。希望这些实用的示例和技巧能为您的网页开发工作带来帮助和灵感。

关注我

也可以看看

关注博主

微博 Twitter GitHub 抖音

微信打赏

更多 »

文章分类

广告赞助

更多 »

热门标签

Golang 97
Python 31
SEO优化 31
Redis 25
设计模式 24
JavaScript 20
go-redis 19
关键词研究 14
Linux 13
行为型 10
API 9
字符串 9
性能优化 9
ChatGPT 8
pip 8
深圳 8
社保 8
自由职业 8
MySQL 7
写作技巧 7

大流量卡

19元月租ㆍ超值优惠ㆍ长期套餐ㆍ免费包邮ㆍ官方正品

最新文章

广告赞助

今日热门

广告赞助

随便看看

广告赞助

资源下载

好物推荐

网站统计

  • 文章 381 篇
  • 标签 1152 个
  • 分类 5 个
  • 建站 2023-02-07
  • 运行 653 天
  • 更新 2024-11-19

广告赞助