菜单 搜索
首页 前端知识 【jQuery】 第三章

【jQuery】 第三章

2024-07-27 22:07:07 前端知识 前端哥 640 622 我要收藏

一.使用jquery操作DOM

dom : 文档对象模型    就是HTML元素  

js中如何操作DOM节点
document.write("<p>我是p标签</p>");        
缺点:无法在指定的位置生成元素


$()   函数的2个用法:
用法1:放入一个字符串(选择器)表示获取元素   例如$("p") $("#abc")  $(".del") 
用法2:放入一个函数，表示文档就绪函数   例如  $(function(){代码...})

用法3:如下所示

jquery创建节点的方法如下：
1.创建节点 语法如下:
$("xxxxx"); xxx表示你要创建的dom元素   例如  $("<p>我是p标签<p>");

此时仅仅是创建了节点.理解为是孤儿节点.  需要将其插入到某个节点中.
例如 放入body标签中 方法div标签中等等.


插入方法1:append() 表示插入到指定元素内部的尾端.
语法: $("aa").append("bb")  表示将bb插入到aa内部的尾端

需求如下:
在div的尾端插入一个值为555的p标签

1.创建一个值为555的p标签
let a =  $("<p>555<p>");
//调用方法即可
$("div").append(a);


插入方法2:prepend() 表示插入到指定元素内部的首端.
语法: $("aa").prepend("bb")  表示将bb插入到aa内部的首端


需求如下:
在div的首端插入一个值为000的p标签
//1.创建一个值为000的p标签
let a =  $("<p>000<p>");
//调用方法即可
$("div").prepend(a);

插入方法3:after() 表示插入到指定元素的后面. 兄弟关系
语法: $("aa").after("bb")  表示将bb插入到aa的后面


需求如下:
在111的后面插入一个1.5 1.5 1.5
1.创建一个值为000的p标签
let a =  $("<p>1.5 1.5 1.5<p>");
调用方法即可
$("p:eq(0)").after(a);

插入方法4:before() 表示插入到指定元素的前面. 兄弟关系
语法: $("aa").before("bb")  表示将bb插入到aa的前面


需求如下:
在333的前面插入一个2.5 2.5 2.5
1.创建一个值为2.5 2.5 2.5的p标签
let a =  $("<p>2.5 2.5 2.5<p>");
调用方法即可
$("p:eq(2)").before(a);


上述的方法 可以实现 在任意位置创建新的节点.


下述的方法 可以实现 删除任意位置的节点:

方法1:  remove()
语法如下:  $("xx").remove();  将xx元素彻底删除  不仅删除了值 而且删除了标签  

需求如下: 将444的p标签删除

$("p:eq(3)").remove();

方法2:  empty()  清空
语法如下:  $("xx").empty();  将xx元素删除值 但是不删除标签  

需求如下: 将444的p标签删除

$("p:eq(3)").empty();

克隆节点
语法:  $("xxx").clone();  将xxx元素复制一份
注意事项:上一步仅仅只是复制   此时理解为孤儿节点. 任然需要通过append  prepend  after  before进行粘贴

例如:将111复制一份到444的后面

let a = $("p:eq(0)").clone();
$("p:eq(3)").after(a);

二.无聊小案例1

!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button>按钮</button>
		
		
		<script src="js/jquery.js"></script>
		<script>
			//需求如下:点击按钮,实现按钮的复制.1-2-4-8-16-32-64
			$("button").click(function(){
				// alert(123);
				let a  = $("button:eq(0)").clone(true);
				
				$("button").after(a);
			});
			
			//备注:clone仅仅是复制了样式  如果想要复制功能 只需要在clone()加上一个true

		</script>
	</body>
</html>

