JavaScript学习
JavaScript基础知识
1 JS声明和引入
Javascript有两种使用方式：
- 在head标签中使用script标签进行声明,声明代码域，只会作用于当前页面
- 在head标签中使用script标签引入外部声明好的js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的声明和引入</title>
<!-- 声明js代码域-->
<script>
alert("这是我的第一个js！")
</script>
<!-- 引入外部js文件-->
<script src="../js/test.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>JS的声明和引入</h1>
<hr>
</body>
</html>
<!--js的声明：
1、在head标签中使用script标签进行声明,声明代码域，只会作用于当前页面
2、在head标签中使用script标签引入外部声明好的js文件
<script src="相对路径" type="text/javascript" charset="utf-8"></script>
特点：实现js代码的重复使用，避免代码的冗余
注意：js的声明可以在任意位置，一般在head标签里
-->
2 JS变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS变量学习</title>
<!-- 声明js代码域-->
<script>
var a = 4;
var A = 5;
var b = "qw";
var c = 'f';
var d = 19.9;
var e = true;
var sc = new Date();
var b = 3;
var y = null;
alert(typeof y)
</script>
<!--js变量：
1、js中所有变量的声明：
只有var关键字，声明的变量可以存储任意类型
js的变量是严格区分大小写的，字符串单引号双引号都可以。
js中可以声明同名变量不会报错，后面的会将前面的覆盖(特别注意)
声明不赋值，默认是undefined类型
2、js中的数据类型：
number string boolean object null(只能接受对象) undefined(变量声明未赋值)
数据类型判断关键字：typeof
3、js中数据的强转：
使用Number()函数：将其他类型转换为数值类型，转换失败返回NaN(not a number)
使用Boolean()函数：将其他类型转换为布尔类型，有值返回true，无值返回false
4、特殊值：
null：object
undefined：undefined
NaN：number
-->
</head>
<body>
<h1>JS变量学习</h1>
<hr>
</body>
</html>
3 JS运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS运算符</title>
<!-- 声明js代码域-->
<script>
//算数运算符
var a = 123;
var b = 2;
alert(a + b);
//逻辑运算符
var a = true;
alert(!a);
//等值和等同运算符
alert(a==b);
alert(a===b);
</script>
<!--
js运算符：
算数运算符：+ - * / %
number和number
number和boolean true为1，false为0
number和string 不能+
string和string 不能+
string和boolean 不能+
注意：
在算数运算符中，如果两边的数据类型不是number，会使用Number()强转后在进行运算
字符串的加法作为字符的连接，不会运算
逻辑运算符：& && | || !
自增运算符：++ --
关系运算符：<= >= !=
等值运算符：==
先判断类型，类型一致则直接比较，类型不一致则使用Number()强转后进行比较。
等同运算符：===
先判断类型，类型一致在比较内容，内容一致返回true，反之类型不一致返回false。
注意：
null==undefined true
null===undefined false
-->
</head>
<body>
</body>
</html>
4 JS逻辑结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>逻辑结构</title>
<!-- js代码域-->
<script>
var a = 123;
var b = 45;
//if结构
if (a > 10){
alert(a+b);
}
var a = 1;
//switch结构
switch (a) {
case 1:
alert("aaaa");
break;
case 2:
alert("11111");
break;
default:
alert("not know");
}
//循环结构
for (var i = 0; i < 3; i++){
alert("好热啊！")
}
for (var i = 1; i <= 9; i++){
for (var j = 1; j <= i; j++){
document.write(i + "*" + j+ "=" + i*j + "    ");
}
document.write("<br>")
}
</script>
<!--逻辑结构：(和Java的语法相似，具体看例子)
if结构：
单分支 双分支 多分支
选择结构：switch
循环结构：
for循环：
while循环：
do while循环：
-->
</head>
<body>
</body>
</html>
5 JS数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS数组</title>
<!-- js代码域-->
<script>
数组声明
var arr1 = new Array();
arr1[0] = "abc";
alert(arr1);
var arr2 = new Array(5);
alert(arr2.length);
var arr3 = [1,2,5,6,9];
alert(arr3);
//数组的赋值和取值
var arr = [];
arr[0] = 'a';
arr[1] = 12;
arr[2] = true;
arr[3] = new Date();
alert(arr);
length
alert(arr.length);
//遍历数组
for (var i = 0; i < arr.length; i++){
alert(arr[i]);
}
for (var i in arr){
alert(arr[i]);
}
//数组的操作
var arr = [1.4,234,23];
var arr1 = ["egfsfgv"];
//数组的合并
var arr2 = arr.concat(arr1);
alert(arr2.length);
//数组指定间隔符转换字符串
var q = arr2.join(",")
alert(typeof q)
//数组移除最后一个并返回
var a = arr2.pop();
alert(a)
//数组的追加
var d = arr2.push("hskajfdh");
alert(d);
//数组删除指定位置元素
var as = arr2.splice(1,3);
alert(as);
alert(arr2);
</script>
<!-- js数组：
1、数组的声明：
三种方法：
var arr1 = new Array(); 声明一个空数组
var arr2 = new Array(5); 声明一个指定长度的数组
var arr3 = [1,2,5,6,9]; 声明数组并赋值
注意：js中数组的声明不用指定长度，数组长度是不固定的，会随着元素的数量而改变
2、数组的赋值和取值：
可以存储任意类型的数据
角标可以是任意的自然数
如果角标不存在，返回undefined
3、数组的length属性：
查看当前数组的长度
动态的改变数组的长度
注意：如果length大于原有长度，使用空来填充，
如果length小于原有长度，从后面进行截取，后面的数据会被删除。
4、数组的遍历：
普通for循环
for in循环
5、数组常用的操作：
数组的合并：contact()
数组指定间隔符转换字符串：join()
数组移除最后一个并返回：pop()
追加一个元素并返回数组的长度：push()
反转数组：reverse()
移除数组第一个元素并返回：shift()
从开始位置插入数据并返回该数组的长度：unshift()
返回一个已经排序的Array对象：sort()
数组删除指定位置元素并返回：splice(start,delCount)
返回指定对象的原始值：valueOf()
-->
</head>
<body>
</body>
</html>
6 JS函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Function函数</title>
<!-- js代码域-->
<script>
//声明函数
function test1(a1) {
alert(a1);
}
var test2 = new Function("a","b","alert(a+b)");
var test3=function(a2,a4){
alert(a2-a4);
return "JS";
}
//调用函数
test2(23,34);
alert(test2);
//函数返回值
alert(test3(2,4));
//函数作为实参传递
function a(c) {
alert(c())
}
var test=function () {
alert("JS")
}
a(test)
</script>
<!--js函数：
作用：
功能代码块的封装，减少代码的冗余
1、函数的声明
方式一：
function test1(a1) {
alert(a1);
}
方式二：
var test2 = new Function("a","b","alert(a+b)");
以此表明函数是作为对象存在的！
方式三：
var test3=function(a2,a4){
alert(a2-a4);
}
2、函数的参数
js的函数在调用时，可以不赋值或不完全赋值，不会报错，但是实参会依次进行赋值。
3、函数的返回值
如果函数有返回值就直接返回，没有返回值默认返回undefined
4、函数的执行符：()
没有执行符函数就是一个变量，加上小括号则会被执行。
5、函数作为参数传递
function a(c) {
alert(c())
}
var test=function () {
alert("JS")
}
a(test)
注意：js代码的声明区域和执行区域都在js代码域中
-->
</head>
<body>
<h1>JS函数的学习</h1>
</body>
</html>
7 自定义类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义类</title>
<!-- js代码域-->
<script>
//类的声明
function Person(name,age) {
//声明其他对象，实现继承
//Person.prototype=new User();
this.name=name;
this.age=age;
}
function User(name,pwd){
this.name=name;
this.pwd=pwd;
}
//使用prototype，相当于Java的静态方法
Person.prototype.test1=function () {
alert("heihei")
}
//变相的实现了一种特殊的继承
Person.prototype.user=new User();
User.prototype.testU=function () {
alert("User");
}
//类的使用
var p = new Person("Linyuqi",23);
alert(p.name)
//追加的属性
p.address = "xian";
alert(p.address);
//实现链式的访问
p.user.testU();
/* //自定义对象
//方式一：
var sc = new Food();
sc.name="沙拉";
sc.number=20;
方式二：
var az = {};
sc.name="沙拉";
sc.number=20;*/
</script>
<!-- js自定义类：
1、类的声明: function this
2、类的使用:
var p = new Person("Linyuqi",23);
alert(p.name)
可以增加属性：
p.address = "xian";
3、类的继承：prototype
方式一：
实现了不同对象间的数据共享
Person.prototype.test1=function () {
alert("heihei")
}
方式二：
实现一种变相方式的继承
Person.prototype.user=new User();
User.prototype.testU=function () {
alert("User");
}
js自定义对象：
作用：用来存储整体数据
原因：临时创建对象来自定义属性存储数据（Ajax）
一般不会在自定义对象中写函数
-->
</head>
<body>
</body>
</html>
8 常用方法和对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用方法和对象的学习</title>
<!--
js常用的方法和对象学习：
string对象：
使用：字符串.函数
大小写转换：
toUpperCase()
toLowerCase()
字符串截取：
substr()
substring()
查找字符的位置：
indexOf()
lastIndexOf()
date对象：
var d = new Date();
获取的是客户端时间，不能用作服务器时间的校验。
math对象：
使用：Math.函数
random() round() ceil() floor()
global对象：
eval() isNaN() parseInt() parseFloat()
-->
<script>
//string
function testString() {
var str="sadfdsag";
//全部大小写
alert(str.toUpperCase()+" : "+str.toLowerCase());
//字符串截取
str.substring(0,str.length);
str.substr(0,3);
}
//date
function testDate() {
var d = new Date();
//获取当前年份
alert(d.getFullYear());
//月份
alert(d.getMonth());//注意要加1
//日期
alert(d.getDate());
//星期
alert(d.getDay());//星期日是0
//小时
alert(d.getHours());
//分钟
alert(d.getMinutes());
//秒
alert(d.getSeconds());
}
//math
function testMath() {
//随机数字
alert(Math.floor(Math.random()*9000+1000));
}
//global
function testGlobal() {
//eval方法 将字符串转换为js代码
eval("var a=123;")
alert(a);
//isNaN
if (!isNaN(a)){
alert("数字");
}else {
alert("非数字");
}
}
</script>
</head>
<body>
<h3>js常用方法和对象</h3>
<input type="button" id="" value="string" onclick="testString()">
<input type="button" id="" value="date" onclick="testDate()" >
<input type="button" id="" value="math" onclick="testMath()" >
<input type="button" id="" value="global" onclick="testGlobal()" >
</body>
</html>
9 事件机制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件机制</title>
<!--
js的事件机制：
概念：当我们的操作满足一定的条件之后，会出发某类事务的执行
作用：主要结合js的函数使用
内容：
1、单双击事件：用户进行点击动作的html元素
onclick ondblclick
2、鼠标事件：用户进行点鼠标移动的事件
onmouseover onmousemove onmouseout
3、键盘事件：用户进行操作键盘的html元素
onkeyup onkeydown
4、焦点事件
onfocus onblur
5、页面加载事件：body标签
onload
6、值改变事件：select下拉框
onchange
注意：js中添加事件的第一种方式：
在html上直接使用事件属性进行添加，属性为所监听的函数
js中的事件只有在当前html元素上有效
一个html事件可以添加多个不同的事件
一个事件可以监听触发多个函数的执行，但是不同的函数要使用分号隔开
事件的冲突：给html元素添加多个事件时，注意事件的冲突 例如：单击和双击
事件的阻断：
当事件所监听的函数的返回值返回给事件时：
false：阻断当前事件所在的html标签的功能
true：继续执行
超链接调用js函数：
<a href="javascript:函数名()" >调用函数</a>
-->
<!-- js代码域-->
<script>
//单击
function testOnclick() {
alert("单击");
}
//双击
function testOndbclick() {
alert("双击")
}
//鼠标事件
function testOnmouseover() {
alert("鼠标悬停")
}
function testOnmousemove() {
alert("鼠标移动")
}
function testOnmouseout() {
alert("鼠标移出")
}
//键盘事件
function testOnkeyup() {
alert("键盘弹起");
}
function testOnkeydown() {
alert("键盘下压");
}
//焦点事件
function testOnfocus() {
document.getElementById("showdiv").innerHTML="HEHE";
}
function testOnblur() {
alert(" 失去焦点");
}
//页面加载
function testOnload() {
alert("页面加载");
}
testOnload();
</script>
<style>
#showdiv{
width: 120px;
height: 50px;
border: solid 1px red;
background-color: aqua;
}
</style>
</head>
<body>
<input type="button" value="单击" onclick="testOnclick()">
<input type="button" value="双击" ondblclick="testOndbclick()">
<div id="showdiv" onmouseover="testOnmouseover()" onmousemove="testOnmousemove()"
onmouseout="testOnmouseout()">
</div>
键盘弹起<input type="text" onkeyup="testOnkeyup()">
键盘下压<input type="text" onkeydown="testOnkeydown()">
获取焦点 <input type="text" onfocus="testOnfocus()">
失去焦点 <input type="text" onblur="testOnblur()">
</body>
</html>
10 Window对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>window对象的学习</title>
<!--
window对象的学习：
1、可以直接使用，window关键字可以省略
2、框体方法
alert：警告框 提示一个警告信息 没有返回值
confirm：确认框 提示用户选择一项操作 （确认 true/取消 false）
prompt：提示框 提示某个信息的录入或者是收集
点击确认返回用户输入的数据 默认返回空字符串 点击取消返回null
3、定时和间隔执行
setTimeout():指定的时间后执行 参数：函数对象 时间 毫秒 返回当前定时器的id
setInterval()：指定间隔时间执行 参数：函数对象 时间 毫秒 返回当前间隔器的id
clearTimeout():参数id 用来停止指定的定时器
clearInterval()：参数id 用来停止指定的间隔器
4、自窗口方法
window.open("子页面相对路径"，"打开方式"，"配置"):
window.close():只是资源跳转，并不是真正的关闭，关闭open打开的页面
5、子页面调用父页面的函数
window.openner.父页面函数;
常用属性：
地址栏属性：
跳转：window.location.href="www.baidu.com";
刷新：window.location.reload();
历史记录属性：
window.history.forward();前进
window.history.back();后退
window.history.go(index);指定跳转
注意：window.history.go(0)相当于刷新
屏幕属性：
获取分辨率：
window.screen.width;
window.screen.height;
浏览器配置属性：
window.navigator.userAgent; 获取浏览器信息
主体面板属性：
document对象
-->
<!-- js代码域-->
<script>
//框体方法
//警告框
function testAlert() {
window.alert("我是警告框！");
}
//确认框
function testConfirm() {
window.confirm("你确定要删除吗");
}
//提示框
function testPrompt() {
window.prompt("请输入昵称：");
}
var idi;
var ids;
//定时
function testsetTimeOut() {
idi= window.setTimeout(function () {
window.alert("定时执行");
},2000);
}
//间隔
function testsetInterval() {
ids= window.setInterval(function () {
window.alert("jiange执行");
},3000);
}
//停止定时的方法
function clearTimeOut() {
window.clearTimeout(idi);
}
//停止间隔的方法
function clearInterval() {
window.clearInterval(ids);
}
//子页面方法
function testOpen() {
window.open('test.html','newwindow','height=0px width=0px top=0px left=0px toolbar=no menubar=no scrollbars=no resizable=no location=no status=no');
}
//地址栏属性的学习：Location
//跳转
function testLocation() {
window.location.href="www.baidu.com";
}
//刷新
function testLocation2() {
window.location.reload();
}
//历史记录属性：history
//前进
function testHistory() {
window.history.forward();
}
</script>
</head>
<body>
<h3>window对象的学习</h3>
<hr>
<input type="button" value="警告框" onclick="testAlert()">
<input type="button" value="确认框" onclick="testConfirm()">
<input type="button" value="提示框" onclick="testPrompt()">
<input type="button" value="timeout" onclick="testsetTimeOut()">
<input type="button" value="interval" onclick="testsetInterval()">
<input type="button" value="cleartimeout" onclick="clearTimeOut()">
<input type="button" value="clearinterval" onclick="clearInterval()">
<input type="button" value="子页面" onclick="testOpen()">
</body>
</html>
11 Document对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document对象</title>
<!--
Document对象的学习：
概念：浏览器对外提供的支持js的用来操作html文档的一个对象，此对象封存了html文档的所有信息。
基本使用：
1、获取html元素对象
直接获取：
通过id：var inp = window.document.getElementById("uname");
通过name属性值：var iup = window.document.getElementsByName("fav");
通过标签名：var tag = window.document.getElementsByTagName("input");
通过class属性：var class1 = window.document.getElementsByClassName("con");
间接获取：
父子关系：
//获取父级元素
var showdiv = window.document.getElementById("showdiv");
//获取子元素
var childs = showdiv.childNodes;
子父关系：
//获取子元素
var inp = window.document.getElementById("ce");
//获取父元素
var parent = inp.parentNode;
兄弟关系：
//获取目标id
var inup = window.document.getElementById("hc");
//弟获取兄
var preEle=inup.previousSibling;
//兄获取弟
var nextEle=inup.nextSibling;
2、操作html元素对象的属性
固有属性：
获取再修改：
//获取元素
var inp=window.document.getElementById("name");
//修改元素
inp.value="haha";
inp.type="button";
注意：一般不修改name和id。
自定义属性：
//获取元素
var inp=window.document.getElementById("name");
inp.getAttribute() //获取自定义属性
inp.setAttribute() //设置自定义的属性
3、操作html元素对象的内容和样式
获取并修改内容：
//获取元素
var div=window.document.getElementById("sa");
//修改元素内容
div.innerHTML="<p>气温很高！</p>";
注意：alert(div.innerHTML); 获取目标内的所有内容，包括标签
alert(div.innerText); 获取目标内的出标签外的文本内容
获取并修改样式：
通过style属性：
var div = window.document.getElementById("sa");
//添加样式
div.style.fontSize="3px";
//修改样式
div.style.backgroundColor="red";
//删除样式
div.style.border="";
通过class属性：
var dic = window.document.getElementById("cc");
dic.className="";
4、操作html的文档结构
第一种方式：innerHTML()
ds.innerHTML=ds.innerHTML+""; 增加结点
ds.innerHTML=""; 删除结点
注意：该方式不能操作table表格
第二种方式：document.createElement()
//获取元素
var we=window.document.getElementById("we");
//创建input对象
var is = document.createElement("input");
is.type="file";
//创建按钮元素对象
var bn = document.createElement("input");
bn.type="button";
bn.value="删除";
bn.οnclick=function () {
we.removeChild(is);
we.removeChild(bn);
we.removeChild(br);
}
//创建换行符
var br=document.createElement("br");
//将创建的元素放进div中
we.appendChild(is);
we.appendChild(bn);
we.appendChild(br);
5、document操作form元素
获取form表单对象：
var farm=document.getElementById("f");
var form=document.t;
alert(farm===form); //true
获取form表单下所有元素的集合：
表单对象名.elements
form表单的常用方法：
form.submit()
form.reset()
form表单的属性操作：
表单对象名.action=""
表单对象名.method=""
form表单的通用属性：
只读模式：readonly="readonly" //不可以更改数据可以提交
关闭模式：disabled="disabled" //不可以进行任何操作，数据不会提交
6、document操作表格
(后续更新)
7、document对象实现form的校验
js操作多选框和单选框：被选中状态下js中checked属性为true，未选中状态下未false
js操作下拉框：被选中状态下js中selected属性为true，未选中状态下未false
-->
<!-- js代码域-->
<script>
//获取元素对象
function getId() {
var inp = window.document.getElementById("uname");
alert(inp);
}
function getName() {
var iup = window.document.getElementsByName("fav");
alert(iup.length);
}
function getTagName() {
var tag = window.document.getElementsByTagName("input");
alert(tag.length);
}
function getClassName() {
var class1 = window.document.getElementsByClassName("con");
alert(class1.length);
}
//间接获取
//父子关系
function testParent() {
//获取父级元素
var showdiv = window.document.getElementById("showdiv");
//获取子元素
var childs = showdiv.childNodes;
alert(childs.length );
}
function testChild() {
//获取子元素
var inp = window.document.getElementById("ce");
//获取父元素
var parent = inp.parentNode;
alert(parent);
}
function getBrother() {
//获取目标id
var inup = window.document.getElementById("hc");
//弟获取兄
var preEle=inup.previousSibling;
//兄获取弟
var nextEle=inup.nextSibling;
alert(preEle+":"+nextEle);
}
//操作元素固有属性
function testFile() {
//获取元素
var inp=window.document.getElementById("name");
//获取元素属性
alert(inp.type+":"+inp.name+":"+inp.id+":"+inp.value);
}
//修改元素固有的属性值
function changeFile() {
//获取元素
var inp=window.document.getElementById("name");
//修改元素
inp.value="haha";
inp.type="button";
}
function f() {
var inp=window.document.getElementById("name");
inp.getAttribute("type","button");
}
//获取元素内容
function getContext() {
//获取元素
var div=window.document.getElementById("sa");
//获取元素内容
alert(div.innerHTML);
alert(div.innerText);
}
//修改元素内容
function getContext2() {
//获取元素
var div=window.document.getElementById("sa");
//修改元素内容
div.innerHTML="<p>气温很高！</p>";
}
//操作样式
function getContext5() {
var div = window.document.getElementById("sa");
//style
//添加样式
div.style.fontSize="3px";
//修改样式
div.style.backgroundColor="red";
//删除样式
div.style.border="";
//class
var dic = window.document.getElementById("cc");
dic.className="";
}
//innerHTML操作文档结构
function add() {
var ds = window.document.getElementById("ss");
ds.innerHTML=ds.innerHTML+"<div><input type='file' value=''><input type='button' value='删除'οnclick='del(this)' ></div>"
}
function del(btn) {
//获取对象
var ds = window.document.getElementById("ss");
//获取要删除的子div
var cdiv= btn.parentNode;
//父div删除子div
ss.removeChild(cdiv);
}
//document操作
function add1() {
//获取元素
var we=window.document.getElementById("we");
//创建input对象
var is = document.createElement("input");
is.type="file";
//创建按钮元素对象
var bn = document.createElement("input");
bn.type="button";
bn.value="删除";
bn.onclick=function () {
we.removeChild(is);
we.removeChild(bn);
we.removeChild(br);
}
//创建换行符
var br=document.createElement("br");
//将创建的元素放进div中
we.appendChild(is);
we.appendChild(bn);
we.appendChild(br);
}
//操作form元素
function f1() {
var farm=document.getElementById("f");
var form=document.t;
alert(farm===form);
}
</script>
<!-- 声明css代码域-->
<style>
.con{
}
#showdiv{
}
#sa{
width: 100px;
height: 60px;
background-color: aqua;
border: solid 3px blue;
}
</style>
</head>
<body>
<h3>Document对象的学习</h3>
<hr>
<h4>直接获取：</h4>
<div>
<input type="button" value="测试ID" onclick="getId()">
<input type="button" value="测试name" onclick="getName()">
<input type="button" value="测试TagName" onclick="getTagName()">
<input type="button" value="测试ClassName" onclick="getClassName()">
</div>
<input type="text" name="uname" id="uname" value="" >
<input type="checkbox" name="fav" id="" class="con"> 吃饭
<input type="checkbox" name="fav" id="" class="con"> 睡觉
<input type="checkbox" name="fav" id="" class="con"> 打游戏
<h4>间接获取：</h4>
<input type="button" value="测试父子关系" onclick="testParent()">
<div id="showdiv">
<input type="text" id="ce">
<input type="text" id="hc">
<input type="text" id="as">
<input type="text">
</div>
<h3>Documnet操作元素属性</h3>
<input type="button" value="元素属性" onclick="testFile()">
<input type="button" value="xiugai元素属性" onclick="changeFile()">
用户名：<input type="text" name="name" id="name" >
<h3>获取元素内容</h3>
<input type="button" value="测试获取元素内容" onclick="getContext()">
<input type="button" value="测试修改元素内容" onclick="getContext2()">
<input type="button" value="测试修改元素样式" onclick="getContext5()">
<div id="sa" class="cc">
<p>今天天气不错</p>
</div>
<h3>操作文档结构</h3>
<input type="button" value="继续上传" onclick="add()">
<hr>
<div id="ss">
</div>
<hr>
<input type="button" value="继续上传" onclick="add1()">
<hr>
<div id="we">
</div>
<h3>操作form元素</h3>
<input type="button" value="form" onclick="f1()">
<form action="" id="f" name="t">
用户名：<input type="text" name="iname" id="iname" >
密码：<input type="password" name="pwd" id="pwd">
<input type="submit" value="提交">
</form>
</body>
</html>
12 项目案例
12.1 计算器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS计算器</title>
<style>
/*计算器外框*/
#showdiv{
border: solid 1px;
border-radius: 10px;
width: 320px;
height: 380px;
text-align: center;
margin: auto;
background-color: aqua;
}
/*输入框*/
input[type=text]{
margin-top: 20px;
width: 290px;
height: 40px;
font-size: 30px;
}
/*按钮设置*/
input[type=button]{
width: 60px;
height: 50px;
margin-top: 20px;
margin-left: 5px;
margin-right: 5px;
font-size: 30px;
font-weight: bolder;
background-color: orange;
font-family: "微软雅黑";
}
</style>
<!-- js代码域-->
<script>
//声明函数
function test(btn) {
//获取button按钮对象
var num = btn.value;
//根据用户点击执行相应的动作
switch (num) {
case "=":
//eval内置函数
document.getElementById("inp").value=eval(document.getElementById("inp").value);
break;
case "C":
document.getElementById("inp").value="";
break;
default:
//将按钮的值传给input输入框
document.getElementById("inp").value = document.getElementById("inp").value + num;
}
}
</script>
</head>
<body>
<h1>计算器</h1>
<hr>
<div id="showdiv">
<input type="text" id="inp"><br>
<input type="button" value="1" id="btn" onclick="test(this)">
<input type="button" value="2" onclick="test(this)">
<input type="button" value="3" onclick="test(this)">
<input type="button" value="+" onclick="test(this)"><br>
<input type="button" value="4" onclick="test(this)">
<input type="button" value="5" onclick="test(this)">
<input type="button" value="6" onclick="test(this)">
<input type="button" value="-" onclick="test(this)"><br>
<input type="button" value="7" onclick="test(this)">
<input type="button" value="8" onclick="test(this)">
<input type="button" value="9" onclick="test(this)">
<input type="button" value="*" onclick="test(this)"><br>
<input type="button" value="/" onclick="test(this)">
<input type="button" value="0" onclick="test(this)">
<input type="button" value="C" onclick="test(this)">
<input type="button" value="=" onclick="test(this)">
</div>
</body>
</html>
效果图示：
12.2 JS校验登陆
(后续更新)
12.3 模拟淘宝
(后续更新)
13 总结
js可以动态的操作html文件，让html更加形象。
