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

jQuery成功之路——jQuery的DOM操作简单易懂

news 2025/11/2 17:30:28

jQuery的DOM操作

1.jQuery操作内容

jQuery操作内容 1. text() 获取或修改文本内容类似于 dom.innerText 2. html() 获取或修改html内容类似 dom.innerHTML

注意: 1. text() 是获取设置所有 2. html() 是获取第一个,设置所有

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>13-jquery操作内容</title><!--引入Jquery库文件--><script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
</head>
<body>
<span>span1</span>
<span>span2</span>
<span>span3</span>
<div>div1<br/></div>
<div>div2<br/></div>
<div>div3<br/></div>

<script>//获取所有spanvar $span = $("span");//获取所有divvar $div = $("div");
// 1.获取纯文本内容console.log($span.text());//获取所有span中的文本:span1span2span3console.log($div.text());//获取所有div中的文本:div1div2div3// 2.获取html内容console.log($span.html());//只能获取第一个标签体:span1console.log($div.html());//只能获取第一个标签体:div1<br/>// 3.设置纯文本内容$span.text("<h1>h1标题标签</h1>");//设置为文本内容$div.text("<h1>h1标题标签</h1>");//设置为文本内容// 4.设置html内容$span.html("<h1>h1标题标签</h1>");//设置标签体为标签显示$div.html("<h1>h1标题标签</h1>");//设置标签体为标签显示
</script>

</body>
</html>

2.jQuery操作属性(掌握)

jQuery操作属性

val() 获取或修改表单控件的value值等于dom.value
prop() 获取或修改原生属性值(checked，selected)
attr() 获取或修改自定义属性值等于 dom.setAttribute() dom.getAttribute()

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>获取属性</title> </head><body><input id="myinput" type="text" name="username" value="张三" /><br />        <ul><li id="bj" name="beijing" xxx="yyy">北京</li><li id="tj" name="tianjin">天津</li></ul><input type="checkbox" id="hobby"  checked="checked"/></body><script type="text/javascript" src="js/jquery-1.8.3.js" ></script><script type="text/javascript">//获取张三/** 使用jQuery对象中的val()函数,获取value的值,给value设置*      获取: jQuery对象.val();*      设置: jQuery对象.val(新值);*///1.获取id是myinput的标签对象var value = $("#myinput").val();//alert(value);//2.改变input输入框的value的值$("#myinput").val("李四");/** jQuery中的函数attr()获取属性值,设置属性值*  获取:jQuery对象.attr("属性名");*  设置:jQuery对象.attr("属性名","属性值 "); *///获取北京节点的name属性值//alert($("#bj").attr("name"));//beijing//设置北京节点的name属性的值为dabeijing//$("#bj").attr("name","dabeijing");//alert($("#bj").attr("name"));//dabeijing//新增北京节点的discription属性 属性值是didu//alert($("#bj").attr("discription"));//undefined//$("#bj").attr("discription","didu");//alert($("#bj").attr("discription"));//didu//删除北京节点的name属性并检验name属性是否存在/** 使用jQuery对象中的函数removeAttr(name)删除指定的属性*///$("#bj").removeAttr("name");//alert($("#bj").attr("name"));//undefined//获得hobby的的选中状态alert($("#hobby").attr("checked"));//选中:checked 未选中:undefined/** jQuery对象中的函数:*  prop(属性名); 获取的选中的状态  选中:true,未选中false*/alert($("#hobby").prop("checked")); //选中:true,未选中false</script>
</html>

3.jQuery操作样式(掌握)

jQuery操作样式 1. css() 获取或者修改CSS样式用法 css(样式名) 获取一个样式等于 dom.style.驼峰样式名 css(样式名,样式值) 设置一个样式 dom.style.驼峰样式名=样式值 css({样式名:样式值,样式名:样式值}) 批量设置样式 dom.style.cssText = 样式名:样式值;样式名:样式值;