三.show和hide方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button>按钮</button> <br>
		<img src="img/0.jpg"> 
		
		<script src="js/jquery.js"></script>
		<script>
			
			//$("xx").hide();隐藏XX元素
			//$("xx").show();显示XX元素
			//$("xx").toggle();来回切换：显示或隐藏XX元素 
			
			$("button").click(function(){
				
				// if($("img").css("display")=="inline"){
				// 	$("img").hide();
				// }else{
				// 	$("img").show();
				// }
				
				$("img").toggle();

			});
		</script>
	</body>
</html>

四.addClass()和removeClass()方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.a{
				font-size: 50px;
			}
			
			.b{
				color: red;
			}
			
			.c{
				background-color: aqua;
			}
		</style>
		
	</head>
	<body>
		<p>你好</p>
		
		
		<script src="js/jquery.js"></script>
		<script>
			
			//$("xx").addClass("a");给元素添加类名为a
			//$("xx").removeClass("aa);给元素移除类名为a
			
			
			// $("p").addClass("a");
			// $("p").addClass("b");
			// $("p").addClass("c");
			
			//jquery对象的特点:  调用任意方法的返回值 依然是它本身
			$("p").addClass("a").addClass("b").addClass("c").click(function(){
				alert(123);
			}).mouseover(function(){
				alert(567)
			}).removeClass("c");
			
			
		</script>
	</body>
</html>

五.如何获取当前元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<button>按钮1</button>
		<button>按钮2</button>
		<button>按钮3</button>
		<button>按钮4</button>
		<button>按钮5</button>
		<button>按钮6</button>
		<button>按钮7</button>
		
		<script src="js/jquery.js"></script>
		<script>
			
			//$("xx").index();返回当前元素在兄弟中下标
			
			$("button").click(function(){
				// $(this);获取当前的元素
				alert(  $(this).index()  )	
			});
			
		</script>
	</body>
</html>

六.轮播图简化版

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			img{
				width: 400px;
				height: 150px;
			}
			
			li{
				float: left;
				margin-left: 30px;
				color: pink;
			}
			
			ul{
				margin-left: 300px;
				margin-top: -20px;
				position: absolute;
			}
			
			
			
		</style>
	</head>
	<body>
		<div align="center">
			<img src="img/0.jpg" />
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		
		
		
		
		<script src="js/jquery.js"></script>
		<script>
			$("li").mouseover(function(){
				//获取当前li标签的下标
				let index = $(this).index();
				$("img").attr("src","img/"+index+".jpg");
				indexImg = index;
				$("li").css("color","pink");
				$("li:eq("+index+")").css("color","red");
			})
			
			
			var indexImg = 0;
			setInterval(function(){
				indexImg++;
				if (indexImg==6) {
					indexImg = 0;
				}
				
				$("img").attr("src","img/" +  indexImg +".jpg");
				
				
				$("li").css("color","pink");
				$("li:eq("+indexImg+")").css("color","red");
				
			},2000)
			
		</script>
	</body>
</html>

七.each方法讲解

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>

		
		<script src="js/jquery.js"></script>
		<script>
			
			//each方法的语法:   $("xx").each(   function(){  代码体   }   );
			//遍历xx元素.每遍历一次  就执行一次代码体.
			
			
			//这种写法 较为局限 但是也很重要  
			// $("p").text("你好");
			
			
			var arr = ["这是第1条新闻","这是第2条新闻","这是第3条新闻","这是第4条新闻","这是第5条新闻"]
			
			$("p").each(function(){
				$(this).text(  arr[$(this).index()]   );
			});
		</script>
	</body>
</html>

