兴趣爱好Javajava学习笔记 - web基础三（javaScript）
执笔介绍
作用：主要是完成页面的数据验证
JS 是弱类型，Java 是强类型
- 特点：
- 交互性（它可以做的就是信息的动态交互）
- 安全性（不允许直接访问本地硬盘）
- 跨平台性（只要是可以解释 JS 的浏览器都可以执行，和平台无关）
javaScript与html代码结合使用方式
在head或body标签中
1
2
3
4
5
6
7
8
9
10
11
| <head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
alert("hello javaScrip");
</script>
</head>
<body>
</body>
|
使用script标签引入单独javaScript文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="1.js"></script>
<script type="text/javascript">
alert("第二次弹窗");
</script>
</head>
|
javaScript变量
在javaScript语言中，所有的变量都可以作为一个boolean类型的变量去使用。0 、null、 undefined、””(空串) 都认为是 false
类型
1
2
3
4
5
| 数值类型： number
字符串类型： string
对象类型： object
布尔类型： boolean
函数类型： function
|
特殊的值
1
2
3
| undefined 未定义，所有 js 变量未赋于初始值的时候，默认值都是 undefined
null 空值
NaN 全称是：Not a Number。非数字。非数值
|
定义变量格式
常用api
警告框函数
1
2
3
4
| alert();
// 案例
alert("今天你好吗！");
|
返回变量的数据类型
1
2
3
4
5
| typeof(i)；
// 案例
var str = "执笔";
alert(typeof(str));//String
|
运算
关系比较运算
等于
全等于
1
| === 除了做字面值的比较之外，还会比较两个变量的数据类型
|
示例
1
2
3
4
| var a = "12";
var b = 12;
alert( a == b ); // true
alert( a === b ); // false
|
逻辑运算
&& 且运算 和 ||或运算，有结果了后，后面的表达式不在执行
且运算（&&）
- 第一种：当表达式全为真的时候。返回最后一个表达式的值
- 第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值
或运算（||）
- 第一种情况：当表达式全为假时，返回最后一个表达式的值
- 第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值
取反运算（!）
数组
javaScript语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作
定义方式
1
2
| var 数组名 = []; // 空数组
var 数组名 = [1 , ’abc’ , true]; // 定义数组同时赋值元素
|
函数
1、javaScript语言中的定义带有返回值得函数，只需要在函数体内直接使用·return语句返回即可
2、函数需要被调用才会生效
3、javaScript中函数的重载会直接覆盖掉上一次的定义
定义方式
function关键字
1
2
3
| function 函数名(形参列表){
函数体
}
|
1
2
3
4
5
| function fun(){
alert("无参函数");
}
fun();//调用
|
变量的形式
1
| var 函数名 = function(形参列表) { 函数体 }
|
1
2
3
| var fun = function () {
alert("无参函数");
}
|
带返回值函数
1
2
3
4
5
| function fun3(num1,num2) {
var result = num1 + num2;
return result;
}
alert(fun3(1,2));// 3
|
隐形参数（arguments）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <head>
<meta charset="UTF-8">
<title>10.隐形参数</title>
<script type="text/javascript">
function fun() {
for (var i = 0;i < arguments.length;i++){
alert(arguments[i]);
}
alert("无参函数");
}
fun(1,"abc",2);
function sum(num1,num2) {
var result = 0;
for (var i = 0; i < arguments.length; i++){
result += arguments[i];
}
return result;
}
alert(sum(1,2,3,4,5,6,7,8,9));
</script>
</head>
|
JS中的自定义对象
Object形式
1
2
3
4
5
| var 变量名 = new Object(); // 对象实例（空对象）
变量名.属性名 = 值; // 定义一个属性
变量名.函数名 = function(){} // 定义一个函数
对象的访问：
变量名.属性 / 函数名();
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var obj = new Object();
alert(typeof(obj));
obj.name = "执笔";
obj.age = 18;
obj.fun = function () {
alert("姓名：" + this.name + " 年龄：" + this.age);
}
alert(obj.name);
alert(obj.fun());
</script>
</head>
|
花括号形式
1
2
3
4
5
6
7
| var 变量名 = { // 空对象
属性名：值, // 定义一个属性
属性名：值, // 定义一个属性
函数名：function(){} // 定义一个函数
};
变量名.属性 / 函数名();
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var obj = {
name: "执笔",
age: 18,
fun : function () {
alert("姓名：" + this.name + " 年龄：" + this.age);
}
}
alert(obj.name);
obj.fun();
</script>
</head>
|
事件
事件注册
- 告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定
静态注册
- 通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <head>
<meta charset="UTF-8">
<title>onblur</title>
<script type="text/javascript">
function onblurFun() {
console.log("静态注册onblur事件");
}
</script>
</head>
<body>
用户名：<input type="text" onblur="onblurFun();"><br/>
</body>
|
动态注册
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <head>
<meta charset="UTF-8">
<title>onblur</title>
<script type="text/javascript">
window.onload = function () {
var elementById = document.getElementById("password");
elementById.onblur = function () {
console.log("动态注册onblur事件");
}
}
</script>
</head>
<body>
密码：<input type="password" id="password">
</body>
|
onload(加载完成事件)
- 页面加载完成之后，常用于做页面 js 代码初始化操作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <head>
<meta charset="UTF-8">
<title>onload</title>
<script type="text/javascript">
function onloadFun() {
alert("静态注册的onload事件");
}
window.onload = function () {
alert("动态注册的onload事件")
}
</script>
</head>
<body>
</body>
|
onclick(单击事件)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <head>
<meta charset="UTF-8">
<title>onclick</title>
<script type="text/javascript">
function onclickFun() {
alert("静态注册onclick事件");
}
window.onload = function () {
var bonObj = document.getElementById("bon01");
bonObj.onclick = function () {
alert("动态注册onclick事件");
}
}
</script>
</head>
<body>
<button onclick="onclickFun()">按钮1</button>
<button id="bon01" >按钮2</button>
</body>
|
onbure(失去焦点事件)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <head>
<meta charset="UTF-8">
<title>onblur</title>
<script type="text/javascript">
function onblurFun() {
console.log("静态注册onblur事件");
}
window.onload = function () {
var elementById = document.getElementById("password");
elementById.onblur = function () {
console.log("动态注册onblur事件");
}
}
</script>
</head>
<body>
用户名：<input type="text" onblur="onblurFun();"><br/>
密码：<input type="password" id="password">
</body>
|
onchange(内容发生改变事件)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| <head>
<meta charset="UTF-8">
<title>onchange</title>
<script type="text/javascript">
function onchangeFun() {
alert("你的女神改变了");
}
window.onload = function () {
var selObj = document.getElementById("sel01");
selObj.onchange = function () {
alert("你的男神改变了");
}
}
</script>
</head>
<body>
<select onchange="onchangeFun()">
<option>请选择你的女神</option>
<option>hello</option>
<option>hi</option>
<option>haha</option>
</select>
<select id="sel01">
<option>请选择你的男神</option>
<option>周星驰</option>
<option>华仔</option>
<option>孙悟空</option>
</select>
</body>
|
onsubmit(表单提交事件)
return false; 可阻止表单进行提交或页面进行跳转
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| <head>
<meta charset="UTF-8">
<title>onsubmit</title>
<script type="text/javascript">
function onsubmitFun() {
alert("静态注册表单提交事件---发现不合法")
return false;
}
window.onload = function () {
var subObj = document.getElementById("sub01");
subObj.onsubmit = function () {
alert("动态注册表单提交事件---发现不合法");
return false;
}
}
</script>
</head>
<body>
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
<input type="submit" value="静态注册"/>
</form>
<form action="http://localhost:8080" method="get" id="sub01">
<input type="submit" value="动态注册">
</form>
</body>
|
DOM模型
Document对象
- Document它管理了所有的HTML文档内容
- document它是一种树结构的文档，有层级关系
- 所有的标签都对象化
- 可以通过document访问所有的标签对象
常用方法
1、如果有id属性，优先使用getElementById()方法进行查询
2、如果没有id属性，则优先使用getElementsByName()方法进行查询；
3、如果id属性和name属性都没有最后按标签名进行查询getElementsByTagName()
4、这三个方法都需要在页面加载完成之后执行，才能查询到对象
createElement(tagName)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <head>
<meta charset="UTF-8">
<title>createElement</title>
<script type="text/javascript">
window.onload = function () {
var divObj = document.createElement("div");
var textNodeObj = document.createTextNode("执笔，你好！");
divObj.appendChild(textNodeObj);
document.body.appendChild(divObj);
}
</script>
</head>
|
getElementById(elementId)
- 通过标签的id属性查找标签dom对象，elementId是标签的id属性值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| <head>
<meta charset="UTF-8">
<title>getElementById</title>
<script type="text/javascript">
function onclickFun() {
var usernameObj = document.getElementById("username");
var usernameText = usernameObj.value;
var patt = /^\w{5,12}$/;
var usernameObj = document.getElementById("usernamSpan");
if (patt.test(usernameText)){
usernameObj.innerHTML = "<img src=\"right.png\" width=\"12\" height=\"12\">";
} else {
usernameObj.innerHTML = "<img src=\"wrong.png\" width=\"12\" height=\"12\">";
}
}
</script>
</head>
<body>
用户名：<input type="text" id="username" value="123">
<span id="usernamSpan" style="color: red"></span>
<button onclick="onclickFun()">校验</button>
</body>
|
getElementsByName(elementName)
- 通过标签的name属性查找标签dom对象，elementName标签的name属性值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
| <head>
<meta charset="UTF-8">
<title>getElementByName</title>
<script type="text/javascript">
function checkAll() {
var hobbies = document.getElementsByName("hobby");
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = true;
}
}
function checkNo() {
var hobbies = document.getElementsByName("hobby");
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = false;
}
}
function checkReverse() {
var hobbies = document.getElementsByName("hobby");
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = !hobbies[i].checked;
}
}
</script>
</head>
<body>
兴趣爱好：
<input type="checkbox" name="hobby" value="cpp" checked="checked">c++
<input type="checkbox" name="hobby" value="java">java
<input type="checkbox" name="hobby" value="javaScript">javaScript
<br/>
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>
</body>
|
getElementsByTagName(tagname)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <head>
<meta charset="UTF-8">
<title>getElementByName</title>
<script type="text/javascript">
function checkAll() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].checked = true;
}
}
</script>
</head>
<body>
兴趣爱好：
<input type="checkbox" value="cpp" checked="checked">c++
<input type="checkbox" value="java">java
<input type="checkbox" value="javaScript">javaScript
<br/>
<button onclick="checkAll()">全选</button>
</body>
|
节点（标签对象）常用属性和方法
方法
getElementsByTagName()
appendChild(oChildNode)
- 可以添加一个子节点，oChildNode是要添加的孩子节点
属性
childNodes
firstChild
lastChild
parentNode
nextSibling
previousSibling
className
innerHTML
innerText
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
| <head>
<meta charset="UTF-8">
<title>dom查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
window.onload = function(){
var but = document.getElementById("btn01")
but.onclick = function () {
var bjObj = document.getElementById("bj");
alert( bjObj.innerHTML );
}
var btn02Ele = document.getElementById("btn02");
btn02Ele.onclick = function(){
var liObj = document.getElementsByTagName("li");
alert( liObj.length );
};
var btn03Ele = document.getElementById("btn03");
btn03Ele.onclick = function(){
var genders = document.getElementsByName("gender");
alert(genders.length);
};
var btn04Ele = document.getElementById("btn04");
btn04Ele.onclick = function(){
var citys = document.getElementById("city");
var lis = citys.getElementsByTagName("li");
alert(lis.length);
};
var btn05Ele = document.getElementById("btn05");
btn05Ele.onclick = function(){
var citys = document.getElementById("city");
alert(citys.childNodes.length);
};
var btn06Ele = document.getElementById("btn06");
btn06Ele.onclick = function(){
var phone = document.getElementById("phone");
alert( phone.firstElementChild.innerHTML );
};
var btn07Ele = document.getElementById("btn07");
btn07Ele.onclick = function(){
var bjObj = document.getElementById("bj");
alert( bjObj.parentNode );
};
var btn08Ele = document.getElementById("btn08");
btn08Ele.onclick = function(){
var andro = document.getElementById("android");
alert( andro.previousElementSibling.innerHTML );
};
var btn09Ele = document.getElementById("btn09");
btn09Ele.onclick = function(){
var usernameObj = document.getElementById("username");
alert( usernameObj.value );
};
var btn10Ele = document.getElementById("btn10");
btn10Ele.onclick = function(){
var usernameObj = document.getElementById("username");
alert( usernameObj.value = "这是默认值" );
};
var btn11Ele = document.getElementById("btn11");
btn11Ele.onclick = function(){
var bjObj = document.getElementById("bj");
alert( bjObj.innerText );
};
};
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢哪个城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br>
<p>
你喜欢哪款单机游戏?
</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br />
<p>
你手机的操作系统是?
</p>
<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
</div>
<div class="inner">
gender:
<input type="radio" name="gender" value="male"/>
Male
<input type="radio" name="gender" value="female"/>
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="abcde"/>
</div>
</div>
<div id="btnList">
<div><button id="btn01">查找#bj节点</button></div>
<div><button id="btn02">查找所有li节点</button></div>
<div><button id="btn03">查找name=gender的所有节点</button></div>
<div><button id="btn04">查找#city下所有li节点</button></div>
<div><button id="btn05">返回#city的所有子节点</button></div>
<div><button id="btn06">返回#phone的第一个子节点</button></div>
<div><button id="btn07">返回#bj的父节点</button></div>
<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
<div><button id="btn09">返回#username的value属性值</button></div>
<div><button id="btn10">设置#username的value属性值</button></div>
<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
|
