jQuery学习笔记(含JavaScript和jQuery的区别)

其他 2020-02-07 18:32:16 阅读次数: 0

jQuery对象

  • jQuery对象就是通过jQuery($())包装DOM对象后产生的对象
  • jQuery对象是jQuery独有的
  • jQuery对象无法使用DOM对象的任何方法，同样DOM对象也不能使用jQuery里的任何方法
  • 约定：如果获取的是jQuery对象，那么要在变量前面加上$.
    — var $variable = jQuery对象
    — var　variable = DOM对象

jQuery对象转成DOM对象

  • jQuery对象不能使用DOM中的方法，但如果jQuery没有封装想要的方法，不得不使用DOM对象的时候，有两种处理方法：
    　　1、jQuery对象是一个数组对象，可以通过[index]的方法来得到对应的DOM对象
		var $cr = $("#cr");
		var cr = $cr[0];

       　　2、使用jQuery对象中的get(index)方法得到相应的DOM对象

		var $cr = $("#cr");
		var cr = $cr.get(0);

DOM对象转成jQuery对象

  • 对于一个DOM对象，只需要使用$()把DOM对象包装起来（jQuery对象就是jQuery包装DOM对象后产生的对象），就可以获得一个jQuery对象
		var cr = document.getElementById("cr");
		var $cr = $(cr);

JS与jQuery的等价

  • $(function() { …code…})相当于window.οnlοad=function(){ …code… }
  • $(this).text()等价于this.firstChild.nodeValue(在button元素节点中，其他的视情况)
  •  <!-- 情景：有俩<buttion>元素节点 -->
 var buttons = document.getElementsByTagName("button");
 for (var i = 0; i < buttons.length; i++) {
 	    alert(buttons[i].firstChild.nodeValue);
 } 
 <!-- 等价于 -->
 alert($("button")[0].firstChild.nodeValue);
 alert($("button")[1].firstChild.nodeValue);

各种选择器

1. 基本选择器

  1. 使用id选择器选择id=btn1的元素：$("#btn1")
  2. 使用class选择器选择class=mini的元素：$(".mini")
  3. 使用元素名选择器选择span和div的元素：$(“span,div”)
  4. 为选择的jQuery对象添加onclick响应函数： $("#btn1").click(function() {})
    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 基本选择器 -->
<title>基本选择器</title>
<style type="text/css">
	div,span,p {
		width: 140px;
		height: 140px;
		margin: 5px;
		background: #aaa;
		border: #000 1px solid;
		float: left;
		font-size: 17px;
		font-family: Verdana;
	}
	div.mini {
		width: 55px;
		height: 55px;
		background-color: #aaa;
		font-size: 12px;
	}
</style>
<!-- 导入jQuery库 -->
<script type="text/javascript" src="jquery-1.7.2.js"></script>	
<script type="text/javascript">
	$(function() {
	    <!-- 1.使用id选择器选择id=btn1的元素:$("#btn1") -->
	    <!-- 2.为选择的jQuery对象添加onclick响应函数 -->
	    <!-- $("#btn1").click(function() {}) -->
	    $("#btn1").click(function() {
	    	$("#one").css("background","#ffaaaa");
	    });
	    $("#btn2").click(function() {
	    	$(".mini").css("background","#ffaaaa");
	    });
	    $("#btn3").click(function() {
	    	$("div").css("background","#ffaaaa");
	    });
	    $("#btn4").click(function() {
	    	$("*").css("background","#ffaaaa");
	    });
	    $("#btn5").click(function() {
	    	$("span,#two").css("background", "#ffaaaa");
	    });
	})
</script>
</head>
<body>
	<input type="button" value="选择id为one的元素" id="btn1">
	<input type="button" value="选择class为mini的所有元素" id="btn2">
	<input type="button" value="选择元素名为div的所有元素" id="btn3">
	<input type="button" value="选择所有元素" id="btn4">
	<input type="button" value="选择所有的span元素和id为two的元素" id="btn5">
	
	<br><br>
	
	<div class="one" id="one">
		id为one,class为one的div
		<div class="mini">class为mini</div>
	</div>
	<div class="one" id="two" title="test">
		id为two，class为one，title为test的div
		<div class="mini" title="other">class为mini,title为other</div>
		<div class="mini" title="test">class为mini,title为test</div>
	</div>
	<div class="one">
		<div class="mini">class为mini</div>
		<div class="mini">class为mini</div>
		<div class="mini">class为mini</div>
		<div class="mini"></div>
	</div>
	<div class="one">
		<div class="mini">class为mini</div>
		<span>span1</span>
		<span>span2</span>
	</div>
</body>
</html>

2. 层次选择器

    使用场景：想通过DOM元素之间的层次关系来获取特定元素，例如后代元素，子元素，相邻元素，兄弟元素等，则需要使用层次选择器。

  1. $(“ancestor descendant”)：选取ancestor的所有descendant（后代）元素
  2. $(“parent > child”)：选取parent元素下的child(子)元素
  3. $(“prev + next”)：选取紧接在prev元素后的下一个next元素
  4. $(“prev ~ siblings”)：选取prev元素后的所有siblings()元素，只要是同辈节点就可以选取
    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 层次选择器 -->
