HTML、CSS、JS、jQuery

最新推荐文章于 2024-05-05 06:39:26 发布
最新推荐文章于 2024-05-05 06:39:26 发布
阅读量6.1k 收藏 2
点赞数
分类专栏： 前端基础 文章标签： html5 css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43026811/article/details/89921254
版权

前端技巧

HTML

form表单

input的type常用类型

  1. text属性
    input标签type默认属性为text
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form>
        <input type="text" size="10" value="哈哈">
        <input type="text" name="fruit" placeholder="水果" list="datalist1">
        <datalist id="datalist1">
            <option>苹果</option>
            <option>香蕉</option>
            <option>菠萝</option>
            <option>西瓜</option>
        </datalist>
        <input type="submit" value="提交">
    </form>
</body>
</html>

在这里插入图片描述
2. textarea标签（文本长宽可调）

<textarea name="ha" rows="10px" cols="20px"></textarea>

在这里插入图片描述
3. range和number标签

<input type="range" min="0" max="100" step="20">
<input type="number" min="0" max="200" step="20">

在这里插入图片描述
4. checkbox和radio

<input type="checkbox">选择
<input type="radio" name="animal" value="cat" checked>猫
<input type="radio" name="animal" value="dog">狗

在这里插入图片描述
5. date

<input type="date" name="date">

在这里插入图片描述
6. hidden和submit

<input type="hidden" name="hidden" value="1" >
<input type="submit" value="提交">
  1. file
<input type="file" required multiple><!--required 必须有内容 所有input都可以指定  multiple可以选多个-->
需添加form表单属性
<form enctype="multipart/form-data">

图片分区响应

<img src="timg.jpg" alt="加载失败" width="128px" height="128px" usemap="#map1">
<map name="map1">
    <area shape="circle" coords="63px,56px,45px" href="https://www.baidu.com"></map>
</map>

1、距形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))
<area shape="rect" coords="x1,y1,x2,y2" href=url>
2、圆形：(圆心坐标为(X1,y1)，半径为r)
<area shape="circle" coords="x1,y1,r" href=url>

视频播放

<video src="WeChat_20190507151006.mp4" controls loop>
        <source src="WeChat_20190507151006.mp4" type="video/mp4">
        <source src="WeChat_20190507151006.ogv" type="video/ogv">
    </video>

src: 输入视频的地址
height: 视频高度  只设置高度 宽度会自适应
controls: 视频可选择播放、暂停、调声音、全屏和缩小等
autoplay： 打开自动播放
preload: none 不加载(打开页面就预先加载部分视频)
	   ：metadata 加载第一帧 
	   ：auto 加载  默认是加载的
Loop: 视频循环播放
Poster: 视频载入时显示图片(首图)
Muted: 视频静音

source标签
	用视频转换器转换视频格式,浏览器不支持视频格式时会去加载source里的格式

把video换成audio，可以音频播放

CSS

样式选择器

类型选择器
	所有的a标签都会使用该样式
	a{
		font-size: 40px;
		color: red;
	}
类选择器
	所有属性有 class="class1" 的标签会有该样式
	.class1{
	}
id选择器
	作用于标注id1的
	#id1{
	}
:选择器
	a:hover{
	}

background背景图

body{
    background-image: url("timg.jpg");
    background-repeat: no-repeat;  不重复出现
    background-attachment: local;  显示位置
    background-size: cover;   全页面显示   默认为auto
}

text文本样式

text-align: center; 文本居中
letter-spacing: 22px; 字间距
line-height: 10px; 行高
text-indent: 50px; 首行缩进
text-decoration: overline;上划线
text-decoration: underline;下划线
				line-through;中划线
text-transform: capitalize; 首字母自动大写
				uppercase;全大写
font-family: 宋体; 设置字体
font-style: italic; 斜体
font-weight: bold;加粗

transition过渡

p{
    width: 100px;
    height: 100px;
    background-color: beige;
}
p:hover{
    width: 200px;
    height: 200px;
    background-color: coral;
    transition-delay: 100ms; 延迟变化时间
    transition-duration: 1s; 渐进
    transition-property:background-color,width;过渡只作用在选的属性上  可设置其他的
    transition-timing-function: ease; 变化越来越慢 ease-in 越来越快  ease-in-out 中间快 两边慢  默认线性变化
}

