js及jQuery总结（八）

09.01_操作文本内容

操作文本内容
- text():获取全部匹配元素的文本内容
- text(val):设置全部匹配元素的文本内容
注意：
- 注意1：元素原来已经存在内容，会被新的内容替换掉
- 注意2：设置文本内容的时候，即使字符串中包含html标签，也会被认为普通的文本

操作文本内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--引入jQuery文件-->
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<div>
			<p>hello</p>
		</div>
	</body>
	<script>
		$(document).ready(function(){
			/*
			 * text():获取全部匹配元素的文本内容
			 * text(val):设置全部匹配元素的文本内容
			 * 
			 * 注意1：元素原来已经存在内容，会被新的内容替换掉
			 * 注意2：设置文本内容的时候，即使字符串中包含html标签，也会被认为普通的文本
			 */
			//获取文本内容
			console.log($("div").text());//hello
			
			//设置文本内容
			//$("div").text("world");
			$("div").text("<span>aaaa</span>");
		})
	</script>
</html>

09.02_操作HTML内容

操作HTML内容
- html():获取第一个匹配的元素的html内容
- html(val):设置全部匹配的html内容
注意：
- 内容中如果包含html元素，则会被识别成为html标签

操作HTML内容案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--引入jQuery文件-->
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		
		<div>
			<p>hello</p>
		</div>
	</body>
		
	<script>
		$(document).ready(function(){
			
			/*
			 * html():获取第一个匹配的元素的html内容
			 * 
			 * html(val):设置全部匹配的html内容
			 * 注意：内容中如果包含html元素，则会被识别成为html标签
			 * 
			 */
			
			//获取html内容
			console.log($("div").text());//hello
			console.log($("div").html());//<p>hello</p>
			
			
			//设置html内容
			//$("div").html("bbbbb");
			$("div").html("<font color='red'>hahhhhahahahh</font>");
			
		})
	</script>
</html>

09.03_操作元素值

操作元素值
- val():用来获取第一个匹配到的元素的value值
- val(val):设置所有匹配的值
- val(arr):用于给checkbox,select,radio等设置值，参数为字符串数组

操作元素值案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--引入jQuery文件-->
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		
		<input type="text" value="1234" />
		<input type="text" value="4567" />
		
		<select>
			<option>111</option>
			<option selected="selected">222</option>
			<option selected="selected">333</option>
		</select>
	</body>
		
	<script>
		$(document).ready(function(){
			/*
			 * val():用来获取第一个匹配到的元素的value值
			 * val(val):设置所有匹配的值
			 * val(arr):用于给checkbox,select,radio等设置值，参数为字符串数组
			 */
			
			//value
			//注意：获取只匹配到的第一个
			console.log($("input").val()); //1234
			
			//设置值
			//注意：给所有匹配到的元素设置值
			$("input").val("aaaa");
			
			//获取的最后一个
			console.log($("select").val());
			
			$("select").val(['aaa','bbb']);
		})
	</script>
</html>

09.04.操作元素的css样式

添加css选择器或者删除
- addClass()：添加css类选择器的类名
- removeClass()；删除类选择器的类名
- toggleClass()；如果存在就删除，如果不存在就添加

操作元素的css样式案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{
				width: 200px;
				height: 100px;
			}
			.change1{
				color: red;
			}
			.change2{
				background-color: blue;
			}
		</style>
		<!--引入jQuery文件-->
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<div class="box"></div>
	</body>
	
	<script>
		$(document).ready(function(){
			/*
			 * 添加css选择器或者删除
			 * addClass()：添加css类选择器的类名
			 * removeClass()；删除
			 * toggleClass()；如果存在就删除，如果不存在就添加
			 */
			
			$("div").addClass("change1");
			$("div").removeClass("change1");
			
			$("div").toggleClass("change2");
		})
	</script>
</html>

修改css样式
- css(name):返回匹配到的第一个元素的样式属性值
- css(name,value):为所有匹配到的设置属性和值
- css({键：值，。。。。})

