1. HTML 表单自动验证

HTML 表单验证也可以通过浏览器来自动完成。
如果表单字段 (fname) 的值为空, required 属性会阻止表单提交：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<form action="demo_form.php" method="post">
  <input type="text" name="fname" required="required">
  <input type="submit" value="提交">
</form>

<p>点击提交按钮，如果输入框是空的，浏览器会提示错误信息。</p>

</body>
</html>

参考：

JavaScript 表单

2. javascript 终止函数执行

参考：

  1. JS中实现函数return多个返回值
  2. JS Function中的return
  3. JS函数返回值return
  4. javascript 终止函数执行
  5. 浅谈JavaScript如何运行中断或停止

3. JavaScript 页面跳转、刷新、重定向的几种方式

第一种：      
<script language="javascript" type="text/javascript">  
       window.location.href="login.jsp?backurl="+window.location.href;  
</script>  


第二种：      
<script language="javascript">  
       alert("返回");  
       window.history.back(-1);     
</script>  


第三种：     
<script language="javascript">  
       window.navigate("top.jsp");    
</script>  


第四种：     
<script language="JavaScript">            
       self.location=’top.htm’;     
</script>  


第五种：     
<script language="javascript">            
       alert("非法访问！");            
       top.location=’xx.jsp’;     
</script> 
 
＝＝＝＝＝javascript中弹出选择框跳转到其他页面＝＝＝＝＝  
<script language="javascript">  
<!--  
function logout()...{  
if (confirm("你确定要注销身份吗？是－选择确定，否-选择取消"))...{  
window.location.href="logout.asp?act=logout"  
}  
}  
-->  
</script> 
 
＝＝＝＝＝javascript中弹出提示框跳转到其他页面＝＝＝＝＝  
<script language="javascript">  
<!--  
function logout()...{  
alert("你确定要注销身份吗？");  
window.location.href="logout.asp?act=logout"  
}  
-->  
</script> 

参考：

  1. JavaScript 页面跳转的几种方式
  2. 在Js中网页跳转的写法
  3. HTML页面跳转（重定向）
  4. javascript跳转到新页面的三种方法
  5. 常用的js跳转页面方法实现汇总
  6. js跳转页面方法（转）
  7. JavaScript 页面跳转、页面重定向
  8. 总结 js页面跳转 和 js打开新窗口 方法
  9. 前端——JS实现页面跳转
  10. 如何用JS或jQuery实现页面自动跳转
  11. window.location.href/replace/reload()–页面跳转+替换+刷新
  12. js实现页面跳转重定向的几种方式
  13. js 刷新当前页面
  14. js 刷新当前页面
  15. JavaScript重新加载与刷新
  16. Javascript刷新当前页面
  17. js—通过代码刷新当前页面，location.reload与location.replace方法，如何刷新页面并减少历史长度？
  18. js刷新页面方法大全
  19. js刷新当前页面，js实现页面自动刷新、跳转的方法总汇
  20. javascript刷新当前页面方法
  21. html-javascript前端页面刷新重载的方法汇总
  22. js 页面刷新location.reload和location.replace
  23. input点击链接另一个页面，各种操作
  24. input的button类型，点击然后页面跳转

4. JS实现打印对象[object]的所有方法和属性

参考：

  1. console.log()打印object却显示为字符串[object Object]
  2. JS实现打印对象[object]的所有方法和属性
  3. 打印js中一个对象的所有属性的值
  4. Js打印object对象两种方法

5. js中字符串变量如何声明

参考：

  1. JavaScript声明和使用变量
  2. JavaScript字符串拼接变量名及赋值
  3. JavaScript 输出

6. js验证两次输入密码是否一致

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <title>checkPwd</title>  
        <meta name="author" content="zhangyx" />  
        <!-- Date: 2019-05-17 -->  
        <script> // function check2pwd() {  // if(password_user.value != password2_user.value) {  // alert("两次输入密码不一致！")  // password_user.value = "";  // password2_user.value = "";  // }  // }  function check2pwd() { var pwd1 = document.getElementById("password_user").value; var pwd2 = document.getElementById("password2_user").value; if(pwd1 != pwd2) { alert("两次输入密码不一致！"); document.getElementById("password_user").value=""; document.getElementById("password2_user").value=""; console.log("清空密码"); console.log(document.getElementById("password_user").value); console.log(document.getElementById("password2_user").value); } } </script>  
    </head>  
    <body>  
        <form action="testaction">  
            <table>  
                <tr><td>密码：&nbsp;&nbsp;  
                  <input type="password" id="password_user"></td>  
                </tr>  
                <tr><td>重复密码：  
                  <input type="password" id="password2_user" onblur="check2pwd()" ></td></tr>   
                  
            </table>  
            <input type="button" value="test啦!" />  
        </form>  
          
    </body>  
