当前位置：首页 > article >正文

前端【10】jQuery DOM 操作

article 2026/5/13 4:33:44

jquery捕获查取

获得内容 - text()、html() 以及 val()

获取属性 - attr()

编辑

jQuery 修改/设置内容和属性

设置内容 - text()、html() 以及 val()

设置属性 - attr()

jQuery添加元素

jQuery - 删除元素

前端【9】初识jQuery：让JavaScript变得更简单-CSDN博客--往期文章

jQuery 中非常重要的部分，就是操作 DOM 的能力。

jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

jquery捕获查取

获得内容 - text()、html() 以及 val()

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标签）
val() - 设置或返回表单字段的值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){$("#btn1").click(function(){alert("Text: " + $("#test").text());});$("#btn2").click(function(){alert("HTML: " + $("#test").html());});
});
</script>
</head><body>
<p id="test">这是段落中的 <b>粗体</b> 文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
</body>
</html>

获取属性 - attr()

获得链接中 href 属性的值：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){$("button").click(function(){alert($("#runoob").attr("href"));});
});
</script>
</head><body>
<p><a href="http://www.runoob.com" id="runoob">菜鸟教程</a></p>
<button>显示 href 属性的值</button>
</body>
</html>

jQuery 修改/设置内容和属性

设置内容 - text()、html() 以及 val()

$("#btn1").click(function(){$("#test1").text("Hello world!");
});
$("#btn2").click(function(){$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){$("#test3").val("RUNOOB");
});

设置属性 - attr()

改变（设置）链接中 href 属性的值：

$("button").click(function(){$("#runoob").attr("href","http://www.runoob.com/jquery");
});

同时设置多个属性。

下面的例子演示如何同时设置 href 和 title 属性：

$(document).ready(function(){$("button").click(function(){$("#runoob").attr({"href" : "http://www.runoob.com/jquery","title" : "jQuery 教程"});// 通过修改的 title 值来修改链接名称title =  $("#runoob").attr('title');$("#runoob").html(title);});
});

jQuery添加元素

用于添加新内容的四个 jQuery 方法：

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

以append()为例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){$("#btn1").click(function(){$("p").append(" <b>追加文本</b>。");});$("#btn2").click(function(){$("ol").append("<li>追加列表项</li>");});
});
</script>
</head><body>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button>
</body>
</html>

after() 、 before() 方法、append() 和 prepend() 方法能够通过参数接收无限数量的新元素

function appendText(){var txt1="<p>文本-1。</p>";              // 使用 HTML 标签创建文本var txt2=$("<p></p>").text("文本-2。");  // 使用 jQuery 创建文本var txt3=document.createElement("p");txt3.innerHTML="文本-3。";               // 使用 DOM 创建文本 text with DOM$("body").append(txt1,txt2,txt3);        // 追加新元素
}
function afterText()
{var txt1="<b>I </b>";                    // 使用 HTML 创建元素var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素var txt3=document.createElement("big");  // 使用 DOM 创建元素txt3.innerHTML="jQuery!";$("img").after(txt1,txt2,txt3);          // 在图片后添加文本
}

<button onclick="appendText()">追加文本</button>
<button onclick="afterText()">之后插入</button>

jQuery - 删除元素

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素，常用于清空

$(document).ready(function(){$("button").click(function(){$("#div1").remove();});
});

$(document).ready(function(){$("button").click(function(){$("#div1").empty();});
});

remove() 方法也可接受一个参数，允许您对被删元素进行过滤 ,面的例子删除 class="italic" 的所有 <p> 元素：

$(document).ready(function(){$("button").click(function(){$("p").remove(".italic");});
});

<p>这是一个段落。</p>
<p class="italic"><i>这是另外一个段落。</i></p>
<p class="italic"><i>这是另外一个段落。</i></p>
<button>移除所有  class="italic" 的 p 元素。</button>

前端【10】jQuery DOM 操作

目录 jquery捕获查取获得内容 - text()、html() 以及 val() 获取属性 - attr() 编辑 jQuery 修改/设置内容和属性设置内容 - text()、html() 以及 val() 设置属性 - attr() jQuery添加元素 jQuery - 删除元素前端【9】初识jQuery：让JavaScript变得更简…...