修改css样式案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--引入jQuery文件-->
		<script src="js/jquery-3.3.1.js"></script>
		<style type="text/css">
		
		#div2{
			width: 150px;
			height: 250px;
			background-color: palevioletred;
		}
	</style>
	</head>
	<body>
		<div style="width: 100px; height: 200px; background-color: aqua;" id="div1"></div>
		<div id="div2"></div>
		<div id="div3" style="width: 100px; height: 100px;"></div>
		<div id="div4"></div>
	</body>
	
	<script>

	
	
		// 获取css样式的值
		// css("样式名称")  ： 返回样式的值
		// 行内样式
		console.log($("#div1").css("background-color"));
		// 内部样式
		console.log($("#div2").css("width"));
		
		
		// 修改css样式
		// css("样式名称", "样式值")    每次只能设置一个样式
		$("#div3").css("background-color", "brown");
		
		// css({"样式1":"值1", "样式2":"值2", ...})   同时设置多个样式
		$("#div4").css({"background-color":"blue", "width":"300px", "height":"300px"});
	
	</script>
</html>

09.05_ jQuery操作DOM(创建节点)

创建节点
- 创建一个段落标签并将其添加到div下面 — 相当于 createElement
- 创建元素节点的同时创建了文本节点 — 相当于 createTextNode
- 创建元素属性（id、class、、、）
- 添加append(节点) — 相当于 appendChild

创建节点案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--引入jQuery文件-->
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<div></div>
	</body>
	
	<script>
		$(document).ready(function(){
			/*
			 * 相当于createElement
			 * 1.创建元素节点：
			 * $(html标签)
			 * 2.创建文本节点
			 * 3.创建属性节点
			 */
			//1. createElement
			//创建一个段落标签并将其添加到div下面    
			var $jqObj1 = $("<p></p>");
			//append     appendChild
			$("div").append($jqObj1);
			
			//2. 创建元素节点的同时创建了文本节点      createTextNode
			var $jqObj2 = $("<p>hello</p>");
			$("div").append($jqObj2);
			
			//3. 创建元素属性（id、class、、、）
			var $jqObj3 = $("<p id='txt'>hello</p>");
			$("div").append($jqObj3);
		})
	</script>
</html>

09.06_ jQuery操作DOM(插入节点)

插入节点
在元素内部插入节点
- obj.append（obj）为所有匹配到的元素追加节点
- obj.appendTo(obj) 为所有匹配到的元素追加节点

在元素内部插入节点案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--引入jQuery文件-->
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<div>
		</div>
	</body>
	<script>
		$(document).ready(function(){
			/*
			 * obj1.append(obj2):为所有匹配到的元素追加内容
			 * obj1.appendTo(obj2):
			 */
			var $p_1 = $("<p>hello</p>");
			var $p_2 = $("<p>hello</p>");
			
			var $div = $("div");
			
			//在div中追加p子标签
			$div.append($p_1);
			
			//将p_2追加到p_1
			$p_2.appendTo($p_1);
		})
	</script>
</html>

在元素外部插入节点
- after(content):在每个匹配的元素之后插入内容
- insertAfter(content):将匹配到的元素插入到指定元素后面
- before()
- insertBefore()
- 内部插入：形成父子标签或者先辈和后辈标签
- 外部插入：形成同辈标签【兄弟标签】

在元素外部插入节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--引入jQuery文件-->
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<p id="p">*************</p>
		<p id="p">*************</p>
	</body>
	
	<script>
		$(document).ready(function(){
			/*
			 * after(content):在每个匹配的元素之后插入内容
			 * insertAfter(content):将匹配到的元素插入到指定元素后面
			 * before()
			 * insertBefore()
			 */
			//获取p标签对象
			var $p = $("p");
			
			//创建节点
			var $p_1 = $("<p>hello</p>");
			var $p_2 = $("<p>content</p>");
			// 效果有什么区别
			$p.after($p_1);
			$p_2.insertAfter($p);
		})
	</script>
</html>

09.07_ jQuery操作DOM(删除节点)

