2020java框架教程之spring的json类型
1.jackson
<!-- jackson --> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.12.0</version> </dependency>
控制层：
//json查询所有
@ResponseBody
@RequestMapping(value = "/listjson",method = RequestMethod.GET)
public Collection<User> listjson(){
return usersDao.getAll();
}
2.gson
2020javaweb教程之jQuery全选、反选、全不选
<table>
<tr>
<td><input type="checkbox" id="allbox">全选</td>
<td><input type="checkbox" id="allnobox">全不选</td>
<td><input type="checkbox" id="fanbox">反选</td>
</tr>
<tr>
<td><input type="checkbox" class="box"></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" class="box"></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" class="box"></td>
<td></td>
</tr>
</table>
<script>
$(function(){
var allbox=$("#allbox");//获取全选
var boxs=$(".box");//获取所有复选框
//反选
var fx=$("#fanbox");
fx.click(function(){
for(var i=0;i<boxs.length;i++){
var r=$(boxs[i]).prop("checked");
if(r==true){
$(boxs[i]).prop("checked",false)
}else $(boxs[i]).prop("checked",true)
}
})
//全选
allbox.click(function(){
var result=$(this).prop("checked");
if(result==true){
boxs.prop("checked",true);
}else boxs.prop("checked",false);
})
//全不选
var allnobox=$("#allnobox");
allnobox.click(function(){
var lists=$("input[type='checkbox']");
for(var i=0;i<lists.length;i++){
var r=$(lists[i]).prop("checked");
if(r==true) {
$(lists[i]).prop("checked",false)
}
}
})
//反向全选 2.利用 each迭代
boxs.click(function(){
var c=0;
$.each(boxs,function(i,v){
if($(boxs[i]).prop("checked")==true){
c++;
if(c==boxs.length){
allbox.prop("checked",true);
}
else allbox.prop("checked",false);
}
})
})
//反向全选 1.利用for循环
boxs.click(function(){
var c=0;//计数器
for(var i=0;i<boxs.length;i++){
//如果多个复选框都为true
var r=$(boxs[i]).prop("checked");
if(r==true){
c++;//计数器++
//如果计数器等于多个复选框，将全选框设置true
if(c==boxs.length) {
allbox.prop("checked",true);
}
//否则全选为false
else allbox.prop("checked",false);
}
}
})
})
</script>
2020javaweb教程之jQuery移动
<style>
select{width: 200px;height: 100px;}
</style>
<select name="" id="s1" size="10">
<option value="1">北京</option>
<option value="2">天津</option>
<option value="3">上海</option>
<option value="4">重庆</option>
<option value="5">石家庄</option>
</select>
<button id="btn1">右移>></button>
<button id="btn2">全部右移</button>
<button id="btn3">左移<<</button>
<button id="btn4">全部左移</button>
<select name="" id="s2" size="10">
</select>
<script>
$(function(){
var s1=document.getElementById("s1");
var s2=document.getElementById("s2");
$("button:first").click(function(){
$("#s2").append(s1.options[s1.selectedIndex]);
})
$("button:eq(2)").click(function(){
$("#s1").append(s2.options[s2.selectedIndex]);
})
$("button:eq(1)").click(function(){
$("#s2").append(s1.options);
})
$("button:eq(3)").click(function(){
$("#s1").append(s2.options);
})
})
</script>
2020javaweb教程之jQuery省市级联
<select name="" id="a">
<option value="0">请选择</option>
</select>
<select name="" id="b">
<option value="0">请选择</option>
</select>
<script>
$(function(){
var arr=new Array();
arr["河北省"]=["保定","石家庄","张家口"];
arr["四川省"]=["成都","绵阳","乐山"];
arr["山东省"]=["济南","青岛","烟台","泰安"];
for(var key in arr){
$("#a").append("<option value='"+key+"'>"+key+"</option>")
}
$("#a").change(function(){
$("#b").empty();
$("#b").append("<option value=\"0\">请选择</option>");
var values=arr[$(this).val()];
for(var i in values){
$("#b").append("<option value='"+values[i]+"'>"+values[i]+"</option>")
}
})
})
</script>
2020javaweb教程之jQuery节点
父节点：parent()
子节点：children()
同胞节点：siblings()
<div id="div">
<p>div_1</p>
<p>div_2</p>
<p id="p3">div_3</p>
<p>div_4</p>
<p>div_5</p>
<div id="div2">
<p>div2_1</p>
<p>div2_2</p>
</div>
</div>
（更多…）
2020javaweb教程之jQuery的css样式
css样式
<style>
.a{color:red;font-size: 40px;}
.b{font-style: italic;color: aqua;font-size: 40px;}
</style>
jQuery
<p>这是一段文本</p>
<script>
$(function(){
$("p").mouseover(function(){
$(this).removeClass();//移除所有的样式
$(this).addClass("a");//添加样式 a
}).mouseout(function(){
$(this).removeClass();//移除所有的样式
$(this).addClass("b");//添加样式 b
})
})
</script>
2020javaweb教程之jQuery数组遍历
数组遍历
<script>
var arr=[1,2,3,4,5];
$(function(){
$.each(arr,function(i,v){
console.log(i+"..."+v)
})
})
</script>
2020javaweb教程之jQuery添加元素和删除元素
添加元素
<p id="p1">这是条默认的文本</p> <button>在默认文本内部前面添加文本</button> <button>在默认文本内部后面添加文本</button><br> <button>在默认文本外部上面添加元素</button> <button>在默认文本外部后面添加元素</button> <script> （更多…）
2020javaweb教程之jQuery设置属性、获取属性
获取
DOM：document.getElementById(“ele”);
jquery：$(“#ele”)
DOM:操作的是JavaScript原生对象
jQuery：操作的是自己封装的对象，当中包含了原生对象
注意：只有jQuery对象才可以操作jQuery函数
获得内容
<p>这是第一段文本</p> <p><span>这是第二段文本</span></p> <p>这是第三段文本</p> <input type="password" id="pwd"><br> <button id="btn1">获取第一段文本内容</button> <button id="btn2">获取第二段文本html内容</button> <button id="btn3">获取密码框内容</button> （更多…）
2020javaweb教程之jQuery事件
jQuery获得焦点和失去焦点
<input type="text" id="user">
<script>
$(function(){
$("#user").focus(function(){//获得焦点
$(this).css("backgroundColor","red")
}).blur(function(){ //失去焦点
$(this).css("backgroundColor","orange")
})
})
</script>
单击、双击、鼠标移入和移出
<p>这是第一段文本</p>
<p>这是第二段文本</p>
<p>这是第三段文本</p>
<script>
$(function(){
$("p").click(function(){//单击事件
$(this).css("color","red");
})
$("p").dblclick(function () {//双击事件
$(this).css("fontSize","50px")
})
$("p").hover(function(){//鼠标移入
$(this).css("color","orange")
},function () { //鼠标移出
$(this).css("color","black")
})
})
</script>
鼠标按下和鼠标松开
<p>你点我干哈</p>
<script>
$(function(){
$("p").mousedown(function(){
$(this).text("你点击了我")
}).mouseup(function () {
$(this).text("你点我干哈")
})
})
</script>
2020javaweb教程之jQuery和jQuery选择器
概述：
jQuery是一个快速、简洁的JavaScript框架。
jQuery设计的宗旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事情。
什么是jQuery？
jQuery是一个JavaScript函数库
下载jQuery：
1 jQuery.com 下载jQuery库
2.从CDN中载入jQuery
语法：<script src=”uri”></script>
（更多…）