animation动画

p{
    width: 100px;
    height: 100px;
    background-color: beige;
}
p:hover{
    animation-delay: 200ms;
    animation-duration: 1s;
    animation-name: donghua;
    animation-iteration-count: infinite;  动画次数
    animation-direction: alternate;		 交替变换(小->大->小)  不带是 小->大  小->大
}
@keyframes donghua {
    from{
        width: 120px;
        height: 120px;
        background-color: beige;
    }
    50%{
        width: 50px;
        height: 50px;
        background-color: blue;
    }
    to{
        width: 200px;
        height: 200px;
        background-color: coral;
    }
}

transform变化

p{
            width: 100px;
            height: 100px;
            background-color: beige;
        }
        p:hover{
            width: 150px;
            height: 150px;
            transform: rotate(30deg);顺时针转动30度
            			scale(1.5); 鼠标经过会变成1.5倍
            transform-origin: bottom right; 旋转点(锚点)
        }

javaScript

数据类型

String: 字符串
Number: 数字
Boolean: 布尔
Null: 空值
undefined：未定义
Object: 对象

特殊数据和查看数据类型

Infinity 无穷  number
NaN 类型 number
null  类型Object
var a;
console.log(typeof a);  typeof a可以查看a的类型

类型转换

转String:
var a;
a = String(a);
转Number:
Number(a);
a为非数字字符串时转为NaN
a为true时，转为1,false为0
parseInt()和parseFloat()可以将字符串开头是数字的转为number
转Boolean
Boolean(a);
a为 "",0,null,undefined,NaN时转为false,其余都是true

jQuery

基础

菜鸟教程

jQuery 插件

1. 插件都需要引来Jquery.js

<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

jQuery Validation

1. 导入js

<script src="https://cdn.bootcss.com/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-validate/1.19.1/localization/messages_zh.min.js"></script>
<!-- 自定义方法 -->
<script src="https://cdn.bootcss.com/jquery-validate/1.19.1/additional-methods.min.js"></script>

2. example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-validate/1.19.1/localization/messages_zh.min.js"></script>
<!-- 自定义方法 -->
<script src="https://cdn.bootcss.com/jquery-validate/1.19.1/additional-methods.min.js"></script>
<script>
<form id="inputForm" class="form-horizontal" th:action="@{/user/save}" method="post">
    <div class="box-body">
        <div class="form-group">
            <label for="username3" class="col-sm-2 control-label">用户名</label>

            <div class="col-sm-10">
                <input name="username" class="form-control required" th:value="${user.getUsername()}" id="username3" placeholder="请输入用户的用户名">
            </div>
        </div>
        <div class="form-group" hidden>
            <div class="col-sm-10">
                <input name="id" th:value="${user.getId()}">
            </div>
        </div>
        <div class="form-group">
            <label for="mobile3" class="col-sm-2 control-label">电话</label>

            <div class="col-sm-10">
                <input name="mobileNumber" class="form-control required mobile" th:value="${user.getMobileNumber()}" id="mobile3" placeholder="请输入用户的电话">
            </div>
        </div>
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>

            <div class="col-sm-10">
                <input type="email" name="email" class="form-control required email" th:value="${user.getEmail()}" id="inputEmail3" placeholder="请输入用户的邮箱">
            </div>
        </div>
        <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">密码</label>

            <div class="col-sm-10">
                <input type="password" name="password" class="form-control required" id="inputPassword3" th:value="${user.getPassword()}" placeholder="请输入用户的密码">
            </div>
        </div>
    </div>
    <!-- /.box-body -->
    <div class="box-footer">
        <button type="button" class="btn btn-default" onclick="history.back();">返回</button>
        <button type="submit" class="btn btn-info pull-right">提交</button>
    </div>
    <!-- /.box-footer -->
</form>

validate.js

/**
 * 函数对象
 * @constructor
 */
