最全轻松学习jQuery控制DOM_jquery平滑显示指定dom，2024年最新大数据开发开发避坑指南

最新推荐文章于 2024-10-31 16:17:19 发布
最新推荐文章于 2024-10-31 16:17:19 发布
阅读量1k 收藏 30
点赞数 15
文章标签： 大数据 面试 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84185106/article/details/138937476
版权

img
img
img

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

其中html()相当于获取节点的innerHTML属性；添加参数时（即方法为html(text)时），则为设置innerHTML。而方法为text()则相当于获取元素的纯文本，text(content)为设置纯文本。

这两个方法 有时候会搭配使用，text()通常用来过滤页面中的标记，而html(text)用来设置节点中的innerHTML。

获取内容案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内容操作</title>
		<script src="js/jQuery-3.6.1.js"></script>
	</head>
	<body>
		<div>
			<ul>
				<li>
					<p>段落标签1</p>
				</li>
				<li>
					<p>段落标签2</p>
				</li>
			</ul>
		</div>
	</body>
	<script>
 $(function(){
 var result1 =$('div').html();
 console.log(result1);
 
 var result2 =$('div').text();
 console.log(result2);
 });
 </script>
</html>

运行效果：

在这里插入图片描述
编辑内容案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内容操作</title>
		<script src="js/jQuery-3.6.1.js"></script>
	</head>
	<body>
		<p id="demo1"></p>
		<p id="demo2"></p>
	</body>
	<script>
 $(function(){
 $('#demo1').html('<h2>大湖名城，创新高地</h2>');
 $('#demo2').text('<h2>大湖名城，创新高地</h2>');
 });
 </script>
</html>

运行效果：
在这里插入图片描述

添加元素

在普通的DOM中，如果希望在某个元素的后面添加一个元素，通常会使用父元素的appendChild()或者insertBefore()，且在很多时候需要反复寻找节点的位置，这十分麻烦。jQuery中提供了append、appendTo、prepend和prependTo方法添加新元素；也提供了after、insertAfter、before和insertBefore方法插入新元素。下面我将通过案例代码的方式一一为您介绍方法的应用。

1、通过 父子关系 添加新元素

**【1】

a

p

p

e

n

d

(

)

append()

append()方法**

$('ul').append('<li>jQuery中创建的元素节点</li>');

语法说明：找到父元素ul，然后通过父元素ul去添加新元素li到最后位置;

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>节点操作</title>
		<script src="js/jQuery-3.6.1.js"></script>
	</head>
	<body>
		<ul>
			<li>我是已经写好的li标签</li>
		</ul>
	</body>
	<script>
 $(function(){
 $('ul').append('<li>jQuery中创建的元素节点</li>');
 });
 </script>
</html>

**【2】

a

p

p

e

n

d

T

o

(

)

appendTo()

appendTo()方法**

$('<li>jQuery中创建的元素节点</li>').appendTo($('ul'));

语法说明：创建新元素li，然后将新元素li追加到ul父元素中的最后位置；

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>节点操作</title>
		<script src="js/jQuery-3.6.1.js"></script>
	</head>
	<body>
		<ul>
			<li>我是已经写好的li标签</li>
		</ul>
	</body>
	<script>
 $(function(){
 $('<li>jQuery中创建的元素节点</li>').appendTo($('ul'));
 });
 </script>
</html>

以上两种方法的运行效果是一样的，都是将新元素添加到最后位置：
在这里插入图片描述
**【3】

p

r

e

p

e

n

d

(

)

prepend()

prepend()方法**

$('ul').prepend('<li>jQuery中创建的元素节点</li>');

语法说明：找到父元素ul，然后通过父元素ul去添加新元素li到第一个位置;

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>节点操作</title>
		<script src="js/jQuery-3.6.1.js"></script>
	</head>
	<body>
		<ul>
			<li>我是已经写好的li标签</li>
		</ul>
	</body>
	<script>
 $(function(){
 $('ul').prepend('<li>jQuery中创建的元素节点</li>');
 });
 </script>
</html>

**【4】

p

r

e

p

e

n

d

T

o

(

)

prependTo()

prependTo()方法**

$('<li>jQuery中创建的元素节点</li>').prependTo($('ul'));

