1.eval()
里面可以写js代码，可以把字符串转成对象:
eval('('+字符串变量+')')
在js中反转数组
arr.reverse();
ajax上传文件
var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
url: 'xxxxx',
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false,
success:function(res){
},
})
2.字符串转小数，再保留两位小数
parseFloat(str).toFixed(2);
3.include
前端需要引用其他域名（接口）返回的一个（html）头部;
方法一：
可以在自己的项目下，自己写一个controller调用那个接口，返回给自己的前端；
在jsp中再引用自己的接口；
<jsp:include page=”/caren/header” flush=”true”/>
注意：我使用<%@ include file=”/caren/header”%>是不好使的。
原因可以自己去查 他俩的区别；
方法二：
写个js异步请求接口，把数据异步渲染上去也行；
$(function(){
$.ajax({
url:'http://xxx/api/1/component/header',
type:'get',
success:function(data){
console.log(data);
$(".xx").html(data);
}
});
})
4.定时器
<script type="text/javascript">
// 这个方法的意思：定时任务 每 1000 * 30 毫秒 执行一次 initMessageInfo 方法
setInterval("initMessageInfo();",1000 * 30);
function initMessageInfo(){
需要执行的代码......
}
</script>
这个是循环几次写几次
setTimeout(()=>{
需要执行的代码......
setTimeout(()=>{
需要执行的代码......
},1000)
},1000)
5.不是问题的问题
可以通过在input框中加入 autocomplete=“off” 不让历史记录显示
6.replace
这种写法相当于replaceAll,把所有的 - 替换成 :
str.replace(/-/g,":");
选择器
$("table").off("click",".layui-form-checkbox").on("click",".layui-form-checkbox",function () {
$(this).parents(".layui-row").siblings().find(".layui-form-checkbox").removeClass("layui-form-checked").siblings("input").prop("checked",false);
}
$("input[name^='id']:checked").each(function () {
let id=$(this).val();
});
jquery 判断是否是最后一个同级元素
html
<tbody>
<tr>
<td width="60" style="padding:12px 0;">
<a href="javascript:;" class="add"></a>
</td>
<td width="120"></td>
<td><input name="query" type="text" ></td>
<td width="80"></td>
</tr>
<tr>
<td width="60" style="padding:12px 0;">
<a href="javascript:;" class="add"></a>
</td>
<td width="120"></td>
<td><input name="query" type="text" ></td>
<td width="80"></td>
</tr>
<tr>
<td width="60" style="padding:12px 0;">
<a href="javascript:;" class="add"></a>
</td>
<td width="120"></td>
<td><input name="query" type="text" ></td>
<td width="80"></td>
</tr>
</tbody>
js
$("body").on("click",'tbody tr td .add',function(){
var aon="逻辑运算框";
var total=$(this).parents("tbody").find("tr").length;
var index=$(this).parents("tr").index();
if(total==index+1){
//最后一行
$(this).parents("tr").find("td:last").append(aon);
}else{
//不是最后一行，在倒数第二行加逻辑运算框
$(this).parents("tbody").find("tr:last").prev().find("td:last").append(aon);
}
}
input 框限制
只能输入数字
<input type="text" oninput="value=value.replace(/[^\d]/g, '')" />
限制输入字数
<input type="text" onChange="if(this.value.length>10){this.value=this.value.slice(0,10)}" onkeydown=" if (event.keyCode ===13) {search()}">
js apend html 加事件
这个写法记录一下，下次直接 copy
$(".history_search").append('<a href="javascript:;" οnclick="quickSearch('+ "\'"+obj.recordName+"\'" +')">'+obj.recordName+'</a>');
login页面 表单密码加密解密
前端对密码加密
密码传给后台之前使用 jsencrypt 进行加密
import JSEncrypt from 'jsencrypt/bin/jsencrypt'
// 密钥对生成 http://web.chacuo.net/netrsakeypair
const publicKey = 'xxxx'
const privateKey = 'xxxx'
// 加密
export function encrypt(txt) {
const encryptor = new JSEncrypt()
encryptor.setPublicKey(publicKey) // 设置公钥
return encryptor.encrypt(txt) // 对需要加密的数据进行加密
}
// 解密
export function decrypt(txt) {
const encryptor = new JSEncrypt()
encryptor.setPrivateKey(privateKey)
return encryptor.decrypt(txt)
}
后台解密
对前台传来的密码解密
// 这里的密钥需要与前端的相同
String privateKey="xxx";
// 这里使用的 hutool工具包
RSA rsa=new RSA(privateKey,null);
String password = new String(rsa.decrypt("password==", KeyType.PrivateKey));
System.out.println(password);
js 实现Ctrl + C 复制功能
//data就是需要复制的字符串
function copyCode(data) {
//创建一个input框
let input = document.createElement('input');
//设置id
input.id = "temp_copy";
//设置只读
input.setAttribute('readonly', 'readonly');
//赋值
input.setAttribute('value', data);
//把input添加到body中
document.body.appendChild(input);
//选中input框，取值复制
$('#temp_copy').select();
document.execCommand("copy",false,null);
//删除input框
document.body.removeChild(input);
}
自己的css总结
让div全屏
html, body {
margin:0;
padding:0;
}
a标签禁用+置灰
.current{
pointer-events: none;
filter: alpha(opacity=50);/*IE滤镜，透明度50%*/
-moz-opacity: 0.5;/*Firefox私有，透明度50%*/
opacity: 0.5;/*其他，透明度50%*/
}
字符串过多时显示…
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3; //几行
-webkit-box-orient: vertical;
js 下载网络图片
/**
* 下载图片并重命名
* download('https://www.baidu.com/img/baidu_resultlogo@2.png', 'ab.png')
*/
/**
* 下载
* @param {String} url 目标文件地址
* @param {String} filename 想要保存的文件名称
*/
export function downloadRemoteImg(url, filename) {
getBlob(url, function(blob) {
saveAs(blob, filename);
});
};
/**
* 获取 blob
* @param {String} url 目标文件地址
* @return {cb}
*/
function getBlob(url,cb) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = function() {
if (xhr.status === 200) {
cb(xhr.response);
}
};
xhr.send();
}
/**
* 保存
* @param {Blob} blob
* @param {String} filename 想要保存的文件名称
*/
function saveAs(blob, filename) {
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, filename);
} else {
var link = document.createElement('a');
var body = document.querySelector('body');
link.href = window.URL.createObjectURL(blob);
link.download = filename;
// fix Firefox
link.style.display = 'none';
body.appendChild(link);
link.click();
body.removeChild(link);
window.URL.revokeObjectURL(link.href);
};
}
富文本编辑器 tinymce
1.添加 tinymce 以及 需要绑定的元素
<!--版本5.10.0-->
<script type="text/javascript" src="/assets/admin/tinymce/tinymce.min.js"></script>
<textarea id="my_tinymce" name="content"></textarea>
2.初始化js
function example_image_upload_handler (blobInfo, success, failure, progress) {
var formData=new FormData();
var file = blobInfo.blob();
formData.append('file', file, file.name );
$.ajax({
url: "uploadCutTitleImg.do",
type: "post",
data: formData,
processData: false,
contentType: false,
dataType:'json',
success: function(data) {
success(data.msg);
},
error: function(e) {
alert("图片上传失败");
}
});
};
function example_file_picker_callback(callback, value, meta) {
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.onchange = function() {
var file = this.files[0];
var form = new FormData();
form.append("file", file);
$.ajax({
url: "uploadCutTitleImg.do",
type: "post",
data: form,
processData: false,
contentType: false,
success: function(data) {
callback(data.msg);
},
error: function(e) {
alert("图片上传失败");
}
});
};
input.click();
}
$(function() {
tinymce.init({
selector: '#my_tinymce',
body_class: 'TinyMCE_class',
language:'zh_CN',
//插件列表：indent2em（首行缩进，这个插件需要去上面的链接下载）
plugins : 'lists advlist autolink autoresize link image image preview autosave charmap emoticons fullpage code ' +
'codesample fullscreen hr insertdatetime pagebreak print quickbars searchreplace table toc wordcount indent2em help',
//工具栏
toolbar:['undo redo | fontsizeselect | styleselect | forecolor backcolor | code removeformat charmap insertdatetime emoticons| image preview',
'numlist bullist | bold italic superscript subscript | alignleft aligncenter alignright alignjustify | outdent indent indent2em'],
fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px',//fontsize选择范围
max_height: 900,
min_height:300,
branding: false,//隐藏右下角技术支持
pagebreak_split_block: true,//插入分页符时拆分块元素
quickbars_insert_toolbar: false,//快速插入 触发提供的工具栏
quickbars_selection_toolbar: 'bold | h1 h2 h3',//快速选择 触发提供的工具栏
images_upload_handler: example_image_upload_handler,//拖动图片上传方法
file_picker_callback: example_file_picker_callback,//选择图片上传方法
//添加样式
content_style:'@font-face {font-family: \'dbkFont\';src: url(\'${base}/assets/admin/fonts/dbk.ttf\');}.TinyMCE_class {font-family:\'dbkFont\'}',
});
});
3.获取编辑器中的内容
var content=tinyMCE.activeEditor.getContent();
图片裁剪插件 cropper
docs目录是例子可以下载下来，看看
小程序相关
H5跳转小程序文档
注意query参数不支持‘%’，所以在参数中不能对returnUrl编码，可以放在数据库中，异步请求获取url，query参数可以使用 ‘key=value&key2=value’格式
在小程序中 onLoad: function (query) { query.key 可以直接获取参数 }
公众号跳转小程序
开放标签的path属性不能使用方法返回值，所以如果url中需要 encode 时，只能自己 encode 完以后写死在页面上
web-view 中嵌套H5
<input type="file" accept="image/*" name="uploadFile" id="uploadFile" />
注意 input 标签中不能有 multiple="multiple" ，否则 Android小程序打不开相机。
Freemark相关
1.Freemark 自定义宏（也就是自定义标签）
<@p.form id="jvForm" tableClass="table table-hover table-striped table-bordered vtable" action="directive/o_save.do" labelWidth="30">
<@p.td required="true" label='directive.module' colspan='2' width="100">
<@p.select onchange="selectModule()" />
</@p.td>
</@p.form>
这段html把我吓了一跳,什么玩意
解释一下：
p：是在freemarkerConfig中配置的一个 别名
<prop key="auto_import">/WEB-INF/ftl/index.ftl as p,/WEB-INF/ftl/spring.ftl as s</prop>
form/td/select:都是自定义的 <#macro 标签，在index.ftl中都已经定义好了
spring.ftl 中的
<#macro m code>${springMacroRequestContext.getMessage(code)}</#macro>
springMacroRequestContext：这个东西是固定的 在 org.springframework.web.servlet.view.AbstractTemplateView 中定义好的
2.Freemark 标签类型<>,[]
配置文件中设置 tag_syntax 属性可以控制标签类型
<bean id="freemarkerConfig" class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer">
<property name="freemarkerSettings">
<props>
<!-- 设置标签类型 auto_detect（自动检测第一次出现的标签类型）、angle_bracket（<>）、square_bracket([])-->
<prop key="tag_syntax">auto_detect</prop>
<prop key="template_update_delay">5</prop>
<prop key="defaultEncoding">UTF-8</prop>
<prop key="url_escaping_charset">UTF-8</prop>
<prop key="locale">zh_CN</prop>
<prop key="boolean_format">true,false</prop>
<prop key="datetime_format">yyyy-MM-dd HH:mm:ss</prop>
<prop key="date_format">yyyy-MM-dd</prop>
<prop key="time_format">HH:mm:ss</prop>
<prop key="number_format">0.######</prop>
<prop key="whitespace_stripping">true</prop>
<!--空值处理<prop key="classic_compatible">true</prop>-->
<prop key="auto_import">/WEB-INF/ftl/doccms/index.ftl as p,/WEB-INF/ftl/spring.ftl as s</prop>
</props>
</property>
</bean>
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