var Validate = function () {
    var initValidate = function () {
        $.validator.addMethod("mobile", function (value, element) {
            var length = value.length;
            var mobile = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
            return this.optional(element) || (length == 11 && mobile.test(value));
        }, "手机号码格式错误");
    };
    /**
     * 表单验证
     * @param formId
     */
    var ValidateForm = function (formId) {
        $("#" + formId).validate({
            errorElement: 'span',
            errorClass: 'help-block',
            errorPlacement: function (error, element) {
                element.parent().parent().attr("class", "form-group has-error");
                error.insertAfter(element);
            }
        });
    };
    return {
        initValidate: function () {
            initValidate();
        },
        validateForm: function (formId) {
            ValidateForm(formId);
        }
    }
}();

$(function () {
    Validate.initValidate();
});

jQuery iCheck

<link href="https://cdn.bootcss.com/iCheck/1.0.2/skins/all.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/iCheck/1.0.2/icheck.min.js"></script>

1. 使用 <input type="checkbox" class="minimal"> (放入table的 th开头和tr开头)
2. 初始化ICheck,导入js
3. 第一个iCheck控制所有iCheck

delMul.js

var app = function(){
    var icheck_master,_icheck,idArr;
    /**
     * 初始化
     */
    var initICheck = function () {
        $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
            checkboxClass: 'icheckbox_minimal-blue',
            radioClass   : 'iradio_minimal-blue'
        });
        icheck_master = $('input[type="checkbox"].minimal.icheck_master');
        _icheck = $('input[type="checkbox"].minimal');
    };

    var delMul = function (url) {
        idArr = new Array();
        _icheck.each(function () {
            var _id = $(this).attr("id");
            if(_id != null && _id != "undefine" && $(this).is(":checked")){
                idArr.push(_id);
            }
        });
        if(idArr.length === 0){
            $("#modal-default-message").html("至少需要选中一个");
        }else{
            $("#modal-default-message").html("确定删除吗");
        }
        $("#modal-default").modal("show");
        /*绑定点击事件 绑定前先取消绑定事件*/
        $(".modal-footer .btn.btn-primary").unbind("click");
        $(".modal-footer .btn.btn-primary").bind("click",function () {
            if(idArr.length !== 0){
                del();
            }
            $("#modal-default").modal("hide");
        });
        function del() {
            $.ajax({
                url: url,
                type: "POST",
                data: {"ids": idArr.toString()},
                datatype: "JSON",
                success: function (data) {
                    if(data.status === 200){
                        $("#modal-result-message").html("删除成功");
                    }else{
                        $("#modal-result-message").html(data.message);
                    }
                    $("#modal-result").modal("show");
                }
            });
        }
    };
    /**
     * 全选
     */
    var iCheckAll = function () {
        icheck_master.on("ifClicked",function (e) {
            //选中为false
            if (e.target.checked) {
                _icheck.iCheck("uncheck");
            }else{
                _icheck.iCheck("check");
            }
        });
    };
    return {
        init: function () {
            initICheck();
            iCheckAll();
        },
        getICheck: function () {
            return _icheck;
        },
        delMul: function (url) {
            delMul(url);
        }
    }
}();
$(function () {
    app.init();
});

example

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/iCheck/1.0.2/skins/all.css" rel="stylesheet">
</head>
<body>
<button onclick="app.delMul('/del')">批量删除</button>
<table>
    <th><input type="checkbox" class="minimal icheck_master"></th>
    <tr>
        <td><input id="1" type="checkbox" class="minimal"></td>
    </tr>
    <tr>
        <td><input id="2" type="checkbox" class="minimal"></td>
    </tr>
    <tr>
        <td><input id="3" type="checkbox" class="minimal"></td>
    </tr>
    <tr>
        <td><input id="4" type="checkbox" class="minimal"></td>
    </tr>
</table>
<!--模块框-->
<div th:replace="~{common/modal::default}"></div>
<div th:replace="~{common/modal::result}"></div>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/iCheck/1.0.2/icheck.min.js"></script>
<script src="../static/assets/delMul.js" th:src="@{/assets/delMul.js}"></script>
</body>
</html>

modal.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--模块框-->
<div class="modal fade" id="modal-default" th:fragment="default">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">温馨提示</h4>
            </div>
            <div class="modal-body">
                <p id="modal-default-message"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="modal-confirm">确定</button>
            </div>
        </div>
    </div>
