JavaScript 总结

tips

判l断输入值不为空格

let username = $('').val().trim()       //去掉前后空格
if(username.length == 0 || username === "" || username == undefined){
    alert('请正确输入用户名');
    return;
}

需要相互调用的函数，写在同一个<script>代码块里面，不然可能报错。

<button onclick="window.location.reload()">刷新</button>          //刷新当前页面

while（null）停止循环，while（非null）继续循环

a标签不跳转

一、让a标签点击后不跳转可以设置成

1.<a href="javascript:void(0);" >javascript:void(0);</a> 
2.<a href="javascript:;" >javascript:;</a> 
3.<a href="" οnclick="return false;">return false;</a>    这个会刷新页面
4.<a href="#" οnclick="return false;">return false;</a>   这个会刷新页面
5.<a href="##" >##</a>    这个会刷新页面
6.<a href="####" >####</a>      这个会刷新页面
7.<a href="#all" >#all</a>  这个会刷新页面

二、如果想点击超链接调用js方法的话可以设置成

1.<a href="javascript:void(0)" οnclick="jsFun()">jsFun</a> 
2.<a href="#" οnclick="jsFun();return false;">jsFun();return false;</a>                
3.<a href="#" οnclick="alert(1);event.returnValue=false;">alert(1);event.returnValue=false;</a> 

三、更多说明 1.javascript:void(0)不建议使用 (但我平时还是用这个比较多。。。)

2.链接（href）直接使用javascript:void(0)在IE中可能会引起一些问题，比如：造成gif动画停止播放等，所以，最安全的办法还 是使用“####”。为防止点击链接后跳转到页首，onclick事件return false即可，<a>这个标签的执行顺序应该是先执行onclick 的脚本，最后才进行href参数指定页面的跳转。在onclick中返回false，就可以中止<a>标签的工作流程，也就是不让页面跳转到href参数指定的页面。

3.如果仅仅是想鼠标移过，变成手形，可以使用 <span οnclick="jsFun()">手型!</span>

4.阻止默认行为 在方法里一定要传参event，而且还要写完整！写e或者不写，谷歌都可以，但是火狐，360，ie都不行，必须写完整！！！但是IE还是不兼容，所以得这么写