八.LOL选项卡特效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			div{
				width:400px;
				height: 300px;
				background-color: pink;
				margin: auto;
			}
			
			ul{
				list-style: none;
			}
			
			li{
				float: left;
				margin-left: 20px;
				font-size: 20px;
			}
			
			
		</style>
		
		
	</head>
	<body>
		
		<div>
			<ul>
				<li>综合</li>
				<li>公告</li>
				<li>赛事</li>
				<li>攻略</li>
				<li>社区</li>
			</ul>
			
			<br><br><br>
			
			<a href="#">  </a>  <br><br>
			<a href="#">  </a>  <br><br>
			<a href="#">  </a>  <br><br>
			<a href="#">  </a>  <br><br>
			<a href="#">  </a>  <br><br>
			<a href="#">  </a>  <br><br>
			
		</div>
		
		
		<script src="js/jquery.js"></script>
		<script>
			
			//暂时模拟去数据库拿数据
			
			let arr = [
				["这是第1条综合数据~~~~~~~~~~","这是第2条综合数据~~~~~~~~~~","这是第3条综合数据~~~~~~~~~~","这是第4条综合数据~~~~~~~~~~","这是第5条综合数据~~~~~~~~~~","这是第6条综合数据~~~~~~~~~~"],
				["这是第1条公告数据~~~~~~~~~~","这是第2条公告数据~~~~~~~~~~","这是第3条公告数据~~~~~~~~~~","这是第4条公告数据~~~~~~~~~~","这是第5条公告数据~~~~~~~~~~","这是第6条公告数据~~~~~~~~~~"],
				["这是第1条赛事数据~~~~~~~~~~","这是第2条赛事数据~~~~~~~~~~","这是第3条赛事数据~~~~~~~~~~","这是第4条赛事数据~~~~~~~~~~","这是第5条赛事数据~~~~~~~~~~","这是第6条赛事数据~~~~~~~~~~"],
				["这是第1条攻略数据~~~~~~~~~~","这是第2条攻略数据~~~~~~~~~~","这是第3条攻略数据~~~~~~~~~~","这是第4条攻略数据~~~~~~~~~~","这是第5条攻略数据~~~~~~~~~~","这是第6条攻略数据~~~~~~~~~~"],
				["这是第1条社区数据~~~~~~~~~~","这是第2条社区数据~~~~~~~~~~","这是第3条社区数据~~~~~~~~~~","这是第4条社区数据~~~~~~~~~~","这是第5条社区数据~~~~~~~~~~","这是第6条社区数据~~~~~~~~~~"]
			];
			
			
			
			$("li").mouseover(function(){
				
				//将所有的颜色都还原
				$("li").css("color" , "black");
				//悬停在哪里 就将li标签文字颜色改成蓝色
				$(this).css("color" , "blue");
				//将li标签对应的所有新闻展示出来
				//获取li标签的下标
				let index = $(this).index();
				
				let a_index = 0;
				$("a").each(function(){
					
					
					//注意index方法返回的是当前元素在兄弟节点的下标
					//由于a标签的兄弟不仅仅只有a还有ul标签和br标签
					// 所以这里的值不为012345  而是一堆可能没规律的数
					//解决方式:在外面加一个变量 负责计数
					// let i = $(this).index();
					// console.log(i);
					
					
					$(this).text (  arr[index][  a_index++  ] ) ;
				});	
			});
		</script>
	</body>
</html>