</div>
<!--结果模块框-->
<div class="modal fade" id="modal-result" th:fragment="result">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">温馨提示</h4>
            </div>
            <div class="modal-body">
                <p id="modal-result-message"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>

jQuery DataTables

DataTables是伪分页，通过jquery实现页面显示分页(数据不要超过5W条)

DataTables官方API

<link href="https://cdn.bootcss.com/datatables/1.10.19/css/dataTables.bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.bootcss.com/datatables/1.10.19/js/dataTables.bootstrap.min.js"></script>

使用

<table id="example" class="table table-bordered table-striped">
        <thead>
        <tr>
            <th><input type="checkbox" class="minimal icheck_master"></th>
            <th>id</th>
            <th>电话</th>
            <th>密码</th>
            <th>昵称</th>
            <th>创建时间</th>
            <th>修改时间</th>
            <th>操作</th>
        </tr>
        </thead>
    </table>
<script>
    $(function () {
        var columns = [
            {
                "data": function (row, type, val, meta) {
                    return '<input id="' + row.id + '" type="checkbox" class="minimal" />';
                }
            },
            {"data": "id"},
            {"data": "mobileNumber"},
            {"data": "loginPwd"},
            {"data": "nickname"},
            {"data": "ctime"},
            {"data": "mtime"},
            {
                "data": function (row, type, val, meta) {
                    var detailUrl = "'/selectOne?id="+row.id+"'";
                    return '<button class="btn btn-sm btn-default" οnclick="userDetail('+detailUrl+');"><i class="fa fa-search"></i> 查看</button>&nbsp;&nbsp;&nbsp;' +
                        '<a href="#" type="button" class="btn btn-sm btn-primary"><i class="fa fa-edit"></i> 编辑</a>&nbsp;&nbsp;&nbsp;' +
                        '<a href="#" type="button" class="btn btn-sm btn-danger"><i class="fa fa-trash-o"></i> 删除</a>'
                }
            }
        ];
        app.initDataTables("/page", columns);
    });
    /*查看个人详情*/
    function userDetail(url){
        $.ajax({
            url: url,
            type: "get",
            dataType: "html",
            success: function (data) {
                $("#modal-result-message").html(data);
                $("#modal-result").modal("show");
            }
        });
    }
</script>

var initDataTables = function (url,columns) {
        $("#example").DataTable({
            // 是否开启本地分页
            "paging": true,
            // 是否开启本地排序
            "ordering": false,
            // 是否显示左下角信息
            "info": true,
            // 是否允许用户改变表格每页显示的记录数
            "lengthChange": false,
            // 是否显示处理状态(排序的时候，数据很多耗费时间长的话，也会显示这个)
            "processing": true,
            // 是否允许 DataTables 开启本地搜索
            "searching": false,
            // 是否开启服务器模式
            "serverSide": true,
            // 控制 DataTables 的延迟渲染，可以提高初始化的速度
            "deferRender": true,
            // 分页按钮显示选项
            "pagingType": "full_numbers",
            ajax: {
                url: url,
                type: "get"
            },
            // 表格重绘的回调函数
            "drawCallback": function (settings) {
                app.init();
            },
            "columns": columns,
            "language": {
                "sProcessing": "处理中...",
                "sLengthMenu": "显示 _MENU_ 项结果",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页"
                },
                "oAria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            }
        });
    }

jQuery TreeTable

1. 添加样式和js

<link href="https://cdn.bootcss.com/jquery-treetable/3.2.0/css/jquery.treetable.min.css" rel="stylesheet">
<style>
    table.treetable tr.collapsed span.indenter a {
        background-image: url(data:image/png;base64,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);
    }
    table.treetable tr.expanded span.indenter a {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAAHFJREFUeNpi/P//PwMlgImBQsA44C6gvhfa29v3MzAwOODRc6CystIRbxi0t7fjDJjKykpGYrwwi1hxnLHQ3t7+jIGBQRJJ6HllZaUUKYEYRYBPOB0gBShKwKGA48VtbW3/8clTnBIH3gCKkzJgAGvBX0dDm0sCAAAAAElFTkSuQmCC);
    }
