引入最新jq :
<script src="http://code.jquery.com/jquery-latest.js"></script>目录
4. 表单提交校验(不能阻止表单提交,就算return false也会提交表单)
第一种方法：挺好用的，确认以后才能打开下载地址页面。原理也比较清晰。主要用于删除单条信息确认。
14. 图片上传设置只能选择图片, 添加 accept="image/*" 属性,点击选择文件时非图片不能选
如何获得select被选中option的value和text
39. 根据类名或者name获取所有的input或者textarea的value值,参考:js根据name获取所有的值_TOP__ONE的博客-CSDN博客_js 根据name取值
1. 图片回显
html :
<input type="file" name="files" accept="image/*" onchange="changImg(event)">
<img alt="再无图片" id="myImg" src="" height="100px" ,width="100px">js :
function changImg(e) {
for(var i = 0; i < e.target.files.length; i++) {
var file = e.target.files.item(i);
// 文件大小
var len = e.target.files[i].size;
if(!(/^image\/.*$/i.test(file.type))) {
continue; //不是图片 就跳出这一次循环
}
//实例化FileReader API
var freader = new FileReader();
freader.readAsDataURL(file);
freader.onload = function(e) {
$("#myImg").attr("src", e.target.result);
}
}
}
清空file标签选择的文件,参考:JavaScript将input file的选择的文件清空的两种解决方案_曾燕辉的博客-CSDN博客
var obj = document.getElementById(id);
obj.outerHTML = obj.outerHTML;2. 获取字符串长度及截取
var len = str.replace(/[\u0391-\uFFE5]/g, "aa").length;
var i1 = str.substring(0, 1);3. 获取input标签的value值
var a=myform.name.value;
var a=document.getElementById("nn").value;
var contacts = $('input[name="modName"]').val();注: myform是表单的id;
4. 表单提交校验(不能阻止表单提交,就算return false也会提交表单)
html:
<form class="apply-form" onsubmit="return check(this)"js:
function check(form) {
if (form.name.value == '') {
alert("请输入用户帐号!");
form.name.focus();
return false;
}
if (form.phone.value == '') {
alert("请输入登录密码!");
form.phone.focus();
return false;
}
return true;
}
5. 刷新当前页面
location.replace(location.href);参考 : js刷新页面的几种方式与区别 - 郭磊—lily - 博客园
6. 链接新标签也打开
target="_blank"7. 小手样式
style="cursor:pointer;"
8. 图片无法正常显示时显示另一种图片
onerror="javascript:this.src='${pageContext.request.contextPath}/assets/customer.png'"
9. 点击跳转
onclick="javascript:window.open('www.baidu.com');"onclick="javascript:window.location.href='www.baidu.com';"
10. 时间处理
【1】获取毫秒值
var oldTime = (new Date("2012/12/25 20:11:11")).getTime(); //得到毫秒数 ==> 1356437471000
//不是上面格式的时间需要转换, 如下
starttime ='2012-12-25 20:17:24';
starttime = starttime.replace(new RegExp("-","gm"),"/");
var starttimeHaoMiao = (new Date(starttime)).getTime(); //得到毫秒数 ==> 1356437844000
// 获取当前时间毫秒值
var currentTime = (new Date()).getTime();
【2】毫秒数转化为时间
var oldTime = (new Date("2012/12/25 20:11:11")).getTime(); //得到毫秒数
var newTime = new Date(oldTime); //就得到普通的时间了 ==> Mon Feb 05 2018 10:53:06 GMT+0800 (中国标准时间)
【3】日期格式化
var ftTime = crtTimeFtt(1356437844000); // ==> 2012-12-25 20:17:24
//创建时间格式化显示
function crtTimeFtt(value){
var crtTime = new Date(value);
return top.dateFtt("yyyy-MM-dd hh:mm:ss",crtTime);//转化成需要的格式
}
function dateFtt(fmt,date)
{ //author: meizz
var o = {
"M+" : date.getMonth()+1, //月份
"d+" : date.getDate(), //日
"h+" : date.getHours(), //小时
"m+" : date.getMinutes(), //分
"s+" : date.getSeconds(), //秒
"q+" : Math.floor((date.getMonth()+3)/3), //季度
"S" : date.getMilliseconds() //毫秒
};
if(/(y+)/.test(fmt))
fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
for(var k in o)
if(new RegExp("("+ k +")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
return fmt;
} 【4】时间加减
参考 : js 中处理时间相加减问题 - 菜小鱼~ - 博客园
// 字符串转时间
var dataCur = new Date("2021-06-30 00:00:00");
console.log(timeAddDay(dataCur, 2)) // 2021-07-02 00:00:00
/**
* 时间加减天数
* @param {Date} date
* @param {int} dayCount
*/
function timeAddDay(date, dayCount) {
dataCur = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + " 00:00:00";
var dataCurPar = Date.parse(new Date(dataCur)) / 1000;
dataCurPar += 86400 * dayCount;
return getFullTime(new Date(parseInt(dataCurPar) * 1000));
}
/**
* 时间转日期
* @param {Date} date
* @return {String} 2021-07-02 00:00:00
*/
function getFullTime(date) {
Y = date.getFullYear() + '-',
M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-',
D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ',
h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':',
m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':',
s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
return Y + M + D + h + m + s
}11. 复选框
默认选中
<input name="checkbox" type="checkbox" value="checkbox" checked="checked" />获取所有选中的复选框的value值
$("input[name='ck']:checkbox:checked").each(function() {
console.log( $(this).val()) ;
})注: 获取所有name值为ck的input框的value值
12. div
替换div的内容
var divA = document.getElementById("id");divA.innerHTML = "要添加的内容";div追加内容
var divA = document.getElementById("id");divA.innerHTML = divA.innerHTML+"要添加的内容";或者
$("id").append("要添加的内容")
13. 删除确认
第一种方法：挺好用的，确认以后才能打开下载地址页面。原理也比较清晰。主要用于删除单条信息确认。
<SCRIPT LANGUAGE=javascript>
function p_del() {
var msg = "您真的确定要删除吗？\n\n请确认！";
if (confirm(msg)==true){
return true;
}else{
return false;
}
}
</SCRIPT>
调用方法：
<a href="del.jsp?id=<%=id%>" onclick="javascript:return p_del()">删 除</a>
第二种方法：原理跟上面的一样。
<a href="javascript:if(confirm('确实要删除吗?'))location='jb51.php?id='">删除</a>第三种：主要用于批量删除的确认提示
<input name="Submit" type="submit" class="inputedit" value="删除" onclick="{if(confirm('确定纪录吗?')){this.document.formname.submit();return true;}return false;}">
<input name="按钮" type="button" ID="ok" onclick="{if(confirm('确定删除吗?')){window.location='Action.asp?Action=Del&TableName=Item&ID=<%=ID%>';return true;}return false;}" value="删除栏目" />
下面是别的网友整理的，大同小异。一般通过弹出确认按钮来判断是否继续进入下面的删除页面。
第一种:
<a href="javascript:if(confirm('确认删除吗?'))window.location='del.asp'">删除</a>
第二种:
<script language="javascript">
<!--
function del_sure(){
var gnl=confirm("你真的确定要删除吗?");
if (gnl==true){
return true;
}
else{
return false;
}
}
--->
</script>
//调用
<a href="del.asp?id=<%=rs("id")%>" onclick="javascript:del_sure()">删除</a>
第三种：
<script language="javascript">
function confirmDel(str){
return confirm(str);
}
</script>
<a href="delete.asp" onclick="return confirmDel('确定要删除吗')">删除</a>14. 图片上传设置只能选择图片, 添加 accept="image/*" 属性,点击选择文件时非图片不能选
<input class="b-file" type="file" name="file" id="fileUpload" accept="image/*" title="请选择头像">15. js手机号码11位开头为1校验
var jmz = {};
jmz.GetLength = function(str) {
return str.replace(/[\u0391-\uFFE5]/g, "aa").length; //先把中文替换成两个字节的英文，在计算长度
};
var len = jmz.GetLength(myPhone);
var i1 = myPhone.substring(0, 1);
if(len == 11 && i1 == '1'){
}else{
return ;
}16. 使按钮不可用和可用
不可用:
$('.t-get').attr('disabled',"true");可用:
$('.t-get').removeAttr("disabled");17. 使隐藏及显示
隐藏:
$('.set-new-btn').attr('disabled',"true");显示:
$('.set-new-btn').removeAttr("disabled"); 或者
$(".company_img").show();
$(".company_img").hide();18. 根据class获取按钮名称
http://bbs.csdn.net/topics/390452236
19. 限制显示行数,超出部分成省略号
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 3; /** 显示的行数 **/
overflow: hidden; /** 隐藏超出的内容 **/style="word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;"
20. ajax
$.ajax({
url : '/getImageBase',
type : 'post',
data : {
"url" : url
},
success : function(data) {
}
});上面的是异步请求,同步请求得添加属性 async: false, 如下 :
$.ajax({
url : '/getImageBase',
type : 'post',
async: false,
data : {
"url" : url
},
success : function(data) {
}
});注: ajax分为同步和异步。一般使用异步，异步不会使页面阻塞，用户体验较好。但是异步会使编写js程序的复杂度提高(异步ajax中的代码和ajax外的代码执行顺序无法确定)，对新手来说很可能由于玩不转异步导致各种bug。
同步代码的缺点是 : 等待ajax请求响应之前，页面会卡住，用户什么都做不了，感受很不好，就像浏览器崩溃或者死机似的。所以同步ajax代码不适合应用到正式产品中。
21. select 下拉框
如何获得select被选中option的value和text
一：JavaScript原生的方法
1:拿到select对象： var myselect=document.getElementById(“test”);
2：拿到选中项的索引：var index=myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index
3:拿到选中项options的value： myselect.options[index].value;
4:拿到选中项options的text： myselect.options[index].text;
二：jQuery方法（前提是已经加载了jquery库）
1:var options=$(“#test option:selected”); //获取选中的项
2:alert(options.val()); //拿到选中项的值
3:alert(options.text()); //拿到选中项的文本
设置默认选中
// 设置默认值
function f(s, v) {
m = $(s);
for(i = 0; i <= m.options.length; i++) {
if((m.options[i].value) == (v)) {
m.options[i].selected = true;
break;
}
}
} // 获取对象
function $(id) {
return document.getElementById(id);
} s是select的id,v是下拉选项的value;
22. 定时事件
执行一次
//使用方法名字执行方法 setTimeout只执行一次
var t1 = window.setTimeout(hello,1000);
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
window.clearTimeout(t1);//去掉定时器
function hello(){
alert("hello");
} 重复执行1
//重复执行某个方法 setInterval重复执行
var t1 = window.setInterval(hello,1000);
var t2 = window.setInterval("hello()",3000);
//去掉定时器的方法
window.clearInterval(t1); 重复执行2
setInterval(function() {
hello();
}, 1000); 23. onclick跳转
①οnclick="javascript:window.location.href='URL'"
②οnclick="location='URL'"
③οnclick="window.location.href='URL?id=11'"
参考: 使用onclick跳转到其他页面/跳转到指定url - 冬雨在路上 - 博客园
24. js提交表单
document.getElementById("myForm").submit();注: 不能有name或者id的值为"submit",否则会找不到函数;
25. 倒计时
26. 视频标签
<video controls="controls" src="/avi/1.mp4" width="162px" height="122px"></video>注: controls="controls" 是显示控件;
27. 判断数组是否包含一个值
function isInArray(arr,value){
for(var i = 0; i < arr.length; i++){
if(value === arr[i]){
return true;
}
}
return false;
}注: 存在返回true,不存在返回false;
28. 获取n到m直接的随机数
function randomNum(n, m) {
switch (arguments.length) {
case 1:
return parseInt(Math.random() * minNum + 1, 10);
break;
case 2:
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
break;
default:
return 0;
break;
}
}注: n和m有出现的几率;
29. 替换页面中的图片路径
//一段正则，匹配所有_min.的图片src属性
var test = /-min\./;
//遍历所有的图片节点
$("img").each(function(index, obj) {
if (test.test($(this).attr("src"))) {
var reSrc = $(this).attr("src").replace(test, ".");
$(this).attr("src", reSrc)
}
})说明: 获取所有img的src包含 "-min"的对象,然后把"-min"去掉;
30. 解析json
31. 遍历
http://www.jb51.net/article/45883.htm
32. 时间格式化
33. 切割字符串
http://www.jb51.net/article/41507.htm
34. 动态添加html绑定事件写法
$(document).on('click', '.informations_b', function() {
})
这是动态添加html代码里的绑定click事件
35. 返回顶部
$('body,html').animate({
"scrollTop": 0
}, 500)36. 保留n位小数
Math.formatFloat = function (f,n) {
// f: 需要处理的数
// n: 保留小数位数
var m = Math.pow(10, n);
return Math.round(f * m, 10) / m;
}
37. 判断div是否存在
if($('.lookimg').length){
console.log("类名为lookimg的标签存在!");
}else{
console.log("类名为lookimg的标签不存在!");
}38. 字符串
判断字符串是否为空或者全部都是空格,参考:https://www.jb51.net/article/86543.htm
function isNull(str){
if ( str == "" ) return true;
var regu = "^[ ]+$";
var re = new RegExp(regu);
return re.test(str);
}39. 根据类名或者name获取所有的input或者textarea的value值,参考:js根据name获取所有的值_TOP__ONE的博客-CSDN博客_js 根据name取值
function te(){
$("[name=a]").each(function () {
alert($(this).val());
});
}function te(){
$(".class").each(function () {
alert($(this).val());
});
}
40. 判断input的type=file是否选择了图片
$('#id').val().length如果=0,说明没有选择文件
41.点击弹出提示框
<a href="http://www.baidu.com" onClick="return confirm('确定删除?');">[删除]</a>参考 : 【web】a标签点击时跳出确认框_michael_ouyang的博客-CSDN博客_a标签打开跳转弹出一个框
42.按钮点击跳转
<input type="submit" name="Submit" value="同意" onclick=window.open(http://www.111cn.net/)>注 : 上面的会打开新标签页,下面的不会
onclick="window.location='http://www.baidu.com'"参考 : js点击button按钮跳转到页面代码 - 山涧清泉 - 博客园
43.失去焦点给另一个标签赋值
<input type="password" name="passw" id="pass" class="form-control">
<input type="hidden" name="password" id="pass2" class="form-control">
$("#pass").blur(function() {
var password = hex_md5($('input[name="passw"]').val())
var psel = document.getElementById("pass2");
psel.value =password;
});44.禁止输入与允许输入
参考 : HTML中如何使用JS将input输入框设置为禁止输入或者可输入_kingsonzhang的博客-CSDN博客_js 禁用input
45.获取按钮的文字
参考 : js获取按钮的文字_longyinfengwu的博客-CSDN博客_js获取button的文本
46.设置span的值
$("#spId").text("testSpan"); 参考 : https://blog.csdn.net/xiaobing_122613/article/details/78590157
47.判定不等于undefined
JS 中判断空值 undefined 和 null - Rainyn - 博客园
var exp = undefined;
if (typeof(exp) == "undefined")
{
alert("undefined");
}48.根据id添加删除class
参考 : 原生js实现添加和删除class_Ponnenult的博客-CSDN博客_js删除class
document.getElementById('show_one').style.display = 'block'
document.getElementById('show_two').style.display = 'none'
document.getElementById('click_one').classList.add("active")
document.getElementById('click_two').classList.remove("active")49.随机数
JavaScript如何创建随机整数-js教程-PHP中文网
// min最小值，max最大值
// 0,5 => 输出0到4之间的整数
function randomRange(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
扫一扫
1742
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