删除节点
- obj.remove(); 将匹配到的元素直接删除
- obj.detach()；和remove相同
- obj.empty(); 清空节点，如果一个标签有子标签，则全部会被清空

删除节点案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--引入jQuery文件-->
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<div>
			<p>harder</p>
			<p>worker</p>
		</div>
	</body>
	
	<script>
		$(document).ready(function(){
			/*
			 * 需要被删除的节点.remove():
			 * 		将匹配到的元素直接删除
			 * 需要被删除的节点.detach()；
			 * 		和remove相同
			 * 需要被删除的节点.empty():
			 * 		清空节点，如果一个标签有子标签，则全部会被清空
			 */
			
			//将worker对应的p标签删除了
			//返回值为被删除节点的引用，还可以继续使用【当做一个标签对象使用】
			//var $jqObj1 = $("div p:eq(1)").remove();
			//$("div").append($jqObj1);
			
			var $jqObj2 = $("div p:eq(1)").detach();
			
			//注意：删除当前节点以及子节点
			$("div p:eq(1)").empty();
		})
	</script>
</html>

09.08_ jQuery操作DOM(复制节点 & 替换节点)

复制节点 & 替换节点
- 复制节点：
  - obj.clone() 返回div的一个副本
- 替换节点：
  - replaceAll(selector):使得匹配到的元素替换选择器所匹配到的元素
  - replaceWith(content):将所有匹配到的元素替换为content【文本内容，html内容】

复制和替换节点案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--引入jQuery文件-->
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		div1:<div id="div1"></div>
		div2:<div id="div2"></div>
	</body>
	
	<script>
		$(document).ready(function(){
			//复制节点
			/*
			 * clone()返回div的一个副本
			 */
			//返回div的一个副本
			var $jqDiv = $("div").clone();	
			
			//替换节点
			/*
			 * replaceAll(selector):
			 * 		使得匹配到的元素替换选择器所匹配到的元素
			 * replaceWith(content):
			 * 		将所有匹配到的元素替换为content【文本内容，html内容】
			 */
			
			$("#div1").replaceWith("<div>替换div1文本</div>");
			$("<div>替换div2文本</div>").replaceAll("#div2");
		})
	</script>
</html>

09.09_ jQuery动画(隐藏/显示)

隐藏/显示
- btn.bind(“click”,function) 给按钮添加绑定事件
- show(动画持续的时间，回调函数)
- hide(动画持续的时间，回调函数)

隐藏/显示案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div{
				width: 400px;
				height: 400px;
				background-color: blue;
			}
		</style>
		<!--引入jQuery文件-->
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<div id="div"></div>
		<button id="btn1">hide</button>
		<button id="btn2">show</button>
	</body>
	
	<script>
		$(document).ready(function(){
			/*
			 * show(动画持续的时间，回调函数)  
			 * hide(动画持续的时间，回调函数)
			 * 单位为毫秒
			 * 回调函数【callback】：当动画执行完成之后需要的操作
			 * slow：600ms
			 * normal:400ms
			 * fast:200ms
			 */
			//隐藏
			//给button绑定一个响应事件
			$("#btn1").bind("click",function(){
				$("#div").hide(200,function(){
					alert("隐藏起来了");
				})
			})
			
			//显示
			$("#btn2").bind("click",function(){
				$("#div").show(1000,function(){
					alert("显示出来了");
				})
			})
		})
	</script>
</html>

09.10_ jQuery动画(切换可见状态(隐藏/显示))

切换可见状态(隐藏/显示)
- btn.bind(“click”,function) 给按钮添加绑定事件
- toggle()：
  - 实现切换元素的可见状态
  - 如果元素是可见的，则隐藏，如果元素是隐藏的，则设置可见

切换可见状态(隐藏/显示)案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
				background-color: blue;
			}
		</style>
		<!--引入jQuery文件-->
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<div id="id00">hello</div>
		<div>world</div>
		<button id="btn1">切换状态</button>
	</body>
	
	<script>
		$(document).ready(function(){
			//toggle()：实现切换元素的可见状态
			//如果元素是可见的，则隐藏，如果元素是隐藏的，则设置可见
			$("#btn1").bind("click",function(){
				$("#id00").toggle(1000,function(){
					alert("切换完成");
				})
			})
		})
	</script>