</style>
<script src="https://cdn.bootcss.com/jquery-treetable/3.2.0/jquery.treetable.min.js"></script>
<script>
    $(function () {
    	//table的id
        $("#treeTable").treetable({
            column: 1,//第二列
            expandable: true,//树为可扩展的
            stringExpand:"展开",//国际化
            stringCollapse:"收起",//国际化
        });
    });
</script>

2. table的<tr>标签绑定data-tt-id和data-tt-parent-id属性

<div class="box-body table-responsive">
                            <table id="treeTable" class="table table-hover">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>名称</th>
                                    <th>排序</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                    <tr th:each="contentCatetory:${list}" th:attr="data-tt-id=${contentCatetory.id},data-tt-parent-id=${contentCatetory.parentId}">
                                        <td th:text="${contentCatetory.id}"></td>
                                        <td th:text="${contentCatetory.name}"></td>
                                        <td th:text="${contentCatetory.sortOrder}"></td>
                                        <td>
                                            <a href="#" type="button" class="btn btn-sm btn-primary"><i class="fa fa-edit"></i> 编辑</a>&nbsp;&nbsp;&nbsp;
                                            <button href="#" type="button" class="btn btn-sm btn-danger"><i class="fa fa-trash-o"></i> 删除</button>&nbsp;&nbsp;&nbsp;
                                            <a href="#" type="button" class="btn btn-sm btn-default">增加下一级内容</a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

3. 返回的list顺序要按显示的顺序

private static void sortList(List<ContentCategory> sourceList,List<ContentCategory> targetList,Integer parentId){
    for (ContentCategory sourceContentCategory : sourceList) {
        if (sourceContentCategory.getParentId().equals(parentId)) {
            targetList.add(sourceContentCategory);
            //判断是否有子节点
            if (sourceContentCategory.getIsParent().equals(1)) {
                sortList(sourceList,targetList,sourceContentCategory.getId());
            }
        }
    }
}

jQuery zTree

1. 引入css和js

<link href="https://cdn.bootcss.com/zTree.v3/3.5.33/css/metroStyle/metroStyle.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/zTree.v3/3.5.33/js/jquery.ztree.core.min.js"></script>

2. html格式<ul id="myTree" class="ztree"></ul>
3. script

	var setting = {
            view: {
                // 禁止多选
                selectedMulti: false
            },
            async: {
                // 开启异步加载功能
                enable: true,
                // 远程访问地址
                url: "/contentCategory/treeData",
                // 选择父节点时会自动将节点中的参数传回服务器再重新取结果
                autoParam: ["id"]
            }
        };

        // 初始化 zTree 控件
        $.fn.zTree.init($("#myTree"), setting);
        // 绑定事件
        $("#modal_tree_confirm").bind("click", function () {
            // 获取 zTree 控件
            var zTree = $.fn.zTree.getZTreeObj("myTree");
            // 获取已选中的节点
            var nodes = zTree.getSelectedNodes();
            if (nodes.length == 0) {
                alert("请先选择一个父节点");
            } else {
                var node = nodes[0];
                $("#categoryId").val(node.id);
                $("#name").val(node.name);
                $("#modal-tree").modal("hide");
            }
        });

4. java返回树状结构,name属性为显示的文件名，isParent会显示是否有下级

@ResponseBody
    @PostMapping("/treeData")
    public List<ContentCategory> treeData(@RequestParam(required = false,defaultValue = "0") Integer id){
        ContentCategoryExample example = new ContentCategoryExample();
        example.createCriteria().andParentIdEqualTo(id);
        return contentCategoryService.selectByExample(example);
    }

dropzone文件拖拽上传

1. 引入css和js

<link href="https://cdn.bootcss.com/dropzone/5.5.1/min/basic.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/dropzone/5.5.1/min/dropzone.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/dropzone/5.5.1/min/dropzone.min.js"></script>

2. example

<div id="dropz" class="dropzone"></div>

<script>
    Dropzone.autoDiscover = false;
    $("#dropz").dropzone({
        url: "/upload",
        dictDefaultMessage: '拖动文件至此或者点击上传', // 设置默认的提示语句
        init: function () { //Dropzone 初始化的时候调用 添加事件监听器
            this.on("success", function (file, data) {
                // 上传成功触发的事件
                $("#pic").val(data.filename);
            });
        }
    });
