当前位置:首页 > jquery

jquery 选中

2026-03-02 10:46:24jquery

jQuery 选中元素的方法

使用 jQuery 选中元素主要通过选择器实现,类似于 CSS 选择器。以下是一些常见的选中元素的方法:

基本选择器

  • $("tagName"):选中指定标签名的元素,例如 $("div") 选中所有 <div> 元素。
  • $("#id"):选中指定 ID 的元素,例如 $("#header") 选中 ID 为 header 的元素。
  • $(".className"):选中指定类名的元素,例如 $(".menu") 选中所有类名为 menu 的元素。

层级选择器

  • $("parent > child"):选中直接子元素,例如 $("ul > li") 选中 <ul> 下的直接 <li> 子元素。
  • $("ancestor descendant"):选中后代元素,例如 $("div p") 选中 <div> 内所有 <p> 元素。

属性选择器

  • $("[attribute]"):选中包含指定属性的元素,例如 $("[href]") 选中所有带有 href 属性的元素。
  • $("[attribute='value']"):选中属性值等于指定值的元素,例如 $("[type='text']") 选中所有 typetext 的元素。

表单选择器

  • $(":input"):选中所有表单元素(<input>, <select>, <textarea>, <button>)。
  • $(":text"):选中所有 type="text"<input> 元素。
  • $(":checked"):选中所有被选中的复选框或单选按钮。

jQuery 选中元素的示例代码

// 选中所有段落元素并设置红色文本
$("p").css("color", "red");

// 选中 ID 为 "myDiv" 的元素并隐藏
$("#myDiv").hide();

// 选中类名为 "highlight" 的元素并添加边框
$(".highlight").css("border", "1px solid black");

// 选中所有复选框并禁用
$(":checkbox").prop("disabled", true);

链式操作

jQuery 支持链式操作,可以在选中元素后连续调用多个方法:

$("#myButton")
  .css("background", "yellow")
  .attr("disabled", "disabled")
  .text("Click me!");

筛选选中元素

选中一组元素后,可以通过筛选方法进一步缩小范围:

  • $("li").first():选中第一个 <li> 元素。
  • $("div").last():选中最后一个 <div> 元素。
  • $("p").eq(2):选中索引为 2 的 <p> 元素(从 0 开始计数)。
  • $("input").not(":checked"):选中所有未选中的 <input> 元素。

遍历选中元素

使用 .each() 方法遍历选中的元素:

jquery 选中

$("li").each(function(index) {
  console.log(index + ": " + $(this).text());
});

标签: jquery
分享给朋友:

相关文章

jquery 滑块

jquery 滑块

jQuery 滑块实现方法 使用 jQuery 实现滑块功能可以通过多种方式完成,包括使用原生 jQuery 或结合插件(如 jQuery UI)。以下是几种常见实现方法: 使用 jQuery UI…

jquery获取

jquery获取

获取元素 使用jQuery选择器获取元素,通过CSS选择器或jQuery特定选择器定位目标元素。常见选择器包括ID选择器(#id)、类选择器(.class)、标签选择器(tag)等。示例: $('#…

jquery页面

jquery页面

jQuery 页面操作指南 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互的操作。以下是 jQuery 在页面中的常见使用方法…

jquery 使用

jquery 使用

jQuery 基础使用 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互的操作。以下是 jQuery 的基本使用方法。 引入…

jquery 选中

jquery 选中

jQuery 选中元素的方法 jQuery 提供了多种方式来选中 DOM 元素,以下是一些常用的方法: 通过 ID 选中元素 使用 # 符号加上元素的 ID 来选中特定元素: $('#elemen…

jquery id

jquery id

jQuery 通过 ID 选择元素的方法 在 jQuery 中,可以通过 ID 选择器快速获取 DOM 元素。ID 选择器使用 # 符号加上元素的 ID 名称。 语法示例: $("#eleme…