目录：
- 小实验要求
- 小实验思路
- 小实验效果展示
- 小实验源代码
- JS代码的3种引用方式
- 获取节点的4中方法
- 读取、写入值的三种方法
- 时间总汇
- 利用节点改变样式的方法
- 数据类型？？？
1要求
用户在文本框中输入数字，点击按钮，计算其平方
2 思路
3 效果展示
4 代码实现
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>平方界面</title>
6 </head>
7 <script type="text/javascript">
8 function pf() {
9 var text = document.getElementById("text"); // 获取文本框节点
10 var text_num = text.value; // 获取文本框的值
11 var result = document.getElementById("result"); // 获取span标签节点
12 if(isNaN(text_num)) { // 判断是否是一个数字
13 // 不是数字的处理
14 result.innerHTML = "请输入一个数字";
15 result.style.color = 'red';
16 }else {
17 // 是数字的处理
18 result.innerHTML = text_num * text_num;
19 result.style.color = 'green';
20 }
21 }
22 </script>
23 <body>
24 <input type="text" placeholder="请输入一个数字" id="text" maxlength="10" />
25 <input type="button" value="计算平方结果" id="button" onclick="pf()" />
26 =
27 <span id="result">
28 我是结果
29 </span>
30 </body>
31 </html>HTML代码
5JS代码的三种引用方式
5.1 事件定义式
5.2 直接嵌入式
5.3 文件调用式
1 <!DOCTYPE>
2 <html>
3 <head>
4 <meta charset = "utf-8" />
5 <meta name="Keywords" content="" />
6 <mata name = "description" content = "" />
7 <title>test</title>
8 <style>
9 *{
10 margin: 0;
11 padding: 0;
12 }
13 </style>
14
15 <!-- 02 直接调用式 -->
16 <script type="text/javascript">
17 function f() {
18 alert("直接嵌入式");
19 }
20 </script>
21
22 <!-- 03 文件调用式 -->
23 <script type="text/javascript" src="js.js"></script>
24 </head>
25 <body>
26
27 <!-- 01 事件定义式 -->
28 <input type="button" value="点击测试01事件定义式" onclick="alert('事件定义式')" />
29 <hr />
30 <input type="button" value="点击测试02直接嵌入式" onclick="f()">
31 <hr />
32 <input type="button" value="点击测试03文件调用式" onclick="f1()">
33
34 </body>
35 </html>HTML代码
1 /**
2 *
3 * @authors Your Name (you@example.org)
4 * @date 2017-04-07 18:39:16
5 * @version $Id$
6 */
7 function f1() {
8 alert("文件调用式");
9 }JS代码
注意1：将这两个代码文件放在一个文件夹里面进行测试
注意2：script标签里面的内容比body里面的内容先执行，事件只有在触发的时候才执行
6获取节点的四种方法
6.1 通过id获取节点,返回一个节点对象
document.getElementById("id名");
例：var box = document.getElementById("box");
6.2 通过类的名字获取节点,返回的是一堆元素（不兼容IE678）
document.getElementsByClassName("类名");
例：var b = document.getElementsByClassName("a");
6.3 通过标签名字获取节点，返回的是一堆元素（不兼容IE678）
document.getElementsByTagName("标签");
例：var c = document.getElementsByTagName("div");
6.4 通过名字属性来获取的节点
document.getElementsByName("名字属性的内容");
例：var d = document.getElementsByName("性别");
1 <!DOCTYPE>
2 <html>
3 <head>
4 <meta charset = "utf-8" />
5 <meta name="Keywords" content="" />
6 <mata name = "description" content = "" />
7 <title>获取节点的4种方法</title>
8 <style>
9 *{
10 margin: 0;
11 padding: 0;
12 }
13 </style>
14 </head>
15 <body>
16 <!-- #box -->
17 <div id="box" class="a"></div>
18 <div id="box1" class="a"></div>
19 <div id="box2" class="a"></div>
20 <div id="box3" class="a"></div>
21 <input type="radio" name="性别" />
22
23 <script type="text/javascript">
24
25 // 通过id获取节点,返回一个节点对象
26 var box = document.getElementById("box");
27 // box.style.width = "50px";
28 // box.style.height = "50px";
29 // box.style.background = "red";
30
31 // 通过类的名字获取节点,返回的是一堆元素（不兼容IE678）
32 var b = document.getElementsByClassName("a");
33
34 //通过标签名字获取节点，返回的是一堆元素（不兼容IE678）
35 var c = document.getElementsByTagName("div");
36 alert(c.length);
37
38 // 通过名字来获取的节点
39 var d = document.getElementsByName("性别");
40 alert(d);
41
42 //在控制台输出box的相关内容
43 for(var key in box){
44 console.log(key+"===="+box[key])
45 };
46 </script>
47 </body>
48 </html>HTML代码
7读取、写入值的三种方法
7.1 innerHTML -->> 能够解析HTML语法
例：p.innerHTML = "<a href='https://www.juanpi.com/?utm=2846148' target='_blank' style='color:red'>卷皮网官网</a>";
7.2 innerText -->> 是直接以文本显示，不进行HTML语法解析
例：p.innerText = "<a href='https://www.juanpi.com/?utm=2846148' target='_blank' style='color:red'>卷皮网官网</a>"
7.3 value -->> 设定、读取元素的value属性内容
例：button.value = "重庆大足";
1 <!DOCTYPE>
2 <html>
3 <head>
4 <meta charset = "utf-8" />
5 <meta name="Keywords" content="" />
6 <mata name = "description" content = "" />
7 <title>内容写入：innerHTML/innerText</title>
8 <style>
9 *{
10 margin: 0;
11 padding: 0;
12 }
13 #text{
14 /*鼠标放到文字上面会变成一个手*/
15 cursor: pointer;
16 }
17 </style>
18 </head>
19 <body>
20 <p id="text">我是段落</p>
21 <hr />
22 <input type="text" id="button" value="hello world">
23
24 <script type="text/javascript">
25 var p = document.getElementById("text");
26 var button = document.getElementById("button");
27
28 // 鼠标点击，实现内容变更
29 p.onclick = function(){
30
31 // innerHTML能够解析HTML语法
32 p.innerHTML = "<a href='https://www.juanpi.com/?utm=2846148' target='_blank' style='color:red'>卷皮网官网</a>";
33
34 console.log(p.innerHTML);
35
36 // innerText是直接以文本显示，不进行HTML语法解析
37 // p.innerText = "<a href='https://www.juanpi.com/?utm=2846148' target='_blank' style='color:red'>卷皮网官网</a>"
38 };
39 button.onclick = function() {
40 button.value = "重庆大足"; // 设定按钮的value值
41 console.log(button.value); // 读取按钮的value值
42 // button.innerHTML = "大足石刻"; //有value属性的必须用value
43 }
44
45 </script>
46 </body>
47 </html>HTML代码
有value属性的元素，在进行读取和写入操作时只能使用第三种方式
8事件总汇
onmouseenter/onmouseover 鼠标划入触发
onmouseleave/onmouseout 鼠标划出触发
onmousemove 监听鼠标移动
onclick 单击
ondbclick 双击
onkeydown 按下某键
onkeyup 抬起某键
onkeypress 某键一直按下的时间
onblur 元素失去焦点
onfocus 元素获得焦点
onresize 大小改变
1 <!DOCTYPE>
2 <html>
3 <head>
4 <meta charset = "utf-8" />
5 <meta name="Keywords" content="" />
6 <mata name = "description" content = "" />
7 <title>变量、数据类型、事件、事件绑定</title>
8 <style>
9 *{
10 margin: 0;
11 padding: 0;
12 }
13 #box{
14 width: 200px;
15 height: 200px;
16 background-color: red;
17 }
18 </style>
19 </head>
20 <body>
21 <div id="box"></div>
22 <input type="text" id="text" />
23
24 <script type="text/javascript">
25 /*
26 变量：
27 1 变量必须要声明
28 2 变量要赋值,不赋值就是undefined
29 变量的命名规范：
30 数字、字母、下划线 $ (不能用数字作为开头)
31
32 */
33 var a = 1; //声明变量a,并且进行赋值
34 a = 123;
35 // alert(a);
36 // var b = 2, c = 3; //声明多个变量
37
38 // var 0a = 123; //变量名不能以数字开头
39 // alert(0a);
40
41 /*
42 js的6大数据类型：
43 1 Number------数字
44 2 String------字符串
45 3 Boolean-------布尔值 true、false
46 4 function------函数
47 5 undefined------未定义
48 6 Object-------对象
49 */
50 var n = 100;
51 var s = "123";
52 var b = true;
53 // var f = funtion(){alert(1)};
54 var u = undefined;
55 var o = {};
56
57 /*
58 事件：
59 onmouseenter/onmouseover 鼠标划入触发
60 onmouseleave/onmouseout 鼠标划出触发
61 onmousemove 监听鼠标移动
62 onclick 单击
63 ondbclick 双击
64 onkeydown 按下某键
65 onkeyup 抬起某键
66 onkeypress 某键一直按下的时间
67 onblur 元素失去焦点
68 onfocus 元素获得焦点
69 onresize 大小改变
70 */
71
72 var box = document.getElementById("box");
73 box.onclick = function(){
74 // alert("hello");
75 };
76 box.onmousemove = function(){
77 console.log(1);
78 };
79
80 var inp = document.getElementById("text");
81 inp.onblur = function(){
82 console.log("hello");
83 };
84
85 window.onresize = function(){
86 console.log("change");
87 };
88
89 </script>
90 </body>
91 </html>HTML代码
9利用节点改变样式的方法
9.1 通过选择器来改变样式
例：box.id = "on";
9.2 通过内联样式来改变样式
例：box.style.width = "120px";
例：box.style.backgroundColor = "skyblue";
9.3 多条样式
例：box.style.cssText = "width:120px; height:120px; background-color:red;margin-top:50px";
例：box.style.cssText += "width:120px; height:120px; background-color:red;margin-top:50px";
1 <!DOCTYPE>
2 <html>
3 <head>
4 <meta charset = "utf-8" />
5 <meta name="Keywords" content="" />
6 <mata name = "description" content = "" />
7 <title>样式的控制</title>
8 <style>
9 *{
10 margin: 0;
11 padding: 0;
12 }
13 #on{
14 width: 150px;
15 height: 150px;
16 background-color: red;
17 }
18 .on{
19 border-radius: 60px;
20 }
21 </style>
22 </head>
23 <body>
24 <div id="box" class="box" style="border-radius: 10px"></div>
25
26 <script type="text/javascript">
27 var box = document.getElementById("box");
28
29 // 通过选择器来改变样式
30 // box.id = "on";
31 // box.className = "on";
32
33 // 通过内联样式来改变样式
34 // box.style.width = "120px";
35 // box.style.height = "120px";
36
37 // box.style.backgroundColor = "skyblue";
38 // box.style["background-color"] = "blue"
39 // box.style.marginTop = "50px";
40
41 // 多条样式
42 box.style.cssText = "width:120px; height:120px; background-color:red;margin-top:50px";
43 // box.style.cssText += "width:120px; height:120px; background-color:red;margin-top:50px";
44
45 // float浮动
46 box.style.cssFloat = "right";
47 </script>
48 </body>
49 </html>HTML代码
10数据类型 -->> 实际开发时查手册
重点地方待更新...
1 <!DOCTYPE>
2 <html>
3 <head>
4 <meta charset = "utf-8" />
5 <meta name="Keywords" content="" />
6 <mata name = "description" content = "" />
7 <title>数据类型：Number/String/Boolean</title>
8 <style>
9 *{
10 margin: 0;
11 padding: 0;
12 }
13 </style>
14 </head>
15 <body>
16
17
18 <script type="text/javascript">
19 /*
20 js的6大基本类型
21 Number---数字
22 String---字符串
23 Boolean---布尔值
24 undefined---未定义
25 function---函数：function(){};
26 Object---对象:[] {}
27 */
28 // var a = {};
29 // alert(typeof a); //弹出变量a的数据类型
30
31 /*
32 =======Number=======
33 数字：js不分整数、小数
34 范围：-2^53 到 2^52
35 */
36 var x = 1 + undefined;
37 // alert(typeof x);
38 // alert(Number(undefined))
39 // alert(x);
40 // alert(x==x); //NaN不等于自身
41 // alert(x!=x);
42
43 //Number() //构造函数---参数中必须能被转换为数字，否则返回NaN
44 // var n = Number("5");
45 var n = Number("a");
46 // alert(n);
47
48 // parseInt("456.789") --> 取整函数,遇到非数字就停止,如果第一个就不是一个数字就返回NaN
49 // alert(parseInt("456.789"));
50 // alert(parseInt("4456a89"));
51 // alert(parseFloat("1234.1234"));
52 // alert(parseFloat("123.121234").toFixed(1)); //保留小数位数设置
53
54 /*
55 Math -> 是一个对象，可以引用其函数
56 */
57 var m;
58 m = Math.pow(16, 2); //平方
59 m = Math.round(0.59); //四舍五入
60 m = Math.ceil(0.1); //向上取整
61 m = Math.floor(0.1); //向下取整
62 m = Math.max(1,2,3,4,5);
63 m = Math.min(1,2,3,4,5);
64 m = Math.random(); //0到1的一个随机数
65 m = Math.random() * 100;
66 m = (Math.random() * 30 + 20).toFixed(1);
67 // alert(m);
68 // alert(m.length); //注意number没有长度
69
70 /*
71 =======String=======
72 字符串：单引号或双引号 引起来
73 .substring 字符截取
74 .slice 切片
75 .indexOf 寻找文本
76 .split 文本分割
77 .toUpperCase 转大写
78 .toLowerCase 转小写
79 substirng的参数为负数的时候回看做0，如果第一个参数大于第二个参数回自动进行交换，取不到会返回空
80 */
81 var s = 'warrior';
82 // alert(s[0]); //截取单个字符
83 // alert(s.charAt(1));
84
85 var s1 = "furyhappydakwarrior";
86 // alert(s1.substring(4,9)); //截取一个字符串
87
88 /*
89 slice切片
90 参数1：截取的开始位置
91 参数2：截取的结束位置
92 负数倒着数
93 不会自动交换位置
94 取不到会返回空
95 */
96 var s2 = "helloworldwarriorworld"
97 // alert(s2.slice(5, 10));
98
99 /*
100 str.indexOf("查找的文本", 开始位置);
101 */
102 // alert(s2.indexOf("world",s2.indexOf("world") + 1));
103
104 /*
105 str.split("") 文本分割，返回一个数组
106 */
107 var s3 = "1 2 3 4 5";
108 var arr = [];
109 arr = s3.split(" ");
110 // alert(arr);
111 // alert(arr.length);
112
113 var s4 = "myname";
114 // alert(s4.toUpperCase());
115 var s4 = "fury";
116 // alert(s3 + s4);
117
118 /*
119 ======Boolean======
120 当要判断一个值是不是等于另外一个值就会用到
121 true、false
122 会被判断为false的值：
123 false undefined NaN null 0 ""
124 */
125 // alert(Boolean(null));
126 // alert(Number(true)); //ture转数字是1
127 // alert(Number(false)); //false转数字是0
128
129 var a = 3;
130 if (3 == a) {
131 // alert("3 == a");
132 }
133 if (0 != a) {
134 // alert("a不等于0");
135 }
136 if (3) {
137 // alert("执行if语句");
138 }
139
140 /*
141 ======null undefined======
142 null是一个关键字----类似于正确空值的填补
143 undefined是一个预先定义的全局变量，他不是关键字，类似于错误空值的填补
144 */
145 // alert(1 + undefined); //NaN
146 // alert(1 + null); //1
147 // alert(null == undefined); //true
148 //因为null和undefined在做真假判断的时候 都为假
149 alert(typeof null); //object
150 alert(typeof undefined); //undefined
151 </script>
152 </body>
153 </html>HTML代码
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