<title>层次选择器</title>
<style type="text/css">
	div,span,p {
		width: 140px;
		height: 140px;
		margin: 5px;
		background: #aaa;
		border: #000 1px solid;
		float: left;
		font-size: 17px;
		font-family: Verdana;
	}
	div.mini {
		width: 55px;
		height: 55px;
		background-color: #aaa;
		font-size: 12px;
	}
</style>
<!-- 导入jQuery库 -->
<script type="text/javascript" src="jquery-1.7.2.js"></script>	
<script type="text/javascript">
	$(function() {
	    <!-- 1.使用id选择器选择id=btn1的元素:$("#btn1") -->
	    // 2.为选择的jQuery对象添加onclick响应函数
	    // $("#btn1").click(function() {})
	    $("#btn1").click(function() {
	    	$("#one + div").css("background","#ffaaaa");
	    });
	    $("#btn2").click(function() {
	    	$(".mini > span").css("background","#ffaaaa");
	    });
	    $("#btn3").click(function() {
	    	$("div span").css("background","#ffaaaa");
	    });
	    $("#btn4").click(function() {
	    	$("#two ~ div").css("background","#ffaaaa");
	    });
	    $("#btn5").click(function() {
	    	$("#two").siblings("div").css("background","#ffaaaa");
	    });
	    $("#btn6").click(function() {
	    	$("#one").nextAll("span:first").css("background", "#ffaaaa");
	    });
	    
	})
</script>
</head>
<body>
	<input type="button" value="选择id为one的下一个div元素" id="btn1">
	<input type="button" value="选择class为mini的span子元素" id="btn2">
	<input type="button" value="选择元素名为div的所有元素" id="btn3">
	<input type="button" value="选择id为two的所有div兄弟姐妹元素" id="btn4">
	<input type="button" value="选择id为two的所有div兄弟姐妹元素" id="btn5">
	<input type="button" value="选择id为one的紧邻span元素" id="btn6">
	
	<br><br>
	
	<div class="one" id="one">
		id为one,class为one的div
		<div class="mini">class为mini</div>
	</div>
	<div class="one" id="two" title="test">
		id为two，class为one，title为test的div
		<div class="mini" title="other">class为mini,title为other</div>
		<div class="mini" title="test">class为mini,title为test</div>
	</div>
	<div class="one" >
		<div class="mini">class为mini</div>
		<div class="mini">class为mini</div>
		<div class="mini">class为mini</div>
		<div class="mini"><span>mini下的span子元素</span></div>
	</div>
	<div class="one">
		<div class="mini">class为mini</div>
		<span>span1</span>
		<span>span2</span>
	</div>
	<span>id为one的紧邻span元素</span>
	<span>id为one的第二个span元素</span>
</body>
</html>

3. 过滤选择器

 　过滤选择器主要是通过特定的过滤规则来筛选出所需要的DOM元素，该选择器都以"："开头
 　可分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤，表单对象属性过滤

基本过滤选择器
　　基础知识点：

选择器 描述
:first 选取第一个元素
:last 选取最后一个元素
:not(selector) 去除所有与给定选择器匹配的元素
:even 选取索引值偶数的所有元素，索引从0开始
:odd 选取索引值奇数的所有元素，索引从0开始
:eq(index) 选取索引等于index的元素，索引从0开始
:gt(index) 选取索引大于index的元素，索引从0开始
:lt(index) 选取索引小于index的元素，索引从0开始
:header 获取所有的标题元素，如h1,h2等
:animated 选取当前正在执行动画的所有元素 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 基本选择器 -->
<title>基本过滤选择器</title>
<style type="text/css">
	div,span,p {
		width: 140px;
		height: 140px;
		margin: 5px;
		background: #aaa;
		border: #000 1px solid;
		float: left;
		font-size: 17px;
		font-family: Verdana;
		
	}
	div.mini {
		width: 55px;
		height: 55px;
		background-color: #aaa;
		font-size: 12px;
	}
	div.hide{
		display: none;
	}
</style>
<!-- 导入jQuery库 -->
<script type="text/javascript" src="jquery-1.7.2.js"></script>	
<script type="text/javascript">
	// 在加载完DOM文档树后执行代码
	$(document).ready(function() {
		function anmateIt() {
		    $("#mover").slideToggle("slow",anmateIt);
		}
		anmateIt();
		
		$("#btn1").click(function() {
			$("div:first").css("background", "#ffeeaa");
		});
		$("#btn2").click(function() {
			$("div:last").css("background","#ffeeaa");
		});
		$("#btn3").click(function() {
			$("div:not(.one)").css("background","#ffeeaa");
		});
		<!-- 索引值从0开始 -->
		$("#btn4").click(function() {
			$("div:even").css("background","#ffeeaa");
		});
		$("#btn5").click(function() {
			$("div:odd").css("background","#ffeeaa");
		});
		<!-- "&gt;" 为  ">" ； "&lt;" 为 "<" ； "eq" 为 "=" -->
		$("#btn6").click(function() {
			$("div:gt(3)").css("background","#ffeeaa");
		});
		$("#btn7").click(function() {
			$("div:eq(3)").css("background","#ffeeaa");
		});
		$("#btn8").click(function() {
			$("div:lt(3)").css("background","#ffeeaa");
		});
		$("#btn9").click(function() {
			$(":header").css("background","#ffeebb");
		});
		$("#btn10").click(function() {
			$(":animated").css("background","#ffeebb");
		});
		$("#btn11").click(function() {
			$("#two").nextAll("span:first").css("background","#ffeebb");
		});
		
	});
