轻松学习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

删除元素

替换元素

克隆元素

表单元素

快速投票

使用YOLOv8预测图像时生成相应的json文件

程序员总结分析：为什么要用原生 JavaScript 代替 jQuery？

JQuery和JS的区别有哪些？

jQuery超详细总结

jQuery 选择器

jquery的blockUI遮罩层的使用

Java 基础——构造器和方法的区别

jQuery等待video视频元素加载完成

一款漂亮的排班系统界面Html jQuery「代码片段」

使用JQuery的turn.js库来实现翻书效果

前端哥

【Web】单点登录(SingleSignOn，SSO) Keycloak OAuth 2.0 OpenID Connect JWT (JSON Web Token) SAML CAS

使用YOLOv8预测图像时生成相应的json文件

全球最快的 JSON 文件查询工具

sublime text的json快捷键

【漏洞复现】海康威视综合安防管理平台 iSecure Center applyCT fastjson 远程代码执行

在VScode下配置C/C 环境(tasks.json、launch.json、c_cpp_properties.json)

JSON基础知识与实践：轻松理解并应用JSON格式

使用Excel转JSON加载项快速将单元格转换为JSON的教程

自定义属于你的脚手架并发布到NPM仓库

【输入npm install express出现的报错】

1
JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000

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

2024-06-17 09:06:541000

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

2024-06-10 11:06:351000

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

2024-06-06 10:06:201000

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

2024-06-04 10:06:181000

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

2024-06-07 00:06:411000

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

2024-05-29 10:05:301000

8
VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000

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

2024-05-09 11:05:011000

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

2024-05-09 10:05:191000