语法说明：创建新元素li，然后将新元素li追加到ul父元素中的最后位置；

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>节点操作</title>
		<script src="js/jQuery-3.6.1.js"></script>
	</head>
	<body>
		<ul>
			<li>我是已经写好的li标签</li>
		</ul>
	</body>
	<script>
 $(function(){
 $('<li>jQuery中创建的元素节点</li>').prependTo($('ul'));
 });
 </script>
</html>

以上两种方法的运行效果是一样的，都是将新元素添加到第一个位置：
在这里插入图片描述
以上四种方法是通过父元素和子元素的关系，给父元素ul添加li；

2、通过 兄弟关系 插入新元素

下面将有四种方法是通过子元素li之间的关系来插入新的li。

**【1】

a

f

t

e

r

(

)

after()

after()方法**

$('.li1').after('<li>我是用after方法新创建的li标签</li>');

语法说明：找到某个兄弟元素li，然后通过兄弟元素li去插入新元素li到兄弟元素的后面;

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>节点操作</title>
		<script src="js/jQuery-3.6.1.js"></script>
	</head>
	<body>
		<ul>
			<li class="li1">我是已经写好的第一个li标签</li>
			<li class="li2">我是已经写好的第二个li标签</li>
		</ul>
		</ul>
	</body>
	<script>
 $(function(){
 $('.li1').after('<li>我是用after方法新创建的li标签</li>');
 });
 </script>
</html>

运行效果：
在这里插入图片描述

**【2】

i

n

s

e

r

t

A

f

t

e

r

(

)

insertAfter()

insertAfter()方法**

$('<li>我是用insertAfter方法新创建的li标签</li>').insertAfter($('.li1'));

语法说明：创建新元素li，然后将新元素li插入到指定兄弟元素li的后面；

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>节点操作</title>
		<script src="js/jQuery-3.6.1.js"></script>
	</head>
	<body>
		<ul>
			<li class="li1">我是已经写好的第一个li标签</li>
			<li class="li2">我是已经写好的第二个li标签</li>
		</ul>
		</ul>
	</body>
	<script>
 $(function(){
 $('<li>我是用insertAfter方法新创建的li标签</li>').insertAfter($('.li1'));
 });
 </script>
</html>

运行效果：
在这里插入图片描述
**【3】

b

e

f

o

r

e

(

)

before()

before()方法**

$('.li2').before('<li>我是用before方法新创建的li标签</li>');

语法说明：找到某个兄弟元素li，然后通过指定兄弟元素li去插入新元素li到兄弟元素的前面;

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>节点操作</title>
		<script src="js/jQuery-3.6.1.js"></script>
	</head>
	<body>
		<ul>
			<li class="li1">我是已经写好的第一个li标签</li>
			<li class="li2">我是已经写好的第二个li标签</li>
		</ul>
		</ul>
	</body>
	<script>
 $(function(){
 $('.li2').before('<li>我是用before方法新创建的li标签</li>');
 });
 </script>
</html>

运行效果：
在这里插入图片描述

**【4】

i

n

s

e

r

t

B

e

f

o

r

e

(

)

insertBefore()

insertBefore()方法**

$('<li>我是用insertBefore方法新创建的li标签</li>').insertBefore($('.li2'));

语法说明：创建新元素li，然后将新元素li插入到指定兄弟元素li的前面；

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>节点操作</title>
		<script src="js/jQuery-3.6.1.js"></script>
	</head>
	<body>
		<ul>
			<li class="li1">我是已经写好的第一个li标签</li>
			<li class="li2">我是已经写好的第二个li标签</li>
		</ul>
		</ul>
	</body>
	<script>
 $(function(){
 $('<li>我是用insertBefore方法新创建的li标签</li>').insertBefore($('.li2'));
 });
 </script>
</html>

运行效果：
在这里插入图片描述

删除元素

【1】删除一个元素

在DOM编程中，要删除某个元素往往需要借助于它的父元素的removeChild()方法。而jQuery则提供了**remove()**方法，其可以直接将元素删除。

案例代码：

img
img
img

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

li>

  • 我是已经写好的第二个li标签




  • 
运行效果：  
 ![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/35889547363f75537793263b3939278c.png)


#### 删除元素


**【1】删除一个元素**


  在DOM编程中，要删除某个元素往往需要借助于它的父元素的removeChild()方法。而jQuery则提供了**remove()**方法，其可以直接将元素删除。


案例代码：