</html>

参考：

  1. js验证两次输入密码是否一致
  2. js验证 两次密码是否一致
  3. onfocus 事件
  4. onblur 事件
  5. HTML onfocus （获得焦点）和 onblur （失去焦点）

7. Jquery, Clear / Empty all contents of tbody element?

参考：

  1. Jquery, Clear / Empty all contents of tbody element?
  2. < tbody > not being found in a WELL FORMED html code

8. jQuery 遍历 - eq() 方法和 jQuery closest() 方法

参考：

  1. jQuery 遍历 - eq() 方法
  2. jquery中.eq()与:eq()的区别
  3. HTML 创建按钮实现跳转链接
  4. jQuery 遍历 - closest() 方法
  5. jQuery closest() 方法
  6. jquery中的查找parents和closest方法的区别

9. jquery操作select下拉框：取值，赋值，删除

参考：

  1. jquery操作select下拉框：取值，赋值，删除
  2. 几种Jquery给Select赋值的方法
  3. js 获取select的值 / js动态给select赋值
  4. jquery select取值，赋值操作

10. js日期格式与时间戳相互转换

function add0(m) { return m < 10 ? '0'+m : m }
function timestampToTime(timestamp) 
{
    var  now = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
    var year=now.getFullYear(); 
    var month=now.getMonth()+1; 
    var date=now.getDate(); 
    var hour=now.getHours(); 
    var minute=now.getMinutes(); 
    var second=now.getSeconds(); 
    return year+"-"+add0(month)+"-"+add0(date)+" "+add0(hour)+":"+add0(minute)+":"+add0(second);
}
// 1528452000 => 2018-06-08 18:00:00

参考：

  1. js日期格式与时间戳相互转换
  2. javascript时间戳和日期字符串相互转换代码(超简单)
  3. 用js将从后台得到的时间戳转换成日期
  4. 后台返回前端变为一串数字将其在前端转换为对应的日期
  5. js将 一串数字1403149534转换为日期格式
  6. js 时区对应的时间转换
  7. js 时间与时间戳 相互转化
  8. JavaScript Date对象
  9. JavaScript 时间与日期处理实战:你肯定被坑过
  10. 一行js代码实现时间戳转时间格式
  11. js时间戳与日期格式之间的互转
  12. js 将时间格式的转换为时间戳
  13. js转换Date日期格式

11. HTML5的 input:file上传类型控制

参考：

  1. HTML5的 input:file上传类型控制
  2. css input[type=file] 样式美化，input上传按钮美化
  3. HTMLinput 标签的 accept 属性

12. 页面自动执行（加载）js的几种方法

仅只需要加载所有的DOM结构，在浏览器把所有的HTML放入DOM tree之前就执行方法。包括在加载外部图片和资源之前。

<script type="text/javascript">
$(document).ready(function() { 
	$("table tr:nth-child(even)").addClass("even"); //任何需要执行的js特效 
});
</script>

参考：

  1. 页面自动执行（加载）js的几种方法

13. javascript – 如何提交HTML表单而不重定向？

参考：

  1. javascript – 如何提交HTML表单而不重定向？
  2. 我怎样才能让一个按钮重定向我的网页到另一个页面？
  3. Submit提交表单后无法跳转页面

14. js控制表单提交和相关属性的设置

参考：

  1. 用js 来设置默认值
  2. 用JS(JavaScript )给HTML元素增加id属性
  3. JS中获取元素使用getElementByID()、getElementsByName()、getElementsByTagName()的用法和区别
  4. js表单动态添加数据并提交
  5. 使用js提交form表单的两种方法
  6. js实现表单提交submit()，onsubmit
  7. js控制form提交
  8. 利用JS提交表单的几种方法和验证(必看篇)
  9. js控制select下拉框–动态隐藏，展示option

15. 如何禁止在文本框中输入中文

//方法一：用文本框的CSS属性ime-mode实现。

<input onpaste="return false" ondragenter="return false"  style="ime-mode:disabled">

