JavaScript语言
1.JavaScript介绍
JavaScript语言运行在客户端，需要运行浏览器来解析执行JavaScript代码，为弱类型语言。
特点：
- 交互性：可以做的是信息的动态交互；
- 安全性：不允许直接访问本地硬盘；
- 跨平台性：只要是可以解释JS的浏览器都可以执行。
2.JavaScript和html代码的结合方式
- 第一种方式：
只需要在head标签或body标签中使用script标签来书写JavaScript代码。
例：
<script type="text/javascript">
alert("hello javascript");
</script>
alert是JavaScript语言提供的一个警告栏函数，它可以接收任意类型的参数，这个参数就是警告框的提示信息。
- 第二种方式：
使用script标签单独引入单独的JavaScript代码文件。
例：
<script type="text/javascript" src="1.js"></script>
- src属性专门用来引入js文件路径，路径可以是结对路径，也可以是相对路径。
3.变量
- JavaScript的变量类型有：
| 数值类型 | number |
|---|---|
| 字符串类型 | string |
| 对象类型 | object |
| 布尔类型 | boolean |
| 函数类型 | function |
- JavaScript中特殊的值：
| undefined | 为定义，所有js变量未赋予初始值的时候，默认值都是undefined |
|---|---|
| null | 空值 |
| NaN | 全称为：Not a Number，非数字，非数值。 |
- js中定义变量格式：
-
var 变量名；
-
var 变量名 = 值；
例：
<script type="text/javascript">
var a;
var b = 12;
</script>
4.关系(比较)运算
| 等于 == | 简单的做字面值的比较 |
|---|---|
| 全等于 === | 除了做字面值的比较之外，还会比较两个变量的数据类型 |
例：
<script type="text/javascript">
var a = 12;
var b = "12";
alert(a == b); //true
alert(a === b); //false
</script>
5.逻辑运算
- 且运算：&&
有两种情况：
- 当表达式全为真时，返回最后一个表达式的值；
- 当表达式中有一个为假时，返回第一个为假的表达式的值。
- 或运算：||
有两种情况：
- 当表达式全为假时，返回最后一个表达式的值；
- 只要有一个表达式为真，就会返回第一个为真的表达式的值。
- 取反运算：！
-
在JavaScript语言中，所有的变量都可以做为一个boolean类型的变量去使用 。
-
0、null、undefined、""(空串)都认为是false。
例：
<script type="text/javascript">
var a = "abc";
var b = true;
var c = null;
var d = false;
alert(a && b); //true
alert(b && a); //true
alert(a && d); //fasle
alert(a && c); //null
alert(d || c); //null
alert(c || d); //fasle
alert(a || c); //abc
alert(b || c); //true
</script>
6.数组
- js中数组的定义方式：
- var 数组名 = []; //空数组
- var 数组名 = [1,‘abc’,true]; //定义数组同时赋值元素
例：
<script type="text/javascript">
var arr = [];
var arr = [1,'abc',true];
</script>
7.函数
- js中函数的定义方式：
- 可以使用function关键字来定义函数，格式如下：
function 函数名(形参列表){
函数体
}
若函数带有返回值，则在函数体内使用return语句返回值即可。
例：
<script type="text/javascript">
function fun1() {
alert("无参函数被调用");
}
fun1();
function fun2(a,b) {
alert("有参函数被调用" + " a =" + a + " b =" + b);
}
fun2(12,"abc");
function sum(num1,num2) {
var result = num1 + num2;
return result;
}
alert(sum(100,100));
</script>
- 函数的第二种定义方式：
var 函数名 = function(形参列表){函数体}
例：
<script type="text/javascript">
var fun1 = function () {
alert("无参函数");
}
fun1();
var fun2 = function (a,b) {
alert("有参函数被调用" + " a =" + a + " b =" + b);
}
fun2(12,"abc");
var fun3 = function (num1,num2) {
var result = num1 + num2;
return result;
}
alert(fun3(10,10));
</script>
- 函数的arguments隐形参数（只在function函数内）
隐形参数就是在function函数中不需要定义，但却可以直接用来获取所有参数的变量。
隐形参数特别像Java SE中的可变长参数一样，操作类似数组。
例：
<script type="text/javascript">
function fun() {
alert(arguments.length);
alert(arguments[0]);
alert(arguments[1]);
alert(arguments[2]);
for (var i = 0;i <arguments.length;i++){
alert(arguments[i]);
}
alert("无参函数fun()");
}
fun(1,"ab",true);
</script>
8.js中的自定义对象
Object形式的自定义对象
- 格式：
- var 变量名 = new Object(); //对象实例
- 变量名.属性名 = 值; //定义一个属性
- 变量名.函数名 = function(){} //定义一个函数
- 对象的访问：
变量名.属性 / 函数名;
例：
<script type="text/javascript">
var object = new Object();
object.name = "小明";
object.age = 22;
object.fun = function(){
alert("姓名：" + this.name + ",年龄：" + this.age);
}
object.fun();
</script>
{}花括号形式的自定义对象
- 定义：
var 变量名 = { //空对象
属性名:值, //定义一个属性
函数名:function(){} //定义一个函数
};
- 对象的访问：
变量名.属性 / 函数名();
例：
<script type="text/javascript">
var object = {
name:"小明",
age:22,
fun:function () {
alert("姓名：" + this.name + ",年龄：" + this.age)
}
};
object.fun();
</script>
9.js中的事件
事件就是电脑输入设备与页面进行交互的响应。
常用的事件
| onload加载完成事件 | 页面加载完成后，常用于做页面js代码初始化操作 |
|---|---|
| onclick单击事件 | 常用于按钮的点击响应事件 |
| onblur失去焦点事件 | 常用于输入框失去焦点后验证其输入内容是否合法 |
| onchange内容发生改变事件 | 常用于下拉列表和输入框内容发生改变后操作 |
| onsubmit表单提交事件 | 常用于表单提交前，验证所有表单项是否合法 |
事件的注册
告诉浏览器，当事件响应后要执行哪些操作代码，就是事件注册或事件绑定。事件注册分为静态注册事件和动态注册事件。
- 静态注册事件：通过html标签的事件属性直接赋予事件响应后的代码。
- 动态注册事件：是指先通过js代码得到标签的dom对象，然后通过**dom对象.事件名 = function(){}**这种形式赋予事件响应后的代码。
例：
onload加载完成事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onloadFun() {
alert('静态注册onload事件.');
}
window.onload = function () {
alert("动态注册onload事件.");
}
</script>
</head>
<!--静态注册onload事件-->
<body onload="onloadFun();">
</body>
</html>
onclick单击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onclickFun() {
alert("静态注册onclick事件");
}
window.onload = function () {
var id = document.getElementById("btn01");
id.onclick = function () {
alert("动态注册的onclick事件.");
}
}
</script>
</head>
<body>
<!--静态注册onclick事件-->
<button onclick="onclickFun()">按钮1</button>
<button id="btn01">按钮2</button>
</body>
</html>
-
document是JavaScript语言提供的一个对象。
-
getElementById通过id属性获取标签对象。
onblur失去焦点事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onblurFun() {
console.log("静态注册失去焦点事件.");
}
window.onload = function () {
var id = document.getElementById("password");
id.onblur = function () {
console.log("动态注册失去焦点事件.");
}
}
</script>
</head>
<body>
用户名:<input type="text" onblur="onblurFun()"><br/>
密码:<input id="password" type="password"><br/>
</body>
</html>
-
console是控制台对象，由JavaScript语言提供，专门用来向浏览器的控制器打印输出，用于测试使用；
-
log是打印的方法。
onchange内容发生改变事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onchangeFun() {
alert("选项改变");
}
window.onload = function () {
var id = document.getElementById("01");
id.onchange = function () {
alert("选项改变");
}
}
</script>
</head>
<body>
<!--静态注册onchange事件-->
<select onchange="onchangeFun()">
<option>--选项--</option>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
</select>
<!--动态注册onchange事件-->
<select id="01">
<option>--选项--</option>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
</select>
</body>
</html>
onsubmit表单提交事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onsubmitFun() {
alert("表单已提交");
return true;
}
window.onload = function () {
var id = document.getElementById("01");
id.onsubmit = function () {
alert("表单已提交");
return true;
}
}
</script>
</head>
<body>
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
<input type="submit" value="静态注册"/>
</form>
<form action="http://localhost:8080" id="01">
<input type="submit" value="动态注册"/>
</form>
</body>
</html>
10.DOM模型
DOM全称是Document Object Model 文档对象模型，就是将文档中的标签、属性、文本转化成对象来管理。
Document对象
- Document对象管理了所有的HTML文档内容；
- Document是一种树结构的文档，有层次关系；
- Document可以将所有的标签都对象化；
- 可以通过Document访问所有的标签对象。
方法介绍
- document.getElementById(elementId)：通过标签的id属性查找标签dom对象，elementId是标签的id属性值。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
* 需求：用户点击校验按钮，获取输出框中的内容验证其是否合法。
* 验证规则：必须由字母、数字、下划线组成，并且长度为5-12位。
* */
function onclickFun() {
var userid = document.getElementById("username");
var value = userid.value;
var patt = /^\w{5,12}$/; //正则表达式，表示字母、数字、下划线
var spanid = document.getElementById("userspan");
spanid.innerHTML = "输入错误，请重新输入"; //表示起始标签和结束标签中的内容
if (patt.test(value)){
//spanid.innerHTML = "用户名合法";
spanid.innerHTML = "<img src=\"right.png\" width=\"15px\" height=\"15px\">";
}else {
//spanid.innerHTML = "用户名不合法";
spanid.innerHTML = "<img src=\"wrong.png\" width=\"15px\" height=\"15px\">";
}
}
</script>
</head>
<body>
用户名:<input type="text" id="username" value="cherish"/>
<span id="userspan" style="color: red;">
</span>
<button onclick="onclickFun()">校验</button>
</body>
</html>
- document.getElementByName(elementName)：通过标签的name属性查找标签dom对象，elementName是标签的Name属性值。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</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">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>
</html>
- document.getElementByTagName(tagName)：通过标签名查找标签dom对象，tagName是要创建的标签名。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</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">C++
<input type="checkbox" value="Java">Java
<input type="checkbox" value="JavaScript">JavaScript
<br/>
<button onclick="checkAll()">全选</button>
</body>
</html>
- document.createElement(tagName)：通过给定的标签名，创建一个标签对象，tagName是要创建的标签名。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function () {
var divElement = document.createElement("div");
var textNode = document.createTextNode("hello world");
divElement.appendChild(textNode);
// divElement.innerHTML = "hello world";
document.body.appendChild(divElement);
}
</script>
</head>
<body>
</body>
</html>
注意事项
- document对象的三个查询方法，如果有id属性，优先使用**getElementById(elementId)方法进行查询，如果没有id属性，则优先使用getElementByName(elementName)**进行查询。
- 如果id属性和name属性都没有，再使用**getElementByTagName(tagName)**进行查询。
- 以上三个方法，一定要在页面加载完成后执行，才能查询到标签对象。
节点的常用属性和方法
节点就是标签对象。
方法
- 通过具体的元素节点调用**getElementsByTagName()**方法，获取当前节点的指定标签名孩子节点。
- **appendChild(oChildNode)**方法可以添加一个子节点，oChildNode是要添加的孩子节点。
属性
| childNodes属性 | 获取当前节点的所有子节点 |
|---|---|
| firstChild属性 | 获取当前节点的第一个子节点 |
| lastChild属性 | 获取当前节点的最后一个子节点 |
| parentNode属性 | 获取当前节点的父节点 |
| nextSibling属性 | 获取当前节点的下一个节点 |
| previousSibling属性 | 获取当前节点的上一个节点 |
| className属性 | 用于获取或设置标签的class属性值 |
| innerHTML属性 | 表示获取或设置起始标签和结束标签中的内容 |
| innerText属性 | 表示获取或设置起始标签和结束标签中的文本 |
例：
<!DOCTYPE html>
<html>
<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(){
//1.查找#bj节点
document.getElementById("btn01").onclick = function () {
var bjObj = document.getElementById("bj");
alert(bjObj.innerHTML);
}
//2.查找所有li节点
var btn02Ele = document.getElementById("btn02");
btn02Ele.onclick = function(){
var lis = document.getElementsByTagName("li");
alert(lis.length);
};
//3.查找name=gender的所有节点
var btn03Ele = document.getElementById("btn03");
btn03Ele.onclick = function(){
var genders = document.getElementsByName("gender");
alert(genders.length);
};
//4.查找#city下所有li节点
var btn04Ele = document.getElementById("btn04");
btn04Ele.onclick = function(){
var lis = document.getElementById("city").getElementsByTagName("li");
alert(lis.length);
};
//5.返回#city的所有子节点
var btn05Ele = document.getElementById("btn05");
btn05Ele.onclick = function(){
var nodes = document.getElementById("city").childNodes;
alert(nodes.length);
};
//6.返回#phone的第一个子节点
var btn06Ele = document.getElementById("btn06");
btn06Ele.onclick = function(){
alert(document.getElementById("phone").firstChild.innerHTML);
};
//7.返回#bj的父节点
var btn07Ele = document.getElementById("btn07");
btn07Ele.onclick = function(){
var bjObj = document.getElementById("bj");
alert(bjObj.parentNode.innerHTML);
};
//8.返回#android的前一个兄弟节点
var btn08Ele = document.getElementById("btn08");
btn08Ele.onclick = function(){
alert(document.getElementById("android").previousSibling.innerHTML);
};
//9.读取#username的value属性值
var btn09Ele = document.getElementById("btn09");
btn09Ele.onclick = function(){
alert(document.getElementById("username").value);
};
//10.设置#username的value属性值
var btn10Ele = document.getElementById("btn10");
btn10Ele.onclick = function(){
document.getElementById("username").value = "hello js";
};
//11.返回#bj的文本值
var btn11Ele = document.getElementById("btn11");
btn11Ele.onclick = function(){
alert(document.getElementById("bj").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>
<br>
<p>
你喜欢哪款单机游戏?
</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br />
<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>
</html>
233
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
