当前位置:首页 > 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 简介 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。它兼容多种浏览器,提供易于使用的 API,使开发者能够…

jquery文档

jquery文档

以下是关于 jQuery 文档的核心内容和资源整理,便于快速查阅和使用: jQuery 官方文档 官网地址:jQuery Official Documentation 内容分类:API 参考:包含所…

jquery属性

jquery属性

jQuery 属性操作 jQuery 提供了多种方法来操作 HTML 元素的属性。这些方法可以用于获取、设置、修改或删除元素的属性。 获取属性值 使用 attr() 方法可以获取指定属性的值。例如,…

加载jquery

加载jquery

加载 jQuery 的方法 通过 CDN 加载 推荐使用官方或公共 CDN(内容分发网络)加载 jQuery,速度快且稳定。将以下代码添加到 HTML 文件的 <head> 或 <b…

jquery 删除

jquery 删除

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

jquery效果

jquery效果

jQuery 动画效果 jQuery 提供了多种内置动画效果,可用于实现平滑的页面交互。常用的方法包括 show()、hide()、toggle()、fadeIn()、fadeOut()、slideU…