[外链图片转存中...(img-I9sExxtA-1715808344374)]
[外链图片转存中...(img-xJNKTvPr-1715808344375)]
[外链图片转存中...(img-ZBSShnel-1715808344375)]

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**
2401_84185106
关注
jq \ js控制页面滚动到指定位置
weixin_56383764的博客
06-11 924
通过jQuery、JavaScript随意控制页面滚动条的位置
jQuery全面学习，大学生前端开发必修， jQuery学习资料.zip
08-06
**jQuery全面学习指南** 在当前的前端开发领域，jQuery是一个不可或缺的重要工具，尤其对于初学者而言，它极大地简化了JavaScript的复杂性。本教程将深入探讨jQuery的核心概念、功能及其在实际项目中的应用，帮助大...
大数据最新轻松学习jQuery控制DOM_jquery平滑显示指定dom(1)
2401_84186026的博客
05-04 755
对于页面的元素，在DOM编程中可以通过各种查询、修改手段进行管理，但在喝多时候都非常麻烦。jQuery提供了一整套方法来处理页面中的元素，包括元素复制、移动、替换等。
2024年大数据最新轻松学习jQuery控制DOM_jquery平滑显示指定dom，大数据开发入门
2401_84160087的博客
05-05 645
在普通的DOM中，如果希望在某个元素的后面添加一个元素，通常会使用父元素的appendChild()或者insertBefore()，且在很多时候需要反复寻找节点的位置，这十分麻烦。这两个方法 有时候会搭配使用，text()通常用来过滤页面中的标记，而html(text)用来设置节点中的innerHTML。语法说明：找到某个兄弟元素li，然后通过指定兄弟元素li去插入新元素li到兄弟元素的前面;语法说明：找到某个兄弟元素li，然后通过兄弟元素li去插入新元素li到兄弟元素的后面;
轻松学习jQuery控制DOM_jquery平滑显示指定dom
2401_84166811的博客
04-27 784
pendprepend()prepend()方法**语法说明：找到父元素ul，然后通过父元素ul去添加新元素li到第一个位置;**【4】prependToprependTo()方法**语法说明：创建新元素li，然后将新元素li追加到ul父元素中的最后位置；以上两种方法的运行效果是一样的，都是将新元素添加到第一个位置：以上四种方法是通过父元素和子元素的关系，给父元素ul添加li；兄弟关系下面将有四种方法是通过子元素li之间的关系来插入新的li。**【1】aft。
轻松学习jQuery控制DOM
不迁怒，不贰过。小知识，大智慧。
11-17 1595
本文讲解了jQuery操作DOM的各种方法，主要包括操作HTML标记的属性和标记本身。介绍了表单元素值得获取和设置。属性值的相关操作等。
2024年最新2024年总结的web前端学习路线分享（学习导读）_2024前端学习视频，2024年最新2024最新腾讯大数据开发高级面试题总结
2401_84590306的博客
05-05 481
网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化资料的朋友，可以戳这里获取一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化资料的朋友，可以戳这里获取。
2024年最新轻松学习jQuery控制DOM_jquery平滑显示指定dom(2)，怒肝三个月啃完这110道面试题
2401_84181253的博客
05-14 688
语法说明：找到某个兄弟元素li，然后通过指定兄弟元素li去插入新元素li到兄弟元素的前面;//点击图片，设置多个属性：src属性值、title属性、width属性。//点击图片，设置新的src属性值。‘title’:‘女神刘亦菲’,//点击图片，删除src属性值。before()方法**
jQuery：简化DOM操作的利器
你若盛开，清风自来
07-17 940
本文将介绍jQuery库的概念、作用及其在实际项目中的应用，帮助读者更好地理解jQuery的重要性，提高前端开发的效率。jQuery是一个跨平台的JavaScript库，它提供了一套简洁的API，用于简化DOM操作、事件处理和动画效果等。简洁的语法：jQuery使用链式语法和选择器，使得代码更加简洁和易于阅读。强大的插件系统：jQuery拥有丰富的插件和社区支持，可以扩展其功能。兼容性：jQuery支持多种浏览器，包括旧版浏览器。
jQuery-Lerning.zip_Jquery 基础教程_javascript 教程_jquery_web前端
09-22
4. **动画效果**：jQuery的动画功能包括`fadeIn()`, `fadeOut()`, `slideToggle()`等，这些方法可以轻松创建出平滑的过渡效果。`animate()`方法则允许自定义复杂的动画效果。 5. **Ajax交互**：jQuery的`$.ajax()`,...
jQuery实现平滑滚动页面到指定锚点链接的方法
10-23
总结起来，jQuery实现平滑滚动页面到指定锚点链接的关键在于利用事件处理（`click`事件）、DOM操作（获取`href`属性）以及第三方插件提供的平滑滚动方法。这种方法能够提升用户体验，使页面导航更加流畅。同时，...
jQuery.rar_JavaScript/JQuery_JavaScript_
08-11
**jQuery——JavaScript的璀璨明珠** ...深入学习jQuery，不仅可以提高开发效率，还能让你的网页交互更加生动有趣。记得实践是检验真理的唯一标准，多做练习，理论结合实际，你将更好地掌握jQuery的精髓。
人工智能和大数据如何改变企业？
雪兽软件
10-29 318
尽管人工智能和大数据具有显著优势，但在应用它们时也存在挑战。必须考虑伦理问题，例如隐私和人工智能算法中的潜在偏差。总之，人工智能和大数据不仅在改变公司内部的营销方式，还在改变这些实体制定战略决策的方式。这些技术能够更好地了解消费者、定制营销努力并提供量身定制的推荐，从而提高客户满意度并带来销售额的增长。适应这些创新的公司不仅将保持在竞争的前沿，还将最大限度地利用市场机会。本文转载自雪兽软件更多精彩推荐请访问雪兽软件官网。
《使用Gin框架构建分布式应用》阅读笔记：p234-p250
codists的博客
10-29 1029
书里使用的是RabbitMQ(https://www.rabbitmq.com/)，这里补充一点说明：a、访问管理页面从3.8版本开始，管理插件(rabbitmq_management)默认不器用。需要先启用才能使用访问管理页面。b、默认帐号、密码如果启动容器的时候未设置密码，账号、密码默认是guest、guest。c、各端口作用client端通连接端口：5672页面管理访问端口： 15672服务间通信端口：25672d.管理页面Overview > Totals 缺少图exit。
二百七十三、Kettle——ClickHouse中增量导入数据准确性统计表数据（1天1次）
最新发布
tiantang2renjian的博客
10-31 971
Kettle——ClickHouse中增量导入数据准确性统计表数据（1天1次）
【Leecode】Leecode刷题之路第35天之搜索插入位置
工一木子
10-29 244
1.二分查找思想（天下大势，分久必合，合久必分）：分治思想（大数据也用到了这种思想）代码示例：（Java）代码示例：（Java）
Java 入门系列（1）：总篇
Chen7Chan的博客
10-30 477
新的编程之旅--Java站
中药大数据（四）：数据预处理+管理端的功能实现
roccreed的专栏
10-30 430
中药材产地可视化：内含全国省份的中药材种类分布地图，这个数据是从scrapy爬虫爬取到的数据进行提取之后使用echarts可视化进行提取的。提供主页功能：管理员可以直观查看系统数据情况、用户登录的信息、3D词云。用户可以向后台管理员发送中药药材和药方的纠错申请，管理员可以进行处理。数据爬取功能：基于scrapy爬虫进行中药药材数据和药方数据的爬取。比如我们输入了青酒缸，在中国地图上金色的点位展示了产地的信息。数据预处理：从药材数据中提取药材的产地信息。用户信息管理：可以进行用户增删改查的操作。
大数据治理在企业信息化建设中的应用与挑战
Davina_yu的博客
10-31 637
解释什么是大数据治理，包括数据生命周期管理、数据质量控制等。大数据治理是一种系统化的管理方法，旨在确保组织能够有效地管理和利用其大数据资产。它涉及到一系列策略、政策、标准和程序，以确保数据在整个生命周期中的质量、安全、合规性以及最大化的价值。大数据治理的目标是在保护数据的同时，促进数据的可用性、可靠性和价值创造。本文探讨了大数据治理的基本概念及其重要性，并详细分析了实施大数据治理过程中可能遇到的各种挑战及相应的对策。
深入学习jQuery：选择器、DOM操作、事件与动画
"本章内容主要涵盖了jQuery的核心知识，包括jQuery选择器、DOM操作、事件处理和动画基础。此外，还简要回顾了ASP.NET Ajax框架的组成和部分控件。本章旨在帮助学习者熟练掌握jQuery的基本用法，能够有效地选取页面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值