addClass() 添加一个样式
removeClass() 移除一个样式
toggleClass() 切换一个样式

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>15-jquery操作样式</title><!--引入Jquery库文件--><script src="js/jquery-1.8.3.js"></script>
</head>
<body>

<style>#p1{ background-color: red;}.mp{color:green}.mpp{background-color: lightgray;}
</style>
<p id="p1">1. 设置一个css样式</p>
<p id="p2" >2. 批量设置css样式</p>
<p id="p3" class="mpp">3. 通过class设置样式</p>
<p id="p4">4. 切换class样式</p>
<input type="button" value="切换样式" id="but" />
<script>let $p1 = $('#p1');//获取p1let $p2 = $('#p2');//获取p2let $p3 = $('#p3');//获取p3let $p4 = $('#p4');//获取p4// 1. css() 获取或设置css样式//设置一个样式$p1.css("color","white");//设置字体白色//批量设置样式$p2.css({"color":"green","background-color":"gold","border":"1px solid red"});//批量设置//获取一个样式console.log($p2.css("background-color"));// 2. addClass() 添加一个class样式$p4.addClass("mp");//添加一个样式$p4.addClass("mpp");//添加一个样式// 3. removeClass() 移除一个class$p4.removeClass("mpp");// 4. toggleClass() 切换一个class$("#but").click(function(){$p4.toggleClass("mpp");});
</script>
</body>
</html>

4.jQuery创建和插入对象

语法

API方法	解释
append(element)	添加成最后一个子元素，两者之间是父子关系
prepend(element)	添加成第一个子元素，两者之间是父子关系
`$("<A id="11>aaaa</A>")`	创建A元素对象,同时可以给对象添加属性和标签体
before(element)	添加到当前元素的前面，两者之间是兄弟关系
after(element)	添加到当前元素的后面，两者之间是兄弟关系

代码演示

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>内部插入脚本</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script src="../js/jquery-3.3.1.js"></script></head><body><ul id="city"><li id="bj" name="beijing">北京</li><li id="tj" name="tianjin">天津</li><li id="cq" name="chongqing">重庆</li></ul><ul id="love"><li id="fk" name="fankong">反恐</li><li id="xj" name="xingji">星际</li></ul><div id="foo1">Hello1</div> </body><script type="text/javascript">/**将反恐放置到city的后面*/$("#city").append($("#fk"));/**将反恐放置到city的最前面*/$("#city").prepend($("#fk"));//将反恐插入到天津后面$("#tj").after($("#fk"));//将反恐插入到天津前面$("#tj").before($("#fk"));//将反恐插入到天津后面$("#fk").insertAfter($("#tj"));//将反恐插入到天津前面$("#fk").insertBefore($("#tj"));</script>
</html>

5.jQuery删除对象

语法

API方法	解释
remove()	删除指定元素
empty()	清空指定元素的所有子元素

代码演示

<!DOCTYPE HTML>
<html><head><title>删除节点</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script></head><body><ul id="city"><li id="bj" name="beijing">北京</li><li id="tj" name="tianjin">天津</li><li id="cq" name="chongqing">重庆</li></ul><p class="hello">Hello</p> how are <p>you?</p></body><script type="text/javascript">//删除<li id="bj" name="beijing">北京</li>$("#bj").remove();//删除所有的子节点   清空元素中的所有后代节点(不包含属性节点).$("#city").empty();</script>
</html>

jQuery综合案例

1 、案例-表格隔行换色

效果

代码演示

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script><script type="text/javascript">$(function() {$("tr:gt(1):even").css("background-color", "pink");$("tr:gt(1):odd").css("background-color", "yellow");});</script></head><body><table id="tab1" border="1" width="800" align="center"><tr><td colspan="5"><input type="button" value="删除"></td></tr><tr style="background-color: #999999;"><th><input type="checkbox"></th><th>分类ID</th><th>分类名称</th><th>分类描述</th><th>操作</th></tr><tr><td><input type="checkbox"></td><td>1</td><td>手机数码</td><td>手机数码类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox"></td><td>2</td><td>电脑办公</td><td>电脑办公类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox"></td><td>3</td><td>鞋靴箱包</td><td>鞋靴箱包类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox"></td><td>4</td><td>家居饰品</td><td>家居饰品类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr></table></body>
</html>

