JavaScript
一 . js的3种用法
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6 <!-- 2.嵌入式:在script标签里写js.
7 该标签可以写在网页任意位置,但通常写在head里. -->
8 <script>
9 //js的注释是这样的
10 /*也可以是这样的*/
11
12 //js函数的规则:
13 //1.js的函数都是公有的
14 //2.js的函数不用声明返回值类型
15 //3.js的函数可以声明参数
16 function f2() {
17 //js中不区分单引号和双引号
18 alert("范传奇");
19 }
20 </script>
21 <!-- 3.文件调用式:在单独的js文件中写JS.
22 将文件引入就相当于将文件内的代码复制到此处.
23 注意:script不能既引入js又写js. -->
24 <script src="my.js"></script>
25 </head>
26 <body>
27 <!--
28 事件:就是用户的操作/动作,也是js被
29 调用的时机.如:单击事件、双击事件.
30 -->
31 <!-- 1.事件定义式:在定义事件时直接写js. -->
32 <input type="button" value="按钮1"
33 onclick="alert('苍老师');"/>
34 <input type="button" value="按钮2"
35 onclick="f2();"/>
36 <input type="button" value="按钮3"
37 onclick="f3();"/>
38 </body>
39 </html>
二. js语法
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6 <script>
7 //1.此处写的函数是在页面加载后,
8 //用户点击按钮时才调用的.
9 //2.若此处不写函数,直接写js代码,
10 //则该代码在页面加载时直接调用,
11 //其调用的时机比body还早.
12 //alert(1);
13 console.log("控制台打印");
14
15 //1.声明变量
16 var x;
17 console.log(x);
18 var y = 2;
19 console.log(y);
20
21 //2.数据类型
22 var s = "Hello";
23 var n = 3.14;
24 var b = true;
25
26 //3.隐式转换
27 console.log(s+n);
28 console.log(s+b);
29 console.log(n+b);
30 console.log(b+b);
31
32 //4.强制转换
33 console.log(parseInt("2.5"));
34 console.log(parseInt(3.6));
35 console.log(parseInt("abc"));
36 console.log(typeof(s));
37 console.log(typeof(n));
38 console.log(isNaN(s));
39 console.log(isNaN(n));
40 console.log(isNaN(b));
41
42 //5.特殊情况
43 console.log(parseInt(""));
44 console.log(parseInt(true));
45 console.log(isNaN(""));
46 console.log(isNaN(true));
47
50 </script>
51 </head>
52 <body>
53 <p>js的语法和Java极为相似!</p>
54 </body>
55 </html>
案例.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6 <script>
7 function pf() {
8 console.log(1);
9 //获取文本框
10 var input = document.getElementById("num");
11 console.log(input);
12 //获取文本框内的值
13 var n = input.value;
14 console.log(n);
15 //获取span
16 var span = document.getElementById("result");
17 //判断该值是不是数字
18 if(isNaN(n)) {
19 //不是数字,span里给予提示
20 span.innerHTML = "请输入数字";
21 } else {
22 //是数字,计算其平方,结果写入span
23 span.innerHTML = n*n;
24 }
25 }
26 </script>
27 </head>
28 <body>
29 <input type="text" id="num"/>
30 <input type="button" value="平方"
31 onclick="pf();"/>
32 = <span id="result"></span>
33 </body>
34 </html>
三. js的对象
1、内置对象
1.1 .String
1）x.charAt(index)返回指定位置的字符
2）x.charCodeAt(index)--Unicode编码
3）x.indexOf(findstr,[index])--返回findstr在x中出现的首字符位置索引
4 )x.lastIndexOf(findstr,[index])--从后面找起，但索引任然从前面算，下标从0开始，找不到返回-1
5）x.substring(start,[end])--获取子字符串
6）x.replace(findstr,tostr)--替换字符串
7）x.split(bystr,[howmany])--拆分字符串，返回分割后的一个数组
1.2. Number
date.toFixed(num)--转化为字符串，并保留小数点num位
1.3. Boolean
1.4. Array
//理解:js中的数组都是Object[]
//1如何创建数组
//1)已知数据时
var a1 = ["zhangsan",25,true];
console.log(a1[0]);
//2)未知数据时
var a2 = new Array();
a2.push("lisi");
a2.push(23);
a2.push(false);
console.log(a2[0]);
//2数组倒转
var arr = [5,8,12,3,1,6,4];
arr.reverse();
console.log(arr);
//3数组排序
//默认按照字符串由小到大排序
arr.sort();
console.log(arr);
//可以传入比较方法来改变其排序的方式
arr.sort(function(a,b){
return a-b;
});
console.log(arr);
1.5. Math
1.6. Date
//1如何创建Date
var d1 = new Date();
var d2 = new Date("2017/02/14 08:08:08");
console.log(d1);
console.log(d2);
//2转为本地时间格式
d1.toLocaleDateString();
d1.toLocaleTimeString();
//3读取时间分量
var y = d1.getFullYear();
//月份从0开始
var m = d1.getMonth();
var d = d1.getDate();
var now = y + "年" + (m+1) + "月" + d + "日";
console.log(now);
1.7 .Regexp
//1.如何创建正则对象
1.1 var reg = /pattern/flags;
var reg = /^\d{3,6}$/;
1.2 var reg = new RegExp("pattern",[flags]);
var reg = new RegExp("^\d{3,6}$")；
flags--g:设定当前匹配为全局匹配
i:忽略匹配中的大小写检测
//2.正则对象的方法
2.1 reg.test(str)--检索字符串中指定的值，返回true或false
2.2 reg.exec(str)--检索字符串中指定的值，返回找到的值
案例一：
var str = "you can you up,no can no bb.";
var reg = /no/;
//1)reg.test(str)
//检测str中是否包含和reg匹配的子串
console.log(reg.test(str));
//2)reg.exec(str)
//在非全局模式下:
//从str中找出和reg匹配的第一个子串
console.log(reg.exec(str));
//在全局模式下:
//第1次调用,从str中找出和reg匹配的第1个子串
//第2次调用,从str中找出和reg匹配的第2个子串
//第n次调用,从str中找出和reg匹配的第n个子串
reg = /no/g;
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
案例二：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6 <script>
7 //页面加载时生成随机整数,即在用户未
8 //看到body中的内容时就生成了该整数.
9 var ran = parseInt(Math.random()*100);
10
11 function guess() {
12 //获取文本框内的值
13 var n =
14 document.getElementById("num").value;
15 //获取span
16 var span = document.getElementById("result");
17 //判断是否为数字
18 if(isNaN(n)) {
19 span.innerHTML = "请输入数字";
20 } else {
21 if(n<ran) {
22 span.innerHTML = "小了";
23 } else if(n>ran) {
24 span.innerHTML = "大了";
25 } else {
26 span.innerHTML = "对了";
27 }
28 }
29 }
30
31 </script>
32 </head>
33 <body>
34 <input type="text" id="num"/>
35 <input type="button" value="猜"
36 onclick="guess();"/>
37 <span id="result"></span>
38 </body>
39 </html>
案例3：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6 <style>
7 .ok{color:green;}
8 .error{color:red;}
9 </style>
10 <script>
11 //验证账号的格式
12 function checkCode() {
13 console.log(1);
14 //获取账号
15 var code =
16 document.getElementById("code").value;
17 //获取span
18 var span =
19 document.getElementById("code_msg");
20 //验证账号格式
21 var reg = /^\w{5,10}$/;
22 if(reg.test(code)) {
23 span.className = "ok";
24 } else {
25 span.className = "error";
26 }
27 }
28 //验证密码格式
29 function checkPwd() {
30 var pwd =
31 document.getElementById("pwd").value;
32 var span =
33 document.getElementById("pwd_msg");
34 var reg = /^\w{10,15}$/;
35 if(reg.test(pwd)) {
36 span.className = "ok";
37 } else {
38 span.className = "error";
39 }
40 }
41 </script>
42 </head>
43 <body>
44 <form action="http://www.tmooc.cn">
45 <p>
46 账号:<input type="text" id="code"
47 onblur="checkCode();"/>
48 <span id="code_msg">5-10位字母、数字、下划线</span>
49 </p>
50 <p>
51 密码:<input type="password" id="pwd"
52 onblur="checkPwd();"/>
53 <span id="pwd_msg">10-15位字母、数字、下划线</span>
54 </p>
55 <p><input type="submit" value="登录"/></p>
56 </form>
57 </body>
58 </html>
8. Function
js中函数就是Function对象
function 函数名（[参数]）{
方法体；
return 返回值；
}
注：参数=arguments[]
2 .外部对象
外部对象概述：
2.1.Window对象
window表示浏览器窗口，所有js全局对象，函数以及变量均自动成为window对象的成员，
1.常用属性有：
1）document：窗口中显示的HTML文档对象
2）history：浏览器窗口历史记录对象
3）location：窗口文件地址对象
4）screen：当前屏幕对象
5）navigatior：浏览器相关信息
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6 <script>
7 //1.location
8 function f1() {
9 var b = confirm("确定要离开吗?");
10 if(b) {
11 location.href = "http://www.tmooc.cn";
12 }
13 }
14 function f2() {
15 location.reload();
16 }
17 //2.history
18 function f3() {
19 history.forward();
20 }
21 //3.screen
22 console.log(screen.width);
23 console.log(screen.height);
24 console.log(screen.availWidth);
25 console.log(screen.availHeight);
26 //4.navigator
27 console.log(navigator.userAgent);
28 </script>
29 </head>
30 <body>
31 <input type="button" value="达内"
32 onclick="f1();"/>
33 <input type="button" value="刷新"
34 onclick="f2();"/>
35 <input type="button" value="前进"
36 onclick="f3();"/>
37 </body>
38 </html>
2.常用方法：
1）alert()，confirm()
2)setTimeout(),clearTimeout()
3)srtInterval(),clearInterval()
案例1：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6 <script>
7 //1.确认框
8 function del() {
9 var b = confirm("确定要删除此数据吗?");
10 console.log(b);
11 }
12 //2.周期性定时器
13 function f1() {
14 //启动周期性定时器:
15 //告诉浏览器每隔1000ms调用一次函数.
16 //返回值是定时器的ID,用来停止定时器.
17 var n = 5;
18 var id = setInterval(function(){
19 console.log(n--);
20 if(!n) {
21 //停止定时器
22 clearInterval(id);
23 console.log("DUANG");
24 }
25 },1000);
26 //当前方法f1相当于主线程,
27 //启动定时器相当于启动支线程,
28 //主线程不等待支线程,启动完成后,
29 //立刻执行下一行,即输出了BOOM.
30 //支线程在等待1S后才第一次运行.
31 console.log("BOOM");
32 }
33 //3.一次性定时器
34 var id;
35 function f2() {
36 //启动一次性定时器:
37 //让浏览器在5000ms后调用函数,
38 //并且调用一次后就自动停止定时器.
39 id = setTimeout(function(){
40 console.log("叮叮叮叮叮叮");
41 },5000);
42 }
43 function f3() {
44 clearTimeout(id);
45 }
46 </script>
47 </head>
48 <body>
49 <input type="button" value="删除"
50 onclick="del();"/>
51 <input type="button" value="倒计时"
52 onclick="f1();"/>
53 <input type="button" value="订闹钟"
54 onclick="f2();"/>
55 <input type="button" value="取消"
56 onclick="f3();"/>
57 </body>
58 </html>
案例2：动态时钟
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6 <style>
7 #clock {
8 border: 1px solid red;
9 width: 200px;
10 height: 40px;
11 line-height: 40px;
12 font-size: 20px;
13 text-align: center;
14 }
15 </style>
16 <script>
17 //开始
18 var id;
19 function start1() {
20 if(id) {
21 //id非空,表示定时器已启动,不必再次启动了
22 return;
23 }
24 //id为空,表示未启动,则启动定时器
25 id = setInterval(function(){
26 var d = new Date();
27 var p = document.getElementById("clock");
28 p.innerHTML = d.toLocaleTimeString();
29 },1000);
30 }
31 //停止
32 function stop1() {
33 clearInterval(id);
34 //停止时清空id,以便于下一次启动
35 id = null;
36 }
37 </script>
38 </head>
39 <body>
40 <p>
41 <input type="button" value="开始"
42 onclick="start1();"/>
43 <input type="button" value="停止"
44 onclick="stop1();"/>
45 </p>
46 <p id="clock"></p>
47 </body>
48 </html>
2.2.Dom对象：
Dom提供了如下操作：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6 <script>
7 //onload是页面加载事件,在网页加载完成时
8 //自动触发.触发时调用对应的匿名函数.
9 window.onload = function(){
10 //1.读取节点的名称及类型
11 var p1 = document.getElementById("p1");
12 console.log(p1.nodeName);
13 console.log(p1.nodeType);
14 //2.读写节点的内容(双标签中间的文本)
15 //2.1 innerHTML(支持标签)
16 console.log(p1.innerHTML);
17 p1.innerHTML = "DOM操作可以<u>读写</u>节点";
18 //2.2 innerText(不支持标签)
19 var p2 = document.getElementById("p2");
20 console.log(p2.innerText);
21 p2.innerText = "DOM操作可以<u>查询</u>节点";
22 //3.读写节点的值
23 //只有如下表单控件有值:input,textarea,select
24 //input.value
25 //4.读写节点的属性
26 //4.1通过方法读写(麻烦,万能)
27 var img = document.getElementById("i1");
28 console.log(img.getAttribute("src"));
29 img.setAttribute("src","../images/02.jpg");
30 img.removeAttribute("src");
31 //4.2通过属性名读写(简单,几个)
32 //举例:
33 //读:span.className
34 //写:span.className = "ok"
35 //只有class,style,id可以通过这种方式读写,
36 //其他的属性是非标准的API,即新版浏览器可以
37 //使用,但旧版浏览器不支持(如a.href).
38 var a = document.getElementById("a1");
39 console.log(a.style.color);
40 a.style.color = "blue";
41 }
42 </script>
43 </head>
44 <body>
45 <p id="p1">DOM操作可以<b>读写</b>节点</p>
46 <p id="p2">DOM操作可以<b>查询</b>节点</p>
47 <p id="p3">DOM操作可以<b>增删</b>节点</p>
48 <p>
49 <img src="../images/01.jpg" id="i1"/>
50 </p>
51 <p>
52 <a href="#" style="color:red;" id="a1">顶部</a>
53 </p>
54 </body>
55 </html>
案例一：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6 <style>
7 div {
8 border: 1px solid red;
9 width: 218px;
10 height: 218px;
11 }
12 .show {
13 display: inline-block;
14 }
15 .hide {
16 display: none;
17 }
18 </style>
19 <script>
20 //页面加载后
21 window.onload = function() {
22 lunbo();
23 }
24 var id;
25 //轮播次数
26 var n = 0;
27 function lunbo() {
28 //启动定时器,每2S执行一次轮播
29 id = setInterval(function(){
30 n++;
31 //获取所有图片
32 var imgs =
33 document.getElementsByTagName("img");
34 //遍历他们,都隐藏
35 for(var i=0;i<imgs.length;i++) {
36 imgs[i].className = "hide";
37 }
38 //将下一张图片显示
39 var next = n%imgs.length;
40 imgs[next].className = "show";
41 },2000);
42 }
43 function stop1() {
44 clearInterval(id);
45 }
46 </script>
47 </head>
48 <body>
49 <!--
50 onmouseover是鼠标悬停事件;
51 onmouseout是鼠标离开事件;
52 hover不是事件,是伪类选择器!
53 -->
54 <div onmouseover="stop1();"
55 onmouseout="lunbo();">
56 <img src="../images/01.jpg"/>
57 <img src="../images/02.jpg" class="hide"/>
58 <img src="../images/03.jpg" class="hide"/>
59 <img src="../images/04.jpg" class="hide"/>
60 <img src="../images/05.jpg" class="hide"/>
61 <img src="../images/06.jpg" class="hide"/>
62 </div>
63 </body>
64 </html>
查询节点：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6 <script>
7 window.onload = function() {
8 //1.根据ID查询一个节点
9 //2.根据标签名查询一组节点
10 //3.根据NAME查询一组节点
11 var inputs =
12 document.getElementsByName("sex");
13 console.log(inputs);
14 //4.根据层次查询节点
15 //查询某节点的亲属(父亲、孩子、兄弟)
16 //4.1查询节点的父亲
17 var gz = document.getElementById("gz");
18 var ul = gz.parentNode;
19 console.log(ul);
20 //4.2查询节点的孩子
21 //带空格
22 console.log(ul.childNodes);
23 //不带空格
24 console.log(ul.getElementsByTagName("li"));
25 //4.3查询节点的兄弟
26 //节点.parentNode.getElementsByTagName("")[i]
27 var li =
28 gz.parentNode.getElementsByTagName("li")[4];
29 console.log(li);
30 }
31
32 function f1() {
33 //1.创建节点li
34 var li = document.createElement("li");
35 li.innerHTML = "杭州";
36 //2.追加节点
37 var ul = document.getElementById("city");
38 ul.appendChild(li);
39 }
40 function f2() {
41 //1.创建节点
42 var li = document.createElement("li");
43 li.innerHTML = "苏州";
44 //2.插入节点
45 var ul = document.getElementById("city");
46 var gz = document.getElementById("gz");
47 ul.insertBefore(li,gz);
48 }
49 function f3() {
50 //获取要删除的节点的父亲
51 var ul = document.getElementById("city");
52 //获取要删除的节点
53 var gz = document.getElementById("gz");
54 //根据父亲删除孩子
55 ul.removeChild(gz);
56 }
57 </script>
58 </head>
59 <body>
60 <p>
61 <input type="radio" name="sex"/>男
62 <input type="radio" name="sex"/>女
63 </p>
64 <p>
65 <input type="button" value="追加"
66 onclick="f1();"/>
67 <input type="button" value="插入"
68 onclick="f2();"/>
69 <input type="button" value="删除"
70 onclick="f3();"/>
71 </p>
72 <ul id="city">
73 <li>北京</li>
74 <li>上海</li>
75 <li id="gz">广州</li>
76 <li>深圳</li>
77 <li>天津</li>
78 </ul>
79 </body>
80 </html>
案例二：省市联动
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6 <script>
7 var cities;
8 window.onload = function() {
9 //模拟加载所有的城市
10 cities = [
11 ["石家庄","保定","廊坊"],
12 ["济南","青岛","威海"],
13 ["南京","苏州","无锡"]
14 ];
15 }
16 function chg() {
17 console.log(1);
18 //获取选择的省份(序号)
19 var s1 = document.getElementById("province");
20 var index = s1.value;
21 //获取该省份对应的城市
22 var pcities = cities[index];
23 //删除旧的城市
24 var s2 = document.getElementById("city");
25 //var options =
26 // s2.getElementsByTagName("option");
27 //for(var i=options.length-1;i>=1;i--) {
28 // s2.removeChild(options[i]);
29 //}
30 s2.innerHTML = "<option>请选择</option>";
31 //追加新的城市
32 if(pcities) {
33 for(var i=0;i<pcities.length;i++) {
34 var option =
35 document.createElement("option");
36 option.innerHTML = pcities[i];
37 s2.appendChild(option);
38 }
39 }
40 }
41 </script>
42 </head>
43 <body>
44 省:
45 <select onchange="chg();" id="province">
46 <option value="-1">请选择</option>
47 <option value="0">河北省</option>
48 <option value="1">山东省</option>
49 <option value="2">江苏省</option>
50 </select>
51 市:
52 <select id="city">
53 <option>请选择</option>
54 </select>
55 </body>
56 </html>
3. 自定义对象
1.创建的方式
1.1直接量(JSON)
-
- {"name":"zs","age":23}
- {}代表一个对象,内含多组键值对
- key一般是字符串,value可以是任意类型数据
1.2构造器(new的函数/首字母大写)
1.2.1内置构造器
-
-
- 特殊: String(),Date(),RegExp(),Function()
- 通用: Object()
-
1.2.2自定义构造器
-
-
- 声明函数,首字母大写
- 声明参数,明确指示调用者传入哪些参数
- 对象要记录这些参数
-
案例1：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script> 7 //1.采用直接量的方式创建对象 8 function f1() { 9 var student = { 10 "name":"zhangsan", 11 "age":23, 12 "work":function(){ 13 alert("我学Java"); 14 } 15 }; 16 alert(student.name); 17 alert(student.age); 18 student.work(); 19 } 20 //2.采用内置构造器创建对象 21 function f2() { 22 var teacher = new Object(); 23 teacher.name = "苍老师"; 24 teacher.age = 18; 25 teacher.work = function(){ 26 alert("我教Java"); 27 }; 28 alert(teacher.name); 29 alert(teacher.age); 30 teacher.work(); 31 } 32 //3.采用自定义构造器创建对象 33 function Coder(name,age,work) { 34 //需要在对象上记录传入的参数 35 this.name = name; 36 this.age = age; 37 this.job = work; 38 } 39 function f3() { 40 var coder = new Coder( 41 "Lisi", 42 28, 43 function(){ 44 alert("我写Java"); 45 } 46 ); 47 alert(coder.name); 48 alert(coder.age); 49 coder.job(); 50 } 51 </script> 52 </head> 53 <body> 54 <input type="button" value="按钮1" 55 onclick="f1();"/> 56 <input type="button" value="按钮2" 57 onclick="f2();"/> 58 <input type="button" value="按钮3" 59 onclick="f3();"/> 60 </body> 61 </html>
2.总结
-
-
- 无论采用哪种方式,创建出来的对象本质上都是Object
- 若对象需要给其他人复用,建议采用1.2.2
- 若对象只是自己使用,采用1.1或1.2.1均可
-
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6 <script>
7 //1.采用直接量的方式创建对象
8 function f1() {
9 var student = {
10 "name":"zhangsan",
11 "age":23,
12 "work":function(){
13 alert("我学Java");
14 }
15 };
16 alert(student.name);
17 alert(student.age);
18 student.work();
19 }
20 //2.采用内置构造器创建对象
21 function f2() {
22 var teacher = new Object();
23 teacher.name = "苍老师";
24 teacher.age = 18;
25 teacher.work = function(){
26 alert("我教Java");
27 };
28 alert(teacher.name);
29 alert(teacher.age);
30 teacher.work();
31 }
32 //3.采用自定义构造器创建对象
33 function Coder(name,age,work) {
34 //需要在对象上记录传入的参数
35 this.name = name;
36 this.age = age;
37 this.job = work;
38 }
39 function f3() {
40 var coder = new Coder(
41 "Lisi",
42 28,
43 function(){
44 alert("我写Java");
45 }
46 );
47 alert(coder.name);
48 alert(coder.age);
49 coder.job();
50 }
51 </script>
52 </head>
53 <body>
54 <input type="button" value="按钮1"
55 onclick="f1();"/>
56 <input type="button" value="按钮2"
57 onclick="f2();"/>
58 <input type="button" value="按钮3"
59 onclick="f3();"/>
60 </body>
61 </html>
温壶月光当茶饮
浙公网安备 33010602011771号