</script>

3. java接收文件和配置

spring:
  servlet:
    multipart:
      max-file-size: 10MB #文件最大上传


/**
 * @author wzh
 * @date 2019/9/27 - 16:00
 */
@Controller
public class UploadController {
    private static final String UPLOAD_PATH = "static/upload/";
    @ResponseBody
    @RequestMapping("upload")
    public Map<String,Object> uoload(MultipartFile file, HttpServletRequest request){
        // 获取上传的原始文件名
        String fileName = file.getOriginalFilename();
        // 设置文件上传路径
        String filePath = null;
        try {
            filePath = ResourceUtils.getURL("classpath:").getPath()+UPLOAD_PATH;
            System.out.println(filePath);
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        }
        // 获取文件后缀
        String fileSuffix = fileName.substring(fileName.lastIndexOf("."), fileName.length());
        // 判断并创建上传用的文件夹
        File newFile = new File(filePath);
        if (!newFile.exists()) {
            newFile.mkdir();
        }
        newFile = new File(filePath, UUID.randomUUID()+fileSuffix);
        try {
            // 写入文件
            file.transferTo(newFile);
        } catch (IOException e) {
            e.printStackTrace();
        }
        Map<String,Object> data = new HashMap<>();
        //返回文件名
        data.put("filename","/upload/"+newFile.getName());
        return data;
    }
}

wangEditor富文本编辑器

官方文档
1. 引入css和js

<link href="https://cdn.bootcss.com/wangEditor/10.0.13/wangEditor.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/wangEditor/10.0.13/wangEditor.min.js"></script>

2. 创建富文本

<div class="box-body">
    <div class="form-group">
        <label class="col-sm-2 control-label">详情</label>
        <input id="content" name="content" hidden>
        <div class="col-sm-10">
            <div id="editor">
                <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
            </div>
        </div>
    </div>
</div>
$(function () {
    var E = window.wangEditor;
    var editor = new E('#editor');
    editor.create();
    //点击提交时,将富文本内容以html标签格式放入content中
    $("#btnSubmit").bind('click',function () {
        $("#content").val(editor.txt.html());
    });
});

3. wangEditor上传图片返回格式

{
    // errno 即错误代码，0 表示没有错误。
    //       如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
    "errno": 0,

    // data 是一个数组，返回若干图片的线上地址
    "data": [
        "图片1地址",
        "图片2地址",
        "……"
    ]
}
  1. 上传业务代码
@Controller
public class UploadController {
    private static final String UPLOAD_PATH = "static/upload/";

