我是靠谱客的博主 迷路白羊，这篇文章主要介绍Java小白学习指南【day41】---JQuery基础一、JQuery的认识二、JQuery的基本使用三、JQuery注册事件的四种方式四、JQuery事件委托机制五、JQuery中的方法六、JQuery练习题七、JSON格式数据八、省市二级联动（练习），现在分享给大家，希望可以做个参考。
一、JQuery的认识
jQuery是继prototype之后一个优秀的开源的JavaScript代码库（或JavaScript框架），它封装JavaScript常用的功能代码
jQuery的核心思想：（write less，do more）写得更少，做得更多
二、JQuery的基本使用
注意：在使用前需要先将JQuery.js的文件引入进来（建议新建一个普通文件夹，区分不同的资源）
1、jQuery库的引入
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <!-- 因为是静态网页，所以使用的是相对路径，同时要注意库引入的内部不能再写其他代码 --> <script type="text/javascript" src="jquery/jquery-2.1.3.js"></script> <script type="text/javascript"> console.debug(jQuery);//这里直接是打印的对象 console.debug($); console.debug($ == jQuery); </script> </head> <body> </body> </html>
2、获取jQuery对象
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="jquery/jquery-2.1.3.js"></script> <script type="text/javascript"> /* 1、获取dom对象，原生的js方式 */ window.onload = function(){//文档加载完毕后才执行 var div = document.getElementById("mydiv"); console.debug(div); /* 2、获取jQuery对象，获取的时候为了做区分，可以使用$在前面 */ var $div = $("#mydiv");//这里id需要使用#，如果是class则需要使用.这是在使用选择器 console.debug($div); } </script> </head> <body> <div id="mydiv">这是我的div</div> </body> </html>
3、$(function(){ 内容 })和window.onload的区别
window.onload与$(function)：
*相同点：* 它们都是用来加载页面的
*不同点：* window.onload是页面内容渲染完毕之后，执行匿名函数中的内容,而 ( f u n c t i o n ) 是 页 面 结 构 加 载 完 毕 之 后 ， 执 行 匿 名 函 数 中 的 内 容 ， 所 以 在 性 能 方 面 来 说 (function)是页面结构加载完毕之后，执行匿名函数中的内容，所以在性能方面来说 (function)是页面结构加载完毕之后，执行匿名函数中的内容，所以在性能方面来说(function)的****性能要高于****window.onload所以以后推荐使用$(function)
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23<script type="text/javascript"> /* 1、获取dom对象，原生的js方式 */ /* window.onload = function(){//文档加载完毕后才执行内部 var div = document.getElementById("mydiv"); console.debug(div); //2、获取jQuery对象，获取的时候为了做区分，可以使用$在前面 var $div = $("#mydiv");//这里id需要使用#，如果是class则需要使用.这是在使用选择器 console.debug(mydiv); } */ $(function(){//文档加载完毕后才执行内部 var div = document.getElementById("mydiv"); console.debug(div); /* 2、获取jQuery对象，获取的时候为了做区分，可以使用$在前面 */ var $div = $("#mydiv");//这里id需要使用#，如果是class则需要使用.这是在使用选择器 console.debug($div); }) </script>
4、jQuery对象和dom对象的相互转换
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20<script type="text/javascript"> /* jQuery对象和dom对象的相互转换是为了满足js原生的功能太弱，而jquery功能更加强大 */ $(function(){//文档加载完毕后才执行内部 var div = document.getElementById("mydiv"); console.debug(div); var $jqdiv = $(div);//js对象转换为jquery对象 console.debug($jqdiv); /* 2、获取jQuery对象，获取的时候为了做区分，可以使用$在前面 */ var $div = $("#mydiv");//这里id需要使用#，如果是class则需要使用.这是在使用选择器 console.debug($div); var jsdiv = $div[0];//jquery对象转换为js对象 console.debug(jsdiv); }) </script>
5、jQuery基本选择器
参考jQuery文档：选择器是为了选中HTML页面中的dom节点，而得到Jquery对象 ，通过Jquery对象去操作dom节点
-
#id id选择器 根据id获取jQuery对象(单个)
-
element 元素选择器 根据标签名获取jQuery对象(多个)
-
.class 类型选择器 根据类型名获取jQuery对象(多个)
-
selector1,selector2,selectorN 组合选择器 根据多个选择器组合在一起，选中多个
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<script type="text/javascript"> $(function(){//文档加载完毕后才执行内部 //1、根据id获取jquery对象 var $div = $("#id"); console.debug($div); //2、根据元素选择jQuery对象 var $divs = $("div"); console.debug($divs); //3、根据类型匹配多个jQuery对象 var $classes = $(".hobbies"); console.debug($classes); //4、组合选择器匹配多个jQuery对象 var $elements = $("#mydiv,a"); console.debug($elements); }) </script>
三、JQuery注册事件的四种方式
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28<script type="text/javascript"> $(function(){//文档加载完毕后才执行内部 //1、方式一常用方式，支持事件委托!(推荐) $("#btn1").on("click",function(){ alert("方式一常用方式"); }) //2、方式一绑定 $("#btn1").bind("click",function(){ alert("方式二bind方式"); }) //3、方式三 $("#btn1").one("click",function(){ alert("方式三只能点一次"); }) //4、方式四，直接.事件名 $("#btn1").click(function(){ alert("方式四.事件名"); }) }) </script> </head> <body> <input type="button" value="注册事件方式1" id="btn1"> <input type="button" value="注册事件方式2" id="btn2"> <input type="button" value="注册事件方式3" id="btn3"> <input type="button" value="注册事件方式4" id="btn4"> </body>
四、JQuery事件委托机制
存在层级关系的事件，需要对执行的顺序进行设定
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20<script type="text/javascript"> $(function(){//文档加载完毕后才执行内部 //存在层级的执行关系 $("#btn").on("click",function(){ $("#filediv").append("<input type='button' code='button' value='按钮'><br/>"); }) //绑定事件在input标签上 $("#filediv").on("click","input[code='button']",function(){ alert("成功了！"); }) }) </script> </head> <body> <input type="button" value="动态添加按钮" id="btn"> <div id="filediv"> <input type="button" code="button" value="按钮"><br/> </div> </body>
五、JQuery中的方法
1、jQuery操作html/文本/value属性值
- html():和innerHTML效果一样
- text()：和innerText效果一样
- 上述两个传了参数就是添加文本
- val()：只获取value
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<script type="text/javascript"> $(function(){//文档加载完毕后才执行内部 /* var html = $("#filediv").html("<input type='button' value='按一手'><br/>");//获得的是js对象 var $html = $(html); console.debug(html); console.debug($html); */ //text() /* var text = $("#btn").text("<input type='button' code='button' value='按一手'><br/>"); console.debug(text); */ //val() var value = $("input[code='button']").val();//获得对应value的值 console.debug(value); }) </script>
2、jQuery操作元素或节点的方法
添加：append()-------$(A).append(B)的操作，是把B追加到A中
appendTo()---------$(A).appendTo(B)的操作，即不是把B追加到A中，而是把A追o加到B中
删除：remove()，empty()
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43<script type="text/javascript"> $(function(){//文档加载完毕后才执行内部 /* 添加：append()，appendTo() 删除：remove()，empty() 复制：clone(true) */ //1、$(A).append(B)的操作，是把B追加到A中 var $mydiv = $("#mydiv"); $mydiv.append("<h2>追加</h2>"); //2、$(A).appendTo(B)的操作，即不是把B追加到A中，而是把A追加到B中 var $youdiv = $("#youdiv"); $youdiv.appendTo("#mydiv"); //3、remove()删除所有元素 //$mydiv.remove(); //4、empty()删除匹配的元素集合中所有的子节点。 //$mydiv.empty(); //5、clone(true) 一个布尔值（true 或者 false）指示事件处理函数是否会被复制。 //先给按钮绑定事件 $("input[code='button']").on("click",function(){ alert(1); }) //进行复制 $("#btn").on("click",function(){ $("input[code='button']:first").clone(true).appendTo("#filediv");//first获取第一个元素 }) }) </script> </head> <body> <div id="mydiv">这是我的div</div> <div id="youdiv"><h4>div是你的</h4></div> <input type="button" value="动态添加按钮" id="btn"> <div id="filediv"> <input type="button" code="button" value="按钮"><br/> </div> </body>
3、jQuery操作dom的属性和样式
①、操作属性：JQuery对象.attr()，removeAttr(),data()
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34<script type="text/javascript"> $(function(){//文档加载完毕后才执行内部 //jQuery中获取属性的值有2种方式: //方式一：attr()，如果没有这个属性，就是添加该属性 var $input1 = $("#username") var input2 = $input1.attr("name"); $input1.attr("sex","false"); console.debug($input1); //方式二：data()获取到的值，会转为对应的类型，获取是以data-开始的属性 var input2 = $("#username").data("email"); console.debug(input2); //并且会转成对应类型 console.debug(typeof input2); //3、删除属性 $input1.removeAttr("name"); //4、添加属性 $("#addAttribute").on("click",function(){ $("input:eq(4)").attr("a","A"); }) }) </script> </head> <body> <input type="text" id="username" data-age="22" data-sex="true" name="wang" data-email="12@qq.com" data-person='{"name":"王天霸","age":33,"sex":"男"}' /> <input type="button" id="addAttribute" value="添加属性" /><br /> <input type="text" id="username" /> </body>
②、操作样式：css()，addClass()，removeClass()
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22<script type="text/javascript"> $(function(){//文档加载完毕后才执行内部 //css()，addClass()，removeClass() //方式一 //$("#p").css("color","pink");//设置一个样式 //$("#p").css({ color: "#ff0011", background: "blue" });//设置多个样式 //方式二：相当于添加一个属性标签 $("#p").addClass("ps"); $("#p").removeClass("ps");//移除 }) </script> <style type="text/css"> .ps{ color: red; } </style> </head> <body> <p id="p">湖人总冠军</p> </body>
六、JQuery练习题
第一题
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54<script type="text/javascript"> $(function() { //第一题：先绑定事件，使用checked进行选择 $("#btn").on("click",function(){ var $inputs = $("input[type='checkbox']:checked"); console.debug($inputs); }) //第二题：hide中三个参数，第一个是设置速度，第二个是切换的效果，第三个是结束后的函数 $("p").on("click",function(){ $(this).hide(1000,"swing",function(){ alert("没了！"); }) }) //第三题：使用奇偶行设置不同的值，even是索引值为偶数的元素，odd是索引值为奇数的元素 $("tr:even").css({"color":"red","background":"green"}) $("tr:odd").css({"color":"pink","background":"yellow"}) }); </script> </head> <body> 篮球 <input type="checkbox" name="hobbies" /> 足球 <input type="checkbox" name="hobbies" /> 羽毛球 <input type="checkbox" name="hobbies" /> <input value="点击获取选中的input标签" type="button" id="btn" /> <br />点击p标签隐藏 <br /> <p>p1</p> <p>p2</p> <p>p3</p> <br />给不同的行添加颜色<br/> <table border="1" width="200px"> <tr> <td>item1</td> </tr> <tr> <td>item2</td> </tr> <tr> <td>item3</td> </tr> <tr> <td>item4</td> </tr> <tr> <td>item5</td> </tr> </table> </body>
第二题
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54<script type="text/javascript"> $(function(){ //选单个的标签向右边传递，先绑定事件 $("#btn1").on("click",function(){ //对选中的标签要进行选择，使用select匹配所有选中的option元素 $("#select1 option:checked").appendTo($("#select2")); }) //一次性全部选中向右传递 $("#btn2").on("click",function(){ //对选中的标签要进行选择，使用select匹配所有选中的option元素 $("#select1 option").appendTo($("#select2")); }) //反向操作 $("input[type='button']:eq(2)").on("click",function(){ //对选中的标签要进行选择，使用select匹配所有选中的option元素 $("#select2 option:checked").appendTo($("#select1")); }) $("input[type='button']:eq(3)").on("click",function(){ //对选中的标签要进行选择，使用select匹配所有选中的option元素 $("#select2 option").appendTo($("#select1")); }) }); </script> </head> <body> <table border="1"> <tr> <td> <select id="select1" style="width:100px" size="10" multiple="multiple"> <option value="选项1">选项1</option> <option value="选项2">选项2</option> <option value="选项3">选项3</option> <option value="选项4">选项4</option> <option value="选项5">选项5</option> <option value="选项6">选项6</option> <option value="选项7">选项7</option> <option value="选项8">选项8</option> <option value="选项9">选项9</option> </select> </td> <td align="center"> <input type="button" id="btn1" value="-->"/><br/> <input type="button" id="btn2" value="==>"/><br/> <input type="button" value="<--"/><br/> <input type="button" value="<=="/> </td> <td> <select id="select2" style="width:100px" size="10" multiple="multiple"></select> </td> </tr> </table> </body>
第三题
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55<script type="text/javascript"> $(function(){ //先绑定事件 $("#checkAll").on("click",function(){ $("input[name='hobbies']").each(function(i,obj){ $(obj).prop({"checked":true}) }) }) $("#checkNotAll").on("click",function(){ $("input[name='hobbies']").each(function(i,obj){ $(obj).prop({"checked":false}) }) }) $("#checkUnAll").on("click",function(){ $("input[name='hobbies']").each(function(i,obj){ if(obj.checked){//这里是js对象 $(obj).prop({"checked":false}) }else{ $(obj).prop({"checked":true}) } }) }) }); function checkChange(src){//已经绑定事件了 var che = src.checked; if(che){ $("input[name='hobbies']").prop({ checked:true }) }else{ $("input[name='hobbies']").prop({ checked:false }) } } </script> </head> <body> 请选择你的爱好:<br/> <div> <input type="checkbox" name="hobbies"/>打篮球 <input type="checkbox" name="hobbies"/>踢足球 <input type="checkbox" name="hobbies"/>上网 </div> <div> <input type="checkbox" onchange="checkChange(this)"/>全选/全不选<br/> <input type="button" id="checkAll" value="全选"/> <input type="button" id="checkNotAll" value="全不选"/> <input type="button" id="checkUnAll" value="反选"/> </div> </body>
第四题
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63<script type="text/javascript"> $(function() { $("#btn1").on("click",function(){ $("#select").val("2号"); }) $("#btn2").on("click",function(){ $("#selectMultiple").val(["2号","5号"]); }) $("#btn3").on("click",function(){ $("input[type='checkbox']").val(["复选2","复选4"]); }) $("#btn4").on("click",function(){ $("input[value='单选2']").prop("checked",true); }) $("#btn5").on("click",function(){ var $inputs = $(":checked"); $.each($inputs,function(i,n){ console.debug(n); }) }) }); </script> <title>练习5</title> </head> <body> <input id="btn1" type="button" value="使单选下拉框‘2号’选中"/><br/> <input id="btn2" type="button" value="使多选下拉框‘2号’和‘5号’选中"/><br/> <input id="btn3" type="button" value="使复选框‘2号’和‘4号’选中"/><br/> <input id="btn4" type="button" value="使单选框‘单选2’选中"/><br/> <input id="btn5" type="button" value="打印已被选中的值"/><br/> <form name="userForm"> 单选下拉框<select id="select" name="select"> <option value="1号">1号</option> <option value="2号">2号</option> <option value="3号">3号</option> <option value="4号">4号</option> <option value="5号">5号</option> <option value="6号">6号</option> </select> 多选下拉框<select id="selectMultiple" multiple="multiple" size="6" name="selectMultiple"> <option value="1号">01号</option> <option value="2号">02号</option> <option value="3号">03号</option> <option value="4号">04号</option> <option value="5号">05号</option> <option value="6号">06号</option> </select> <br/> 复选框<input value="复选1" type="checkbox" name="checkbox"/>复选1 <input value="复选2" type="checkbox" name="checkbox"/>复选2 <input value="复选3" type="checkbox" name="checkbox"/>复选3 <input value="复选4" type="checkbox" name="checkbox"/>复选4 <input value="复选5" type="checkbox" name="checkbox"/>复选5 <br/> 单选框<input value="单选1" type="radio" name="radio"/>单选1 <input value="单选2" type="radio" name="radio"/>单选2 <input value="单选3" type="radio" name="radio"/>单选3 <input value="单选4" type="radio" name="radio"/>单选4 </form> </body>
第五题
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55<script language="javascript"> $(function(){ $("#btn_submit").on("click",function(){ var username = $("#username").val(); var email = $("#email").val(); var tel = $("#tel").val(); //进行追加 var th = "<tr>"+ "<td>"+username+"</td>"+ "<td>"+email+"</td>"+ "<td>"+tel+"</td>"+ "<td>"+"<a href='javascript:void(0)' οnclick='remove(this)' >删除</a></td>" +"</tr>"; $(th).appendTo("#userTbody") }) //删除所有 $("#btn_removeAll").on("click",function(){ $("#userTbody").empty();//清空内部 }) }); function remove(a){//a标签 $(a).closest("tr").remove();//closest从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素 } </script> </head> <body> <a href="http://www.itsource.cn">首页</a> <form name="userForm"> <center> 用户录入<br/> 用户名:<input id="username" name="username" type="text"/> E-mail:<input id="email" name="email" type="text"/> 电话:<input id="tel" name="tel" type="text"/> <input type="button" value="提交" id="btn_submit"/> <input type="button" value="删除所有" id="btn_removeAll"/> </center> </form> <hr/> <table border="1" align="center"> <thead> <tr> <th>用户名</th> <th>E-mail</th> <th>电话</th> <th>操作</th> </tr> </thead> <tbody id="userTbody"> </tbody> </table> </body>
七、JSON格式数据
1、JSON格式数据概述
JSON格式字符串转JSON对象，标准的json格式字符串数据 属性必须加"",JSON字符串转JSON对象有3种方式：
- 方式一：使用eval转，eval("("+jsonStr+")");json字符串不是标准的也能转
- 方式二：使用JSON.parse(jsonStr);只能转标准的json字符串
- 方式三：使用jquery的方式转$.parseJSON(jsonStr);它是基于第二种的实现，只能转标准的json字符串(推荐使用它)
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34<script type="text/javascript"> $(function(){//文档加载完毕后才执行内部 //创建json对象，也是json格式 var person = {"name":"王天霸","age":22,"dept":{"id":1,"name":"开发部"}}; console.debug(person); console.debug(person.name); console.debug(person.dept.name); //创建json数组 var person2 = [ {"name":"王天霸","age":22,"dept":{"id":1,"name":"开发部"}}, {"name":"西门吹雪","age":23,"dept":{"id":2,"name":"公关部"}} ] console.debug(person2); console.debug(person2[1].dept.name); //JSON格式字符串转JSON对象，标准的json格式字符串数据 属性必须加"" var jsonStr = '{"name":"王天霸","age":22}'; console.debug(jsonStr);//是一个字符串 //方式一：使用eval转，eval("("+jsonStr+")");json字符串不是标准的也能转 var jsonStr1 = eval("("+jsonStr+")") console.debug(jsonStr1); //方式二：使用JSON.parse(jsonStr);只能转标准的json字符串 var jsonStr2 = JSON.parse(jsonStr); console.debug(jsonStr2); //方式三：使用jquery的方式转$.parseJSON(jsonStr);它是基于第二种的实现，只能转标准的json字符串(推荐使用它) var jsonStr3 = $.parseJSON(jsonStr); console.debug(jsonStr3); }) </script>
2、JSON方法来定义对象
-
1.创建对象
- 使用 new Xxx()创建对象
- 使用JSON创建对象
-
设置属性
- 普通设置 对象.属性名=值
- 动态设置值 对象[“属性名”]=值
-
删除属性
- delete 对象.属性名 或者 delete 对象[“属性名”]
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24<script type="text/javascript"> $(function(){//文档加载完毕后才执行内部 //1、创建对象 var user = { name : "老王", age : 18, eat:function(){ alert("这是方法") } } //2、添加属性 user.sex = "false"; user.add = function(){ alert("嘿嘿嘿") } console.debug(user.sex) user.add(); //3、删除属性:delete 对象.属性名 或者 delete 对象["属性名"] delete user.sex; console.debug(user) }) </script>
八、省市二级联动（练习）
就是在日常填写信息时，当输入了省，会自动匹配市
-
part1: 二级联动后台准备
前台页面
发布项目
准备mvc环境：tomcat环境
准备模拟数据
-
part2:发送Ajax加载省份
-
part3:根据省份发送Ajax加载市
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39<script type="text/javascript"> $(function(){ //1、需要在页面加载的时候就把省份加载进去 function load(){//已经获取了省份信息 //$.get通过远程 HTTP GET 请求载入信息 $.get("/provinces",function(date){//这里的参数就是后台返回的数据 $(date).each(function(i,n){ //将省份的信息追加 $("#province").append("<option value='"+n.id+"'>"+n.name+"</option>") }) }) } load(); //2、加载市的信息，首先绑定事件，在省的数据发生变化的时候市才显示 $("#province").on("change",function(){ $("#city").empty();//每次需要对市的信息进行清空 $("#city").append("<option value='-1'>请选择</option>")//清空以后再重写 //获取id传递到后台 var id = $(this).val(); var param = {"id":id} $.get("/city",param,function(date){//获取市的信息 $(date).each(function(i,n){ //将市信息追加 $("#city").append("<option value='"+n.id+"'>"+n.name+"</option>") }) }) }) }) </script> </head> <body> 省份:<select id="province"> <option value="-1">请选择</option> </select> 市: <select id="city"> <option value="-1">请选择</option> </select> </body>
控制层信息
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23package cn.itsource.controller; import java.util.List; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; @Controller public class CityController { @RequestMapping("/provinces") @ResponseBody/*返回json格式数据*/ public List<City> provinces(){ return CityService.getProvinces();//把省份的数据接口写好了 } @RequestMapping("/city") @ResponseBody/*返回json格式数据*/ public List<City> city(Long id){ return CityService.findCityByProvinceId(id); } }
最后
以上就是迷路白羊最近收集整理的关于Java小白学习指南【day41】---JQuery基础一、JQuery的认识二、JQuery的基本使用三、JQuery注册事件的四种方式四、JQuery事件委托机制五、JQuery中的方法六、JQuery练习题七、JSON格式数据八、省市二级联动（练习）的全部内容，更多相关Java小白学习指南【day41】---JQuery基础一、JQuery内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
![[springboot一本通]-1.5.IDEA环境下的热加载与热部署](/uploads/reation/bcimg10.png)
发表评论 取消回复