概念
JavaScript 是脚本语言,是一种解释性脚本语言(代码不进行预编译) JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
作用
1、为网页添加各式各样的动态功能
2、为用户提供更流畅美观的浏览效果。
通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
JavaScript的用法
1、HTML页面中的JavaScript
在html页面中的脚本必须位于script围堵标签之间,script标签放在head中可以,body中也可以, 放在最后也可以,对位置要求不严格。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JavaScript的用法</title> <script> alert("hello JavaScript1-1"); </script> </head> <body> <script> alert("hello JavaScript2-1"); </script> </body> </html> <script> alert("hello JavaScript3-1"); </script>
2、外部的JavaScript
可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件 扩展名是 .js。
当我们使用外部文件时,在HTML页面的script 标签的 "src" 属性中设置该 .js 文件:
myScript.js文件 //外部js文件中不能有script标签,直接编写JavaScript脚本代码即可 function fun1(){ alert("hello JavaScript"); } <!DOCTYPE html> <html> <head> <script src="js/myScript.js"/> </head> <body> <script> fun1();//调用脚本中的内容s </script> </body> </html> 外部文件引入一次即可,在head或者body中都可以
3、标签属性中的JavaScript
直接编写在HTML标签的一些属性中,用于简单的JavaScript代码的编写,少用。
<a href="javascript:alert('ok')">登录</a>
JavaScript显示数据
1、使用window.alert()弹出框 window可以省略,window.alert("hello world")等价于alert("hello world"); 2、使用document.write()将内容写入到html文档 3、使用innerHTML写入到html元素 4、使用console.log写入到浏览器控制台 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js显示数据的方式</title> <script> //方式1:弹框输出 alert("hello js"); //方式2:在页面输出 document.write("hello world"); </script> </head> <body> <div id="div1">div1</div> <script> //方式3:要注意的问题,先加载完页面元素才能获取页面元素,即getElementById函数要在被获取的标签加载完毕才能使用 document.getElementById("div1").innerHTML="hello world"; //方式4:输出内容到控制台 console.log("hello world"); </script> </body> </html>
JavaScript的注释
JavaScript注释与java的单行和多行注释相同。
单行注释以 // 开头。 多行注释以 /* 开始,以 */ 结尾。
JavaScript基本语法
1、变量
声明变量的关键字:var
语法:var 变量名称;
var hello; //声明变量
hello='世界'; //赋值
var x=1;//声明的同时赋值
var y=2;
var z=x+y;//变量也可以存储表达式
变量的命名规则:
变量必须以字母开头
变量也能以 $ 和 _ 符号开头
变量名称对大小写敏感(y 和 Y 是不同的变量)
不能使用关键字保留字
变量的命名规范: 见名知意 。
例如:bookPirce,userName等,避免无意义的a,b,c等
推荐驼峰命名法,即第一个单词的首字母小写,以后每个单词的首字母大写。例如myTest
2、语句
JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
JavaScript 是脚本语言,浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译。
JavaScript中也有分支结构和循环结构,语法与java类似。
一般一行只写一条语句,每句结尾编写分号结束
3、数据类型
1)、值类型(基本类型)
字符串String 字符串是存储字符的变量。字符串可以是引号中的任意文本。必须使用单引号或双引号; <script> var name='lala'; // 引号嵌套 var message='我认识一个名字叫"lala"的人'; </script> 数字Number JavaScript 只有一种数字类型。数字可以带小数点,也可以不带: <script> var boookPrice=58.9; var gameLevel=66; //极大或极小的数字可以通过科学计数法来书写: var money1=666e5; //66600000 var money2=-666e-5; //-0.00666 </script> 布尔Boolean 只能有两个值:true 或 false。 <script> var isBook=true; var isPen=false; </script> 空Null <script> var name=null; </script> 未定义Undefined 表示变量不含有值。可以通过将变量的值设置为 null 来清空变量。 共有4中情况会出现undefined的值: 1、变量声明且没有赋值; <script> var obj; alert(obj);//obj值为undefined </script> 2、获取对象中不存在的属性时; <script> var obj; alert(obj.name);//报错信息: "Uncaught TypeError: Cannot read property 'name' of undefined" </script> 3、函数需要实参,但是调用时没有传值,形参是undefined; 4、函数调用没有返回值或者return后没有数据,接收函数返回的变量是undefined。 <script> function printNum(num){ alert(num); } var result=printNum();//调用函数未传递参数,执行函数的时候num的值是undefined alert(result);//result的值也是undefined,因为printNum()没有返回值 </script> Symbol (Symbol 是 ES6 引入了一种新的原始数据类型,表示独一无二的值)
2)、引用数据类型:
对象(Object)、数组(Array)、函数(Function)。
在下方js对象目录下详细说明
3)、动态类型
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型:
<script> var param; // param类型为 undefined param = 5; // 现在 param 为数字 param = "John"; // 现在 param 为字符串 </script> PS:虽然JavaScript支持这种写法,但是不推荐这种写法。 尽量开始声明变量的时候就确定好将要盛放什么类型的值,以后尽量不随意改变。
JavaScript中的运算符
算数运算符:+ - * / % 、 ++ 、 -- 赋值运算符:= 、 +=、 -= 、*= 、 /= 、 %= 字符串的连接符:+ 逻辑运算符: && || ! 条件运算符:?: 比较运算符: == 、!= 、 > 、<、 >= 、 <= 以上运算符的运算规则与java一样 两个新的比较运算符: 比较运算 描述 === 绝对等于(值和类型均相等) !== 不绝对等于(值和类型有一个不相等,或两个都不相等)
JavaScript对象
String对象 1.属性--长度属性 <script> var str="我喜欢看在B站听歌,现在在看\'狗东西\'戴老师"; //注意:字符串中出现的\'是一个字符,转义为一个单引号 console.log(str); //获取字符串的长度:,切记:所有转移符号的长度都算一个,即\'长度为1 console.log("字符串的长度="+str.length);//21 </script> 2.方法 JavaScript中的String对象方法与java的String方法很多都类似甚至一样 Array对象 Array 对象用于在变量中存储多个值,也就是数组。 <script> //声明数组方式1: var names=new Array(); for(var i=0;i<3;i++){ names[i]=(i+1)+"亿"; } for(var i=0;i<names.length;i++){ document.write(names[i]+"<br/>"); } //声明数组方式2: var moneyList=["一万","十万","一百万"]; for(var i=0;i<moneyList.length;i++){ document.write(moneyList[i]+"<br/>"); } //声明数组方式3: var books=new Array("投资中最简单的事情","富爸爸穷爸爸","财富自由"); for(var i=0;i<books.length;i++){ document.write(books[i]+"<br/>"); } //数组的长度 length属性 var booksLen = books.length; </script> 数组对象的方法:
Date对象 创建日期对象 <script> var date1 = new Date(); var date2 = new Date(milliseconds); var date3 = new Date(dateString); var date4 = new Date(year, month, day, hours, minutes, seconds, milliseconds); </script> 日期对象的常用方法 方法 描述 getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。 getFullYear() 从 Date 对象以四位数字返回年份。 getHours() 返回 Date 对象的小时 (0 ~ 23)。 getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。 getMonth() 从 Date 对象返回月份 (0 ~ 11)。 getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。 setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。 setFullYear() 设置 Date 对象中的年份(四位数字)。 setHours() 设置 Date 对象中的小时 (0 ~ 23)。 setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。 setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。 setMonth() 设置 Date 对象中月份 (0 ~ 11)。
Math对象 与java中的Math相似,跟数学相关的内容都这里。有很多方法属性与java中的也类似。 常用属性: <script> var pi=Math.PI;//返回圆周率 </script> 常用方法 <script> var num=Math.random();// 返回 0 ~ 1 之间的随机数。 var max=Math.max(12,34,-90,9);//返回 n个数值中的最大值。 var min=Math.min(12,34,-90,9);//返回 n个数值中的最小值。 </script>
JavaScript的函数
常用全局函数
JavaScript中有个常用的全局属性NaN,即非数值(Not a Number),NaN 属性用于引用特殊的非数字值,该属性指定的并不是不合法的数字。 isNaN(param) 用于检查其参数是否是非数字值。 是数值的返回false,不是数值返回true。 <script> console.log(isNaN(666));//false console.log(isNaN(1+2));//false console.log(isNaN("hello"));//true </script> parseFloat(String) 可解析一个字符串,并返回一个浮点数。该函数指定字符串中的首个字符是否是数字。如果是,则对字 符串进行解析,直到到达数字的末端为止,然后以数字返回该数字,而不是作为字符串。 <script> console.log(parseFloat("66"));//66 console.log(parseFloat("199.99"));//199.99 console.log(parseFloat("1024 2048 4096"));//1024 console.log(parseFloat(" 128 "));//128 console.log(parseFloat("10年"));//10 console.log(parseFloat("今天是8号"));//NaN //字符串中只返回第一个数字。 //开头和结尾的空格是允许的。 //如果字符串的第一个字符不能被转换为数字,那么 parseFloat() 会返回 NaN。 </script> parseInt(string,radix) 可解析一个字符串,并返回一个整数. 参数 描述 string 必需。要被解析的字符串。 radix 可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。 当参数 radix 的值为 0,或没有设置该参数时,parseInt() 会根据 string 来判断数字的基数。 当忽略参数 radix , JavaScript 默认数字的基数如下: 如果 string 以 "0x" 开头,parseInt() 会把 string 的其余部分解析为十六进制的整数。 如果 string 以 0 开头,那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。 如果 string 以 1 ~ 9 的数字开头,parseInt() 将把它解析为十进制的整数 <script> console.log(parseInt("66"));//66 console.log(parseInt("199.99"));//199 console.log(parseInt("1024 2048 4096"));//1024 console.log(parseInt(" 128 "));//128 console.log(parseInt("10年"));//10 console.log(parseInt("今天是8号"));//NaN console.log(parseInt("10",10));//10 console.log(parseInt("010"));//10 console.log(parseInt("10",8));//8 console.log(parseInt("0x10"));//16 console.log(parseInt("10",16));//16 //旧浏览器由于使用旧版本的ECMAScript(ECMAScript版本小于ECMAScript 5,当字符串以"0"开头时默认使用八进制,ECMAScript 5使用的是十进制),所以在解析("010") 将输出8。 //只有字符串中的第一个数字会被返回。 //开头和结尾的空格是允许的。 //如果字符串的第一个字符不能被转换为数字,那么 parseInt() 会返回 NaN。 //在字符串以"0"为开始时旧的浏览器默认使用八进制基数。ECMAScript 5,默认的是十进制 的基数。 </script>
自定义函数
自定义函数语法 使用function关键字定义函数 function 自定义函数名称(参数列表){ //函数体 } 自定义函数实例 注意: 1、函数的形参直接写参数名称,不需要声明类型,即不需要写var. 2、函数的返回取决于函数体中是否有return关键字。 <script> //无参无返回 function print(){ document.write("无参无返回<br/>"); } //有参无返回 function printNum(num){ document.write("<br/>有参无返回:num="+num); } function getSum(a,b){ document.write("<br/>有参无返回:求和结果="+(a+b)); } //有返回值:取决于是否有return function getSum2(a,b){ //document.write("<br/>有参无返回:求和结果="+(a+b)); return a+b; } //函数的调用 print(); printNum(12); getSum(1,2); var res=getSum2(23,23); document.write("<br/>有返回值的方法调用结果res="+res); </script>
匿名函数
<script> var fun1=function (){ document.write("hello function--匿名函数"); } //调用匿名函数 fun1(); </script>
JavaScript变量的作用域
局部 JavaScript 变量
在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问。
在不同的函数中可以声明名称相同变量,因为局部变量出该函数就失效了。
全局 JavaScript 变量
在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。
<script> var money=1000;//全局变量,任何位置都能访问 function fun1() { var name = "宜以";//局部变量,只在当前函数中生效 document.write(name+"<br/>"); document.write(money+"<br/>"); } function fun2() { var name = "飞机"; document.write(name+"<br/>"); document.write(money+"<br/>"); } fun1(); fun2(); </script>
变量的生命周期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
JavaScript自定义对象
<script> //定义对象 var student={ name:"张三", age:24, height:188.5 }; //定义JavaScript对象:对象可以跨域多行,空格和换行不是必须的 var student2={ name:"李四", age:21, height:186, study:function(){ document.write("study---好好学习,天天向上!<br/>") }, doHomework:function(){ document.write("doHomework---多敲代码!<br/>"); } } //访问student对象的属性: //方式1: var name=student.name; document.write("<br/>student.name="+name); var age=student.age; document.write("<br/>student.age="+age); //方式2: var height=student['height']; document.write("<br/>student.height="+height); //访问student2对象的方法 student2.doHomework(); </script>
JavaScript Window--浏览器对象模型
浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。
BOM:Browser Object Model,中文浏览器对象模型。
虽然现在BOM尚无正式标准,但是由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因此window常被认为是 BOM 的方法和属性。
1、window对象
所有浏览器都支持 window 对象。它表示浏览器窗口。( 没有应用于 window 对象的公开标准,不过所有浏览器都支持该对象)。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。全局函数是 window 对象的方法。 Window 对象表示浏览器中打开的窗口。
window对象常用属性: | |
属性 | 描述 |
document | 对 Document 对象的只读引用。 |
history | 对 History 对象的只读引用。 |
location | 用于窗口或框架的 Location 对象。 name 设置或返回窗口的名称。 |
常用方法:
方法 描述
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt() 显示可提示用户输入的对话框。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
close() 关闭浏览器窗口。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
打开和关闭浏览器案例 <a href="javascript:window.open('https://www.baidu.com')">打开百度</a> <a href="javascript:window.open('index.html')">打开-index</a> <a href="javascript:window.close()">关闭当前页面</a>
弹框案例 <script> //window对象常用的弹框方法 //1、基本弹框 window.alert("只有一个确定按钮的对话框"); //2、对话框:有确定和取消两个看你,点击确定返回true,点击取消返回false var res=window.confirm("确认要关闭吗?"); if(res){ alert("点击了确定按钮"); }else{ alert("点击取消按钮"); } //3、输入框:prompt(提示信息,默认值) var age=prompt("请输入年龄:",19); alert("输入的年龄信息是:"+age); </script>
2、history对象
window.history 对象包含浏览器的历史。
window.history对象在编写时可不使用 window 这个前缀。
常用方法:
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击向前按钮相同
history.go(1/-1)-- 参数为1:等同于
history.forward(),参数为-1,等同于history.back()
<a href="javascript:window.history.forward()">前进</a> <a href="javascript:window.history.back()">后退</a> <a href="javascript:window.history.go(1)">前进go</a> <a href="javascript:window.history.go(-1)">后退go</a>
3、location对象
window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
常用属性和方法:
window.location 对象在编写时可不使用 window 这个前缀。
href 当前窗口正在浏览的网页地址
replace(url) 转向到url网页地址
reload() 重新载入当前网址,如同按下刷新按钮
<a href="javascript:alert(window.location.href)">获取当前页面的URL地址</a> <a href="javascript:window.location.reload()">刷新</a><br /> <a href="javascript:window.location.replace('index.html')">跳转到index</a><br /> <a href="javascript:location.replace('https://www.baidu.com')">跳转到百度</a><br/>
JavaScript之事件
HTML 事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触 发这些事件。
HTML事件 HTML 事件可以是浏览器行为,也可以是用户行为。
例如页面加载完成、你点击个按钮、文本框输入了文字等等,都是HTML事件的案例。
通过当事件发生时,我们希望可以做些事情,例如点击完毕按钮之后希望跳转页面、文本框输入完毕之后验证有效性等,那么这些要做的事情我们就可以通过JavaScript实现。
常用的HTML事件
事件 描述
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载
onfocus 元素获取焦点时触发
onblur 元素失去焦点时触发
<body onload="myLoad()"> <input id="userName" onkeydown="fun5()" onfocus="fun6()" onblur="fun7()"/> <input id="password" type="password" /> <button id="btn" type="button" onclick="fun2()" onmouseover="fun3()" onmouseout="fun4()">点击我试试</button> <select id="month" onchange="fun1()"> <option>1月份</option> <option>2月份</option> </select> </body>
JavaScript之DOM模型
通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。
DOM:Document Object Model,文档对象模型。 当网页被加载时,浏览器会创建页面的文档对象模型。
HTML DOM 模型被构造为对象的树:
通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
document对象
当浏览器载入 HTML 文档, 它就会成为 Document 对象。
Document 对象是 HTML 文档的根节点。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。
1、
document对象常用方法 | |
方法 | 描述 |
document.getElementById() | 返回对拥有指定 id 的第一个对象的引用。 |
document.getElementsByClassName() | 返回文档中所有指定类名的元素集合,作为 NodeList 对象。 |
document.getElementsByTagName() | 返回带有指定标签名的对象集合。 |
document.getElementsByName() | 返回带有指定名称的对象集合。 |
<body onload="myLoad()"> <p class="demo"></p> <div id="myDiv" class="demo"> div </div> <ul class="demo"> <li>li11111111111</li> <li name="myli">li11111111111</li> <li>li11111111111</li> <li name="myli">li11111111111</li> </ul> </body> <script> function myLoad(){ //页面加载完毕之后再去获取页面上的元素,否则获取不到 //根据ID 获取元素,只能获取到唯一元素(如果有重名的ID元素,获取到的是第一个元素) var div=document.getElementById("myDiv"); console.log(div); //根据指定的类样式的名称获取元素,返回集合 var list=document.getElementsByClassName("demo"); console.log("根据类样式的名称获取到的元素的集合长度是:"+list.length); for(var i=0;i<list.length;i++){ console.log(list[i]); } //根据指定HTML标签名称获取元素,返回集合 var list2=document.getElementsByTagName("li"); console.log("根据标签的名称获取到的元素的集合长度是:"+list2.length); for(var i=0;i<list2.length;i++){ console.log(list2[i]); } //根据指定HTML元素的name属性获取元素,返回集合 var list3=document.getElementsByName("myli"); console.log("根据标签的名称属性获取到的元素的集合长度是:"+list3.length); for(var i=0;i<list3.length;i++){ console.log(list3[i]); } } </script>
2、修改 HTML 内容和属性
修改内容
修改 HTML 内容的最简单的方法是使用 innerHTML 属性。
修改 HTML 元素的内容的语法: document.getElementById(id).innerHTML=新的 HTML。
PS: 绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。
修改 HTML 属性
修改 HTML 元素属性的语法:
方式1:document.getElementById(id).attribute=新属性值
方式2:document.getElementById(id).setAttribute(属性名,属性值);
修改 HTML 元素的css
修改 HTML 元素css的语法: document.getElementById(id).style.property=新样式
style.color/fontFamilyfontSize
3、HTML DOM 元素 (节点)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function createNewP(){ var newElementP=document.createElement("p");//创建一个新的段落元素 var text=document.createTextNode("这是我新创建的段落");//新创建的文本节点 //将文本的节点添加到新创建的元素中 newElementP.appendChild(text); //获取一个页面已经存在的元素 var div=document.getElementById("div1"); //添加新创建的元素p到已经存在的元素div中 div.appendChild(newElementP); } function createNewP2(){ var newElementP=document.createElement("p");//创建一个新的段落元素 var text=document.createTextNode("这是我新创建的段落p2");//新创建的文本节点 //将文本的节点添加到新创建的元素中 newElementP.appendChild(text); //获取一个页面已经存在的元素 var div=document.getElementById("div1"); var p1=document.getElementById("p1"); //添加新创建的元素p到已经存在的元素div中 div.insertBefore(newElementP,p1); } function changeElemnt(){ var newElementP=document.createElement("p");//创建一个新的段落元素 var text=document.createTextNode("这是我新创建的段落p");//新创建的文本节点 //将文本的节点添加到新创建的元素中 newElementP.appendChild(text); //获取要被替换的元素p1及其父元素div var div=document.getElementById("div1"); var p1=document.getElementById("p1"); //将div中的元素p1替换为新创建的元素 div.replaceChild(newElementP,p1); } function deleteElement(){ var div=document.getElementById("div1"); var p1=document.getElementById("p1"); //从父元素div中删除子元素p1 div.removeChild(p1); } function deleteElement2(){ var p1=document.getElementById("p1"); //p1.parentNode:作用就是获取要删除元素p1的父元素div p1.parentNode.removeChild(p1); } </script> </head> <body> <button type="button" onclick="createNewP()">动态添加一个元素--appendChild</button> <button type="button" onclick="createNewP2()">动态添加一个元素--insertBefore</button> <button type="button" onclick="changeElemnt()">替换p1</button> <button type="button" onclick="deleteElement()">删除p1-方式1</button> <button type="button" onclick="deleteElement()">删除p1-方式2</button> <div id="div1"> <p id="p1">这是段落1</p> <p id="p2">这是段落2</p> </div> </body> </html>
表单验证
表单验证意义与场景
1.降低服务器压力
拦截不合格的数据,避免直接提交到服务器,可以显著降低服务器开销
2.提升用户体验
早期的互联网,表单项都是非常多的,注册个账号,经常需要填写20+个字段。而其中有一个填写不正 确就要等待几十秒时间。如果有了表单验证,反馈是实时的,而且脚本还能把你定位到填写错误的具体字段。现在虽然无刷新技术早已普及,但是只依赖服务端验证,还是会有几百毫秒的延迟,实际使用会有一种很难受的粘滞感。
表单验证常用事件与属性
表单经常需要做一些非空验证、长度验证、合法性验证等。
JavaScript的 RegExp 对象-正则表达式
概念
RegExp:是正则表达式(regular expression)的简写。
正则表达式(英语:Regular Expression,在代码中常简写为regex、regexp或RE)使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。
搜索模式可用于文本搜索和文本替换。
语法: var reg=new RegExp(/正则表达式主体/,修饰符(可选)); 或更简单的方法 var reg=/正则表达式主体/修饰符(可选); 案例: var reg=new RegExp(/lalalahlala/h); var reg = /lalalahlala/h; //此处定义了一个一个正则表达式。 lalalahlala 是一个正则表达式主体 (用于检索)。 h 是一个修饰符 (搜索不区分大小写)。 修饰符 可以在全局搜索中不区分大小写: 修饰符 描述 i 执行对大小写不敏感的匹配。 g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。 m 执行多行匹配。 正则表达式模式 方括号用于查找某个范围内的字符: 表达式 描述 [a-z] 查找方括号之间的任何字符。 [0-9] 查找任何从 0 至 9 的数字。 (x|y) 查找任何以 | 分隔的选项。 元字符是拥有特殊含义的字符: 元字符 描述 \d 查找数字。 \s 查找空白字符。 \b 匹配单词边界。 \uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。 量词 量词 描述 n+ 匹配任何包含至少一个 n 的字符串。 n* 匹配任何包含零个或多个 n 的字符串。 n? 匹配任何包含零个或一个 n 的字符串。
正则表达式的方法test(str)
test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则 返回 false。
动态表格
表格的属性和方法 | 描述 |
table.rows | 获取表格中的所有行 |
tr.cells | 获取表格中某一行的所有单元格 |
tr.rowIndex | 获取表格中某一行的下标索引(从0开始) |
td.cellIndex | 获取单元格的下标索引 |
table.insertRow() | 在表格中创建新行,并将行添加到rows集合中 |
table.deleteRow() | 从表格即rows集合中删除指定行 |
tr.insertCell() | 在表格的行中创建新的单元格,并将单元格添加到cells集合中 |