轻松学习jQuery控制DOM_jquery平滑显示指定dom

(

)

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】

(

)

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】

(

)

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】

(

)

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】

(

)

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】

(

)

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()**方法，其可以直接将元素删除。

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jQuery-3.6.1.js"></script>
	</head>
	<body>
		<h2>二级标题标签</h2>
		<ul>
			<li>列表项第1项</li>
			<li>列表项第2项</li>
			<li>列表项第3项</li>
		</ul>
	</body>
	<script>
 $(function(){
 //获取第二个li元素，直接调用remove()就可以移除
 $('li:eq(1)').remove();
 });
 </script>
</html>

运行效果：
在这里插入图片描述
【2】删除某个元素所有子元素

在DOM编程中如果希望将某个元素的子元素全部删除，则往往需要用for循环配合hasChildNodes()来判断，并用removeChildNode()进行逐一删除。jQuery中提供了**empty()**方法来直接删除某个元素的所有子元素。

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jQuery-3.6.1.js"></script>
	</head>
	<body>
		<h2>二级标题标签</h2>
		<ul>
			<li>列表项第1项</li>
			<li>列表项第2项</li>
			<li>列表项第3项</li>
		</ul>
	</body>
	<script>
 $(function(){
 // 删除ul元素中所有的子元素
 $('ul').empty();
 });
 </script>
</html>

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

替换元素

在jQuery中，替换元素提供了replaceWith()和replaceAll()两种方法；两种方法的用法区别可以通过下面案例观察。

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jQuery-3.6.1.js"></script>
	</head>
	<body>
		<ul>
			<li>列表项第1项</li>
			<li>列表项第2项</li>
			<li>列表项第3项</li>
		</ul>
	</body>
	<script>
 $(function(){
 $('li:eq(1)').replaceWith('<li>我是replaceWith方法替换的li元素</li>');
 $('<li>我是replaceAll方法替换的li元素</li>').replaceAll($('li:eq(2)'));
 });
 </script>
</html>

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

克隆元素

很多时候，我们希望执行对某个目标对象的复制操作，jQuery中就提供了clone()方法来完成这项任务。

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jQuery-3.6.1.js"></script>
	</head>
	<body>
		<div>
			<ul>
				<li>列表项第1项</li>
				<li>列表项第2项</li>
				<li>列表项第3项</li>
			</ul>
		</div>
	</body>
	<script>
 $(function() {
 //获取ul元素
 var result1 = $('ul').clone();
 //将复制的ul元素添加到div元素中
 $('div').append(result1);
 });
 </script>
</html>

运行效果：
在这里插入图片描述
另外，clone()还可以接受布尔对象作为参数。当该参数为true时，除了克隆元素本身外，它所有携带的事件方法也将一起被复制。

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jQuery-3.6.1.js"></script>
	</head>
	<body>
		<div>
			<ul>
				<li>列表项第1项</li>
				<li>列表项第2项</li>
				<li>列表项第3项</li>
			</ul>
		</div>
	</body>
	<script>
 $(function() {
 //给ul元素绑定鼠标点击事件
 $('ul').on('click', function() {
 alert('你点击了ul');
 })
 
 //获取ul元素并克隆,clone()方法中可以传递一个布尔值，默认值为false，表示不会复制元素上绑定的时间，如果为true，表示在复制元素的同时，会复制元素上绑定的事件
 var result1 = $('ul').clone(true);
 console.log(result1);
 
 //将复制的ul元素添加到div元素中
 $('div').append(result1);
 });
 </script>
</html>

运行效果：

在这里插入图片描述

表单元素

表单元素form是与用户交互很频繁的元素之一，它通过各种形式接收用户的数据，包括下拉框、单选项、多选项、文本框等。在表单元素的各个属性中，value往往是最受关注的。jQuery提供了强大的val()方法来处理与value相关的操作。

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>value属性值操作</title>
		<script src="js/jQuery-3.6.1.js"></script>
	</head>
	<body>
		<input type="checkbox" value="basketball"/>篮球
	</body>
	<script>
 $(function(){
 //获取标签的value属性值
 var result =$('input').val();
 console.log(result);
 
 //设置标签的value属性值
 $('input').val('篮球');
 var result2 =$('input').val();
 console.log(result2);
 });
 </script>
</html>

运行效果：

在这里插入图片描述

快速投票

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

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

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

	<input type="checkbox" value="basketball"/>篮球
</body>
<script>

$KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots值 var result =$ (‘input’).val();
console.log(result);

//设置标签的value属性值
$(^{'} in p u t^{'}) . v a l (^{'} 篮球^{'}); v a rres u lt 2 =$ (‘input’).val();
console.log(result2);
});


运行效果：


![在这里插入图片描述](https://img-blog.csdnimg.cn/5e6ec558189040e0b1f9181350d88241.png)


### 快速投票








[外链图片转存中...(img-jo09pXhj-1714207363083)]
[外链图片转存中...(img-TuWTGiz6-1714207363083)]
[外链图片转存中...(img-oqbJyokA-1714207363084)]

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

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

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**

轻松学习jQuery控制DOM_jquery平滑显示指定dom

删除元素

替换元素

克隆元素

表单元素

快速投票

jQuery 选择器

jQuery框架实现元素显示及隐藏动画【附案例分析】

猴子也能学会的jQuery第一期——什么是jQuery

15个经典面试问题及答案，html5基础入门教程学习之canvas基本用法，统统给你解决

整理下HTML4,HTML5学习笔记

JavaScript之jQuery番外篇【打地鼠游戏的制作讲解】(1)

大数据最新轻松学习jQuery控制DOM_jquery平滑显示指定dom(1)

学习CSS Flexbox 玩flexboxfroggy flexboxfroggy1-24关详解

前端提高篇（102）：jQuery高级方法callbacks、deferred

jQuery实现简单抽奖大转盘

前端哥

读魏书生的心得体会

jQuery 选择器

jQuery框架实现元素显示及隐藏动画【附案例分析】

猴子也能学会的jQuery第一期——什么是jQuery

Vue ts项目中封装echarts组件

echarts添加水印背景，以及鼠标经过水印区域不显示tooltip的问题

Vue puppeteer插件安装问题解决方案

Vue中public/assets目录区别

【VUE】7、VUE项目中集成watermark实现页面添加水印

【Vue】如何使用Webpack实现打包操作

1
在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000

2
成为优秀的TS体操高手之 TS 类型体操前置知识储备

2024-06-10 11:06:351000

3
django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000

4
html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000

5
jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000

6
基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000

7
VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000

8
轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000

9
HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000

10
UE4.27支持HTML5

2024-05-07 13:05:261000