知识回顾:
JavaWeb之Java基础知识增强
JavaWeb之JDBC
JavaWeb之数据库连接池
JavaWeb之HTML&CSS
概念: JavaScript一门客户端脚本语言
功能:
JavaScript发展史:
JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)
内部JS:
,标签体内容就是js代码外部JS:
,通过src属性引入外部的js文件注意:
可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
可以定义多个。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title >Titletitle>
<script>
alert("Hello World");
script>
<script src="js/a.js">script>
head>
<body>
<input type="text">
body>
html>
//注释内容
/*注释内容*/
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
//单行注释
/*
多行注释1
多行注释2
*/
script>
head>
<body>
body>
html>
number
:数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)string
:字符串。 字符串 “abc” “a” ‘abc’boolean
: true和falsenull
:一个对象为空的占位符undefined
:未定义。如果一个变量没有给初始化值,则会被默认赋值为undefinedDOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量title>
<script >
//定义变量
/* var a = 3;
alert(a);
a = "abc";
alert(a);*/
//定义number类型
var num = 1;
var num2 = 1.2;
var num3 = NaN;
//输出到页面上
document.write(num+"
");
document.write(num2+"
");
document.write(num3+"
");
//定义string类型
var str = "abc";
var str2 = 'edf';
document.write(str+"
");
document.write(str2+"
");
//定义boolean
var flag = true;
document.write(flag+"
");
// 定义null,undefined
var obj = null;
var obj2 = undefined;
var obj3 ;
document.write(obj+"
");
document.write(obj2+"
");
document.write(obj3+"
");
script>
head>
<body>
body>
html>
变量:一小块存储数据的内存空间
Java语言是强类型语言,而JavaScript是弱类型语言。
语法:
typeof运算符:获取变量的类型。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量title>
<script >
//定义变量
/* var a = 3;
alert(a);
a = "abc";
alert(a);*/
//定义number类型
var num = 1;
var num2 = 1.2;
var num3 = NaN;
//输出到页面上
document.write(num+"---"+typeof(num)+"
");
document.write(num2+"---"+typeof(num2)+"
");
document.write(num3+"---"+typeof(num3)+"
");
//定义string类型
var str = "abc";
var str2 = 'edf';
document.write(str+"---"+typeof(str)+"
");
document.write(str2+"---"+typeof(str2)+"
");
//定义boolean
var flag = true;
document.write(flag+"---"+typeof(flag)+"
");
// 定义null,undefined
var obj = null;
var obj2 = undefined;
var obj3 ;
document.write(obj+"---"+typeof(obj)+"
");
document.write(obj2+"---"+typeof(obj2)+"
");
document.write(obj3+"---"+typeof(obj3)+"
");
script>
head>
<body>
body>
html>
一元运算符:只有一个运算数的运算符
++,-- , +(正号)
算数运算符+ - * / % ...
赋值运算符= += -+....
比较运算符
> < >= <= == ===(全等于)
逻辑运算符&& || !
三元运算符? : 表达式
var a = 3;
var b = 4;
var c = a > b ? 1:0;
* 语法:
* 表达式? 值1:值2;
* 判断表达式的值,如果是true则取值1,如果是false则取值2;
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一元运算符title>
<script>
/*
1. 一元运算符:只有一个运算数的运算符
++,-- , +(正号) -(负号)
* ++ --: 自增(自减)
* ++(--) 在前,先自增(自减),再运算
* ++(--) 在后,先运算,再自增(自减)
* +(-):正负号
* 注意:在JS中,如果运算数不是运算符所要求的类型,那么js引擎会自动的将运算数进行类型转换
* 其他类型转number:
* string转number:按照字面值转换。如果字面值不是数字,则转为NaN(不是数字的数字)
* boolean转number:true转为1,false转为0
*/
var num = 3;
var a = ++ num ;
document.write(num);// 4
document.write(a); // 3 4
document.write("
");
var b = +"123abc";
document.write(typeof (b));
document.write(b + 1);
document.write("
");
var flag = + true;
var f2 = + false;
document.write(typeof (flag) + "
");//number
document.write(flag + "
");// 1
document.write(f2 + "
");// 0
script>
head>
<body>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>算数运算符title>
<script>
var a = 3;
var b = 4;
document.write(a+b +"
");
document.write(a-b +"
");
document.write(a*b +"
");
document.write(a/b +"
");
document.write(a%b +"
");
script>
head>
<body>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>比较运算符title>
<script>
/*
* 比较运算符:
* * 比较方式
* 1. 类型相同:直接比较
* * 字符串:按照字典顺序比较。按位逐一比较,直到得出大小为止。
* 2. 类型不同:先进行类型转换,再比较
* * ===:全等于。在比较之前,先判断类型,如果类型不一样,则直接返回false
*/
document.write((3 > 4) +"
");
document.write(("abc" < "acd") +"
");
document.write(("123" == 123) +"
");
document.write(("123" === 123) +"
");
script>
head>
<body>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>比较运算符title>
<script>
/*
* 逻辑运算符:
* &&: 与(短路)
* ||: 或 (短路)
* !:非
* * 其他类型转boolean:
* 1. number:0或NaN为假,其他为真
* 2. string:除了空字符串(""),其他都是true
* 3. null&undefined:都是false
* 4. 对象:所有对象都为true
*
*
*/
var flag = true;
document.write(flag+"
");
document.write(!flag+"
");
document.write("
");
//number
var num = 3;
var num2 = 0;
var num3 = NaN;
document.write(!!num+"
");
document.write(!!num2+"
");
document.write(!!num3+"
");
/*while(1){
}*/
document.write("
");
//string
var str1 = "abc";
var str2 = "";
document.write(!!str1+"
");
document.write(!!str2+"
");
document.write("
");
// null & undefined
var obj = null;
var obj2;
document.write(!!obj+"
");
document.write(!!obj2+"
");
document.write("
");
// null & undefined
var date = new Date();
document.write(!!date+"
");
document.write("
");
obj = "123";
if(obj != null && obj.length > 0){//防止空指针异常
alert(123);
}
//js中可以这样定义,简化书写。
if(obj){//防止空指针异常
alert(111);
}
script>
head>
<body>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三元运算符title>
<script>
var a = 3;
var b = 4;
var c = a > b ? 1:0;
alert(c);
script>
head>
<body>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>for语句title>
<script>
//1 ~ 100 求和 5050
var sum = 0;
for (var i = 1; i <= 100; i ++){
sum += i;
}
alert(sum);
script>
head>
<body>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>switch语句title>
<script>
var a;
switch (a){
case 1:
alert("number");
break;
case "abc":
alert("string");
break;
case true:
alert("true");
break;
case null:
alert("null");
break;
case undefined:
alert("undefined");
break;
}
script>
head>
<body>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>while语句title>
<script>
//1 ~ 100 求和 5050
var sum = 0;
var num = 1;
while(num <= 100){
sum += num;
num ++;
}
alert(sum);
script>
head>
<body>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>特殊语法title>
<script>
//1. 语句以;结尾,如果一行只有一条语句则 ;可以省略 (不建议)
var a = 3;
//alert(a);
/*
2. 变量的定义使用var关键字,也可以不使用
* 用: 定义的变量是局部变量
* 不用:定义的变量是全局变量(不建议)
*/
/* b = 4;
alert(b);*/
var b ;
function fun(){
b = 4;
}
fun();
alert(b);
script>
head>
<body>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>99乘法表title>
<style>
td{
border: 1px solid;
}
style>
<script>
document.write("");
//1.完成基本的for循环嵌套,展示乘法表
for (var i = 1; i <= 9 ; i++) {
document.write("");
for (var j = 1; j <=i ; j++) {
document.write("");
//输出 1 * 1 = 1
document.write(i + " * " + j + " = " + ( i*j) +" ");
document.write(" ");
}
/*//输出换行
document.write("
");*/
document.write(" ");
}
//2.完成表格嵌套
document.write("
");
script>
head>
<body>
body>
html>
1. 创建:
1. var fun = new Function(形式参数列表,方法体); //忘掉吧
2.
function 方法名称(形式参数列表){
方法体
}
3.
var 方法名 = function(形式参数列表){
方法体
}
2. 方法:
3. 属性:
length:代表形参的个数
4. 特点:
1. 方法定义是,形参的类型不用写,返回值类型也不写。
2. 方法是一个对象,如果定义名称相同的方法,会覆盖
3. 在JS中,方法的调用只与方法的名称有关,和参数列表无关
4. 在方法声明中有一个隐藏的内置对象(数组),arguments,封装所有的实际参数
5. 调用:
方法名称(实际参数列表);
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Function对象title>
<script >
/*
Function:函数(方法)对象
1. 创建:
1. var fun = new Function(形式参数列表,方法体); //忘掉吧
2. function 方法名称(形式参数列表){
方法体
}
3. var 方法名 = function(形式参数列表){
方法体
}
2. 方法:
3. 属性:
length:代表形参的个数
4. 特点:
1. 方法定义是,形参的类型不用写,返回值类型也不写。
2. 方法是一个对象,如果定义名称相同的方法,会覆盖
3. 在JS中,方法的调用只与方法的名称有关,和参数列表无关
4. 在方法声明中有一个隐藏的内置对象(数组),arguments,封装所有的实际参数
5. 调用:
方法名称(实际参数列表);
*
*/
//1.创建方式1
var fun1 = new Function("a","b","c","alert(a);");
//调用方法
// fun1(3,4);
// alert(fun1.length);
//2. 创建方式2
function fun2(a , b){
alert(a + b);
}
//fun2(3,4);
//alert(fun2.length);
var fun3 = function(a,b){
alert(a+b);
}
//alert(fun3.length);
// fun3(3,4);
/*fun2 = function(a , b){
alert(a - b);
}*/
function fun2(a , b){
//alert(a - b);
alert(a);
alert(b);
}
//fun2(3,4);
//方法调用
//fun2(1,2);
//fun2(1);
//fun2();
//fun2(1,2,3);
/*
* 求两个数的和
*/
/*function add(a , b){
return a + b;
}*/
/**
* 求任意个数的和
*/
function add (){
var sum = 0;
for (var i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
var sum = add(1,2,3,4);
alert(sum);
//add(1,3);
script>
head>
<body>
body>
html>
1. 创建:
1. var arr = new Array(元素列表);
2. var arr = new Array(默认长度);
3. var arr = [元素列表];
2. 方法
join(参数):将数组中的元素按照指定的分隔符拼接为字符串
push() 向数组的末尾添加一个或更多元素,并返回新的长度。
3. 属性
length:数组的长度
4. 特点:
1. JS中,数组元素的类型可变的。
2. JS中,数组长度可变的。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Array对象title>
<script >
/*
Array:数组对象
1. 创建:
1. var arr = new Array(元素列表);
2. var arr = new Array(默认长度);
3. var arr = [元素列表];
2. 方法
join(参数):将数组中的元素按照指定的分隔符拼接为字符串
push() 向数组的末尾添加一个或更多元素,并返回新的长度。
3. 属性
length:数组的长度
4. 特点:
1. JS中,数组元素的类型可变的。
2. JS中,数组长度可变的。
*
*/
//1.创建方式1
/* var arr1 = new Array(1,2,3);
var arr2 = new Array(5);
var arr3 = [1,2,3,4];
var arr4 = new Array();
document.write(arr1 +"
");
document.write(arr2 +"
");
document.write(arr3 +"
");
document.write(arr4 +"
");*/
var arr = [1,"abc",true];
document.write(arr +"
");
document.write(arr[0] +"
");
document.write(arr[1] +"
");
document.write(arr[2] +"
");
//document.write(arr[10] +"
");
arr[10] = "hehe";
document.write(arr[10] +"
");
document.write(arr[9] +"
");
//alert(arr.length);//11
document.write(arr.join("--")+"
");
arr.push(11);
document.write(arr.join("--")+"
");
script>
head>
<body>
body>
html>
1. 创建:
var date = new Date();
2. 方法:
toLocaleString():返回当前date对象对应的时间本地字符串格式
getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Date对象title>
<script >
/*
Date:日期对象
1. 创建:
var date = new Date();
2. 方法:
toLocaleString():返回当前date对象对应的时间本地字符串格式
getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差
*
*/
var date = new Date();
document.write(date + "
");
document.write(date.toLocaleString() + "
");
document.write(date.getTime() + "
");
script>
head>
<body>
body>
html>
1. 创建:
* 特点:Math对象不用创建,直接使用。 Math.方法名();
2. 方法:
random():返回 0 ~ 1 之间的随机数。 含0不含1
ceil(x):对数进行上舍入。
floor(x):对数进行下舍入。
round(x):把数四舍五入为最接近的整数。
3. 属性:
PI
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Math对象title>
<script >
/*
Math:数学对象
1. 创建:
* 特点:Math对象不用创建,直接使用。 Math.方法名();
2. 方法:
random():返回 0 ~ 1 之间的随机数。 含0不含1
ceil(x):对数进行上舍入。
floor(x):对数进行下舍入。
round(x):把数四舍五入为最接近的整数。
3. 属性:
PI
*
*/
document.write(Math.PI +"
");
document.write(Math.random() +"
");
document.write(Math.round(3.14) +"
");
document.write(Math.ceil(3.14) +"
");
document.write(Math.floor(3.14) +"
");
/**
* 取 1~100之间的随机整数
* 1. Math.random()产生随机数:范围 [0,1)小数
* 2. 乘以 100 --> [0,99.9999] 小数
* 3. 舍弃小数部分 :floor --> [0,99] 整数
* 4. +1 -->[0,99] 整数 [1,100]
*
*
*/
var number = Math.floor((Math.random() * 100)) + 1;
document.write(number);
script>
head>
<body>
body>
html>
1. 正则表达式:定义字符串的组成规则。
1. 单个字符:[]
如: [a] [ab] [a-zA-Z0-9_]
* 特殊符号代表特殊含义的单个字符:
\d:单个数字字符 [0-9]
\w:单个单词字符[a-zA-Z0-9_]
2. 量词符号:
?:表示出现0次或1次
*:表示出现0次或多次
+:出现1次或多次
{m,n}:表示 m<= 数量 <= n
* m如果缺省: {,n}:最多n次
* n如果缺省:{m,} 最少m次
3. 开始结束符号
* ^:开始
* $:结束
2. 正则对象:
1. 创建
1. var reg = new RegExp("正则表达式");
2. var reg = /正则表达式/;
2. 方法
1. test(参数):验证指定的字符串是否符合正则定义的规范
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RegExp对象title>
<script >
/*
2. 正则对象:
1. 创建
1. var reg = new RegExp("正则表达式");
2. var reg = /正则表达式/;
2. 方法
1. test(参数):验证指定的字符串是否符合正则定义的规范
*
*/
//1.
var reg = new RegExp("^\\w{6,12}$");
//2.
var reg2= /^\w{6,12}$/;
/*alert(reg);
alert(reg2);*/
var username = "zhangsan";
//验证
var flag = reg.test(username);
alert(flag);
script>
head>
<body>
body>
html>
1. 特点:全局对象,这个Global中封装的方法不需要对象就可以直接调用。 方法名();
2. 方法:
encodeURI():url编码
decodeURI():url解码
encodeURIComponent():url编码,编码的字符更多
decodeURIComponent():url解码
parseInt():将字符串转为数字
* 逐一判断每一个字符是否是数字,直到不是数字为止,将前边数字部分转为number
isNaN():判断一个值是否是NaN
* NaN六亲不认,连自己都不认。NaN参与的==比较全部问false
eval():讲 JavaScript 字符串,并把它作为脚本代码来执行。
3. URL编码
传智播客 = %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Global对象title>
<script >
/*
Global
1. 特点:全局对象,这个Global中封装的方法不需要对象就可以直接调用。 方法名();
2. 方法:
encodeURI():url编码
decodeURI():url解码
encodeURIComponent():url编码,编码的字符更多
decodeURIComponent():url解码
parseInt():将字符串转为数字
* 逐一判断每一个字符是否是数字,直到不是数字为止,将前边数字部分转为number
isNaN():判断一个值是否是NaN
* NaN六亲不认,连自己都不认。NaN参与的==比较全部问false
eval():讲 JavaScript 字符串,并把它作为脚本代码来执行。
3. URL编码
传智播客 = %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
*
*/
var str = "http://www.baidu.com?wd=传智播客";
var encode = encodeURI(str);
document.write(encode +"
");//%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
var s = decodeURI(encode);
document.write(s +"
");//传智播客
var str1 = "http://www.baidu.com?wd=传智播客";
var encode1 = encodeURIComponent(str1);
document.write(encode1 +"
");//%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
var s1 = decodeURIComponent(encode);
document.write(s1 +"
");//传智播客
var str = "a234abc";
var number = parseInt(str);
//alert(number + 1);
var a = NaN;
document.write(a == NaN);
document.write(isNaN(a));
var jscode = "alert(123)";
eval(jscode);
script>
head>
<body>
body>
html>
功能:控制html文档的内容
获取页面标签(元素)对象:Element
操作Element对象:
DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>JS_Dom的简单学习title>
<h1 id="title">天黑请开灯h1>
head>
<body>
<img id="light" src="../image/off.gif">
<script>
var imgobj = document.getElementById("light");
alert("天黑请开灯");
imgobj.src = "../image/on.gif";
var h1obj = document.getElementById("title");
h1obj.innerHTML = "灯已打开!";
script>
body>
html>
功能: 某些组件被执行了某些操作后,触发某些代码的执行。
如何绑定事件
<body>
<img id="light" src="img/off.gif" onclick="fun();">
<img id="light2" src="img/off.gif">
<script>
function fun(){
alert('我被点了');
alert('我又被点了');
}
function fun2(){
alert('咋老点我?');
}
//1.获取light2对象
var light2 = document.getElementById("light2");
//2.绑定事件
light2.onclick = fun2;
script>
body>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电灯开关title>
head>
<body>
<img id="light" src="img/off.gif">
<script>
/*
分析:
1.获取图片对象
2.绑定单击事件
3.每次点击切换图片
* 规则:
* 如果灯是开的 on,切换图片为 off
* 如果灯是关的 off,切换图片为 on
* 使用标记flag来完成
*/
//1.获取图片对象
var light = document.getElementById("light");
var flag = false;//代表灯是灭的。 off图片
//2.绑定单击事件
light.onclick = function(){
if(flag){//判断如果灯是开的,则灭掉
light.src = "img/off.gif";
flag = false;
}else{
//如果灯是灭的,则打开
light.src = "img/on.gif";
flag = true;
}
}
script>
body>
html>
创建
方法
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
属性:
特点
DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>open_closetitle>
<script>
// window.alert("hello window!");
// var flag = window.confirm("你确定要退出吗?");
// if(flag){
// alert("确定退出!");
// }else{
// alert("取消退出!");
// }
// var result = window.prompt();
// alert(result);
script>
head>
<body>
<input id="openBtn" type="button" value="打开窗口">
<input id="closeBtn" type="button" value="关闭窗口">
<script>
var openBtn = document.getElementById("openBtn");
var closeBtn = document.getElementById("closeBtn");
var newWindow = null;
function openFunc(){
newWindow = open("https://www.baidu.com");
}
openBtn.onclick = openFunc;
function closeFunc(){
newWindow.close();
}
closeBtn.onclick = closeFunc;
var id = window.setTimeout(func1, 2000);
window.clearTimeout(id);
function func1(){
alert("boom~~");
}
var id2 = window.setInterval(func1, 2000);
window.clearInterval(id2);
var h1 = window.history;
var h2 = history;
document.write("
" + h1);
document.write("
" + h2);
script>
body>
html>
创建(获取):
方法:
属性
DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Location对象title>
head>
<body>
<input id="myurl" type="button" value="弹出url">
<input id="skip" type="button" value="去百度">
<script>
var urlshow = document.getElementById("myurl");
urlshow.onclick = function (){
window.location.reload();
alert(window.location);
}
var skiptobaidu = document.getElementById("skip");
skiptobaidu.onclick = function (){
window.location.href = "https://www.baidu.com";
}
script>
body>
html>
DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>history对象title>
head>
<body>
<input id="countHistory" type="button" value="显示本窗口的历史个数">
<a href="02_案例_轮播图.html">轮播图a>
<input id="goForward" type="button" value="前进">
<script>
var countHistory = document.getElementById("countHistory");
countHistory.onclick = function (){
alert(history.length);
}
var goForward = document.getElementById("goForward");
goForward.onclick = function (){
history.forward();
}
script>
body>
html>
02_案例_轮播图.html
DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>轮播图title>
head>
<body>
<img id="image" src="../image/banner_1.jpg" width="100%"><br>
<input id="backward" type="button" value="后退">
<script>
var img = document.getElementById("image");
var num = 1;
function func1(){
num++;
if(num > 3){
num = 1;
}
img.src = "../image/banner_" + num + ".jpg";
}
window.setInterval(func1, 3000)
var backward = document.getElementById("backward");
backward.onclick = function (){
history.back();
}
script>
body>
html>
将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作
W3C DOM 标准被分为 3 个不同的部分:
Document:文档对象
Element:元素对象
Attribute:属性对象
Text:文本对象
Comment:注释对象
Node:节点对象,其他5个的父对象
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document对象title>
head>
<body>
<div id="div1">div1div>
<div id="div2">div2div>
<div id="div3">div3div>
<div class="cls1">div4div>
<div class="cls1">div5div>
<input type="text" name="username">
<script>
/*
Document:文档对象
1. 创建(获取):在html dom模型中可以使用window对象来获取
1. window.document
2. document
2. 方法:
1. 获取Element对象:
1. getElementById() : 根据id属性值获取元素对象。id属性值一般唯一
2. getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组
3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
2. 创建其他DOM对象:
createAttribute(name)
createComment()
createElement()
createTextNode()
3. 属性
*/
//2.根据元素名称获取元素对象们。返回值是一个数组
var divs = document.getElementsByTagName("div");
//alert(divs.length);
//3.根据Class属性值获取元素对象们。返回值是一个数组
var div_cls = document.getElementsByClassName("cls1");
// alert(div_cls.length);
//4.根据name属性值获取元素对象们。返回值是一个数组
var ele_username = document.getElementsByName("username");
//alert(ele_username.length);
var table = document.createElement("table");
alert(table);
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Element对象title>
head>
<body>
<a>点我试一试a>
<input type="button" id="btn_set" value="设置属性">
<input type="button" id="btn_remove" value="删除属性">
<script>
//获取btn
var btn_set =document.getElementById("btn_set");
btn_set.onclick = function(){
//1.获取a标签
var element_a = document.getElementsByTagName("a")[0];
element_a.setAttribute("href","https://www.baidu.com");
}
//获取btn
var btn_remove =document.getElementById("btn_remove");
btn_remove.onclick = function(){
//1.获取a标签
var element_a = document.getElementsByTagName("a")[0];
element_a.removeAttribute("href");
}
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Node对象title>
<style>
div{
border: 1px solid red;
}
#div1{
width: 200px;
height: 200px;
}
#div2{
width: 100px;
height: 100px;
}
#div3{
width: 100px;
height: 100px;
}
style>
head>
<body>
<div id="div1">
<div id="div2">div2div>
div1
div>
<a href="javascript:void(0);" id="del">删除子节点a>
<a href="javascript:void(0);" id="add">添加子节点a>
<script>
//1.获取超链接
var element_a = document.getElementById("del");
//2.绑定单击事件
element_a.onclick = function(){
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div1.removeChild(div2);
}
//1.获取超链接
var element_add = document.getElementById("add");
//2.绑定单击事件
element_add.onclick = function(){
var div1 = document.getElementById("div1");
//给div1添加子节点
//创建div节点
var div3 = document.createElement("div");
div3.setAttribute("id","div3");
div1.appendChild(div3);
}
/*
超链接功能:
1.可以被点击:样式
2.点击后跳转到href指定的url
需求:保留1功能,去掉2功能
实现:href="javascript:void(0);"
*/
var div2 = document.getElementById("div2");
var div1 = div2.parentNode;
alert(div1);
script>
body>
html>
案例: 动态表格的添加与删除
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格title>
<style>
table{
border: 1px solid;
margin: auto;
width: 500px;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
text-align: center;
margin: 50px;
}
style>
head>
<body>
<div>
<input type="text" id="id" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入姓名">
<input type="text" id="gender" placeholder="请输入性别">
<input type="button" value="添加" id="btn_add">
div>
<table id="table">
<caption>学生信息表caption>
<tr>
<th>编号th>
<th>姓名th>
<th>性别th>
<th>操作th>
tr>
<tr>
<td>1td>
<td>令狐冲td>
<td>男td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除a>td>
tr>
<tr>
<td>2td>
<td>任我行td>
<td>男td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除a>td>
tr>
<tr>
<td>3td>
<td>岳不群td>
<td>?td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除a>td>
tr>
table>
<script>
//获取添加按钮对象
var btn_add = document.getElementById("btn_add");
btn_add.onclick = function (){
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
// var obj_id = document.createElement("td");
// var id_node = document.createTextNode(id);
// obj_id.appendChild(id_node);
//
// var obj_name = document.createElement("td");
// var name_node = document.createTextNode(name);
// obj_name.appendChild(name_node);
//
// var obj_gender = document.createElement("td");
// var gender_node = document.createTextNode(gender);
// obj_gender.appendChild(gender_node);
//
// var obj_del = document.createElement("td")
// var a = document.createElement("a");
// a.setAttribute("href", "javascript:void(0);");
// a.setAttribute("onclick", "delTr(this)");
// var text_a = document.createTextNode("删除");
// a.appendChild(text_a);
// obj_del.appendChild(a);
//
// var obj_tr = document.createElement("tr");
// obj_tr.appendChild(obj_id);
// obj_tr.appendChild(obj_name);
// obj_tr.appendChild(obj_gender);
// obj_tr.appendChild(obj_del);
//
// var obj_table = document.getElementById("table");
// obj_table.appendChild(obj_tr);
var obj_table = document.getElementsByTagName("table")[0];
obj_table.innerHTML += "\n" +
" " + id + " \n" +
" " + name + " \n" +
" " + gender + " \n" +
" 删除 \n" +
" "
}
function delTr(obj){
//获取table
var table = obj.parentNode.parentNode.parentNode;
//获取tr
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
script>
body>
html>
//修改样式方式1
div1.style.border = "1px solid red";
div1.style.width = "200px";
//font-size--> fontSize
div1.style.fontSize = "20px";
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTMLDOMtitle>
head>
<body>
<div id="div1">
div
div>
<script >
var div = document.getElementById("div1");
var innerHTML = div.innerHTML;
//alert(innerHTML);
//div标签中替换一个文本输入框
// div.innerHTML = "";
//div标签中追加一个文本输入框
div.innerHTML += "";
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>控制样式title>
<style>
.d1{
border: 1px solid red;
width: 100px;
height: 100px;
}
.d2{
border: 1px solid blue;
width: 200px;
height: 200px;
}
style>
head>
<body>
<div id="div1">
div1
div>
<div id="div2">
div2
div>
<script>
var div1 = document.getElementById("div1");
div1.onclick = function(){
//修改样式方式1
div1.style.border = "1px solid red";
div1.style.width = "200px";
//font-size--> fontSize
div1.style.fontSize = "20px";
}
var div2 = document.getElementById("div2");
div2.onclick = function(){
div2.className = "d1";
}
script>
body>
html>
点击事件:
焦点事件
加载事件:
鼠标事件:
键盘事件:
选择和改变
表单事件:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常见事件title>
<script>
/*
常见的事件:
1. 点击事件:
1. onclick:单击事件
2. ondblclick:双击事件
2. 焦点事件
1. onblur:失去焦点。
* 一般用于表单验证
2. onfocus:元素获得焦点。
3. 加载事件:
1. onload:一张页面或一幅图像完成加载。
4. 鼠标事件:
1. onmousedown 鼠标按钮被按下。
* 定义方法时,定义一个形参,接受event对象。
* event对象的button属性可以获取鼠标按钮键被点击了。
2. onmouseup 鼠标按键被松开。
3. onmousemove 鼠标被移动。
4. onmouseover 鼠标移到某元素之上。
5. onmouseout 鼠标从某元素移开。
5. 键盘事件:
1. onkeydown 某个键盘按键被按下。
2. onkeyup 某个键盘按键被松开。
3. onkeypress 某个键盘按键被按下并松开。
6. 选择和改变
1. onchange 域的内容被改变。
2. onselect 文本被选中。
7. 表单事件:
1. onsubmit 确认按钮被点击。
* 可以阻止表单的提交
* 方法返回false则表单被阻止提交。
2. onreset 重置按钮被点击。
*/
//2.加载完成事件 onload
window.onload = function(){
/*//1.失去焦点事件
document.getElementById("username").onblur = function(){
alert("失去焦点了...");
}*/
/*//3.绑定鼠标移动到元素之上事件
document.getElementById("username").onmouseover = function(){
alert("鼠标来了....");
}*/
/* //3.绑定鼠标点击事件
document.getElementById("username").onmousedown = function(event){
// alert("鼠标点击了....");
alert(event.button);
}*/
/* document.getElementById("username").onkeydown = function(event){
// alert("鼠标点击了....");
// alert(event.button);
if(event.keyCode == 13){
alert("提交表单");
}
}*/
/* document.getElementById("username").onchange = function(event){
alert("改变了...")
}
document.getElementById("city").onchange = function(event){
alert("改变了...")
}*/
/*document.getElementById("form").onsubmit = function(){
//校验用户名格式是否正确
var flag = false;
return flag;
}*/
}
function checkForm(){
return true;
}
script>
head>
<body>
<form action="#" id="form" onclick="return checkForm();">
<input name="username" id="username">
<select id="city">
<option>--请选择--option>
<option>北京option>
<option>上海option>
<option>西安option>
select>
<input type="submit" value="提交">
form>
body>
html>
DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>表格全选title>
<style>
table{
border: 1px solid;
width: 500px;
margin-left: 30%;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
margin-top: 10px;
margin-left: 30%;
}
.over{
background-color: pink;
}
.out{
background-color: white;
}
style>
<script>
window.onload = function (){
document.getElementById("selectAll").onclick = function (){
var cbs = document.getElementsByName("cb");
for(var i=0; i<cbs.length; i++){
cbs[i].checked = true;
}
}
document.getElementById("unselectAll").onclick = function (){
var cbs = document.getElementsByName("cb");
for(var i=0; i<cbs.length; i++){
cbs[i].checked = false;
}
}
document.getElementById("selectRev").onclick = function (){
var cbs = document.getElementsByName("cb");
for(var i=0; i<cbs.length; i++){
cbs[i].checked = !cbs[i].checked;
}
}
document.getElementById("firstCb").onclick = function (){
var cbs = document.getElementsByName("cb");
for(var i=0; i<cbs.length; i++){
cbs[i].checked = this.checked;
}
}
var trs = document.getElementsByTagName("tr");
for(var i=0; i<trs.length; i++){
trs[i].onmouseover = function () {
this.className = "over";
}
trs[i].onmouseout = function () {
this.className = "out";
}
}
}
script>
head>
<body>
<table>
<caption>学生信息表caption>
<tr>
<td><input type="checkbox" name="cb" id="firstCb">td>
<td>编号td>
<td>姓名td>
<td>性别td>
<td>操作td>
tr>
<tr>
<td><input type="checkbox" name="cb">td>
<td>1td>
<td>令狐冲td>
<td>男td>
<td><a href="#">删除a>td>
tr>
<tr>
<td><input type="checkbox" name="cb">td>
<td>2td>
<td>任我行td>
<td>男td>
<td><a href="#">删除a>td>
tr>
<tr>
<td><input type="checkbox" name="cb">td>
<td>3td>
<td>岳不群td>
<td>?td>
<td><a href="#">删除a>td>
tr>
table>
<div>
<input type="button" value="全选" id="selectAll">
<input type="button" value="全不选" id="unselectAll">
<input type="button" value="反选" id="selectRev">
div>
body>
html>
DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>注册页面title>
<style>
/*!*让文字比较紧凑*!*/
/**{*/
/* width: 0px;*/
/* height: 0px;*/
/* box-sizing: border-box;*/
/*}*/
body{
width: 1500px;
background: url("./image/register_bg.png") no-repeat center;
padding-top: 20px;
}
.rg_left{
float: left;
margin: 15px;
}
.rg_center{
float: left;
}
.rg_right{
float: right;
margin: 15px;
}
.rg{
width: 900px;
height: 600px;
background: white;
border: darkgray solid 8px;
/*让div水平居中*/
margin: auto;
}
.rg_left>p:first-child{
font-size: 20px;
color: burlywood;
}
.rg_left>p:last-child{
font-size: 20px;
color: lightgray;
}
.rg_right>p{
font-size: 20px;
}
a{
font-size: 20px;
color: pink;
}
.tb_left{
width: 100px;
text-align: right;
height: 45px;
color: darkgray;
}
.tb_right{
padding-left: 50px;
}
#username,#password,#email,#birthday,#name,#tel,#code{
width: 251px;
height: 32px;
border: 1px solid lightgray;
/*圆角*/
border-radius: 5px;
padding-left: 10px;
}
#code{
width: 100px;
}
#img_check{
height: 32px;
vertical-align: middle;
}
input[type="submit"]{
width: 150px;
height: 40px;
background-color: gold;
border: gold solid 1px;
}
.error{
color: red;
}
#register{
padding-left: 150px;
}
style>
<script>
window.onload = function () {
document.getElementById("form").onsubmit = function (){
//1.用户名校验
//2.密码校验
return checkedUsername() && checkedPassword();
}
//绑定离焦事件
document.getElementById("username").onblur = checkedUsername;
document.getElementById("password").onblur = checkedPassword;
}
//用户名校验方法
function checkedUsername() {
//1.获取校验对象的值
var username = document.getElementById("username").value;
//2.定义正则表达式
var reg = /^\w{6,12}$/
//3.进行校验
var flag = reg.test(username)
//4.对校验结果进行处理
if(flag){
document.getElementById("checkUsername").innerHTML = "";
}else{
document.getElementById("checkUsername").innerHTML = "用户名格式有误" ;
}
return flag;
}
//用户名校验方法
function checkedPassword() {
//1.获取校验对象的值
var password = document.getElementById("password").value;
//2.定义正则表达式
var reg = /^\w{6,12}$/
//3.进行校验
var flag = reg.test(password)
//4.对校验结果进行处理
if(flag){
document.getElementById("checkPassword").innerHTML = "";
}else{
document.getElementById("checkPassword").innerHTML = "密码格式有误" ;
}
return flag;
}
script>
head>
<body>
<div class="rg">
<div class="rg_left">
<p>新用户注册p>
<p>USER REGISTERp>
div>
<div class="rg_center">
<form action="#" method="get" id="form">
<table class="rg_table">
<tr>
<td class="tb_left"><label for="username">用户名label>td>
<td class="tb_right">
<input type="text" name="username" id="username" placeholder="请输入用户名">
<span id="checkUsername" class="error">span>
td>
tr>
<tr>
<td class="tb_left"><label for="password">密码label>td>
<td class="tb_right">
<input type="password" name="password" id="password" placeholder="请输入密码">
<span id="checkPassword" class="error">span>
td>
tr>
<tr>
<td class="tb_left"><label for="email">邮箱label>td>
<td class="tb_right"><input type="email" name="email" id="email" placeholder="请输入Email">td>
tr>
<tr>
<td class="tb_left"><label for="name">用户名label>td>
<td class="tb_right"><input type="text" name="name" id="name" placeholder="请输入真实姓名">td>
tr>
<tr>
<td class="tb_left"><label for="tel">电话号码label>td>
<td class="tb_right"><input type="text" name="tel" id="tel" placeholder="请输入您的手机号码">td>
tr>
<tr>
<td class="tb_left"><label>性别label>td>
<td class="tb_right">
<input type="radio" name="sex" value="male" checked> 男
<input type="radio" name="sex" value="female"> 女
td>
tr>
<tr>
<td class="tb_left"><label for="birthday">生日label>td>
<td class="tb_right"><input type="date" name="birthday" id="birthday">td>
tr>
<tr>
<td class="tb_left"><label for="code">验证码label>td>
<td class="tb_right">
<input type="text" name="code" id="code">
<img id="img_check" src="./image/verify_code.jpg">
td>
tr>
<tr>
<td colspan="2" id="register"><input type="submit" value="注册">td>
tr>
table>
form>
div>
<div class="rg_right">
<p>已有账号?<a href="#">立即登陆a>p>
div>
div>
body>
html>