2.6 jquery2

最新推荐文章于 2024-07-23 21:36:00 发布

贾国鹏

最新推荐文章于 2024-07-23 21:36:00 发布

阅读量90

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/jiaguopeng/article/details/113447490

版权

2.6 jquery2

2.6jquery2

2.6jquery2

在这里插入图片描述

1.常用方法补充

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.cls1{
				background-color: blanchedalmond;
			}
			.cls2{
				border: 1px solid black;
			}
			.cls3{
				width: 200px;
				height: 200px;
			}
			.cls4{
				color: lightcoral;
			}
		</style>
		<script src="./js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(function(){
				$("#testdiv").addClass("cls4");
				$("#testdiv").removeClass("cls2");
			})	
		</script>
	</head>
	<body>
		<div id="testdiv" class="cls1 cls2 cls3">
			testdiv
		</div>
	</body>
</html>

2.jqueryDom操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(function(){
				$("#myul li").click(function(){
					console.log("触发了");
				})
				$("#addEleBtn").click(function(){
					/* 
					jquery节点操作
					 新建节点
					 $('xxxxxxx')
					 已存在节点
					 $("#myli")
					 
					 1.子节点操作
					 
					 append        后
					 appendTo
					 prepend       前
					 prependTo
					 
					 2.同级节点操作
					 after          后
					 insertAfter
					 before         前
					 insertBefore
					 
					 3.替换节点
					 replaceWith    
					 replaceAll    对象颠倒
					 
					 4.复制元素
					 clone(bol)   bol决定复制出来的元素 绑定的事件是否复制
					 
					 5.删除节点
					 remove      清除节点和子节点
					 empty       清除子节点
					 
					 查找
					 6.所有子节点
					 children
					 
					 7.同级节点
					 next
					 prev
					 siblings
					 
					 8父节点
					 parent
					 parents    一直找到根节点
					 
					 */
					
					//$("#myul").append('<li><input type="password"/></li>');
										
					//$("#myli").appendTo($("#myul2"));
					
					//$("#myul").prepend('<li><input type="checkbox"/></li>');
					
					//$('<li><input type="checkbox"/></li>').prependTo($("#myul"));
					
					//$("#myli").after('<li><input type="radio"/></li>');
					//$('<li><input type="radio"/></li>').insertAfter($("#myli"))
					//$("#myli").before('<li><input type="radio"/></li>');
					
					//$("#myul2 li").replaceWith('<li><input type="button"/></li>');
					
					//$('<li><input type="button" value="测试按钮"/></li>').replaceAll($("#myul2 li"));
					
					$("#myli").clone(false).appendTo($("#myul"));
					
				})
				$("#delEleBtn").click(function(){
					$("#myul").remove();
				})
				$("#getEleBtn").click(function(){
					//console.log( $("#myul2").children());
					//console.log( $("#myli").siblings());
					console.log( $("#myli").parents());
				})	
			})
		</script>
	</head>
	<body>
		<input id="addEleBtn" type="button" value="添加元素" />
		<input id="delEleBtn" type="button" value="删除元素" />
		<input id="getEleBtn" type="button" value="获取元素" />
		<ul id="myul">
			<li ><input type="password"/></li>
			<li ><input type="password"/></li>
			<li id="myli"><input type="password"/></li>
			<li ><input type="password"/></li>
			<li ><input type="password"/></li>
			
		</ul>
		
		<ul id="myul2">
			<li ><input type="password"/></li>
			<li ><input type="password"/></li>
			<li ><input type="password"/></li>
			<li ><input type="password"/></li>
		</ul>
	</body>
</html>

3.jqueryDom属性操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(function(){
				//prop 适合使用在有bol值的属性上
				//attr 可以读取自定义属性
				console.log($("#mycb").prop("mygxy"));
				console.log($("#mycb").attr("mygxy"));
			})
		</script>
	</head>
	<body>
		<input id="mycb" type="checkbox" mygxy="test123" checked value="1" />	
	</body>
</html>

4.事件绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			/* 
			 jquery事件绑定
			 .on("事件",function(){})  绑定事件
			 .off("事件")              解除绑定
			 .事件(function(){})
			 .keyup(function(event){
				 event.keyCode   获取键盘码
			 })
			 .submit()           直接提交指定表单
			 .submit(function(){
				 return bol      自己控制通过表单验证决定表单是否提交
			 })
			 */
			$(function(){
				/* $("#testBtn").on("click",function(){
					$("#testBtn").off("click");
					console.log($("#mytitle").html());
				}) */
/* 				$("#testBtn").click(function(){
					$("#testBtn").off("click");
					console.log($("#mytitle").html());
				}) */
				$("#testBtn").dblclick(function(){
					console.log("触发了");
				})
				/* $("#testText").focus(function(){
					$(this).val("abc");
				}) */
				$("#testText").keyup(function(event){
					console.log($(this).val()) ;
					console.log(event.keyCode); 
				})
				/* 
				$("#myform").submit(function(){
					return false;
				}) */
				$("#mysubmitBtn").click(function(){
					$("#myform").submit();
				})
			})
		</script>
	</head>
	<body>
		<input id="testBtn" type="button"  />
		<input id="testText" type="text"  />
		<h1 id="mytitle">我的标题</h1>
		<form id="myform" action="xxx" method="get">
			<input type="text" name="test" />
			<div id="mysubmitBtn" style="border: 1px solid black;">我的提交</div>
		</form>
	</body>
</html>

5.显示效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
				border: 1px solid black;
				background-color: lightcoral;
				display: none;
			}
		</style>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			/* 
			 可以传参数 （毫秒数） 控制完成动画的时间
			 .hide()
			 .show()
			 .toggle()
			 .fadeIn()
			 .fadeOut()
			 .fadeToggle()
			 */
			$(function(){
				$("#testBtn").click(function(){
					$("#testdiv").fadeToggle(3000);
				})
			})
		</script>
	</head>
	<body>
		<input id="testBtn" type="button" value="切换显示效果" />
		<div id="testdiv">testdiv</div>
	</body>
</html>

6.json格式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			//JSON js对象标记
			/* 
			 {key:value,key:value}
			 json对象.key
			 */
			var myJsonObj = {name:"jack",age:18,room:"720A"};
/* 			console.log(myJsonObj.age);
			myJsonObj.address = "枫杨街38号";
			console.log(myJsonObj); */
			var myJsonObj2 = '{"name":"jack","age":18,"room":"720A"}';
/* 			
			console.log(myJsonObj2.name); */
			var myObj = JSON.parse(myJsonObj2)
			console.log(myObj);
			
			var students = [{"name":"jack","age":18,"room":"720A"},
							{"name":"rose","age":19,"room":"720A"}]

			console.log(students[1].name);
			
			var classInfo = {"totalNum":3,students:[{"name":"jack","age":18,"room":"720A"},
													{"name":"rose","age":19,"room":"720A"},
													{"name":"jase","age":1,"room":"720A"}]}
			
			console.log(classInfo.students[2].name);
			/* 
			$.each(数组对象,function(i,d){
				i表示索引
				d表示遍历到的元素  通常遍历json数组对象 d.xxx取值
			}) 
			 */
			$.each(classInfo.students,function(i,d){
				console.log(i);
				console.log(d.name);
			})
			//级联菜单  省市县	
		</script>
	</head>
	<body>
	</body>
</html>