九.学生表格的CRUD

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			td{
				width: 400px;
				height: 30px;
			}
			
			input{
				width: 100px;
			}
			
		</style>
	</head>
	<body>
		
		<a id="show_hide" href="#">折叠信息</a> <br>
		<table border="1px" style="border: 1px solid black;text-align: center;" cellpadding="0" cellspacing="0">
			<Tr>
				<Td>编号</Td>
				<Td>姓名</Td>
				<Td>年龄</Td>
				<Td>删除</Td>
			</Tr>
		</table>
		
		<a id="add" href="#">添加学生</a>
		
		<br>
		<div style="display: none;" id="add_student_form">
			编号:<input type="text" id="id" /><br>
			姓名:<input type="text" id="name" /><br>
			年龄:<input type="text" id="age" /><br>
			  <button id="add_btn">添加</button>  <br>
		</div>
		
		
		<script src="js/jquery.js"></script>
		<script>
			$("#show_hide").click(function(){
				//xx元素的显示或隐藏  通过show 或hide方法来实现
				//缺点:需要利用2个方法,且需要判断是显示还是隐藏
				//toggle自动的进行显示和隐藏的切换
				$("table").toggle();
			});
			
			//很多学生 通过数组来存储.   1个学生拥有多个属性肯定通过obj对象来实现
			//总结就是:声明一个数组,数组内部由多个obj对象实现
			//obj对象别名:在js中我们一般习惯性的将对象称为json对象  {"key" : "value"}
			//不管JSON对象的属性是什么类型 统一使用字符串类型(暂时不说为什么，因为是规范)
			
			var students = [
				{
					"id" : "1001",
					"name": "李四",
					"age" : "20"
				},
				{
					"id" : "1002",
					"name": "王五",
					"age" : "22"
				},
				{
					"id" : "1003",
					"name": "赵六",
					"age" : "23"
				},
				{
					"id" : "1004",
					"name": "张三",
					"age" : "18"
				}
			];
			
			//遍历学生 然后输出到表格内部 渲染数据
			
			for(let i = 0 ;i<students.length;i++){
				$("table").append(   $("<tr><td class='db'>" +students[i].id+"</td><td class='db'>" +
				students[i].name+"</td><td class='db'>" +students[i].age+"</td><td><a class='del' href='#'>删除</a></td></tr>")  )
			}
			
			
			
			
			$("#add").click(function(){
				//思路:点击添加学生的超链接  显示一个新增学生的表单. 但是由于表单内部的元素较多.不方便使用append方法
				//所以:提前创建一个表单.通过显示或隐藏
				$("#add_student_form").toggle();
				
			})
			
			
			
			$("#add_btn").click(function(){
				$("table").append(   $("<tr><td class='db'>" + $("#id").val()  +"</td><td class='db'>" +  $("#name").val() +"</td><td class='db'>" + $("#age").val()  +"</td><td><a class='del' href='#'>删除</a></td></tr>")  )
				$("#id").val("");$("#name").val("");$("#age").val("");
				$("#add_student_form").hide();
				
				$(".del").click(function(){
					$(this).parent().parent().remove();
				})
				
				
				$(".db").dblclick(function(){
					//先存好值
					let val1 = $(this).text();
					//将td内部的值  替换成一个input组件
					$(this).html("<input class='update' type='text' >");
					//自动获得焦点  备注:这里没有像往常一样还在内部写了一个funtion,因为这里的需求就是获取焦点
					//此时焦点在文本框的首段  需要改成尾端
					$(".update").focus().val(val1);
					
					$(".update").blur(function(){
						let str = $(this).val();
						$(this).parent().text(str);
					})
				});
			})
			
			
			
			
			$(".del").click(function(){
				$(this).parent().parent().remove();
			})
			
			
			
			$(".db").dblclick(function(){
				//先存好值
				let val1 = $(this).text();
				//将td内部的值  替换成一个input组件
				$(this).html("<input class='update' type='text' >");
				//自动获得焦点  备注:这里没有像往常一样还在内部写了一个funtion,因为这里的需求就是获取焦点
				//此时焦点在文本框的首段  需要改成尾端
				$(".update").focus().val(val1);
				
				$(".update").blur(function(){
					let str = $(this).val();
					$(this).parent().text(str);
				})
			});
		</script>
	</body>
</html>

十.客串知识点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<p>
				<font>啊啊啊</font>
			</p>
		</div>
		<font>啊啊啊</font>
		
		<input type="text" id="a" />
		<input type="text" id="b" />
		<input type="text" id="c" />
		
		<script src="js/jquery.js"></script>
		<script>
			// $("#c").focus();
			
			
			//需求:删除font标签
			// $("font").remove();
			
			//需求:删除p
			// $("p").remove();
			
			//需求:删除font标签的父亲
			$("p").parent().remove();
			
			
		</script>
	</body>
</html>

转载请注明出处或者链接地址：https://www.qianduange.cn//article/14423.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

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

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！