JavaScript 总结
判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=”你按下了”取消”按钮!”; }
时间
创建时间
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 的值。
字符串
字符串方法
更多方法实例可以参见:
方法 | 描述 |
---|---|
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()
正则表达式
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]+)*@( |
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]|2 |
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]/ 不可以出现数字 !/–\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次