</html>

09.11_ jQuery动画(淡入/淡出)

淡入/淡出动画
- fadeIn(动画持续的时间，回调函数)
  - 淡入
- fadeOut(动画持续的时间，回调函数)
  - 淡出
- fadeTo(动画持续的时间，透明度的终点值，回调函数)
  - 透明度变化

淡入/淡出案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#box{
				width: 100px;
				height: 100px;
				background-color: blue;
				display: none;
			}
		</style>
		<!--引入jQuery文件-->
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<div id="box">hello</div>
		
		<button id="btn1">淡入</button>
		<button id="btn2">淡出</button>
		<button id="btn3">改变透明度</button>
		<button id="btn4">综合</button>
	</body>
	
	<script>
		$(document).ready(function(){
			//fadeIn(动画持续的时间，回调函数)
			//fadeOut(动画持续的时间，回调函数)
			//fadeTo(动画持续的时间，透明度的终点值，回调函数)
			
			//淡入
			$("#btn1").bind("click",function(){
				$("#box").fadeIn(2000,function(){
					alert("over");
				})
			})
			
			//淡出
			$("#btn2").bind("click",function(){
				$("#box").fadeOut(2000,function(){
					alert("over");
				})
			})
			
			//设置透明度
			$("#btn3").bind("click",function(){
				$("#box").fadeTo(2000,0.15,function(){
					alert("over");
				})
			})

			// 综合案例
			$("#btn4").bind("click",function(){
				$("#box").fadeIn(2000,function(){
					$("#box").fadeTo(2000,0.15,function(){
						alert("over");
					})
				})
			})
		})
	</script>
</html>

09.12_ jQuery动画(滑动显示/隐藏(抽屉效果))

滑动显示/隐藏
- slidedown(动画持续的时间，回调函数):
  - 滑动显示
- slideup(动画持续的时间，回调函数)：
  - 滑动隐藏
- slideToggle(动画持续的时间，回调函数):
  - 切换状态,作用就等同于同时使用slideDown和slideUp

滑动显示/隐藏案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
				background-color: blue;
				display: none;
			}
		</style>
		<!--引入jQuery文件-->
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<div id="id">hi man</div>
		
		<button id="btn1">滑动显示</button>
		<button id="btn2">滑动隐藏</button>
		<button id="btn3">切换状态</button>
	</body>
	
	<script>
		$(document).ready(function(){
			//动画持续的时间，回调函数
			//slidedown():滑动显示
			//slideup()：滑动隐藏
			//slideToggle():
			
			//滑动显示
			$("#btn1").bind("click",function(){
				$("#id").slideDown(2000,function(){
					alert("over");
				})
			})
			
			//滑动隐藏
			$("#btn2").bind("click",function(){
				$("#id").slideUp(2000,function(){
					alert("over");
				})
			})
			
			//切换状态
			//作用就等同于同时使用slideDown和slideUp
			$("#btn3").bind("click",function(){
				$("#id").slideToggle(2000,function(){
					alert("over");
				})
			})
		})
	</script>
</html>

09.13_ jQuery动画(自定义动画)

animate():用于创建自定义动画
- $(selector).animate(设置的属性，动画持续的时间，callback)
  - 设置的属性:css的属性【以键值对的形式设置的，单个或者多个】
  - 动画持续的时间：单位为毫秒，取值：slow,fast,normal
  - callback:动画执行完成之后需要执行的操作，一般情况下callback都使用匿名函数充当