    /**
     * 上传
     * @param file  dropZone上传
     * @param editorFile wangEditor上传
     * @param request
     * @return
     */
    @ResponseBody
    @RequestMapping("upload")
    public Map<String,Object> uoload(MultipartFile file,MultipartFile editorFile, HttpServletRequest request){
        MultipartFile myFile = file == null?editorFile:file;
        // 获取上传的原始文件名
        String fileName = myFile.getOriginalFilename();
        // 设置文件上传路径
        String filePath = null;
        try {
            filePath = ResourceUtils.getURL("classpath:").getPath()+UPLOAD_PATH;
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        }
        // 获取文件后缀
        String fileSuffix = fileName.substring(fileName.lastIndexOf("."), fileName.length());
        // 判断并创建上传用的文件夹
        File newFile = new File(filePath);
        if (!newFile.exists()) {
            newFile.mkdir();
        }
        newFile = new File(filePath, UUID.randomUUID()+fileSuffix);
        try {
            // 写入文件
            myFile.transferTo(newFile);
        } catch (IOException e) {
            e.printStackTrace();
        }
        Map<String,Object> data = new HashMap<>();
        //文件URI路径
        String contentPath = "/upload/"+newFile.getName();
        if(file == null){
            data.put("errno",0);
            data.put("data",new String[]{UrlUtils.getBaseUrl(request)+contentPath});
        }else{
            data.put("filename",contentPath);
        }
        return data;
    }
}
随便OCE
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端学习，html,css,js,jquery.zip
01-05
前端学习，html,css,js,jquery前端学习，html,css,js,jquery前端学习，html,css,js,jquery 前端学习，html,css,js,jquery前端学习，html,css,js,jquery前端学习，html,css,js,jquery 前端学习，html,css,js,jquery...
最详细！！！前端原神官网 （采用html+css+js+dom+ajax+jquery+swiper+json）完整版
weixin_64551893的博客
06-15 3359
1.该项目采用了大部分前端知识，完整的复刻原神官网上所显示的全内容，非常全面和详细。希望有兴趣的小伙伴萌可以看看和参考一下！！！该项目可以作为大学生毕设项目（附带项目答辩ppt）同时也可以作为计算机专业的小伙伴的期末大作业。喜欢的请留下你的足迹吧！！！项目技术介绍HTML:HTML是超文本标记语言，（英语：HyperText Markup Language，简称：HTML），是一种用来创建网页的标准标记语言CSS:CSS是指层叠样式表，用来对网页的样式进行修饰，美化，布局。
介绍HTML、JavaScript、CSS、jQuery都是什么
qq_33537164的博客
04-08 519
HTML 的全称为：HyperText Mark-up Language, 指的是超文本标记语言。标记：就是标签, , 比如: 、等，标签大多数都是成对出现的。因为网页中还可以图片、视频、音频等内容(超越文本限制)它还可以在网页中跳转到另一个网页，与世界各地主机的网页链接(超链接文本)​ css(Cascading Style Sheet)层叠样式表，它是用来美化页面的一种语言。
HTML+CSS+JS+Jquery+练手项目+
最新发布
dgayuiafahf的博客
05-05 778
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
前端基础（HTML、CSS、JS、jQuery）
weixin_46287157的博客
04-18 670
HTML指的是。标记就是标签如，标签大多数都是成对出现的。HTML基本结构如下 1.1 常用标签（表格、表单、按钮等） 函数 作用 举例 结果 注释 h1~h6 标题 div div标签 通常作为块使用（页面布局） p 段落 所有连续的空格或空行都会被算作一个空格 pre 段落 输入多少空格或行就是多少 a 链接 链接 image或img 图片 图片图片 br 换行 换行 hr 分割线，定义水平线 b 粗体
hxyx4xyzindex php vo,webshell/php/oi.php.txt at da33d92ba83c1f8d44e15957022ed4a03423a699 · tennc/web...
热门推荐
weixin_31163455的博客
03-26 26万+
eval("?>".gzuncompress(base64_decode("eJzsvXtbG0eyOPz/eZ7zHZqJYkuxEALbuYAhwYBjToxhAa83P+BVRpqRNEHSKDMjLsn6u79V1feeHkmQZE/2POvd2Jq+VFdXd1dXV1dVv/p2Opz+9399ttwfLMjif7DDyU0YJVHKNtrtb1jpDxaM4n4yietP82H...
21.HTML、CSS
weixin_43911672的博客
09-25 453
HTML、CSSHTML概述HTML是什么HTML的结构HTML语法(了解)HTML标签图像标签超链接标签表格标签表单标签表单项标签表单细节问题注册表单案例CSS概述什么是CSS？(了解)在HTML中引入CSSCSS选择器标签名选择器class选择器id选择器后代选择器属性选择器常用属性总结文本属性字体属性背景属性边框（border）其他属性补充: 颜色设置网页开发实战扩展内容display属性元素类型(了解) HTML: 用于开发网页的一门技术 CSS: 用于修饰、渲染网页的一门技术 HTML标签搭建网页
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
06-04
本文将深入探讨这些技术，并基于"HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip"这个压缩包中的webdemo-master项目，分析它们在实际应用中的作用。 首先，HTML（HyperText Markup Language）...
HTML，CSS，JavaScript，jQuery仿苹果官网
01-05
原生仿苹果官网项目 所用技术栈 HTML,CSS,javaScript,jQuery技术 + iconfont阿里巴巴的图标库。可用做作业。下载解压，内部有完整代码，点击index.html即可运行。无需服务器。
jquery和HTML css javascript.rar
05-28
本资源“jquery和HTML css javascript.rar”显然聚焦于这三者，并且结合了jQuery这一广泛使用的JavaScript库，旨在帮助开发者提升网页交互性和动态效果。 首先，HTML（HyperText Markup Language）是网页内容的基础...
生日祝福（HTML+CSS+JavaScript+jQuery）.zip
12-27
标题中的“生日祝福（HTML+CSS+JavaScript+jQuery）.zip”表明这是一个包含网页制作元素的项目，主要用于展示如何利用这四种技术来创建一个生日祝福页面。HTML是基础的网页结构语言，CSS用于样式设计，JavaScript...
tr157 原版
07-13
The architecture of TR-069 Amendment 2 [1] and TR-106 Amendment 1 [2] enables device management of CPE devices in the customer’s home, including the home gateway, and devices behind it. This Technical Report defines additional management objects for use in CWMP managed devices. The objects may exist at the top level of a hierarchy, or in some cases within an existing object. The objects are intended for use in all CWMP root objects (both Device and InternetGatewayDevice). The objects define varying functionality, diagnostics, etc., that are agnostic to the type of device
Html+Css+js+jquery实现简单页面的登录
03-15
Html+Css+js+jquery实现简单页面的登录
HTML/CSS+JavaScript+jQuery
smileljd的博客
08-28 927
HTML/CSS+JavaScript+jQuery相关知识总结
h5 +css +js +jq 基础知识总结
qq_53026081的博客
07-09 2393
l软件架构1，C/S client/server 客户端/服务器 本地需要安装一个客户端，远程需要一个服务器端 如：电脑上安装软件，QQ，迅雷 安装、部署、开发比较麻烦 用户体验好点2，B/S browser/server 浏览器/服务器 用户只需要安装浏览器，然后输入不同的网址，访问不同的服务器 如:淘宝网、京东、百度... 安装、部署、开发比较简单 缺点：对于服务器的硬件要求比较高，用户量大的时候，体验差 BS架构资源划分静态资源：
html、css、js、jquery基础（华清远见）
JH2022_7_11的博客
08-28 782
③ 优先级： 浏览器默认样式< 标签的默认样式 < [外部样式/内部样式/内联样式]外部样式/内部样式/内联样式: 根据谁后写，谁优先。b. 出现的字符的个数{n}, {n , m} , +等价于{1,},?等价于{0,1},*等价于{0,}a .能出现那些字符「字符]，\d表示纯数字[e-9]，\w匹配字母数字[0-9a-zA-Z]将jquery对象转换为dom对象： jquery对象[0]/.get(0)f. \用于转义，\.表示".本身。...
HTML、CSS、JS与JQuery的区别
The_Best_Hacker的博客
10-08 7425
【一】HTML——Hypertext Markup Language  HTML：超文本标记语言，是静态网页。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。该文档本身有页面结构，显示页面内容；可以理解为网页中的标签，比如div、ul、p等等这些。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容。 HTML文本中包含了所谓的“链接点”HTML利用超链接的方法，...
华清远见——html、css、js与JQuery阶段简单总结
m0_59296532的博客
08-28 367
css：Cascading Style Sheet ,层叠样式表、级联样式表，简称为样式表。html 控制样式的不足点：相同的样式效果，用不同的属性或标记来完成。程序的可维护性、可重用性低。通过css解决上述问题,可以让各个元素都使用统一的样式声明，从而提高程序的可重用性和可为维护性。...
CSS的四种定位方式
jhfvuyhgui的博客
03-31 1万+
CSS的四种定位方式 1.静态定位： 设置方式为position: static;静态定位的盒子是标准流状态，用于取消定位。静态定位的盒子处于网页的最底层，并且top、left、bottom、right属性都不起作用。 2.相对定位： 设置方式为position: relative;相对定位的盒子脱离了标准流，盒子的层级高于标准流和浮动 ...
html css js jquery静态网页
03-16
HTML、CSS、JS和jQuery是用于创建静态网页的常用技术。HTML用于定义网页的结构和内容，CSS用于控制网页的样式和布局，JS用于实现网页的交互和动态效果，而jQuery则是一个JavaScript库，提供了许多简化和优化JS编程的方法和函数。通过这些技术的组合，可以创建出漂亮、功能丰富的静态网页。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值