</script>
</head>
<body>
	<input type="button" value="选择第一个div元素" id="btn1">
	<input type="button" value="选择最后一个div元素" id="btn2">
	<input type="button" value="选择class不为one的所有div元素" id="btn3">
	<input type="button" value="选择索引值为偶数的div元素" id="btn4">
	<input type="button" value="选择索引值为奇数的div元素" id="btn5">
	<input type="button" value="选择索引值大于3的div元素" id="btn6">
	<input type="button" value="选择索引值等于3的div元素" id="btn7">
	<input type="button" value="选择索引值小于3的div元素" id="btn8">
	<input type="button" value="选择所有的标题元素" id="btn9">
	<input type="button" value="选择当前正在执行动画的所有元素" id="btn10">
	<input type="button" value="选择id为two的下一个span元素" id="btn11">
	<br><br>
	<h3>基本选择器.</h3>
		<br><br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<span id="span">^^span元素 111^^</span>
		<span id="span">^^span元素 222^^</span>
		<div id="mover">正在执行动画的div元素.</div>
</body>
</html>

内容过滤选择器
　　基本知识点：内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上

选择器 描述
:contains(text) 选取含有文本内容为text的元素
:empty 选取不包含子元素或者文本的空元素
:has(selector) 选取含有选择器所匹配的元素的元素
:parent 选取含有子元素或者文本的元素 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 基本选择器 -->
<title>内容过滤选择器</title>
<style type="text/css">
	div,span,p {
		width: 140px;
		height: 140px;
		margin: 5px;
		background: #aaa;
		border: #000 1px solid;
		float: left;
		font-size: 17px;
		font-family: Verdana;
		
	}
	div.mini {
		width: 55px;
		height: 55px;
		background-color: #aaa;
		font-size: 12px;
	}
	div.hide{
		display: none;
	}
</style>
<!-- 导入jQuery库 -->
<script type="text/javascript" src="jquery-1.7.2.js"></script>	
<script type="text/javascript">
	// 在加载完DOM文档树后执行代码
	$(document).ready(function() {
		function anmateIt() {
		    $("#mover").slideToggle("slow",anmateIt);
		}
		anmateIt();
		
		$("#btn1").click(function() {
			$("div:contains('di')").css("background", "#ffeeaa");
		});
		$("#btn2").click(function() {
			$("div:empty").css("background","#ffeeaa");
		});
		$("#btn3").click(function() {
			$("div:has(.mini)").css("background","#ffeeaa");
		});
		$("#btn4").click(function() {
			$("div:parent").css("background","#ffeebb");
			//$("div:not(:empty)").css("background", "#ffeebb");
		});
	});
</script>
</head>
<body>
	<input type="button" value="选择文本含有di的div元素" id="btn1">
	<input type="button" value="选择空的div元素" id="btn2">
	<input type="button" value="选择含有class为mini元素的div元素" id="btn3">
	<input type="button" value="选取含有子元素或者文本的div元素" id="btn4">
	<br><br>
	<h3>基本选择器.</h3>
		<br><br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<span id="span">^^span元素 111^^</span>
		<span id="span">^^span元素 222^^</span>
		<div id="mover">正在执行动画的div元素.</div>
</body>
</html>

可见性过滤选择器
　　基本知识点：可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素;hidden不仅包含样式属性display为none的元素，也包含文本隐藏域（<input type="hidden">）和visible:hidden之类的元素

选择器 描述
:hidden 选取所有不可见的元素
:visible 选取所有可见的元素 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 基本选择器 -->
<title>可见性过滤选择器</title>
<style type="text/css">
	div, span, p {
	    width: 140px;
	    height: 140px;
	    margin: 5px;
	    background: #aaa;
	    border: #000 1px solid;
	    float: left;
	    font-size: 17px;
	    font-family: Verdana;
	}
	
	div.mini {
	    width: 55px;
	    height: 55px;
	    background-color: #aaa;
	    font-size: 12px;
	}
	
	div.hide {
	    display: none;
	}			
