JavaScript综合

引入最新jq : 

目录

1. 图片回显

2. 获取字符串长度及截取

3. 获取input标签的value值

4. 表单提交校验(不能阻止表单提交,就算return false也会提交表单)

5. 刷新当前页面

6. 链接新标签也打开

7. 小手样式

8. 图片无法正常显示时显示另一种图片

9. 点击跳转

10. 时间处理

11. 复选框

默认选中

获取所有选中的复选框的value值

12. div

替换div的内容 

div追加内容

13. 删除确认

第一种方法：挺好用的，确认以后才能打开下载地址页面。原理也比较清晰。主要用于删除单条信息确认。

第二种方法：原理跟上面的一样。

第三种：主要用于批量删除的确认提示 

14. 图片上传设置只能选择图片, 添加 accept="image/*" 属性,点击选择文件时非图片不能选

15. js手机号码11位开头为1校验

16. 使按钮不可用和可用

17. 使隐藏及显示

18. 根据class获取按钮名称

19. 限制显示行数,超出部分成省略号

20. ajax

21. select 下拉框

如何获得select被选中option的value和text

设置默认选中

22. 定时事件

执行一次

重复执行1

重复执行2

23. onclick跳转

24. js提交表单

25. 倒计时

26. 视频标签

27. 判断数组是否包含一个值

28. 获取n到m直接的随机数

29. 替换页面中的图片路径

30. 解析json

31. 遍历

32. 时间格式化

33. 切割字符串

34. 动态添加html绑定事件写法

35. 返回顶部

36. 保留n位小数

37. 判断div是否存在

38. 字符串

39. 根据类名或者name获取所有的input或者textarea的value值,参考:js根据name获取所有的值_TOP__ONE的博客-CSDN博客_js 根据name取值

40. 判断input的type=file是否选择了图片

41.点击弹出提示框

42.按钮点击跳转

43.失去焦点给另一个标签赋值

44.禁止输入与允许输入

45.获取按钮的文字

46.设置span的值

47.判定不等于undefined

48.根据id添加删除class

---

1. 图片回显

html :

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:

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. 复选框

默认选中

获取所有选中的复选框的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. 删除确认

第一种方法：挺好用的，确认以后才能打开下载地址页面。原理也比较清晰。主要用于删除单条信息确认。

 
 
调用方法： 
删 除 

第二种方法：原理跟上面的一样。

删除

第三种：主要用于批量删除的确认提示 

 



下面是别的网友整理的，大同小异。一般通过弹出确认按钮来判断是否继续进入下面的删除页面。
第一种: 
删除 
第二种: 
 
//调用 
" onclick="javascript:del_sure()">删除 
第三种： 
 
删除

14. 图片上传设置只能选择图片, 添加 accept="image/*" 属性,点击选择文件时非图片不能选

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. 倒计时

JS倒计时两种种实现方式 - 黑仔002 - 博客园

26. 视频标签

注: 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

js读取解析JSON数据 - jtlgb - 博客园

31. 遍历

http://www.jb51.net/article/45883.htm

js中的那些遍历 - 波先生 - 博客园

32. 时间格式化

js 中时间格式化的几种方法 - Mr_伍先生 - 博客园

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.点击弹出提示框

[删除]

参考 : 【web】a标签点击时跳出确认框_michael_ouyang的博客-CSDN博客_a标签打开跳转弹出一个框

42.按钮点击跳转

注 : 上面的会打开新标签页,下面的不会

onclick="window.location='http://www.baidu.com'"

参考 : js点击button按钮跳转到页面代码 - 山涧清泉 - 博客园

43.失去焦点给另一个标签赋值

$("#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;
}