编程日记 2026/5/13 4:33:44

Day34：字符串的替换

在 Python 中，字符串替换是一个非常常见的操作，主要用于修改字符串中的某些部分。字符串的替换操作通常不修改原始字符串，因为字符串在 Python 中是不可变的，而是返回一个新的字符串。 Python 提供了 str.replace() 方法来执行替…...

编程日记 2026/5/5 3:58:45

汇编的使用总结

一、汇编的组成 1、汇编指令（指令集） 数据处理指令: 数据搬移指令数据移位指令位运算指令算术运算指令比较指令跳转指令内存读写指令状态寄存器传送指令异常产生指令等 2、伪指令不是汇编指令，但是可以起到指令的作用，伪…...

编程日记 2026/5/1 3:43:29

力扣【347. 前 K 个高频元素】Java题解（堆）

TopK问题，我们直接上堆。首先遍历一次然后把各个数字的出现频率存放在哈希表中便于后面堆的操作。因为是出现频率前 k 高，所以用小顶堆，当我们遍历的频率值大于堆顶值时就可以替换堆顶。代码： class Solution {public int[] …...

编程日记 2025/12/31 20:30:38

【计算机网络】host文件

host文件的主要功能： 域名解析本地映射：host文件的主要功能是将**域名映射到相应的 IP 地址**。当计算机需要访问一个网站或服务时，它会首先在 host文件中查找该域名对应的 IP 地址。如果在 host文件中找到了匹配的域名和 IP 地址映射&…...

编程日记 2026/3/27 15:46:44

git如何设置pull的时候有些文件不pull

在 Git 中，没有直接的方法在 git pull 时排除特定文件，但可以通过以下方式实现类似效果： 方法 1: 使用 .gitignore .gitignore 文件可以忽略未跟踪的文件，但对已跟踪的文件无效。如果你希望某些文件不被拉取，可以先将…...

编程日记 2026/5/8 5:29:46

第五节 MATLAB命令

本节的内容将提供常用的一些MATLAB命令。在之前的篇章中我们已经知道了MATLAB数值计算和数据可视化是一个交互式程序，在它的命令窗口中您可以在MATLAB提示符“>>”下键入命令。 MATLAB管理会话的命令 MATLAB提供管理会话的各种命令。如下表所示：…...

编程日记 2026/2/13 9:10:41

性能测试丨JVM 性能数据采集

什么是JVM性能数据采集？ JVM性能数据采集是指通过一些工具和技术采集与Java虚拟机相关的性能数据。这些数据包括但不限于内存使用、CPU使用、垃圾回收（GC）行为、线程活动等。合理地分析这些数据，可以帮助我们找出系统的瓶颈&…...

编程日记 2026/5/9 15:35:54

vue3 vue2区别

Vue 3 和 Vue 2 之间存在多个方面的区别，以下是一些主要的差异点： 1. 性能改进 Vue 3：在性能上有显著提升，包括更小的包体积、更快的渲染速度和更好的内存管理。Vue 2：性能相对较低，尤其是在大型应用中。…...

编程日记 2026/5/2 10:01:36

快速更改WampServer根目录php脚本 <?php // 配置文件地址 $apacheConfPath C:\Install\CTF\Wampserver\bin\apache\apache2.4.62.1\conf\httpd.conf; $apacheConfPath2 C:\Install\CTF\Wampserver\bin\apache\apache2.4.62.1\conf\extra\httpd-vhosts.conf; // 新根目录…...

编程日记 2026/5/5 15:48:23

金价高企需求疲软，周大福近三个月零售值下降14.2%

1月22日，周大福在港交所发布公告称，截至2024年12月31日止三个月（第三季度），集团零售值下降14.2%。其中，中国内地市场零售值下降13.0%，香港及澳门市场零售值下降20.4%，其他市场零售值…...

编程日记 2026/2/15 2:05:40

想品客老师的第七天：闭包和作用域

闭包之前的内容写在这里环境、作用域、回收首先还是数据的回收问题，全局变量一般都是通过关闭页面回收的；而局部变量的值不用了，会被自动回收掉像这种写在全局里的就不会被主动回收捏： let title 荷叶饭function fn() {ale…...

编程日记 2026/5/5 7:33:42

Web 代理、爬行器和爬虫

目录 Web 在线网页代理服务器的使用方法Web 在线网页代理服务器使用流程详解注意事项 Web 请求和响应中的代理方式Web 开发中的请求方法借助代理进行文件下载的示例 Web 服务器请求代理方式代理、网关和隧道的概念参考文献说明爬虫的工作原理及案例网络爬虫概述爬虫工作原理 W…...

编程日记 2026/5/3 22:07:16

速通Docker === Docker 镜像分层存储机制

目录分层存储的概念分层存储的实现镜像层容器层分层存储的优势 1. 镜像轻量化 2. 快速构建与部署 3. 高效的镜像共享 4. 版本控制分层存储的示例容器层的临时性与数据持久化总结 Docker 的分层存储机制是其核心特性之一，它使得镜像的构建、共享和…...

编程日记 2026/5/11 8:40:27

开源智慧园区管理系统对比五款主流产品探索智能运营新模式

内容概要在这个数字化迅速发展的时代，园区管理也迎来了全新的机遇和挑战。众所周知，开源智慧园区管理系统作为一种创新解决方案，正逐步打破传统管理的局限性。它的开放性不仅使得系统可以根据具体需求进行灵活调整，也为用户提供…...

编程日记 2026/4/24 19:43:01

用Devc++与easyx一步一步做游戏[启动界面部分]-解决hover闪烁问题及优化

在之前的博文中《用Devc与easyx一步一步做游戏[启动界面部分]-之按钮制作》，我们利用Devc和easyx完成了游戏启动界面按钮的基本制作，实现了按钮的绘制以及鼠标悬停时的信息提示功能。然而，目前还存在一个问题，即鼠标移动时&#x…...

编程日记 2026/1/2 19:41:02

非根目录部署 nextjs 项目，资源文件请求404 的问题

最近在学习next项目编写的代码放到服务器上静态资源404 先分析问题到服务器上查看是有资源目录的是不是项目配置有问题是不是nginx配置有问题经过排查1和2是没有问题的目前来看只有3 检查一下nginx配置尝试着把静态资源的配置禁用问题解决我的next项目用的是pm2管理…...

编程日记 2026/5/5 18:10:56

Kafka常见问题之 `javax.management.InstanceAlreadyExistsException`

文章目录 Kafka常见问题之 javax.management.InstanceAlreadyExistsException1. 概述2. 常见原因3. 具体异常示例4. 解决方案4.1 确保单一 Kafka Producer 实例4.2 配置 Kafka Broker 和 Producer 使用唯一的 JMX 名称（对于Producer重点检查 client.id）4…...

编程日记 2026/5/5 15:43:58

mysql 学习5 mysql图形化界面DataGrip下载安装使用

一、下载和安装下载： 其他版本 - DataGrip PS：安装目录最好不要有中文。 C:\Program Files\JetBrains\DataGrip 2023.3.4 二、夸克网盘分享当前电脑是下载到 ：D:\Ctool\mysql\datagrip2023_3_4\datagrip2024\jetbra-datagrip\scripts …...

编程日记 2026/5/5 1:57:27

读写和解析简单的 nc 文件

NetCDF 文件格式在气象数据工程领域占据着举足轻重的地位，其结构灵活、强兼容性等优势使其成为该领域的一个标准。无论是从事学术研究还是工程实践，掌握这种数据格式变得越发重要。其次，我注意到目前社区中气象编程大多数课程都聚焦于某个特定…...

编程日记 2026/5/13 8:21:29

LLM：BERT or BART 之BERT

文章目录前言一、BERT1. Decoder-only2. Encoder-only3. Use of Bidirectional Context4. Masked Language Model (MLM)5. Next Sentence Prediction (NSP)6. Fine-tune1、情感分析2、句对分析3、命名实体识别（NER） 7. BERT总结总结前言 NLP选手对这…...

编程日记 2026/5/12 20:48:03

【力扣：新动计划，编程入门 —— 题解 ③】

—— 25.1.26 231. 2 的幂给你一个整数 n，请你判断该整数是否是 2 的幂次方。如果是，返回 true ；否则，返回 false 。如果存在一个整数 x 使得 n 2x ，则认为 n 是 2 的幂次方。示例 1： 输入：…...

编程日记 2026/5/13 9:18:32

数据库基础：从概念到 MySQL 实战

数据库基础：从概念到 MySQL 实战在当今数字化时代，数据的重要性不言而喻，而数据库作为数据管理的核心工具，发挥着关键作用。对于技术爱好者和开发者来说，深入了解数据库知识是必不可少的。今天，就让我们一…...

编程日记 2026/5/3 5:51:42

Nacos统一配置管理

Nacos 统一配置管理将一部分配置信息写到Nacos配置文件中，可以统一管理，并且这个文件支持热加载。新建配置步骤：配置管理 -> 配置列表 -> 新建配置 Data ID（配置文件名id） 命名规范：服务名称-de…...

编程日记 2026/1/22 7:53:47

Centos7系统php8编译安装ImageMagick/Imagick扩展教程整理

Centos7系统php8编译安装ImageMagick/Imagick扩展教程整理安装php8安装ImageMagick1、下载ImageMagick2、解压并安装3、查看是否安装成功安装imagick扩展包安装php8 点我安装php8 安装ImageMagick 1、下载ImageMagick wget https://www.imagemagick.org/download/ImageMa…...

编程日记 2026/5/5 1:03:18

android的gradle

Gradle User Manual gradle官网这里有个gradlew很有用，因为这个可以在窗口中运行gradlew脚本 gradlew 和 gradlew.bat 都是 Gradle Wrapper（Gradle 包装器） 的一部分，它们的作用是让项目可以使用 Gradle 而无需提前在系统中…...

编程日记 2026/5/8 12:22:11

2025美赛MCM数学建模A题：《石头台阶的“记忆”：如何用数学揭开历史的足迹》(全网最全思路+模型)

✨个人主页欢迎您的访问 ✨期待您的三连 ✨ 《石头台阶的“记忆”：如何用数学揭开历史的足迹》目录《石头台阶的“记忆”：如何用数学揭开历史的足迹》 ✨摘要✨ ✨引言✨ 1. 引言的结构 2. 撰写步骤 （1）研究背景 &#…...

编程日记 2026/5/8 13:39:51

Python3 【高阶函数】项目实战：5 个学习案例

Python3 【高阶函数】项目实战：5 个学习案例本文包含 5 个关于“高阶函数”的综合应用项目，每个项目都包含完整的程序代码、测试案例和执行结果。具体项目是： 成绩统计分析单词统计工具简易计算器工厂任务调度器数据管道处理项目 1&#…...

编程日记 2026/3/7 20:14:41

ES6 类语法：JavaScript 的现代化面向对象编程

Hi，我是布兰妮甜 ！ECMAScript 2015，通常被称为 ES6 或 ES2015，是 JavaScript 语言的一次重大更新。它引入了许多新特性，其中最引人注目的就是类（class）语法。尽管 JavaScript 一直以来都支持基于…...

编程日记 2026/3/19 16:41:59

【S32K3 RTD LLD篇7】K344中心对齐PWM中心点触发ADC BCTU采样

【S32K3 RTD LLD篇7】K344中心对齐PWM中心点触发ADC BCTU采样一，文档简介二，中心对齐PWM中心点触发ADC原理2.1 如何生成中心对齐的PWM2.2 如何生成PWM中心点触发标志三， 软件配置与实现3.1 Demo CT 模块配置3.1.1 引脚配置3.1.2 时钟配置3.…...

编程日记 2026/5/3 20:53:02

jquery捕获查取

获得内容 - text()、html() 以及 val()

获取属性 - attr()

jQuery 修改/设置内容和属性

设置内容 - text()、html() 以及 val()

设置属性 - attr()

jQuery添加元素

jQuery - 删除元素

相关文章：