//提示：设置ime-mode为disabled的意思是禁止在输入时禁止用户激活输入中文，韩文，日文等的输入法（IME）状态，
//因为这个只能检测到键盘的输入，对通过鼠标操作的粘贴和拖放无效。

参考：

  1. 如何禁止在文本框中输入中文
  2. js控制文本框只能输入中文、英文、数字与指定特殊符号.
  3. 只能输入英文 [问题点数：20分，结帖人qq_20203755]
  4. htm网页中文本框input如何限制只能输入汉字？？
  5. 限制文本框或文本域只能输入数字、中文和英文等

16. javascript给span标签赋值的方法

//如果用原生的就可以这样写：
var element = window.document.getElementById ("a"); //获取span标签
element.innerHTML = "在这里放值";
//如果有jquery的话就非常简单了。
1、给<span>标签一个id="ray",这个可以随便写，唯一就行。
2、$("#ray").text("像放的内容");
//建议使用jquery写，这样可以很好解决浏览器间的兼容性。

参考：

  1. 前端id属性和span标签
  2. jQuery设置和获取span的内容 （详解）
  3. 如何通过JS给input中的value赋值
  4. javascript给span标签赋值的方法
  5. 在js中, 怎么往span标签里放值进去？
  6. span的赋值与取值
  7. javascript中怎么给span动态赋值
  8. span标签取值与赋值
  9. js操作label给label赋值及取label的值示例
  10. jQuery text() 方法

17. js 中怎么获取当前系统时间 ?

// 例如: 2019-06-20 23:03:46
function CurentTime()
{
    var now = new Date();
    
    var year = now.getFullYear();       //年
    var month = now.getMonth() + 1;     //月
    var day = now.getDate();            //日
    
    var hh = now.getHours();            //时
    var mm = now.getMinutes();          //分
    var ss = now.getSeconds();           //秒
    
    var clock = year + "-";
    
    if(month < 10)
        clock += "0";
    
    clock += month + "-";
    
    if(day < 10)
        clock += "0";
        
    clock += day + " ";
    
    if(hh < 10)
        clock += "0";
        
    clock += hh + ":";
    if(mm < 10) clock += '0'; 
    clock += mm + ":"; 
     
    if(ss < 10) clock += '0'; 
    clock += ss; 
    return(clock); 
}
// alert(CurentTime())就可以了

参考：

  1. js 中怎么获取当前系统时间 ?
  2. javascript怎样比较两个时间的大小？
  3. js如何获取当前时间并显示

18. js处理变量类型转换以及浮点数的小数点保留问题

参考：

  1. js 字符串转换整形
  2. js将某个值转换为String字符串类型或转换为Number数字类型
  3. js实现四舍五入完全保留两位小数的方法
  4. JS保留两位小数 四舍五入函数
  5. python中小数点后取2位（四舍五入）以及取2位（四舍五不入）的方法总结

19. js时区时间转换格式

JavaScript时间格式化方法汇总：

var d = new Date();
console.log(d); // 输出：Mon Nov 04 2013 21:50:33 GMT+0800 (中国标准时间)
console.log(d.toDateString()); // 日期字符串，输出：Mon Nov 04 2013
console.log(d.toGMTString()); // 格林威治时间，输出：Mon, 04 Nov 2013 14:03:05 GMT
console.log(d.toISOString()); // 国际标准组织（ISO）格式，输出：2013-11-04T14:03:05.420Z
console.log(d.toJSON()); // 输出：2013-11-04T14:03:05.420Z
console.log(d.toLocaleDateString()); // 转换为本地日期格式，视环境而定，输出：2013年11月4日
console.log(d.toLocaleString()); // 转换为本地日期和时间格式，视环境而定，输出：2013年11月4日 下午10:03:05
console.log(d.toLocaleTimeString()); // 转换为本地时间格式，视环境而定，输出：下午10:03:05
console.log(d.toString()); // 转换为字符串，输出：Mon Nov 04 2013 22:03:05 GMT+0800 (中国标准时间)
console.log(d.toTimeString()); // 转换为时间字符串，输出：22:03:05 GMT+0800 (中国标准时间)
console.log(d.toUTCString()); // 转换为世界时间，输出：Mon, 04 Nov 2013 14:03:05 GMT

javascript实现的时间格式加8小时功能示例

