舒大少博客

一个95后少年的个人博客

当前时间为:
欢迎大家来到舒大少博客http://admin.evshou.com,广告合作以及淘宝商家推广请微信联系15357240395

2020java框架教程之springMVC的json类型

2020-12-16 10:26:10
swq1822677238

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全选、反选、全不选

2020-11-21 16:36:20
swq1822677238

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移动

2020-11-21 16:30:43
swq1822677238

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省市级联

2020-11-21 16:27:03
swq1822677238

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节点

2020-11-21 10:57:06
swq1822677238

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样式

2020-11-21 10:06:17
swq1822677238

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数组遍历

2020-11-21 09:51:35
swq1822677238

2020javaweb教程之jQuery数组遍历

数组遍历

<script>
    var arr=[1,2,3,4,5];
    $(function(){
        $.each(arr,function(i,v){
            console.log(i+"..."+v)
        })
    })
</script>


2020javaweb教程之jQuery添加元素和删除元素

2020-11-20 16:29:55
swq1822677238

2020javaweb教程之jQuery添加元素和删除元素

添加元素

<p id="p1">这是条默认的文本</p>
<button>在默认文本内部前面添加文本</button>
<button>在默认文本内部后面添加文本</button><br>
<button>在默认文本外部上面添加元素</button>
<button>在默认文本外部后面添加元素</button>
<script>
 (更多…)

2020javaweb教程之jQuery设置属性、获取属性

2020-11-20 15:21:35
swq1822677238

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事件

2020-11-20 10:47:16
swq1822677238

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选择器

2020-11-20 09:25:37
swq1822677238

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>
(更多…)