</style>
<!-- 导入jQuery库 -->
<script type="text/javascript" src="jquery-1.7.2.js"></script>	
<script type="text/javascript">
	// 在加载完DOM文档树后执行代码
	$(document).ready(function() {
	    
	    $("#btn1").click( function(){
			$("div:visible").css("background", "#ffbbaa");
		});
	    $("#btn2").click(function() {
			//alert($("div:hidden").length);
			//show(time): 可以使不可见的元素变为可见, time 表示时间, 以
			//毫秒为单位
			//jQuery 的很多方法支持方法的连缀, 即一个方法的返回值来时调用该
			//方法的 jQuery 对象: 可以继续调用该对象的其他方法. 
			$("div:hidden").show(200).css("background", "#ffbbee");
	    });
	    $("#btn3").click(function() {
			<!-- attr()传入一个参数是获取，-->
			<!--  两个参数是对第一个参数设置 -->
			//alert($("input:hidden").attr("value"));
			<!-- val()获取属性的值 -->
			alert($("input:hidden").val());
	    });
	});
</script>
</head>
<body>
	<input type="button" value="选取所有可见的  div 元素" id="btn1">
	<input type="button" value="选择所有不可见的 div 元素" id="btn2" />
	<input type="button" value="选择所有不可见的 input 元素" id="btn3" />
	<br><br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div
			<input type="hidden" value="123456789000" size="8">
		</div>
		<div id="mover">正在执行动画的div元素.</div>
</body>
</html>

属性过滤选择器
　　基础知识点：属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素

属性过滤选择器 描述
[attribute] 选取拥有此属性的元素
[attribute=value] 选取指定属性的值为value的元素
[attribute!=value] 选取指定属性的值不等于value的元素
[attribute^=value] 选取指定属性的值以value开始的元素
[attribute$=value] 选取指定属性的值以value结束的元素
[attribute*=value] 选取指定属性的值含有value的元素
[selector1][selector2] …[selectorN] 用属性选择器合并成一个复合属性选择器，满足多个条件，每选择一次，缩小一次范围

子元素过滤选择器

子元素过滤选择器 描述
:first-child 选择第一个子元素
:last-child 选择最后一个子元素
:only-child 是某个元素的唯一一个子元素时被调用，否则不调用
:nth-child(N) 匹配属于其父元素的第 N 个子元素，不论元素的类型。

表单过滤选择器

表单过滤选择器 描述
:checked 单选框/复选框选中
:selected 下拉框被选择
:enabled 可用
:disabled 不可用

JSON.stringify(value[, replacer[, space]])

JSON 通常用于与服务端交换数据，在向服务器发送数据时一般是字符串，我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。

  1. 将js的对象转化成JSON字符串(JavaScript 对象转换)
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
	<h2>将 JavaScript 对象转换为 JSON 字符串</h2>
	<p id="demo1"></p>
	<p id="demo2"></p>
<script>
	var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};
	//[object Object]
	document.getElementById("demo1").innerHTML = obj;
	var myJSON = JSON.stringify(obj);
	//{"name":"runoob","alexa":10000,"site":"www.runoob.com"}
	document.getElementById("demo2").innerHTML = myJSON;	
</script>
</body>
</html>
  2. 将js的数组转化成JSON字符串(JavaScript 数组转换)
  3. 异常解析对象，JSON 不能存储 Date 对象，JSON.stringify() 会将所有日期转换为字符串，之后你可以再将字符串转换为 Date 对象。
  4. (不建议在 JSON 中使用函数)解析函数，JSON 不允许包含函数，JSON.stringify() 会删除 JavaScript 对象的函数，包括key和value，我们可以在执行 JSON.stringify() 函数前将函数转换为字符串来避免以上问题的发生。

$.ajax和$.post

//ajax请求
$.ajax({
        type: "post",
        url: "###",
        // contentType: "application/json;charset=utf-8",
        data: JSON.stringify({name: name, money: money}),
        dataType: "json",
        success: function (data) {
                     alert(account.id);
                 }
 });
 //post请求$.post(url,data,function()，type);
 $.post("account/post", {name: name, money: money}, function (account) { 
 			alert(account.id);
 }, "json");

两种请求方式都成功传递并返回了数据 , 但区别在于:
1.请求方式:
$.post()发送json的形式为 {name: name, money: money}
$.ajax()发送json的形式为 JSON.stringify({name: name, money: money})
如果$.ajax()使用 {name: name, money: money}发送数据 , 会被浏览器解析为html类型参数 , 并且无法被Controller解析
在这里插入图片描述
2.解析方式
接收$.post()请求的方法直接使用 Account 类型封装了参数
接收$.ajax()请求的方法额外使用了 @RequestBody注解 , 从请求体中获取json数据 , 才将参数封装为 Account 类型