<script>
   var oldTimes1 = "2017-07-10 03:28:54"
   var eosFormatTime2 = function(oldTimes1) 
   {
       var time1 = oldTimes1.split(' ')[0];
       // console.log("1、第二种方式time1:" + time1)
       var arrTime = oldTimes1.split(' ')[1].split(':');
       // console.log("2、第二种方式arrTime:" + arrTime)
       var time2 = arrTime.slice(1, arrTime.length).join(':');
       // console.log("3、第二种方式time2:" + time2)
       var h = parseInt(arrTime[0]) + 8;
       // console.log('4、第二种方式小时：', h);
       var newH = ((h < 24) ? h : (h % 24)).toString();
       
       return time1 + ' ' + newH + ':' + time2;
    }
    console.log(eosFormatTime2(oldTimes1))
</script>

参考：

  1. JavaScript 中Date对象的格式化代码方法汇总
  2. js时区时间转换格式：h5内转换含有T字母的8小时时区时间格式
  3. js获取日期及日期相关js方法 积累总结
  4. Date对象
  5. js中Date()的用法及日期计算方法
  6. JavaScript Date 对象
  7. JavaScript Date（日期） 对象
  8. Javascript 时间时区大杂烩
  9. JS 格林威治时间格式（GMT)与普通时间格式的互相转换
  10. JS 的时间格式
  11. js date对象的格式化代码
  12. javascript实现的时间格式加8小时功能示例

20. 启用、禁用按钮

一、禁用按钮：

$("#id").attr("disabled","true");
$("#id").attr("disabled",true);
$("#id").attr("disabled","disabled");

二、启用按钮：

$("#id").removeAttr("disabled");
$("#id").attr("disabled",false);

注意：

1、$("#id").attr("disabled","false");不起作用
2、disabled只能禁用button，对超链接不起作用

参考：

  1. jquery disable按钮（启用、禁用按钮）
  2. 在 jsp 中怎样禁用一个按钮 [问题点数：5分，结帖人mynameisldz]
  3. JQuery 怎么禁用一个按钮
  4. 如何通过点击另一个按钮来启用禁用的按钮？
  5. HTML 标签的 disabled 属性
  6. jquery禁用、启用button以及button的样式操作
  7. 使用query禁用、启用按钮（button）
  8. 切换按钮的启用和禁用
  9. HTML disabled属性的启用和禁止
  10. jquery 默认隐藏div,点击按钮显示，再次点击隐藏
  11. javascript点击按钮实现隐藏显示切换效果
  12. javascript – 使用按钮隐藏/显示iframe
  13. JavaScript控制页面元素显示隐藏
  14. JQuery点击一次显示(隐藏)，再点一次(隐藏)/(显示)

21. jQuery 安装与按钮隐藏

例如：

<div>
	<button id="displayBtn" style="background-color:#666666; display:block;">Display Button</button>
	<button id="hiddenBtn" style="background-color:#666666; display:none;">Hidden Button</button>
</div>

function DisplayAndHiddenBtn(btnId, type) {
    var currentBtn = document.getElementById(btnId);
    if (type == "d") {
        currentBtn.style.display = "block"; //style中的display属性
    }
    else if (type == "h") {
        currentBtn.style.display = "none";
    }
}

点击同一按钮实现一个元素的显示和隐藏效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>点击一个按钮隐藏和显示div</title>
<style type="text/css"> #thediv{ width:200px; height:50px; background:#ccc; } </style>
<script type="text/javascript"> window.onload=function(){ var obt=document.getElementById("bt"); var odiv=document.getElementById("thediv"); obt.onclick=function(){ if(odiv.style.display=="none"){ odiv.style.display="block"; obt.value="隐藏模块"; } else{ odiv.style.display="none"; obt.value="显示模块"; } } } </script>
<body>
<input type="button" id="bt" value="显示模块"/>
<div id="thediv" style="display:none"></div>
</body>
</html>

参考：

  1. jquery下载所有版本（实时更新）
  2. jQuery 安装
  3. jQuery 安装
  4. jQuery点击按钮实现div的隐藏和显示切换效果
  5. javascript 控制 html元素 显示/隐藏
  6. HTML DOM getElementById() 方法
  7. JS处理Button的隐藏与显示
  8. html的button怎么设置为隐藏啊？？没有隐藏属性，如何解决？ 谢谢 [问题点数：40分，结帖人enzey]
  9. button实现隐藏，可见； 直接show、hide即可
  10. JQuery点击一次显示(隐藏)，再点一次(隐藏)/(显示)
  11. CSS Display(显示) 与 Visibility（可见性）
  12. JavaScript中如何给按钮设置隐藏与显示属性
  13. js如何将一个按钮显示或者隐藏
  14. 用JavaScript隐藏控件的方法
  15. .toggle()
  16. JavaScript点击一个按钮隐藏和显示div
  17. Jquery实现选中记录按钮状态激活，未选中按钮状态未激活