2、案例-复选框全选全不选

效果

代码演示

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script><script type="text/javascript">//创建一个checkbox全选框的单击事件的响应函数function selectAll(obj){//通过class属性值获取所有的其他复选框,设置checked属性值和全选一样$(".itemSelect").prop("checked",obj.checked);}</script></head><body><table id="tab1" border="1" width="800" align="center"><tr><td colspan="5"><input type="button" value="删除"></td></tr><tr><th><input type="checkbox" onclick="selectAll(this)"></th><th>分类ID</th><th>分类名称</th><th>分类描述</th><th>操作</th></tr><tr><td><input type="checkbox" class="itemSelect"></td><td>1</td><td>手机数码</td><td>手机数码类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox" class="itemSelect"></td><td>2</td><td>电脑办公</td><td>电脑办公类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox" class="itemSelect"></td><td>3</td><td>鞋靴箱包</td><td>鞋靴箱包类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox" class="itemSelect"></td><td>4</td><td>家居饰品</td><td>家居饰品类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr></table></body>
</html>

jQuery成功之路——jQuery的DOM操作简单易懂

jQuery的DOM操作 1.jQuery操作内容 jQuery操作内容 1. text() 获取或修改文本内容类似于 dom.innerText 2. html() 获取或修改html内容类似 dom.innerHTML 注意: 1. text() 是获取设置所有 2. html() 是获取第一个,设置所有 <!DOCTYPE html> <html lang"zh…...

编程日记 2023/9/3 11:50:32

C++ 学习系列 -- 智能指针 make_shared 与 make_unique

一 make_shared 1.1 make_shared 是什么？ c 11 中引入了智能指针 shared_ptr，以及一个模板函数 make_shared 来生成一个制定类型的 shared_ptr。 1.2 引入 make_shared ，解决了什么问题？ make_shared的引入，主…...

编程日记 2023/9/3 11:49:31

贝叶斯神经网络 - 捕捉现实世界的不确定性

贝叶斯神经网络 - 捕捉现实世界的不确定性 Bayesian Neural Networks 生活本质上是不确定性和概率性的，贝叶斯神经网络 (BNN) 旨在捕获和量化这种不确定性在许多现实世界的应用中，仅仅做出预测是不够的；您还想知道您对该预测的信心有多大。例…...

编程日记 2023/9/3 11:48:30

games101作业1

