javaweb(02): JavaScript基础知识
JavaScript简介
为什么出现JavaScript
Javascript是什么
JavaScript和Java的关系?
就像卡巴斯基和巴基斯坦一样,有个基巴关系···
JavaScript版的hello world
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hellojs</title>
<script type="text/javascript">
window.onload = function () {
let btn = document.getElementById("btn1");
btn.onclick = function () {
alert("hello,word!");
}
}
</script>
</head>
<body>
<button id="btn1">hello</button>
</body>
</html>
基础语法
变量
声明
使用var关键字声明变量,不需要指定数据类型。格式:var 变量名
数据类型
五种原始类型: number String boolean null undefined(声明未赋值)
对象:object
变量在使用过程中可以接收不同类型的值
var num1;
num1 = 1;
num1 = "1";
num1 = true;
判断一个变量的类型: typeof;如 alert(typeof num1)
数组
数组定义的格式
var 数组名 = []; // 空数组
var 数组名 = [1 , ’abc’ , true]; // 定义数组同时赋值元素
函数
声明与调用
方式一:
function sum(a,b) {
alert(a+b);
}
sum(1,2);//调用
方式二:
var sum = function (a,b) {
alert(a+b);
}
sum(1,2);
函数声明的注意点:
- 在js中方法的唯一标识就是方法名,在js中没有方法重载,调用方法的时候参数是可以选传的;
- 在 JS 中函数的重载会直接覆盖掉上一次的定义
对象
创建对象的两种方式及使用属性方法
//方式一:
var obj = new Object();
//方式二:
var obj2 = {
};
//方式三:
var obj = {
interest: "football", run: function () {
alert("run,run,run");
}};
//动态向对象中添加属性
obj2.name = "八戒";
//获取属性值:对象.属性
alert(obj2.name);
//动态向对象中添加方法
obj2.work = function () {
alert("sleep,eat");
}
//调用对象的方法:
obj2.work();
事件
什么是事件
常用的事件
事件响应方式
1.在标签事件属性中编码
<button id = "btn" onclick = "alter('hello')">
I'm button
</button>
2.动态绑定事件
var button = document.getElementById("btn")
button.onclick = function(){
alert("hello");
}
动态为元素绑定事件:
- 找到元素;
- 为元素相应的事件属性赋值一个方法,如onclick;
- 当事件发生以后浏览器就会自动调用。
window.onload:浏览器加载完成整个页面的时候调用后面的方法
加载方式
方式一:写在HTML标签内的事件属性上
写在HTML标签内的事件属性上,结构与行为耦合,不推荐
<button onclick = "alert('hello')">
hello
</button>
方式二:写在script标签里
写在head里面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function () {
var btn = document.getElementById("btnId");
alert(btn);
}
</script>
</head>
<body>
<button id="btnId">hello</button>
</body>
</html>
写在body闭合之前
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btnid">hello</button>
<script type="text/javascript">
var btn = document.getElementById("btnid");
alert(btn);
</script>
</body>
</html>
方式三:引入外部文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btnn">hello</button>
<script type="text/javascript" src="abc.js"></script>
</body>
</html>
DOM
什么是DOM
树形结构
节点
节点:每一个元素都是节点
节点分为父节点、子节点、祖先节点、后代节点、兄弟节点
节点的分类
节点的属性
所有的节点(封装好的对象),都有三个属性:
- nodeName:节点名
- nodeType:节点类型 所有节点的nodeType值都会返回一个整数
- nodeValue:节点值
nodeName | nodeType | nodeValue | |
---|---|---|---|
元素节点 | 标签名 | 1 | null |
属性节点 | 属性名 | 2 | 属性值 |
文本节点 | #text | 3 | 文本内容 |
document
document对象
document对象的常用方法
注意点:
节点的常用属性和方法
常用方法
属性
属性名 | 描述 |
---|---|
childNodes | 获取当前节点的所有子节点 |
firstChild | 获取当前节点的第一个子节点 |
lastChild | 获取当前节点的最后一个子节点 |
parentNode | 获取当前节点的父节点 |
nextSibling | 获取当前节点的下一个节点 |
previousSibling | 获取当前节点的上一个节点 |
className | 用于获取或设置标签的 class 属性值 |
innerHTML | 表示获取/设置起始标签和结束标签中的内容 |
InnerText | 表示获取/设置起始标签和结束标签中的文本 |
DOM查询示例
<!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节点
var btn01Ele = document.getElementById("btn01");
btn01Ele.onclick = function () {
var bj = document.getElementById("bj");
alert(bj.innerText);
}
//2.查找所有li节点
var btn02Ele = document.getElementById("btn02");
btn02Ele.onclick = function(){
var lis = document.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
alert(lis[i].innerText);
}
};
//3.查找name=gender的所有节点
var btn03Ele = document.getElementById("btn03");
btn03Ele.onclick = function(){
var names = document.getElementsByName("gender");
for (var i = 0; i < names.length; i++) {
alert(names[i].value);
}
};
//4.查找#city下所有li节点
var btn04Ele = document.getElementById("btn04");
btn04Ele.onclick = function(){
var city = document.getElementById("city");
var cityli = city.getElementsByTagName("li");
for (var i = 0; i < cityli.length; i++) {
alert(cityli[i].innerHTML);
}
};
//5.返回#city的所有子节点
var btn05Ele = document.getElementById("btn05");
btn05Ele.onclick = function(){
var city = document.getElementById("city");
var preEle = city.childNodes;
for (var i = 0; i < preEle.length; i++) {
alert(preEle[i].innerText);
}
};
//6.返回#phone的第一个子节点
var btn06Ele = document.getElementById("btn06");
btn06Ele.onclick = function(){
var phone = document.getElementById("phone");
var first = phone.firstChild;
alert(first.innerText);
};
//7.返回#bj的父节点
var btn07Ele = document.getElementById("btn07");
btn07Ele.onclick = function(){
var bjj = document.getElementById("bj");
var father = bjj.parentElement;
alert(father.innerText)
};
//8.返回#android的前一个兄弟节点
var btn08Ele = document.getElementById("btn08");
btn08Ele.onclick = function(){
var ad = document.getElementById("android");
var bro = ad.previousElementSibling;
alert(bro.innerText);
};
//9.读取#username的value属性值
var btn09Ele = document.getElementById("btn09");
btn09Ele.onclick = function(){
var us = document.getElementById("username");
alert(us.value);
};
//10.设置#username的value属性值
var btn10Ele = document.getElementById("btn10");
btn10Ele.onclick = function(){
document.getElementById("username").value = "desert";
};
//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>
DOM增删改方法(了解)
后面用jquery进行增删改比较方便