$.ajax 设置数据类型 applicaiton/json之后，服务器端(express)就拿不到数据
$.ajax contentType 和 dataType , contentType 主要设置你发送给服务器的格式，dataType设置你收到服务器数据的格式。
在http 请求中，get 和 post 是最常用的。在 jquery 的 ajax 中， contentType都是默认的值：application/x-www-form-urlencoded，这种格式的特点就是，name/value 成为一组，每组之间用 & 联接，而 name与value 则是使用 = 连接。如： wwwh.baidu.com/q?key=fdsa&lang=zh 这是get , 而 post 请求则是使用请求体，参数不在 url 中，在请求体中的参数表现形式也是: key=fdsa&lang=zh的形式。
键值对这样组织在一般的情况下是没有什么问题的，这里说的一般是，不带嵌套类型JSON，也就是 简单的JSON，形如这样：
{
a: 1,
b: 2,
c: 3
}
但是在一些复杂的情况下就有问题了。例如在 ajax 中你要传一个复杂的 json 对像，也就说是对象嵌数组，数组中包括对象，兄果你这样传：
{
data: {
a: [{
x: 2
}]
}
}
这个复杂对象， application/x-www-form-urlencoded这种形式是没有办法将复杂的 JSON 组织成键值对形式(当然也有方案这点可以参考 ) ,你传进去可以发送请求，但是服务端收到数据为空， 因为 ajax 没有办法知道怎样处理这个数据。
这怎么可以呢？
聪明的程序员发现 http 还可以自定义数据类型，于是就定义一种叫 application/json 的类型。这种类型是 text ， 我们 ajax 的复杂JSON数据，用 JSON.stringify序列化后，然后发送，在服务器端接到然后用 JSON.parse 进行还原就行了，这样就能处理复杂的对象了。
$.ajax({
dataType: ‘json’,
contentType: ‘application/json’,
data: JSON.stringify({a: [{b:1, a:1}]})
})
这样你就可以发送复杂JSON的对象了。像现在的 restclient 都是这样处理的。

前端Ajax请求传实体类参数，后台用实体类如何来接收参数？

前端代码(将contentType设为"application/json;charset=utf-8"；将data用JSON.stringify()转化成字符串):

function updateStaff() {
	var params = {
			"id":$("#updatestaffinfoid").val(),
			"name":$("#updatestaffinfoname").val(),
			"position":$("#updatestaffinfoposition").val(),
			"gender":$("#updatestaffinfogender").val()
	};
	$.ajax({
		type:"post",
		url:"${APP_PATH}/staff/update",
		contentType: "application/json;charset=utf-8",//将内容指定为JSON格式，以UTF-8字符编码进行编码。
		data:JSON.stringify(params),//将对象转化成字符串
		dataType: "json",
		beforeSend : function() {
			//加载层-风格4
			layerloading = layer.msg('正在提交数据，请稍后', {
			  icon: 16,
			  shade: 0.01,
			  time:1000
			});
		},
		success:function(result){
			layer.close(layerloading);
			alert(result.success);
		}
	})
}

后端代码(在实体类参数前加上@RequestBody):

	@RequestMapping(value = "/update",method = RequestMethod.POST)
	@ResponseBody
	public JSONResultUtil updateStaffInfo(@RequestBody TbStaff staff) {
		int result = staffService.updateStaffInfo(staff);
		if (result==1) {
			return JSONResultUtil.ok();
		}else {
			return JSONResultUtil.error("更新失败");
		}
	}

总结

  1. JSON.stringify()的作用是将 JavaScript 对象转换为 JSON 字符串，JSON.parse()可以将JSON字符串转为一个对象。
  2. 注解@RequestParam接收请求头(requestHeader)中的参数，通常用于接收GET请求数据，一般用于处理application/x-www-form-urlencoded编码格式的数据，POST类型的请求也可以使用。
  3. 注解@RequestBody接收请求体(requestBody)中的参数，通常用于接收POST请求数据，一般用于处理application/json等类型数据，GET类型也可以适用。

前端通过表单向后端传实体类数据，如何操作？

中心思想：将表单数据转成JSON字符串传给后端，后端实体类参数用@RequestBody注解接收


Q1:如何将表单数据转化成JSON字符串?
A1:先通过serializeObject()将表单数据转化成JSON对象，然后通过JSON.stringify()将JSON对象转化成JSON字符串将数据提交给后台


Q2:serializeObject()方法为什么在浏览器console报未定义？
A2:需要在js文件夹中创建common.js，将下面代码加进去并且在页面上引入common.js文件，serializeObject()代码如下：

serializeObject ()代码：

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

Q3:前端ajax请求的`contentType`设置成`"application/json;charset=utf-8"`的作用是什么？

A3:添加contentType：“application/json“之后，向后台发送数据的格式必须为json字符串并且只能是json字符串，前端请求示例代码：

前端代码：

