JavaScript操作DOM节点
包括：JavaScript处理事件、操作节点、操作节点样式
# demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript简介</title>
<script src="js/demo.js"></script>
</head>
<body>
<button onclick="func()">点我</button>
<button onclick="a()">点我2</button>
<button onclick="b()">在parent尾部添加dom节点</button>
<button onclick="c()">在node节点前添加dom节点</button>
<button onclick="d()">删除node节点</button>
<button onclick="e()">改变node节点样式</button>
<div id="parent">
<div id="node">
<p>Java1010</p>
</div>
</div>
</body>
</html>
# demo.js
// alert("您好");
// document.write("JavaScript ! 您好");
/*function speak(){
document.write("我是一个函数");
}
function speak2(message){
document.write("我是一个函数" + message);
}
speak();
speak2("信息传递") */
// 处理事件
function func(){
alert("点击了一下")
}
// 操作节点
function a(){
var node = document.getElementById("node");
var htm = node.innerHTML;
alert(htm);
node.innerHTML = "<p>修改后的内容</p>";
}
// 在parent节点尾部添加节点
function b(){
var parent = document.getElementById("parent");
var p = document.createElement("p");
var content = document.createTextNode("在parent节点尾部添加的内容");
p.appendChild(content);
parent.appendChild(p);
}
// 在node节点前面添加节点
function c(){
var parent = document.getElementById("parent");
var node = document.getElementById("node");
var p = document.createElement("p");
var content = document.createTextNode("在node节点前面添加的内容");
p.appendChild(content);
parent.insertBefore(p, node);
}
// 删除node节点
function d() {
var parent = document.getElementById("parent");
var node = document.getElementById("node");
parent.remove(node);
}
// 改变node节点样式
function e(){
var node = document.getElementById("node")
node.style.color = "red";
}
JavaScript对象
1、JavaScript对象
2、JavaScript字符串对象
3、JavaScript日期对象
4、JavaScript数组对象
JavaScript对象上
# demo2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript对象</title>
<script src="js/demo2.js"></script>
</head>
<body></body>
</html>
# demo2.js
/* function speak(msg){
alert(msg);
}
// 动态添加删除等操作（不好维护）
var a = new Object();
a.name = "zhangsan"
alert(a.name);
a.func = speak;
a.func("hello java1010");
// 删除
// 方法一
a.name = undefined;
a.func = undefined;
alert(a.name);
a.func("hello java1010");
// 方法二
delete a.name;
delete a.func;
alert(a.name);
a.func("hello java1010"); */
function Person(name, age){ // 构造函数
this.name = name;
this.age = age;
function speak(){ // 内置方法
alert("我是张三");
}
this.func = speak;
}
var zhangsan = new Person("张三", 20)
alert(zhangsan.name);
alert(zhangsan.age);
zhangsan.func();
JavaScript对象下
2、JavaScript字符串对象
/*字符串对象*/
var s1 = "实例化字符串方式一"
var s2 = new String("实例化字符串abc方式二");
document.write(s1 + "<br/>");
document.write(s2 + "<br/>");
document.write(s2 + " 的长度是：" + s2.length + "<br/>");
document.write(s2.indexOf("abc", 0) + "<br/>"); // indexOf默认位置从0开始
document.write(s2.replace("abc", "java1010") + "<br/>");
3、JavaScript日期对象
/*日期对象*/
var date = new Date();
document.write(date.getTime() + "<br/>"); // 从1970.1.1到当前时间的毫秒数
document.write(date.getFullYear() + "<br/>"); // 获取四位数字的年份
document.write((date.getMonth() + 1) + "<br/>"); // 获取月份（0-11）
document.write(date.getDate() + "<br/>"); // 获取一个月中的某一天
var today = date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日" + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
document.write(today + "<br/>");
document.write(date.getHours() + "<br/>") // 获取小时（0-23）
document.write(date.getMinutes() + "<br/>") // 获取分钟（0-59）
document.write(date.getSeconds() + "<br/>") // 获取秒 （0-59）
today = date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日";
document.write(today + "<br/>");
var day = date.getDay(); // 一周的某一天 （0-6）
var week;
switch(day){
case 0:week = "星期日";break;
case 1:week = "星期一";break;
case 2:week = "星期二";break;
case 3:week = "星期三";break;
case 4:week = "星期四";break;
case 5:week = "星期五";break;
case 6:week = "星期六";break;
}
document.write(week + "<br/>");
today = date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDay() + "日 " + week + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
document.write(today);
4、JavaScript数组对象
/*数组对象*/
var arr = new Array(); // 可变长度数组
var arr2 = new Array(3); // 不可变
arr[0] = "zhangsan";
arr[1] = "lisi";
arr[2] = "wangwu";
arr[3] = "zhaoliu";
arr[4] = "qianqi";
arr2[0] = 2;
arr2[1] = 1;
arr2[2] = 5;
for (var i = 0;i<arr.length;i++){
document.write(arr[i] + "<br/>");
}
document.write("<hr/>")
var o;
for (o in arr2) { // foreach方式
document.write(arr2[o] + "<br/>");
}
document.write("<hr/>");
document.write("sort"+arr.sort()+"<br/>");
document.write("sort"+arr2.sort()+"<br/>");
document.write("<hr/>");
document.write("join()" + arr.join() +"<br/>"); //数组转化为字符串，默认以逗号串连起来
document.write("join()" + arr2.join(".") +"<br/>"); // 数组转化为字符串，以.号串连起来
document.write("<hr/>");
document.write("concat" + arr.concat(arr2) + "<br/>"); // concat作用：连接合并数组
document.write("<hr/>");
document.write("reserse()" + arr.reverse() + "<br/>"); // 反转
JavaScript常用函数 -------不属于任何一个内置对象的函数
decodeURI() 解码某个编码的URI
decodeURIComponent() 解码一个编码的URI组件anonosiineInsT
encodeURI() 把字符串编码为URI
encodeURIComponent() 把字符串编码为URI组件
escape() 对字符串进行编码
**eval() 计算jis.字符串，并把它作为脚本代码来执行 ** #######################################
isFinite() 检查某个值是否为有穷大的数
isNaN() 检查某个值是否为非数字
Number() 把对象值转换为数字
parseFloat() 解析一个字符串并返回一个浮点数
parselnt() 解析一个字符串并返回一个整数String(把对象的值转换为字符串
unescape() 对由escapse(编码的字符串进行解码
JavaScript中的window对象常用方法
弹窗：prompt()、confirm()、alret()、
var a = "1+2+3+4+5+6";
var va1 = eval(a);
alert(va1); // 21
定时函：setTimeout() 执行一次；setInterval() 执行多次
/*
function a(){
alert("3秒后弹出");
}
window.setTimeout("a()", 3000);
*/
function todayFunc(){
var date = new Date();
var today = date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日" + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
document.getElementById("today").innerHTML=today
}
window.setInterval("todayFunc()", 1000)
打开页面函数：open()
window.open("https://www.baidu.com")
JavaScript中Window对象常用事件
window.onload; 文档加载完毕时
window.onload=function(){
alert("文档加载完毕");
}
windows.onresize(); 窗口大小变化时
window.onresize=function(){
alert("窗口大小发生了变化");
}