自定义动画案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-3.3.1.js"></script>
		<style type="text/css">
			div{
				background-color: cyan;
				width: 100px;
				height: 100px;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<button>开始动画</button>
		<div></div>
		<script>
			$(document).ready(function(){
				//给按钮绑定事件
				$("button").bind("click",function(){
					//animate()
					//同时设置多个属性
					$("div").animate({
						left:'250px',
						height:'150px',
						width:'150px',
						opacity:'0.5'
					},3000,function(){
						alert("over");
					});
				})
			})
		</script>
	</body>
</html>

09.14_ jQuery动画(动画综合案例–萤火虫)

动画综合案例–萤火虫

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-3.3.1.js" ></script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				background-image: url(../img/bg.jpg);
			}
			
			#box{
				width: 100%;
				height: 100%;
			}
			
			img{
				width: 20px;
				height: 20px;
				position: absolute;
				background: none;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
	</body>
	<script type="text/javascript">
		$(document).ready(function(){
			setInterval(function(){
				// 创建图片标签，存放萤火虫
				var $fireworm = $("<img src='../img/萤火虫.jpg' />");
				// 把萤火虫添加到页面
				$("div").append($fireworm);
				// 随机定位萤火虫的位置
				var left00 = Math.ceil(Math.random()*1000);
				var top00 = Math.ceil(Math.random()*500);
				// 把随机的位置设置给萤火虫
				$fireworm.css({
					left:left00,
					top:top00
				})
				
				function fly(){
					var toLeft = Math.ceil(Math.random()*1000);
					var toTop = Math.ceil(Math.random()*500);
					
					// 设置动画，让萤火虫动起来
					$fireworm.animate({
						left:toLeft,
						top:toTop
					},3000,function(){
						fly();
					})
				}
				fly();
			},3000)
		})
	</script>
</html>

09.15_ jQuery中的事件

页面加载事件
- $(document).ready(function(){})

页面加载事件案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
	</body>
		
	<script>
		//事件模块中的一个最重要的函数,效率相对较高
		/*$(document).ready(function(){
			
			
		})
		
		//可以简写
		//$()不带document的时候其实默认就是document
		$().ready(function(){
			
		})
		*/
		
		//继续简写
		$(function(){
			
		})
		
		/*
		 * window.onload() 和 $(document).ready()
		 * $(document).ready()代替了传统的window.onload()
		 * 
		 * 1.在一个页面中可以无限次的使用$(document).ready（），各个方法之间互不影响，
		 *  会按照在代码中出现的顺序执行，window.onload()在一个页面中只能使用一次
		 * 
		 * 2.当一个文档完全下载到浏览器的时候【包括关联的文件，图片，】，就会响应window.onload()，
		 *   $(document).ready当只有文本下载到浏览器，不包括图片，文件等，就会直接响应
		 * 	 问题：当耗时的操作【文件，图片等】没有被加载出来的时候，$(document).ready就会被执行，
		 *        如果在后面的代码中要使用图片，则获取不到
		 * 	解决：window.load()不可以加载
		 * 
		 */
		
		$(window).load(function(){
			
		})
	</script>
</html>

如有错误，请在下面评论。好及时更正，谢谢！

js及jQuery总结（八）

09.01_操作文本内容

操作文本内容

09.02_操作HTML内容

操作HTML内容案例

09.03_操作元素值

操作元素值案例

09.04.操作元素的css样式

操作元素的css样式案例

修改css样式案例

09.05_ jQuery操作DOM(创建节点)

创建节点案例

09.06_ jQuery操作DOM(插入节点)

在元素内部插入节点案例

在元素外部插入节点

09.07_ jQuery操作DOM(删除节点)

删除节点案例

09.08_ jQuery操作DOM(复制节点 & 替换节点)

复制和替换节点案例

09.09_ jQuery动画(隐藏/显示)

隐藏/显示案例

09.10_ jQuery动画(切换可见状态(隐藏/显示))

切换可见状态(隐藏/显示)案例

09.11_ jQuery动画(淡入/淡出)

淡入/淡出案例

09.12_ jQuery动画(滑动显示/隐藏(抽屉效果))

滑动显示/隐藏案例

09.13_ jQuery动画(自定义动画)

自定义动画案例

09.14_ jQuery动画(动画综合案例–萤火虫)

动画综合案例–萤火虫

09.15_ jQuery中的事件

页面加载事件案例

猜你喜欢