function stopDefault(event) { 
    if ( event.preventDefault ){
        event.preventDefault();  //支持DOM标准的浏览器
    } else { 
        window.event.returnValue = false;  //IE
    } 

这么写，就可以兼容ie(7+,6不知道)，谷歌，火狐，360了

event.isDefaultPrevented()方法来检查指定的事件上是否调用了preventDefault() 方法。

event.stopPropagation();//取消冒泡

this

面向对象语言中 this 表示当前对象的一个引用。

但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

• 在方法中，this 表示该方法所属的对象。

• 如果单独使用，this 表示全局对象。

• 在函数中，this 表示全局对象。

• 在函数中，在严格模式下，this 是未定义的(undefined)。

• 在事件中，this 表示接收事件的元素。

• 类似 call() 和 apply() 方法可以将 this 引用到任何对象。

location对象

属性

可以通过设置 location.href=("新路径") 来实现页面跳转

属性	描述
hash	返回一个URL的锚部分
host	返回一个URL的主机名和端口 // localhost:90
hostname	返回URL的主机名 // localhost
href	返回完整的URL // http://localhost:90/pages/administrator/brand/update.jsp
pathname	返回的URL路径名。// /pages/administrator/brand/update.jsp
port	返回一个URL服务器使用的端口号 // 90
protocol	返回一个URL协议 // http:
search	返回一个URL的查询部分

方法

window.location.reload() //当前页面刷新

window.location.assign("新路径") //跳转到新页面，可以回退到之前的

window.location.replace("新路径") //在原有窗体上叠加一个新的，无法回退

Array数组

创建一个数组

创建一个数组，有三种方法。

下面的代码定义了一个名为 myCars的数组对象：

1: 常规方式:

var myCars=new Array(); myCars[0]="Saab"; myCars[1]="Volvo"; myCars[2]="BMW";

2: 简洁方式:

var myCars=new Array("Saab","Volvo","BMW");

3: 字面:

var myCars=["Saab","Volvo","BMW"];

访问数组

通过指定数组名以及索引号码，你可以访问某个特定的元素。

以下实例可以访问myCars数组的第一个值：

var name=myCars[0];

以下实例修改了数组 myCars 的第一个元素:

myCars[0]="Opel";

 

在一个数组中你可以有不同的对象

所有的JavaScript变量都是对象。数组元素是对象。函数是对象。

因此，你可以在数组中有不同的变量类型。

你可以在一个数组中包含对象元素、函数、数组：

数组方法和属性

使用数组对象预定义属性和方法：

var x=myCars.length // myCars 中元素的数量 var y=myCars.indexOf("Volvo") // "Volvo" 值的索引值

按键绑定函数

固定写法，

$('#ff').on('click',function(){

getBookList();

});

写成$('#ff').on('click',getBookList()); 无法绑定，会执行一次getBookList()

按回车功能同点击发送键

// 为文本框绑定 keyup 事件

$('#ipt').on('keyup', function(e) {

 // console.log(e.keyCode)

 if (e.keyCode === 13) {

 // console.log('用户弹起了回车键')

	  $('#btnSend').click()

}

})

正则判断

计时器

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。

window.setInterval("javascript function",milliseconds);

window.setInterval() 方法可以不使用 window 前缀，直接使用函数 setInterval()。

setInterval() 第一个参数是函数（function）。

第二个参数间隔的毫秒数

关闭计时器

window.clearInterval(intervalVariable)

window.clearInterval() 方法可以不使用window前缀，直接使用函数clearInterval()。

要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量：

myVar=setInterval("javascript function",milliseconds);

clearInterval(myVar);

setTimeout() - 在指定的毫秒数后执行指定代码。

myVar= window.setTimeout("javascript function", milliseconds);

setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 myVar 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。

setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg。

第二个参数指示从当前起多少毫秒后执行第一个参数。

关闭计时器

window.clearTimeout(timeoutVariable)

window.clearTimeout() 方法可以不使用window 前缀。

要使用clearTimeout() 方法, 你必须在创建超时方法中（setTimeout）使用全局变量:

myVar=setTimeout("javascript function",milliseconds);

如果函数还未被执行，你可以使用 clearTimeout() 方法来停止执行函数代码。

弹窗

警告框

window.alert("sometext");

window.alert() 方法可以不带上window对象，直接使用alert()方法。

确认框

当确认卡弹出时，用户可以点击 "确认" 或者 "取消" 来确定用户操作。

当你点击 "确认", 确认框返回 true， 如果点击 "取消", 确认框返回 false。

window.confirm("sometext");

window.confirm() 方法可以不带上window对象，直接使用confirm()方法。

实例

var r=confirm("按下按钮"); if (r==true) {

x="你按下了"确定"按钮!"; }else{ x="你按下了"取消"按钮!"; }

时间

getFullYear() 使用 getFullYear() 获取年份。

getTime() getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。

setFullYear() 如何使用 setFullYear() 设置具体的日期。setFullYear(2020,10,3)。记住 JavaScript 月数是从0至11。10是11月。

toUTCString() 如何使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串。

getDay() 如何使用 getDay() 和数组来显示星期，而不仅仅是数字。返回表示周几的数字，周日是0

Display a clock 如何在网页上显示一个钟表。显示一个每秒刷新的时间字符串

创建时间

new Date();
new Date(value);		//var d1 = new Date("October 13, 1975 11:13:00")
new Date(dateString);
new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);

设置日期为5天后

myDate.setDate(myDate.getDate()+5);

两个Date对象可以用< > == 进行比较

cookie

Cookie 是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。

Cookie 的作用就是用于解决 "如何记录客户端的用户信息":

• 当用户访问 web 页面时，他的名字可以记录在 cookie 中。

• 在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

Cookie 以名/值对形式存储，如下所示:

username=John Doe

当浏览器从服务器上请求 web 页面时， 属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。

创建

JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。

JavaScript 中，创建 cookie 如下所示：

document.cookie="username=John Doe";

您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

获取

在 JavaScript 中, 可以使用以下代码来读取 cookie：

var x = document.cookie;

document.cookie 将以字符串的方式返回所有的 cookie，类型格式： cookie1=value; cookie2=value; cookie3=value;

修改

在 JavaScript 中，修改 cookie 类似于创建 cookie，如下所示：

document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

旧的 cookie 将被覆盖。

删除

删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

注意，当您删除时不必指定 cookie 的值。

字符串

字符串方法

更多方法实例可以参见：JavaScript String 对象。

方法	描述
charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串，返回连接后的字符串
fromCharCode()	将 Unicode 转换为字符串
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()	根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase()	根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase()	把字符串转换为小写
toString()	返回字符串对象值
toUpperCase()	把字符串转换为大写
trim()	移除字符串首尾空白
valueOf()	返回某个字符串对象的原始值

Math方法

1.向上取整。正数：有小数，舍弃小数，整数就加1。负数：就舍弃小数部分，取整数部分

Math.ceil();

2.向下取整。正数：舍弃小数，只要整数部分。负数：有小数，舍弃小数，整数减1

Math.floor();

3.取绝对值。正数就是本身，负数取反

Math.abs();

4.四舍五入。正数：第一位小数大于5，则整数加1，反之取整数。负数：第一位小数大于5，则取整数，反之整数减1

Math.round()

 

random() 如何使用 random() 来返回 0 到 1 之间的随机数。