function insertStaff(){
	//先通过serializeObject()将表单数据转化成JSON对象，
	//然后通过JSON.stringify()将JSON对象转化成JSON字符串提交给后台
	var formdata = JSON.stringify($("#insertForm").serializeObject());
	$.ajax({
		type : "post",
		url : "${APP_PATH}/staff/insert",
		contentType : "application/json;charset=utf-8",//必须
		data : formdata,
		dataType:"json",
		beforeSend:function(){
			//加载层-风格4
			layerloading = layer.msg('正在操作，请稍后 ', {
			  icon: 16,
			  shade: 0.01,
			  time:1000
			});
        },
        success:function(data){
        	layer.close(layerloading);
            if(data.success){
                layer.msg("添加成功",{
					icon:1,
					time:500
				},function(){
					//关闭后的操作
					$("#insertModal").modal("hide");
					formReset();
					$("#mytab").bootstrapTable('refresh', {
						pageNumber : 1,//防止offset大于查询结果数导致显示无数据
						url : '${APP_PATH}/staff/show'
					});
				});
            }else{
                layer.msg('添加失败', {icon: 2,time:500});
            }
        },
        error:function(){layer.msg('请求出错',{icon:2,time:500});}
	})
}

Q4:后端是不是也得给个示例意思意思？

A4:后端代码示例如下：

后端代码：

	@RequestMapping(value = "/insert",method = RequestMethod.POST)
	@ResponseBody
	public JSONResultUtil insertStaff(@RequestBody TbStaff staff) {//@RequestBody必须
		System.out.println(staff.getName());
		int result = staffService.insertStaff(staff);
		if (result==1) {
			// 添加成功
			return JSONResultUtil.ok();
		}else {
			return JSONResultUtil.error("添加失败");
		}
	}

bootstrap table 批量删除：https://www.jianshu.com/p/7f7684dee3e9`

----------------2019/12/30新增------------------

jQuery页面加载完成时执行代码

		<script>
			//页面加载完成方式一(不常用)
			$(document).ready(function(){
				alert("页面加载完成！！");
			})
			//页面加载完成方式二
			$(function(){
				alert("哈哈哈");
			})
			$(function(){
				alert("呵呵呵");
			})
			$(function(){
				alert("嘿嘿嘿");
			})
		</script>

注意：jq中的页面加载完成事件不会覆盖，从上到下执行！！！！

jQuery中部分方法（含与js的对比）

