原始数据类型(基本数据类型):
1. number:数字类型。 整数/小数/NaN(not a number 一个不是数字的数字类型)
2. string:字符串类型。 字符串 “baidaguo”
3. boolean: 有true和false两种情况
4. null:空位占位符
5. undefined:未定义。如果一个变量没有给初始化值,则会被默认赋值为undefined
声明变量的关键字:var
语法:var 变量名称;
var myCompany; //声明变量
myCompany='开课吧';//赋值
var x=5;//声明的同时赋值
var y=6;
var z=x+y;//变量也可以存储表达式
var userId:
userId:在电子邮件地址中@符号之前的名称;
function printMessage():要打印消息
document.write(message); :写(消息)
var:定义,用于定义变量。例:计算机语言中的var:Pascal: var 在Pascal 作为程序的保留字,用于定义变量。 如:var a:integer;(定义变量a,类型为整数) var u:array[1..100]of integer;(定义数组u,下标由1至100,数组单元类型为整数)。
userid:在电子邮件地址中@符号之前的名称;
printMessage:打印消息的,
document:对象的
message:消息,报告,预告
变量的命名规则:
变量必须以字母开头
变量也能以 $ 和 _ 符号开头
变量名称对大小写敏感(y 和 Y 是不同的变量) 不能使用关键字保留字
变量的命名规范:
见名知意 。例如:breadPirce,userService等,避免无意义的a,b,c等
推荐驼峰命名法,即第一个单词的首字母小写,以后每个单词的首字母大写。例如lastName
字符串String:
字符串是存储字符的变量。字符串可以是引号中的任意文本。必须使用单引号或双引号;
var myCompany; //声明变量
myCompany='开课吧'; //赋值
var x=5;//声明的同时赋值
var y=6;
var z=x+y;//变量也可以存储表达式
var gameName="英雄联盟";
var hairstylist='tony'; //说明下:注意引号嵌套
var message1='我的发型师是"tony"老师';
var message2="我的发型师是'tony'老师";
布尔Boolean
只能有两个值:true 或 false。
var isUnderstand = true;
var isSingle = false;
Understand::理解;懂得;获悉;推断;省略
Single:仅有的,单精度浮点型
myCompany:我的企业
空Null:
var email = null;
未定义Undefined
表示变量不含有值。可以通过将变量的值设置为 null 来清空变量。
共有下面这几种情况会出现undefined的值。
- 变量声明且没有赋值
var obj;
alert(obj);//obj值为undefined
- 获取对象中不存在的属性时
var obj;
alert(obj.name);//报错信息: "Uncaught TypeError: Cannot read property 'name' of undefined"
- 函数需要实参,但是调用时没有传值,形参是undefined;
- 函数调用没有返回值或者return后没有数据,接收函数返回的变量是undefined
function printNum(num){
alert(num);
}
var result=printNum();//调用函数未传递参数,执行函数的时候num的值是undefined alert(result);
//result的值也是undefined,因为printNum()没有返回值
引用数据类型
对象(Object)、数组(Array)、函数(Function),后续章节详细介绍。
JavaScript拥有动态类型
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类。
var param; // param类型为 undefined
param = 5; // 现在 param 为数字
param = "John"; // 现在 param 为字符串
解释:虽然JavaScript支持这种写法,但是我不推荐这种写法。大家尽量开始声明变量的时候就确定好将要 盛放什么类型的值,以后尽量不随意改变。
JavaScript中的运算符:
运算符类型 | 符号 |
算数运算符 | ±* /%、++、 – |
赋值运算符 | :=、 +=、-=、*=、 /=、%= |
字符串的连接符 | + |
逻辑运算符 | && |
条件运算符 | ?: |
比较运算符 | == 、!=、> 、<、 >=、 <= |
比较特殊的运算符:
比较运算符
< >= <= == ===(全等于)
* 比较方式
1. 类型相同:直接比较
* 字符串:按照字典顺序比较。按位逐一比较,直到得出大小为止。
2. 类型不同:先进行类型转换,再比较
* ===:全等于。在比较之前,先判断类型,如果类型不一样,则直接返回false
比较运算的 | 描述 |
=== | 绝对等于(值和类型均相等) |
!== | 不绝对等于(值和类型有一个不相等,或两个都不相等) |
var x=5;
var res=(x===5); // true
res=(x==='5');// false
res=(x!==5); // false
res=(x!=='5');// true
一元运算符:只有一个运算数的运算符
++,-- , +(正号)
* ++ --: 自增(自减)
* ++(–) 在前,先自增(自减),再运算
* ++(–) 在后,先运算,再自增(自减)
* +(-):正负号
* 注意:在JS中,如果运算数不是运算符所要求的类型,那么js引擎会自动的将运算数进行类型转换
* 其他类型转number:
* string转number:按照字面值转换。如果字面值不是数字,则转为NaN(不是数字的数字)
* boolean转number:true转为1,false转为0;
算数运算符:
1.
<script type="text/javascript">
2. var a;
3. a=1+2;
4. document.write("a="+a+"<br>");
5. a=1+null;
6. document.write("a="+a+"<br>");
7. a=1+NaN;
8. document.write("a="+a+"<br>");
9. a=true+false;
10. document.write("a="+a+"<br>");
11. a=true+4;
12. document.write("a="+a+"<br>");
13. a="3"+2+1;
14. document.write("a="+a+"<br>");
15. a=1+2+"3";
16. document.write("a="+a+"<br>");
17. </script>
答案如下的:
a=3
a=1
a=NaN
a=1
a=5
a=321
a=33
赋值运算符
= += -+…
逻辑运算符
&& || !
* 其他类型转boolean:
1. number:0或NaN为假,其他为真
2. string:除了空字符串(“”),其他都是true
3. null&undefined:都是false
4. 对象:所有对象都为true
注意:(1)任何类型的数值进行两次非运算都能转换成布尔型;
(2)逻辑&&运算如果第一个是true则输出结果是第二个,如果第一个是false则输出结果是第一个;(因为有短路现象);
(3)逻辑||运算如果第一个是true则输出结果是第一个,如果第一个是false则输出是第二个。(因为有短路现象)。
String对象属性–长度属性:
var str="我喜欢看NBA,最喜欢的球员为\'农村人\'库里"; //注意:字符串中出现的\'是一个字符,转义为一个单引号
console.log(str); //获取字符串的长度:,切记:所有转移符号的长度都算一个,即\'长度为1
console.log("字符串的长度="+str.length);//23
Array 对象用于在变量中存储多个值,也就是数组
声明数组的:
数组的长度 length属性:
1. var nameArr=["宝玉","黛玉","湘云"];
2. var len=nameArr.length; //获取数组的长度,因为是属所以不是length()
创建日期对象:
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);
日期对象的常用方法:
方法 描述
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常用属性:
var pi=Math.PI;//返回圆周率
Math常用方法:
var num=Math.random();// 返回 0 ~ 1 之间的随机数。
var max=Math.max(12,34,-90,9);//返回 n个数值中的最大值。
var min=Math.min(12,34,-90,9);//返回 n个数值中的最小值。
avaScript的常用全局函数
JavaScript中有个常用的全局属性NaN,即非数值(Not a Number),NaN 属性用于引用特殊的非数字 值,该属性指定的并不是不合法的数字
isNaN(param)
用于检查其参数是否是非数值字
是数值的返回false,不是数值返回true;
console.log(isNaN(666));//false
console.log(isNaN(1+2));//false
console.log(isNaN("hello"));//true
parseFloat(String)
可解析一个字符串,并返回一个浮点数。该函数指定字符串中的首个字符是否是数字。如果是,则对字符串进行解析,直到到达数字的末端为止,然后以数字返回该数字,而不是作为字符串。
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。
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() 将把它解析为十进制的整数。
- 只有字符串中的第一个数字会被返回。
- 开头和结尾的空格是允许的。
- 如果字符串的第一个字符不能被转换为数字,那么 parseInt() 会返回 NaN。 在字符串以"0"为开始时旧的浏览器默认使用八进制基数。ECMAScript 5,默认的是十进制 的基数。
- 使用function关键字定义函数
• function 自定义函数名称(参数列表){
//函数体
}
Function:函数(方法)对象:
1. 创建:
1. var fun = new Function(形式参数列表,方法体); //忘掉吧
2.
function 方法名称(形式参数列表){
方法体
}
3.
var 方法名 = function(形式参数列表){
方法体
}
BOM:Browser Object Model,中文浏览器对象模型。
window对象属性:
属性 描述
document 对 Document 对象的只读引用
history 对 History 对象的只读引用
location 用于窗口或框架的 Location 对象
name 设置或返回窗口的名称
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>
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 />
Window对象方法:
方法 描述
alert() 显示带有一段消息和一个确认按钮的警告框
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框
prompt() 显示可提示用户输入的对话框
open() 设置或返回窗口的名称
close() 打开一个新的浏览器窗口或查找一个已命名的窗口
setTimeout() 关闭浏览器窗口
setInterval() 在指定的毫秒数后调用函数或计算表达式
clearInterval() 取消由 setInterval() 设置的 timeout
clearTimeout() 取消由 setTimeout() 方法设置的 timeout
弹框案例好:
1.
<script>
2. //window对象常用的弹框方法
3. //1、基本弹框
4. window.alert("只有一个确定按钮的对话框");
5. //2、对话框:有确定和取消两个看你,点击确定返回true,点击取消返回false
6. var res=window.confirm("确认要关闭吗?");
7. if(res){
8. alert("点击了确定按钮");
9. }else{
10. alert("点击取消按钮");
11. }
12. //3、输入框:prompt(提示信息,默认值)
13. var age=prompt("请输入年龄:",19);
14. alert("输入的年龄信息是:"+age);
15. </script>
定时器案例:
1.
<div id="today1">
2. div--显示时间1
3. </div>
4. <a href="javascript:window.clearInterval(flag1)">停止定时器clearInterval</a>
5. <div id="today2">
6. div--显示时间2
7. </div>
8. <a href="javascript:window.clearTimeout(flag2)">停止定时器clearTimeout</a>
9. <script>
10. function showTime1(){
11. var time=new Date();
12. var y=time.getFullYear();
13. var mon=time.getMonth();
14. var d=time.getDate();
15. var h=time.getHours();
16. var m=time.getMinutes();
17. var s=time.getSeconds();
18. document.getElementById("today1").innerHTML=y+"年"+mon+"月"+d+"日
19. "+h+":"+m+":"+s;
20. }
21. //定时器setInterval(定时调用的函数,时间间隔毫秒)
22. var flag1=window.setInterval("showTime1()",1000);
23. </script>
24. <script>
25. function showTime2(){
26. var time=new Date();
27. var y=time.getFullYear();
28. var mon=time.getMonth();
29. var d=time.getDate();
30.
31. var h=time.getHours();
32. var m=time.getMinutes();
33. var s=time.getSeconds();
34.
35. document.getElementById("today2").innerHTML=y+"年"+mon+"月"+d+"日 "+h+":"+m+":"+s;
36. flag2=window.setTimeout("showTime2()",1000);
37. }
38. //在指定的毫秒数后调用函数或计算表达式。
39. var flag2=window.setTimeout("showTime2()",1000);
40. </script>
常用的HTML事件:
事件 描述
Onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载
onfocus 元素获取焦点时触发
onblur 元素失去焦点时触发
1.
<script>
2. function fun1(){
3. alert('选择的内容发生了变化');
4. }
5.
6. function fun2(){
7. alert("触发了单击事件");
8. }
9.
10. function fun3() {
11. document.getElementById("btn").innerHTML="鼠标移动到按钮上了";
12. }
13.
14. function fun4() {
15. document.getElementById("btn").innerHTML="点击我试试";
16. }
17.
18. function fun5() {
19. alert("键盘按下了");
20. }
21.
22. function fun6() {
23. alert("获取到了焦点");
24. }
25.
26. function fun7() {
27. alert("input失去了焦点");
28. }
29.
30. function myLoad(){
31. alert("页面加载完毕");
32. }
33. </script>
34. <body onload="myLoad()">
35. <input id="userName" onkeydown="fun5()" onfocus="fun6()" onblur="fun7()"/>
36. <input id="password" type="password" />
37. <button id="btn" type="button" onclick="fun2()"
38. onmouseover="fun3()" onmouseout="fun4()">点击我试试</button>
39.
40. <select id="month" onchange="fun1()">
41. <option>1月份</option>
42. <option>2月份</option>
43. </select>
44. </body>
45. 后面需要补充的
DOM:Document Object Model,文档对象模型
查找 HTML 元素常用方法:
document.getElementById() 返回对拥有指定 id 的第一个对象的引用。
document.getElementsByClassName() 返回文档中所有指定类名的元素集合,作为 NodeList 对象
document.getElementsByTagName() 返回带有指定标签名的对象集合
document.getElementsByName() 返回带有指定名称的对象集合
function myLoad():
console.log:
getElementsByName:
demo:
myLoad():
length:
修改 HTML 内容的最简单的方法是使用 innerHTML 属性
修改 HTML 元素的内容的语法:
document.getElementById(id).innerHTML= HTML。
修改 HTML 属性:
1. 修改 HTML 元素属性的语法:
2. 方式1:
3. document.getElementById(id).attribute=新属性值;
4.
5. 方式2:
6. document.getElementById(id).setAttribute(属性名,属性值);
1. <div id="mydiv">div</div>
2. var mydiv=document.getElementById("mydiv");
3. mydiv.innerHTML="新的div内容"; document.getElementById("myimg").src="x1.jpg";
4.
5. <h1 style="color: green;" id="myh1">hello world</h1> var h1=document.getElementById("myh1"); h1.setAttribute("class","bg");//设置属性
6. console.log(h1.getAttribute("class"));//获取属性class
7. console.log(h1.getAttribute("style"));//获取属性style
修改 HTML 元素的css
修改 HTML 元素css的语法:
document.getElementById(id).style.property=新样式
1. document.getElementById("myli").style.color="blue";
2. document.getElementById("myli").style.fontFamily="微软雅黑";
3. document.getElementById("myli").style.fontSize="30px";
替换 HTML 元素
-replaceChild()方法
1.
<div id="div1">
2. <p id="p1">这是一个段落。</p>
3. <p id="p2">这是另外一个段落。</p>
4. </div>
5. <button type="button" onclick="changeElemnt()">替换p1</button> <script>
6. function changeElemnt(){
7. var newElementP=document.createElement("p");//创建一个新的段落元素
8. var text=document.createTextNode("这是我新创建的段落p");//新创建的文本节点 //将文本的节点添加到新创建的元素中
9. newElementP.appendChild(text);
10. //获取要被替换的元素p1及其父元素div
11. var div=document.getElementById("div1");
12. var p1=document.getElementById("p1");
13. //将div中的元素p1替换为新创建的元素
14. div.replaceChild(newElementP,p1);
15. }
16. </script>
删除HTML元素
-removeChild()方法:
1. <div id="div1">
2. <p id="p1">这是一个段落。</p>
3. <p id="p2">这是另外一个段落。</p>
4. </div>
5. <button type="button" onclick="deleteElement()">删除p1-方式1</button> <button type="button" onclick="deleteElement()">删除p1-方式2</button>
6. <script>
7. function deleteElement(){
8. var div=document.getElementById("div1");
9. var p1=document.getElementById("p1"); //从父元素div中删除子元素p1 div.removeChild(p1);
10. }
11. function deleteElement2(){
12. var p1=document.getElementById("p1"); //p1.parentNode:作用就是获取要删除元素p1的父元素div p1.parentNode.removeChild(p1);
13. }
14. </script>
15. 这为很好的补充
16. 大家好
表单验证常用事件与属性
表单经常需要做一些非空验证、长度验证、合法性验证等。
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>表单验证</title>
6. <script>
7. function validateName(){
8. //所有的表单项元素都value属性
9. var name=document.getElementById("userName").value;
10. var msg=document.getElementById("nameMsg");
11. if(name==null || name ==""){
12. msg.innerHTML="用户名不能为空!";
13. msg.style.color="red";
14. return false;
15. } else if(name.length<6){
16. msg.innerHTML="用户名长度必须为大于6的!";
17. msg.style.color="red";
18. return false;
19. }
20. msg.innerHTML="用户名可用"; msg.style.color="green";
21. return true;
22. }
23. function validatePwd(){
24. var password1=document.getElementById("password1").value;
25. var msg=document.getElementById("pwdMsg1");
26. if(password1==null || password1 ==""){
27. msg.innerHTML="密码不能为空!"; msg.style.color="red";
28. return false;
29. } else if(password1.length<8){
30. msg.innerHTML="密码的长度必须为大于8的!";
31. msg.style.color="red";
32. return false;
33. }
34. msg.innerHTML="密码合法"; msg.style.color="green";
35. return true;
36. }
37.
38. function confirmPwd(){
39. var pwd1=document.getElementById("password1").value;
40. var pwd2=document.getElementById("password2").value;
41. var msg=document.getElementById("pwdMsg2");
42. if(pwd1!=pwd2){
43. msg.innerHTML="两次输入的密码不一致!";
44. msg.style.color="red";
45. return false;
46. }
47. msg.innerHTML="两次输入的密码一致";
48. msg.style.color="green";
49. return true;
50. }
51.
52. function validateGender(){
53. var gender=document.getElementById("gender").value;
54. if(gender==-1){
55. alert("性别为必选项!");
56. return false;
57. }
58. return true;
59. }
60. function register(){
61. return validateName()&&validatePwd()&&confirmPwd()&&validateGender();
62. }
63. </script>
64. </head>
65. <body>
66. <h1>英雄会注册</h1>
67. <form action="提交.html" method="get" onsubmit="return register()">
68. *用户名:<input type="text" id="userName" placeholder="请输入用户名" onblur="validateName()" />
69. <span id="nameMsg">用户名长度至少6位</span><br />
70. *密码:<input type="password" id="password1" placeholder="请输入密码" onblur="validatePwd()"/>
71. <span id="pwdMsg1">密码长度至少8位</span><br />
72. *确认密码:<input type="password" id="password2" placeholder="请确认密 码" onblur="confirmPwd()" />
73. <span id="pwdMsg2">确认密码与密码一致</span><br />
74. *性别:<select id="gender">
75. <option value="-1">请选择性别</option>
76. <option value="0">女</option>
77. <option value="1">男</option>
78. </select><br /><br />
79. <button type="submit">注册</button>
80. <button type="reset">重置</button>
81. </form>
82. </body>
83. </html>
JavaScript的 RegExp 对象:
RegExp:是正则表达式(regular expression)的简写。
正则表达式(英语:Regular Expression,在代码中常简写为regex、regexp或RE)使用单个字符串来 描述、匹配一系列符合某个句法规则的字符串搜索模式。搜索模式可用于文本搜索和文本替换。
语法:
1. var reg=new RegExp(/正则表达式主体/,修饰符(可选)); 或更简单的方法
2. var reg=/正则表达式主体/修饰符(可选);
3.
4. 案例:
5. var reg=new RegExp(/kaikeba/i);
6. var reg = /kaikeba/i; //此处定义了一个一个正则表达式。 kaikeba 是一个正则表达式主体 (用于检索)。
7. i 是一个修饰符 (搜索不区分大小写)。
修饰符:
修饰符 | 描述 |
i | 执行对大小写不敏感的匹配 |
g | 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止) |
m | 执行多行匹配 |
正则表达式模式
方括号用于查找某个范围内的字符:
表达式 | 描述 |
[a-z] | 查找方括号之间的任何字符 |
[0-9] | 查找任何从 0 至 9 的数字 |
(xIy) | 查找任何以 I 分隔的选项 |
元字符是拥有特殊含义的字符:
元字符 | 描述 |
\d | 查找数字 |
\s | 查找空白字符 |
\b | 匹配单词边界 |
\uxxxx | 查找以十六进制数 xxxx 规定的 Unicode 字符 |
量词 | 描述 |
n+ | 匹配任何包含至少一个 n 的字符串 |
n* | 匹配任何包含零个或多个 n 的字符串 |
n? | 匹配任何包含零个或一个 n 的字符串 |
正则表达式的方法test(str)
test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false。
1. var reg = /budingCode/i;
2. var res=reg.test("欢迎关注budingCode");
3. console.log(res);//true
4.
5. var reg = /^[a-zA-Z]+[\u4e00-\u9fa5]*[0-9]$/;
6. var str="a公司拼音为9";
7. var res=reg.test(str); console.log(res);//true
8. console.log(reg.test("a你好239"));//false
常用的正则表达式校验案例:
1. <script>
2. /*检查输入的身份证号是否正确*/
3. function checkCard(str) {
4. /*15位数身份证正则表达式:
5. * 编码规则顺序从左至右依次为6位数字地址码,6位数字出生年份后两位及日期,3位数字顺序
6. [1-9]\d{5} 前六位地区,非0打头
7. \d{2} 出生年份后两位00-99
8. ((0[1-9])|(10|11|12)) 01-12月
9. (([0-2][1-9])|10|20|30|31) 01-31天
10. \d{3} 顺序码三位,没有校验码
11. */
12. var arg1 = /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$/;
13. if (arg1.length == 15 && !arg1.test(arg1)) {
14. return false;
15. }
16.
17. /*18位数身份证正则表达式:
18. * 编码规则顺序从左至右依次为6位数字地址码,6位数字出生年份后两位及日期,3位数字顺序
19. [1-9]\d{5} 前六位地区,非0打头
20. (18|19|([23]\d))\d{2} 出生年份后两位00-99
21. ((0[1-9])|(10|11|12)) 01-12月
22. (([0-2][1-9])|10|20|30|31) 01-31天
23. \d{3}[0-9Xx] 顺序码三位,+ 一位校验码
24. */
25. var arg2 = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
26. if (arg2.length == 18 && !arg2.test(sfzhmcode)){
27. return false;
28. }
29. return true;
30. }
31.
32. /*是否是小数*/
33. function isDecimal(strValue) {
34. var objRegExp = /^\d+\.\d+$/;
35. return objRegExp.test(strValue);
36. }
37.
38. /*校验是否中文名称组成 */
39. function ischina(str) {
40. var reg = /^[\u4E00-\u9FA5]{2,4}$/;
41. return reg.test(str);
42. }
43.
44. /*校验是否全由8位数字组成 */
45. function isNum(str) {
46. var reg = /^[0-9]{8}$/;
47. return reg.test(str);
48. }
49.
50. /*校验电话码格式 :座机和手机*/
51. function isTelCode(str) {
52. var reg = /^((0\d{2,3}-\d{7,8})|(1[345789]\d{9}))$/;
53. return reg.test(str);
54. }
55.
56. /*校验手机号*/
57. function isPhoneNum(str) {
58. //如果你要精确验证手机号码,那个你可以使用第一个正则。这是根据电信,移动,联通目前发行的号码来的。验证比较精确。
59. var reg = /^1[3|4|5|7|8][0-9]{9}$/;
60. // 如果因为现有的号码不能满足市场需求,电信服务商会增大号码范围。所以一般情况下我们 只要验证手机号码为11位,且以1开头。
61. var reg = /^^1[0-9]{10}$$/;
62. return reg.test(str);
63. }
64.
65. /*校验邮件地址是否合法 */
66. function IsEmail(str) {
67. var reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
68. return reg.test(str);
69. }
70.
71. /*检查输入的URL地址是否正确 */
72. function checkURL(str) {
73. if(str.match(/http(s)?:\/\/[\w.]+[\w\/]*[\w.]*\??[\w=&\+\%]*/i) == null)
74. return false;
75. } else {
76. return true;
77. }
78. }
79. </script>
表格的属性和方法:
表格的属性和方法 | 描述 |
table.rows | 获取表格中的所有行 |
tr.cells | 获取表格中某一行的所有单元格 |
tr.rowIndex | 获取表格中某一行的下标索引(从0开始) |
td.cellIndex | 获取单元格的下标索引 |
table.insertRow() | 在表格中创建新行,并将行添加到rows集合中 |
table.deleteRow() | 从表格即rows集合中删除指定行 |
tr.insertCell()) | 在表格的行中创建新的单元格,并将单元格添加到cells集合中 |
Array:数组对象(数组类型、长度可变):
https://blog.csdn.net/weixin_45735355/article/details/119037197
创建:
1. var arr = new Array(元素列表);
2. var arr = new Array(默认长度);
3. var arr = [元素列表];
方法:
join(参数):将数组中的元素按照指定的分隔符拼接为字符串
push() 向数组的末尾添加一个或更多元素,并返回新的长度。
属性:
var nameArr=[“宝玉”,“黛玉”,“湘云”];
var len=nameArr.length; //获取数组的长度,因为是属所以不是length()
日期对象的
创建日期对象:
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);
日期对象方法:
toLocaleString():返回当前date对象对应的时间本地字符串格式
getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差
数学对象的
创建:
var num=Math.random();// 返回 0 ~ 1 之间的随机数。
var max=Math.max(12,34,-90,9);//返回 n个数值中的最大值。
var min=Math.min(12,34,-90,9);//返回 n个数值中的最小值。
方法:
random():返回 0 ~ 1 之间的随机数。 含0不含1
ceil(x):对数进行上舍入。
floor(x):对数进行下舍入。
round(x):把数四舍五入为最接近的整数。
Math常用属性:
var pi=Math.PI;//返回圆周率
RegExp:正则表达式对象
正则表达式:使用单个字符串来 描述、匹配一系列符合某个句法规则的字符串搜索模式。搜索模式可用于文本搜索和文本替换
1. 单个字符:[]
如: [a] [ab] [a-zA-Z0-9_]
* 特殊符号代表特殊含义的单个字符:
\d:单个数字字符 [0-9]
\w:单个单词字符[a-zA-Z0-9_]
2. 量词符号:
?:表示出现0次或1次
*:表示出现0次或多次
+:出现1次或多次
{m,n}:表示 m<= 数量 <= n
* m如果缺省: {,n}:最多n次
* n如果缺省:{m,} 最少m次
3. 开始结束符号
* ^:开始
* $:结束
正则对象的:
1. 创建:
1. var reg = new RegExp(“正则表达式”);
2. var reg = /正则表达式/;
2. 方法:
test(参数):验证指定的字符串是否符合正则定义的规范
语法
var reg=new RegExp(/正则表达式主体/,修饰符(可选)); 或更简单的方法
var reg=/正则表达式主体/修饰符(可选);
常用HTML事件:
事件 描述
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载
onfocus 元素获取焦点时触发
onblur 元素失去焦点时触发
1.
<body>
2. <img id="light" src="img/off.gif" onclick="fun();">
3. <img id="light2" src="img/off.gif">
4. <script>
5. function fun(){
6. alert('我被点了');
7. alert('我又被点了');
8. }
9. function fun2(){
10. alert('咋老点我?');
11. }
12. //1.获取light2对象
13. var light2 = document.getElementById("light2");
14. //2.绑定事件
15. light2.onclick = fun2;
16. </script>
17. </body>
18. * 案例1:电灯开关
19. <!DOCTYPE html>
20. <html lang="en">
21. <head>
22. <meta charset="UTF-8">
23. <title>电灯开关</title>
24. </head>
25. <body>
26. <img id="light" src="img/off.gif">
27. <script>
28. /*
29. 分析:
30. 1.获取图片对象
31. 2.绑定单击事件
32. 3.每次点击切换图片
33. * 规则:
34. * 如果灯是开的 on,切换图片为 off
35. * 如果灯是关的 off,切换图片为 on
36. * 使用标记flag来完成
37. */
38. //1.获取图片对象
39. var light = document.getElementById("light");
40. var flag = false;//代表灯是灭的。 off图片
41. //2.绑定单击事件
42. light.onclick = function(){
43. if(flag){//判断如果灯是开的,则灭掉
44. light.src = "img/off.gif";
45. flag = false;
46. }else{
47. //如果灯是灭的,则打开
48. light.src = "img/on.gif";
49. flag = true;
50. }
51. }
52. </script>
53. </body>
54. </html>
效果展示为:黄色和白色的灯泡。
BOM(Browser Object Model,中文浏览器对象模型):
Window:窗口对象的
1. 创建的
2. 方法的
与弹出框有关的方法:
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
* 如果用户点击确定按钮,则方法返回true
* 如果用户点击取消按钮,则方法返回false
prompt() 显示可提示用户输入的对话框。
* 返回值:获取用户输入的值
与打开关闭有关的方法:
close() 关闭浏览器窗口。
* 谁调用我 ,我关谁
open() 打开一个新的浏览器窗口
* 返回新的Window对象
与定时器有关的方法::
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
* 参数:
1. js代码或者方法对象
2. 毫秒值
* 返回值:唯一标识,用于取消定时器
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
3. 属性:
1. 获取其他BOM对象:
history:
location:地方; 地点; 定位
Navigator:
Screen:
4. 获取DOM对象
document
5. 特点
* Window对象不需要创建可以直接使用 window使用。 window.方法名();
* window引用可以省略。 方法名();
Location:地址栏对象
- 创建(获取):
1. window.location
2. location - 方法:
* reload() 重新加载当前文档。刷新 - 属性
* href 设置或返回完整的 URL。
History:历史记录对象
创建(获取):
1. window.history
2. history
方法:
* back() 加载 history 列表中的前一个 URL。
* forward() 加载 history 列表中的下一个 URL。
* go(参数) 加载 history 列表中的某个具体页面。
* 参数:
* 正数:前进几个历史记录
* 负数:后退几个历史记录
属性:
* length 返回当前窗口历史列表中的 URL 数量。
DOM
- 概念: Document Object Model 文档对象模型
* 将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作;
W3C DOM 标准被分为 3 个不同的部分:
* 核心 DOM - 针对任何结构化文档的标准模型
* Document:文档对象
* Element:元素对象
* Attribute:属性对象
* Text:文本对象
* Comment:注释对象
* Node:节点对象,其他5个的父对象
* XML DOM - 针对 XML 文档的标准模型
* HTML DOM - 针对 HTML 文档的标准模型
核心DOM模型:
* Document:文档对象
创建(获取):在html dom模型中可以使用window对象来获取
1. window.document
2. document
方法:
获取Element对象:
1. getElementById() : 根据id属性值获取元素对象。id属性值一般唯一
2. getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组
3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
创建其他DOM对象:
createAttribute(name)
createComment()
createElement()
createTextNode()
属性
Element:元素对象
获取/创建:通过document来获取和创建
方法:
1. removeAttribute():删除属性
2. setAttribute():设置属性
* Node:节点对象,其他5个的父对象
* 特点:所有dom对象都可以被认为是一个节点
* 方法:
* CRUD dom树:
* appendChild():向节点的子节点列表的结尾添加新的子节点。
* removeChild() :删除(并返回)当前节点的指定子节点。
* replaceChild():用新节点替换一个子节点。
* 属性:
* parentNode 返回节点的父节点。
HTML DOM
标签体的设置和获取:innerHTML
使用html元素对象的属性
控制元素样式
1. 使用元素的style属性来设置
如:
//修改样式方式1
div1.style.border = “1px solid red”;
div1.style.width = “200px”;
//font-size–> fontSize
div1.style.fontSize = “20px”;
2. 提前定义好类选择器的样式,通过元素的className属性来设置其class属性值。
事件监听机制
概念:某些组件被执行了某些操作后,触发某些代码的执行。
* 事件:某些操作。如: 单击,双击,键盘按下了,鼠标移动了
* 事件源:组件。如: 按钮 文本输入框…
* 监听器:代码。
* 注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听器代码。
常见的事件:
点击事件:
1. onclick:单击事件
2. ondblclick:双击事件
焦点事件
1. onblur:失去焦点
2. onfocus:元素获得焦点。
加载事件:
1. onload:一张页面或一幅图像完成加载。
鼠标事件:
1. onmousedown 鼠标按钮被按下。
2. onmouseup 鼠标按键被松开。
3. onmousemove 鼠标被移动。
4. onmouseover 鼠标移到某元素之上。
5. onmouseout 鼠标从某元素移开。
键盘事件:
1. onkeydown 某个键盘按键被按下。
2. onkeyup 某个键盘按键被松开。
3. onkeypress 某个键盘按键被按下并松开。
选择和改变
1. onchange 域的内容被改变。
2. onselect 文本被选中。
表单事件:
1. onsubmit 确认按钮被点击。
2. onreset 重置按钮被点击。
本人根据链接的原作者总结了Javacpt中的常用的代码解释,另外还参照白大锅等的文章,在此并感谢提供的好文!