题目给定三维下三个点 v0(2.0, 0.0, −2.0), v1(0.0, 2.0, −2.0), v2(−2.0, 0.0, −2.0), 你需要将这三个点的坐标变换为屏幕坐标并在屏幕上绘制出对应的线框三角形 (在代码框架中，我们已经提供了 draw_triangle 函数，所以你只需要去构建变换矩阵即可…...

编程日记 2023/9/3 11:47:28

LeetCode 面试题 02.08. 环路检测

文章目录一、题目二、C# 题解一、题目给定一个链表，如果它是有环链表，实现一个算法返回环路的开头节点。若环不存在，请返回 null。如果链表中有某个节点，可以通过连续跟踪 next 指针再次到达，则链表中存在环。为了…...

编程日记 2023/9/3 11:46:27

【Linux】线程安全-生产者消费者模型

文章目录生产者消费者模型123规则应用场景优点忙闲不均生产者和消费者解耦支持高并发代码模拟生产者消费者模型 123规则 1个线程安全的队列：只要保证先进先出特性的数据结构都可以称为队列这个队列要保证互斥（就是保证当前只有一个线程对队列进行操…...

编程日记 2023/9/3 11:45:26

优化（2） 2023/09/03

今天重新温习了下clean abap，以前只是偶尔打开看几眼。今天把有些自己不熟悉的地方，重点研究了下。有几个点可以在以后工作使用。这几点可能并不能提升程序效率，但会大大提高代码可读性和代码的可扩展性： 用insert XXX into tabl…...

编程日记 2023/9/3 11:44:24

Swap and Reverse 题解

Swap and Reverse 题面翻译题目描述本题共有 t t t 组数据。给定一个长度为 n n n 的字符串 s s s 和一个整数 k k k， s s s 只包含小写字母，你可以进行若干次操作（可以是零次），具体操作如下： 选…...

编程日记 2023/9/3 11:43:23

单元测试：优雅编写Kotlin单元测试

一、MockK简介 MockK是一款功能强大、易于使用的Kotlin mocking框架。在编写单元测试时，MockK能够帮助我们简化代码、提高测试覆盖率，并改善测试的可维护性。除了基本用法外，MockK还提供了许多额外的功能和灵活的用法，让我们能够…...

编程日记 2023/9/3 11:42:22

深度学习入门教学——卷积神经网络CNN

目录一、CNN简介一、输入层二、卷积层三、池化层四、全连接层一、CNN简介 1、应用领域检测任务分类与检索超分辨率重构 2、卷积网络与传统网咯的区别传统神经网络和卷积神经网络都是用来提取特征的。神经网络： 可以将其看作是一个二维的。卷积神经…...

编程日记 2023/9/3 11:41:21

【MySQL】MySQL系统变量（system variables）列表（mysqld --verbose --help的结果例）

文章目录【MySQL】MySQL系统变量（system variables）列表（mysqld --verbose --help的结果例）mysqld --verbose --help的结果例参考【免责声明】文章仅供学习交流，观点代表个人，与任何公司无关。编辑|SQL和…...

编程日记 2023/9/3 11:40:20

Python学习之四数据输入与输出

(一) 脚本编程前面的章节，组要学习了一些简单的Python编程，使用的是交互式解释器，本章节将开始进行脚本编程。可以使用多种编辑器或者IDE完成编码，主要使用vim。参考前续小节的写法，我们给a、b分别赋值3和5。在终端运行程序后发现，没有任何输出。这就是本次我们将要…...

编程日记 2023/9/3 11:39:18

VBA技术资料MF51：VBA_在Excel中突出显示唯一值

【分享成果，随喜正能量】世间万物，因果循环不休，你的善心善行，都可能成为你的善缘善果。每天忆佛念佛，每天都在佛菩萨的加持下生活，自然吉祥如意，法喜充满。。我给VBA的定义：VBA是…...

编程日记 2023/9/3 11:38:17

Mqtt学习笔记--交叉编译移植（1）

简述 Mqtt目前在物联网行业的应用比较多，mqtt属于应用层的一个中间件，这个中间件实现消息的订阅发布机制。网上介绍Mqtt的实现原来的比较多，这里不细介绍。其实在我们之前的产品中，自己也开发的有类似的中间件，除了具…...

编程日记 2023/9/3 11:37:15

Gateway的服务网关

Gateway服务网关 Gateway网关是我们服务的守门神，所有微服务的统一入口。网关的核心功能特性： 请求路由权限控制限流架构如下： gateway使用引入依赖创建gateway服务，引入依赖  <dependency>…...

编程日记 2023/9/3 11:36:13

信息化发展18

存储技术 1 、存储分类 2 、常用存储模式的技术与应用对比： ( 1 ） 存储虚拟化（ Storage Virtualization ） 是“ 云存储” 的核心技术之一。它带给人们直接的好处是提高了存储利用率， 降低了存储成本， 简…...

编程日记 2023/9/3 11:35:12

TypeScript学习 + 贪吃蛇项目

TypeSCript简介 TypeScript是JavaScript的超集。它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性。TS代码需要通过编译器编译为JS，然后再交由JS解析器执行。TS完全兼容JS，换言之，任何的JS代码都可以直…...

编程日记 2023/9/3 11:34:11

YOLO-NAS详细教程-介绍如何进行物体检测

对象检测是计算机视觉中的一项核心任务，可以检测和分类图像中的边界框。自从深度学习首次取得突破以来，它就以极快的速度获得普及和普及，并推动了医疗领域、监控、智能购物等众多公司的发展。考虑到它最终满足了两个基本需求，这一点也就不足为奇了端到端方式：找到所有当前…...

编程日记 2023/9/3 11:33:10

容器没有命令时，如何查看进程、容器executable file not found in $PATH: unknown

前言当容器没有ps -ef命令时，可以通过以下的命令来查看容器的进程。 docker container top查看容器运行的进程（该命令很有用） #docker container top 命令用于查看容器运行的进程 #当容器里面没有ps -ef命令时，使用docker con…...

编程日记 2023/9/3 11:32:09

如何使用 Amazon EMR 在 Amazon EKS 上构建可靠、高效、用户友好的 Spark 平台

这是 SafeGraph 技术主管经理 Nan Zhu 与亚马逊云科技高级解决方案架构师 Dave Thibault 共同撰写的特约文章。 SafeGraph 是一家地理空间数据公司，管理着全球超过 4100 万个兴趣点（POI，Point of Interest），提供品牌隶…...

编程日记 2023/9/3 11:31:09

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周，有很多同学在写期末Java web作业时，运行tomcat出现乱码问题，经过多次解决与研究，我做了如下整理： 原因： IDEA本身编码与tomcat的编码与Windows编码不同导致，Windows 系统控制台…...

编程新知 2025/11/2 10:01:13

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法配置通过调谐文件来调整相机行为使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包文章来源： http://raspberry.dns8844.cn/documentation 原文网址配置大多数用例自动工作，无需更改相机配置。但是，一…...

编程新知 2025/10/29 8:42:26

Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器

第一章引言：语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进在人工智能领域，文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量，支撑着搜索引擎、推荐系统、…...

编程新知 2025/8/15 19:59:33

Linux云原生安全：零信任架构与机密计算

Linux云原生安全：零信任架构与机密计算构建坚不可摧的云原生防御体系引言：云原生安全的范式革命随着云原生技术的普及，安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测，到2025年，零信任架构将成为超…...

编程新知 2025/8/17 17:11:47

css的定位（position）详解：相对定位绝对定位固定定位

在 CSS 中，元素的定位通过 position 属性控制，共有 5 种定位模式：static（静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）和…...

编程新知 2025/10/22 12:48:44

Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！

一、引言在数据驱动的背景下，知识图谱凭借其高效的信息组织能力，正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合，探讨知识图谱开发的实现细节，帮助读者掌握该技术栈在实际项目中的落地方法。 …...

编程新知 2025/9/17 21:39:04

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况，可以通过以下几种方式模拟或触发： 1. 增加CPU负载运行大量计算密集型任务，例如： 使用多线程循环执行复杂计算（如数学运算、加密解密等）。运行图…...

编程新知 2025/11/1 23:43:26

.Net Framework 4/C# 关键字（非常用，持续更新...）

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容，如果兼容将返回 true，如果不兼容则返回 false，在进行类型转换前，可以先使用 is 关键字判断对象是否与指定类型兼容，如果兼容才进行转换，这样的转换是安全的。例如有：首先创建一个字符串对象，然后将字符串对象隐…...

编程新知 2025/9/25 18:41:38

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2025/10/15 18:04:13

云原生安全实战：API网关Kong的鉴权与限流详解

🔥「炎码工坊」技术弹药已装填！ 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】一、基础概念 1. API网关（API Gateway） API网关是微服务架构中的核心组件，负责统一管理所有API的流量入口。它像一座…...

编程新知 2025/10/28 19:50:22