jQuery中的方法 对应的javascript属性名 属性说明
$("#元素id名".val()) document.getElementById(“元素id名”).value 获取某个元素的value值
$("#元素id名".val(‘值’) 元素对象.value = 值 设置某个元素的value值
$(’#元素id名’).html() 元素对象.innerHTML 获取某个元素的内容体信息(获取到HTML标签)
$(’#元素id名’).html(‘值’) 元素对象.innerHTML=值 设置某个元素的内容体信息（HTML标签被浏览器解析）
元素对象.text() 元素对象.innerText 获取某个元素的内容体信息（获取不包括HTML标签）
元素对象.text(‘值’) 元素对象.innerText = 值 设置某个元素的内容体信息（HTML标签不被浏览器解析）

主要区别：
prop 对于HTML元素本身就带有的固有属性 （不能获取和删除自定义属性）
attr 对于HTML元素我们自定义的加在标签中的属性（只能获取标签中写好的，存在的属性，特有的但是没有写出来的也获取不到）
使用：
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

JS中的数组相当于Java中的集合，特点：长度可变、可以存任意数据类型

----------------------2019/12/31新增------------------

1、请分别写出如何获取/设置value值、元素内容体、当前页面路径、单选/复选框状态、class名字的代码
答：元素对象.value/元素对象.value = 值、元素对象.innerHTML/元素对象.innerHTML = 值、window.location.href(window.location.pathname)、
、元素对象.checked/元素对象.checked = 值、元素对象.className/元素对象.className = 值
2、innerHTML 和 innerText的区别
答：innerHTML和innerText获取的是元素内容体信息，前者可以获取到html标签；后者获取不到html标签。设置innerHTML时html标签可以被浏览器解析，设置innerText时html标签不被浏览器解析
3、Java中数组和集合的区别
答：数组长度不可变，集合长度可变；数组能存基本数据类型和引用数据类型，集合只能存引用数据类型；数组只能存一种数据类型（除了Object[]），集合可以存任意数据类型
4、JS中数组的特点以及创建方式
答：长度可变，可以存任意数据类型。new Array()/[“a”,”b”]/new Array(4)/new Array(“a”,”b”)
5、获取元素对象的四种方式是什么，返回值是什么？
答：document.getElementById/
document.getElementsByName/
document.getElementsByTagName/
document.getElementsByClassName
ById的是单个对象，剩下的都是数组
6、请谈谈你对DOM的理解
答：DOM是文档对象模型，是一个文档树
7、请列出你所知道的全部js事件(多多益善)
答：onclick、onchange、ondblclick、onsubmit、onfocus、onblur、onload、onmouseover、onmouseout、
8、Jq是什么，和js有什么关系
答：jQuery是一个快速、简介的js框架，jq的核心理念写的更少，做的更多
9、Jq如何引入，如果没有引入成功，会有什么样的后果？
答：在标签内、 不 被 定 义 10 、 J S 对 象 和 j q 对 象 如 何 相 互 转 换 答 ： J S 对 象 转 j q 对 象 ： 不被定义 10、JS对象和jq对象如何相互转换 答：JS对象转jq对象： (JS对象)
Jq对象转JS对象：jq对象[0]、jq对象.get(0)
11、请分别写出js方式和jq方式的页面加载完成执行的代码，两种方式有什么不同
答：js加载页面完成执行代码：window.onload =
Jq方式加载页面完成执行代码： ( f u n c t i o n ( ) ) 、 (function(){})、 (document).ready(function(){})
12、Jq中三种基本选择器是什么？如何书写？
答：类选择器 ( “ . c l a s s 名 称 ” ) 、 I d 选 择 器 (“.class名称”)、Id选择器 (“#id名称”)、元素选择器$(“元素名称”)

选择器的分类与使用

基本选择器
层次选择器
过滤选择器

基本选择器

基本选择器 描述
$("#id名") 根据元素id获取元素
$(".class名") 根据元素class名获取元素
$(“标签名”) 选取某种标签的所有元素

层次选择器

层次选择器 描述
$(“ancestor descendant”) 选取ancestor的所有descendant（后代）元素
$(“parent > child”) 选取parent元素下的child(子)元素
$(“prev + next”) 选取紧接在prev元素后的下一个next元素
$(“prev ~ siblings”) 选取prev元素后的所有siblings()元素，只要是同辈节点就可以选取

过滤选择器

 　过滤选择器主要是通过特定的过滤规则来筛选出所需要的DOM元素，该选择器都以冒号("：")开头
 　可分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤，表单对象属性过滤

基本过滤选择器
选择器 描述
:first 选取第一个元素
:last 选取最后一个元素
:not(selector) 去除所有与给定选择器匹配的元素
:even 选取索引值偶数的所有元素，索引从0开始
:odd 选取索引值奇数的所有元素，索引从0开始
:eq(index) 选取索引等于index的元素，索引从0开始
:gt(index) 选取索引大于index的元素，索引从0开始
:lt(index) 选取索引小于index的元素，索引从0开始
:header 获取所有的标题元素，如h1,h2等
:animated 选取当前正在执行动画的所有元素
属性过滤选择器

基础知识点：属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素

属性过滤选择器 描述 例子
[attribute] 选取拥有此属性的元素 $("[href]")
[attribute=value] 选取指定属性的值为value的元素 $("[href=’#’]")
[attribute!=value] 选取指定属性的值不等于value的元素 $("[href=’#’]")
[attribute^=value] 选取指定属性的值以value开始的元素
[attribute$=value] 选取指定属性的值以value结束的元素
[attribute*=value] 选取指定属性的值含有value的元素
[selector1][selector2] …[selectorN] 用属性选择器合并成一个复合属性选择器，满足多个条件，每选择一次，缩小一次范围
表单选择器
表单过滤选择器 描述 例子
:input 选取所有的input元素(匹配所有input, textarea, select和button元素) $(":input")
:text 所有 type=“text” 的 <input> 元素 $(":text")
:password 所有 type=“password” 的 <input> 元素 $(":password")
:radio 所有 type=“radio” 的<input> 元素 $(":radio")
:checkbox 所有 type=“checkbox” 的 <input> 元素 $(":checkbox")
:submit 所有 type=“submit” 的<input> 元素 $(":submit")
:reset 所有 type=“reset” 的<input> 元素 $(":reset")
:button 所有 type=“button” 的<input> 元素 $(":button")
:image 所有 type=“image” 的 <input> 元素 $(":image")
:file 所有 type=“file” 的 <input> 元素 $(":file")
表单对象属性过滤选择器
表单过滤选择器 描述
:checked 单选框/复选框选中
:selected 下拉框被选择
:enabled 可用
:disabled 不可用
可见性过滤选择器

基本知识点：可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素;hidden不仅包含样式属性display为none的元素，也包含文本隐藏域（<input type="hidden">）和visible:hidden之类的元素

选择器 描述
:hidden 选取所有不可见的元素
:visible 选取所有可见的元素
内容过滤选择器

基本知识点：内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上

选择器 描述
:contains(text) 选取含有文本内容为text的元素
:empty 选取不包含子元素或者文本的空元素
:has(selector) 选取含有选择器所匹配的元素的元素
:parent 选取含有子元素或者文本的元素
子元素过滤选择器
子元素过滤选择器 描述
:first-child 选择第一个子元素
:last-child 选择最后一个子元素
:only-child 是某个元素的唯一一个子元素时被调用，否则不调用
:nth-child(N) 匹配属于其父元素的第 N 个子元素，不论元素的类型。

jQuery动画效果

以下所有动画效果方法中都有两个参数：

  • speed 动画效果的持续时间 单位：毫秒
  • fn 动画效果完成后调用的函数 (回调函数)

基本效果：(放大缩小效果)

属性名 属性说明
show(speed,fn); 显示元素
hide(speed,fn); 隐藏元素
toggle(speed,fn); 1、使得显示元素隐藏2、使得隐藏元素显示

滑动效果：(上下滑动)

属性名 属性说明
slideDown(speed,fn); 显示元素
slideUp(speed,fn); 隐藏元素
slideToggle(speed,fn); 1、使得显示元素隐藏2、使得隐藏元素显示

淡入淡出效果：

属性名 属性说明
fadeIn(speed,fn); 显示元素
fadeOut(speed,fn); 隐藏元素
fadeToggle(speed,fn); 1、使得显示元素隐藏2、使得隐藏元素显示

prop和attr的区别

主要区别：

prop 对于HTML元素本身就带有的固有属性 （不能获取和删除自定义属性，标签中没写的属性也可以获取和设置）
attr 对于HTML元素我们自定义的加在标签中的属性（只能获取标签中写好的，存在的属性，没有写出来的获取不到）
例子：<input type=“text” id=“test”/>
$("#test").prop("name") 结果为空
$("#test").attr("name") 结果为undefined（因为标签中没声明）
$("#test").prop("data","aaa") 设置自定义属性data值为aaa（无效）
$("#test").attr("data","aaa") 设置自定义属性data值为aaa（有效）

使用：

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。如设置复选框的 checked(prop("checked",true) )、下拉框的selected
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。如设置标签的class属性(attr("class","自己定义的class名"))

jQuery中的方法 对应的javascript的方法 属性说明
$(’#元素id名’).attr(‘属性名’) 元素对象.getAttribute(‘属性名’)(元素对象.className) 获取某个元素的属性值
$(’#元素id名’).prop(‘属性名’) 获取某个元素的固有属性
$(’#元素id名’).attr(‘属性名’,‘属性值’) 元素对象.setAttribute(‘属性名’,‘属性值’)
(元素对象.className = 值)		 设置某个元素的属性值
$(’#元素id名’).prop(‘属性名’,‘属性值’) 设置某个元素的固有属性,如复选框的checked
$(’#元素id名’).removeAttr(‘属性名’) 移除某个元素的属性(只能删除标签中写好的，自己定义过的)
$(’#元素id名’).removeProp(‘属性名’) 移除某个元素的属性（只能删除标签中没声明的，自己没有定义过的）

jQuery的数组遍历方式

属性名 属性说明
JQ数组.each(fn);      fn：回调函数 遍历JQ数组
$.each(JQ数组,fn); 遍历JQ数组

其中的 fn 为回调函数，参数有两个，第一个为每次遍历的索引(用i表示)，第二个为当前对象(用 e 表示，可以省略，直接用this表示)

	<script>
		//定义数组
		var arr = ["西游记","三国演义","水浒传","红楼梦"];
		//JS方式：遍历数组
		for(var i=0;i<arr.length;i++){
			//alert("索引为："+i+"，元素为："+arr[i]);
		}
	//Jq方式一
		//index：每次遍历的索引
		//this：数组中每次遍历的元素    是JS对象
		$(arr).each(function(index){
			//alert("索引为："+index+"，元素为："+this);
		})
		
		$(arr).each(function(index,element){
			//alert("索引为："+index+"，元素为："+element);
		})
	//Jq方式二
		$.each($(arr),function(index){
			alert("索引为："+index+"，元素为："+this);
		})
		
		$.each($(arr),function(index,element){
			alert("索引为："+index+"，元素为："+element);
		})
	</script>

追加元素内容体的方式

头部追加 尾部追加
A.prepend(B):向A头部追加B A.append(B)：向A的尾部追加B
B.prependTo(A)：将B追加到A的头部 B.appendTo(A)：将B追加到A的末尾

window.onload和$(function(){})的区别

两个都是加载完成后触发

window.onload $(function(){})
执行时机 整个页面加载完成后执行（包括页面上的资源，比如图片） dom结构创建完成后执行
执行次数 只执行最后一个，之前的会被覆盖 按照顺序依次执行

$.data()和.data()的区别

<body>
		<div id="div1"></div>
	</body>
	<script>
		var div1 = $("#div1");
		var div2 = $("#div1");
		
		//jq对象.data("变量名","值")：用该方法相当于局部变量，之后设置会被覆盖掉
		div1.data("data", "zhangsan");
		div2.data("data", "lisi");
		document.write(div1.data("data"));//lisi
		document.write(div2.data("data"));//lisi
		
		//$.data("jq对象","变量名","值")：用该方法相当于全局变量
		$.data(div1, "data", "zhangsan");
		$.data(div2, "data", "lisi");
		document.write($.data(div1).data);//zhangsan
		document.write($.data(div2).data);//lisi
		
	</script>
发则韩
发布了18 篇原创文章 · 获赞 9 · 访问量 2917
私信 关注

猜你喜欢

转载自blog.csdn.net/weixin_43575868/article/details/101210120
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
Java基础复习_day13_Collection集合
2018.11.16 c语言学习经验
且看Java内置四大核心函数式接口
小程序云开发中数据库的数据分段和显示图片
python的函数
Web-JS进阶
【干货】C++常用代码积累笔记大全
Spring的ioc操作 与 IOC底层原理
构建之法20191121-11 Scrum立会报告+燃尽图 07
Spring boot之Hello World访问404
每日归档
更多
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022