22. js实现——特殊日期格式转换//2018-12-03T17:17:36.000+08:00 转化为2018-12-03 00:00:00（正则表达式的方法）

// 2018-12-03T17:17:36.000+08:00 转化为2018-12-03 00:00:00
function format(time) 
{
	// time = "2018-12-04T00:00:00.000+08:00";
    var date_temp = new Date(time).toJSON();
    console.log("时间1===" + date_temp);
    var date = new Date(+ new Date(date_temp) + 8*3600*1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
    console.log("时间2===" + date);
    return date;
}

参考：

  1. js实现 特殊日期格式转换//2018-12-03T17:17:36.000+08:00 转化为2018-12-03 00:00:00（正则表达式的方法）
  2. js 处理Json 时间带T 时间格式
  3. js时区时间转换格式：h5内转换含有T字母的8小时时区时间格式
  4. js将"2018-05-19T08:04:52.000+0000"这种格式的时间转化为正常格式
  5. JS转换时间格式
  6. 将"2018-05-19T08:04:52.000+0000"这种格式的时间转化为正常格式
  7. 使用moment.js轻松管理日期和时间

23. 在js中实现邮箱格式的验证

<body>
	<form action="#">
		<table>
			<tr>
				<td>邮箱：<input type="text" id=email></td>
				<td><span id=myspan style="text-size:18pt;color:red;"></span></td>
			</tr>
			<tr>
				<td><input type="submit" value="提交" onclick="return checkEmail()"/></td>
				<td></td>
			</tr>
		</table>
	</form>
</body>
<script type="text/javascript"> //判断用户输入的电子邮箱格式是否正确 function checkEmail() { 　　var myforms=document.forms; 　　var myemail=myforms[0].email.value; 　　var myReg=/^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/; 　　if(myReg.test(myemail)) 　　{ 　　　　return true; 　　} 　　else 　　{ 　　　　myspan.innerText="邮箱格式不对!"; 　　　　return false; } } </script>

参考：

  1. 在js中实现邮箱格式的验证

24. js简单实现密码的显示与隐藏

参考：

  1. JS实现（form）显示密码功能
  2. 基于JS实现密码框(password)中显示文字提示功能代码
  3. JS实现登录页密码的显示和隐藏功能
  4. js简单实现密码的显示与隐藏
  5. JavaScript 实现密码可见性切换（显示和隐藏）

25. 各个状态码的详细讲解

405状态码：

http请求 405错误 方法不被允许 (Method not allowed)

403状态码：

403状态码----详解
403状态码是什么意思

26. Javascript event.keyCode按键事件

function chenjiago()
{        
    if(event.keyCode==13)
    {
        document.forms[0].submit();
    }
}

<form  action="<%=path%>/login/login.action" method="post" onkeydown="chenjiago()" id="loginForm">

	<......>

</form>

//表示：当用户按下enter键时触发from提交，而不只是点击提交按钮才提交！
//这样更友好。 13表示enter按键的keyCode编码

参考：

  1. Javascript event.keyCode==13按键事件
  2. js中event.keyCode用法及keyCode对照表
  3. event.keyCode列表
  4. event.keyCode用法及列表
  5. keyCode 事件属性

27. js 判断一个 object 对象是否为空

下面两种方法都可以！
再说点别的吧，使用typeof操作null之所以会返回object对象，是因为对象的原型最终指向null，null被认为是一个空对象的引用。

if(!exp && typeof(exp) != "undefined" && exp != 0)
{
	alert("is null");	
}

if(exp === null)
{
	alert("is null");	
}

参考：

  1. js 判断一个 object 对象是否为空
  2. 如何用js判断null值
  3. JS中如何判断一个变量的数据类型为null？
  4. js如何判断Object是否为空?(属性是否为空)

28. 7 个有用JavaScript技巧

参考：

7 个有用JavaScript技巧

29. jQuery - css() 方法

参考：

  1. jQuery - css() 方法
  2. jQuery CSS 操作 - css() 方法
  3. jQuery动态设置样式（style、css）
  4. jquery设置css样式、style属性 示例
  5. JS设置CSS样式的几种方式