当前位置:首页 > jquery

jquery 选中

2026-03-02 10:46:24jquery

jQuery 选中元素的方法

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

基本选择器

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

层级选择器

jquery 选中

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

属性选择器

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

表单选择器

jquery 选中

  • $(":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() 方法遍历选中的元素:

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

标签: jquery
分享给朋友:

相关文章

jquery 面试题

jquery 面试题

jQuery 面试题常见考点 DOM 操作 选择器使用:$("#id"), $(".class"), $("tag") 元素增删改查:append(), remove(), html(),…

jquery文件

jquery文件

jQuery文件获取与使用 jQuery是一个快速、简洁的JavaScript库,简化了HTML文档遍历、事件处理、动画和Ajax交互。以下是获取和使用jQuery文件的方法。 下载jQuery文件…

jquery 删除

jquery 删除

jQuery 删除元素的方法 使用 jQuery 删除 DOM 元素可以通过多种方式实现,具体方法取决于需求。以下是几种常见的删除方式: remove() 方法 remove() 方法会删除选中的元…

jquery 字符串

jquery 字符串

jQuery 字符串操作 jQuery 提供了多种方法来处理字符串,尽管原生 JavaScript 已经具备强大的字符串处理能力,但结合 jQuery 可以更方便地操作 DOM 元素中的字符串内容。…

jquery 控件

jquery 控件

jQuery 控件概述 jQuery 控件是基于 jQuery 库开发的交互式 UI 组件,用于增强网页功能。这些控件通常提供表单元素、数据展示、导航等功能,简化开发流程。 常用 jQuery 控件…

jquery 视频

jquery 视频

使用 jQuery 播放视频 jQuery 可以简化 HTML5 视频的控制。通过 video 元素的 DOM 操作,可以实现播放、暂停等功能。 // 播放视频 $("#myVideo").trig…