max() 如何使用 max() 来返回两个给定的数中的较大的数。（在 ECMASCript v3 之前，该方法只有两个参数。）

min() 如何使用 min() 来返回两个给定的数中的较小的数。（在 ECMASCript v3 之前，该方法只有两个参数。）

 

正则表达式

var patt = /e/;
patt.test("The best things in life are free!");

字符	描述
\	将下一个字符标记为一个特殊字符、或一个原义字符、或一个向后引用、或一个八进制转义符。例如，“n”匹配字符“n”。“\n”匹配一个换行符。串行“\\”匹配“\”而“\(”则匹配“(”。
^	匹配输入字符串的开始位置。如果设置了RegExp对象的Multiline属性，^也匹配“\n”或“\r”之后的位置。
$	匹配输入字符串的结束位置。如果设置了RegExp对象的Multiline属性，$也匹配“\n”或“\r”之前的位置。
*	匹配前面的子表达式零次或多次。例如，zo能匹配“z”以及“zoo”。等价于{0,}。
+	匹配前面的子表达式一次或多次。例如，“zo+”能匹配“zo”以及“zoo”，但不能匹配“z”。+等价于{1,}。
?	匹配前面的子表达式零次或一次。例如，“do(es)?”可以匹配“does”或“does”中的“do”。?等价于{0,1}。
{n}	n是一个非负整数。匹配确定的n次。例如，“o{2}”不能匹配“Bob”中的“o”，但是能匹配“food”中的两个o。
{n,}	n是一个非负整数。至少匹配n次。例如，“o{2,}”不能匹配“Bob”中的“o”，但能匹配“foooood”中的所有o。“o{1,}”等价于“o+”。“o{0,}”则等价于“o*”。
{n,m}	m和n均为非负整数，其中n<=m。最少匹配n次且最多匹配m次。例如，“o{1,3}”将匹配“fooooood”中的前三个o。“o{0,1}”等价于“o?”。请注意在逗号和两个数之间不能有空格。
?	当该字符紧跟在任何一个其他限制符（,+,?，{n}，{n,}，{n,m*}）后面时，匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如，对于字符串“oooo”，“o+?”将匹配单个“o”，而“o+”将匹配所有“o”。
.	匹配除“\n”之外的任何单个字符。要匹配包括“\n”在内的任何字符，请使用像“(.|\n)”的模式。
(pattern)	匹配pattern并获取这一匹配。所获取的匹配可以从产生的Matches集合得到，在VBScript中使用SubMatches集合，在JScript中则使用$0…$9属性。要匹配圆括号字符，请使用“\(”或“\)”。
(?:pattern)	匹配pattern但不获取匹配结果，也就是说这是一个非获取匹配，不进行存储供以后使用。这在使用或字符“(|)”来组合一个模式的各个部分是很有用。例如“industr(?:y|ies)”就是一个比“industry|industries”更简略的表达式。
(?=pattern)	正向肯定预查，在任何匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如，“Windows(?=95|98|NT|2000)”能匹配“Windows2000”中的“Windows”，但不能匹配“Windows3.1”中的“Windows”。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始。
(?!pattern)	正向否定预查，在任何不匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如“Windows(?!95|98|NT|2000)”能匹配“Windows3.1”中的“Windows”，但不能匹配“Windows2000”中的“Windows”。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始
(?<=pattern)	反向肯定预查，与正向肯定预查类拟，只是方向相反。例如，“(?<=95|98|NT|2000)Windows”能匹配“2000Windows”中的“Windows”，但不能匹配“3.1Windows”中的“Windows”。
(?<!pattern)	反向否定预查，与正向否定预查类拟，只是方向相反。例如“(?<!95|98|NT|2000)Windows”能匹配“3.1Windows”中的“Windows”，但不能匹配“2000Windows”中的“Windows”。
x|y	匹配x或y。例如，“z|food”能匹配“z”或“food”。“(z|f)ood”则匹配“zood”或“food”。
[xyz]	字符集合。匹配所包含的任意一个字符。例如，“[abc]”可以匹配“plain”中的“a”。
[^xyz]	负值字符集合。匹配未包含的任意字符。例如，“[^abc]”可以匹配“plain”中的“p”。
[a-z]	字符范围。匹配指定范围内的任意字符。例如，“[a-z]”可以匹配“a”到“z”范围内的任意小写字母字符。
[^a-z]	负值字符范围。匹配任何不在指定范围内的任意字符。例如，“[^a-z]”可以匹配任何不在“a”到“z”范围内的任意字符。
\b	匹配一个单词边界，也就是指单词和空格间的位置。例如，“er\b”可以匹配“never”中的“er”，但不能匹配“verb”中的“er”。
\B	匹配非单词边界。“er\B”能匹配“verb”中的“er”，但不能匹配“never”中的“er”。
\cx	匹配由x指明的控制字符。例如，\cM匹配一个Control-M或回车符。x的值必须为A-Z或a-z之一。否则，将c视为一个原义的“c”字符。
\d	匹配一个数字字符。等价于[0-9]。
\D	匹配一个非数字字符。等价于0-9。
\f	匹配一个换页符。等价于\x0c和\cL。
\n	匹配一个换行符。等价于\x0a和\cJ。
\r	匹配一个回车符。等价于\x0d和\cM。
\s	匹配任何空白字符，包括空格、制表符、换页符等等。等价于[ \f\n\r\t\v]。
\S	匹配任何非空白字符。等价于 \f\n\r\t\v。
\t	匹配一个制表符。等价于\x09和\cI。
\v	匹配一个垂直制表符。等价于\x0b和\cK。
\w	匹配包括下划线的任何单词字符。等价于“[A-Za-z0-9_]”。
\W	匹配任何非单词字符。等价于“[^A-Za-z0-9_]”。
\xn	匹配n，其中n为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如，“\x41”匹配“A”。“\x041”则等价于“\x04&1”。正则表达式中可以使用ASCII编码。.
*num*	匹配num，其中num是一个正整数。对所获取的匹配的引用。例如，“(.)\1”匹配两个连续的相同字符。
*n*	标识一个八进制转义值或一个向后引用。如果*n之前至少n个获取的子表达式，则n为向后引用。否则，如果n为八进制数字（0-7），则n*为一个八进制转义值。
*nm*	标识一个八进制转义值或一个向后引用。如果*nm之前至少有nm个获得子表达式，则nm为向后引用。如果*nm之前至少有n个获取，则n为一个后跟文字m的向后引用。如果前面的条件都不满足，若n和m均为八进制数字（0-7），则*nm将匹配八进制转义值nm*。
*nml*	如果n为八进制数字（0-3），且m和l均为八进制数字（0-7），则匹配八进制转义值nml。
\un	匹配n，其中n是一个用四个十六进制数字表示的Unicode字符。例如，\u00A9匹配版权符号（©）。

 

常用正则表达式

用户名	/^[a-z0-9_-]{3,16}$/
密码	/^[a-z0-9_-]{6,18}$/
十六进制值	/^#?([a-f0-9]{6}|[a-f0-9]{3})$/
电子邮箱	/^([a-z0-9_.-]+)@([\da-z.-]+).([a-z.]{2,6})$/ /^[a-z\d]+(.[a-z\d]+)*@(\da-z?)+(.{1,2}[a-z]+)+$/
URL	/^(https?:\/\/)?([\da-z.-]+).([a-z.]{2,6})([\/\w .-])\/?$/
IP 地址	/((2[0-4]\d|25[0-5]|[01]?\d\d?).){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/ /^(?:(?:25[0-5]|20-4|[01]?0-9?).){3}(?:25[0-5]|20-4|[01]?0-9?)$/
HTML 标签	/^<([a-z]+)(<+)(?:>(.)<\/\1>|\s+\/>)$/
删除代码\注释	(?<!http:|\S)//.*$
Unicode编码中的汉字范围	/^[\u2E80-\u9FFF]+$/

[\u4e00-\u9fa5] 汉字 /^ [\u4e00 - \u9fa5] | [a-zA-Z]$/ 输入汉字、字母 /^ (? ![·-\s])(?!.* [·-\s]$) / 4个特殊符号“•”或“” 或“-”或空格 不可以出现在开头和结尾 /^[·-\s\w\u4e00-\u9fa5]*$/ 汉字与符号的组合 !/[0-9]/ 不可以出现数字 !/\u4e00-\u9fa5{1}|a-zA-Z{1}/ 汉字和字母不可以组合，即没有汉字与字母的组合 !/[·-\s]{2}/ 符号“•”或“_”或“-”不允许挨着 !/[\u4e00-\u9fa5]\s[\u4e00-\u9fa5a]/ 汉字之间不允许有空格 !/[a-z]\s{2,}[a-z]/ 字母之间只允许有1个空格

字符  含义
^   匹配输入字符串开始的位置
$   匹配输入字符串结尾的位置
* 匹配前一个表达式0次或者多次，等价于{0，}
{n，}    n是正整数，匹配前一个至少出现了n次
[0-9]   匹配0-9之间的数字
\d  匹配一个数字，等价于[0-9]
\D 匹配一个非数字，等价于[^0-9]
[a-zA-Z]    匹配 a-z 之间的字母
\w  匹配数字、字母、下划线，等价于[A-Za-z0-9_]
\W  匹配非数字、字母、下划线，等价于[^A-Za-z0-9]
\s  匹配一个空白字符
\b  匹配一个单词边界，即单词和空格间的位置，例如匹配ing结尾单词 ing\b
?   匹配前面的子表达式0次或者1次