【JavaScript 基础】
- JavaScript 是一门跨平台、面向对象的脚本语言,用来控制页面行为的,它能使页面变为可交互的
- W3C 标准:网页主要有三部分组成
- 结构:HTML
- 表现:CSS
- 行为:JavaScript
- JavaScript 和 Java 是完全不同的语言,不论是概念还是设计。但是基础语法类似
- JavaScript(简称:JS)在1995年由 Brendan Eich 发明,并于1977年成为一部 ECMA 标准
- ECMAScript 6 (ES6)是最新的 JavaScript 版本(发行于2015年)
一、 JavaScript 引入方式
- 内部脚本:将 JavaScript 代码定义在 HTML 页面中
- 外部脚本:将 JavaScript 代码定义在外部 JavaScript 文件中,然后引入到 HTML 页面中
1. 内部脚本
内部脚本:将 JavaScript代码定义在 HTML 页面中
在 HTML 中,JavaScript 代码必须位于 <script>
与 </script>
标签之间
<script>
alert("Hello JavaScript!");
</script>
提示:
- 在 HTML 文档中可以在任意地方,放置任意数量的
<script>
- 一般把脚本置于
<body>
元素底部,可改善显示速度,因为脚本执行会拖慢显示
2. 外部脚本
将 JavaScript 代码定义在外部 JavaScript 文件中,然后引入到 HTML 页面中
- 外部文件:demo.js
alert("Hello JavaScript");
- 引入外部 JavaScript 文件
<script src="../js/demo.js"></script>
注意:
- 外部脚本不能包含
<script>
标签 <script>
标签不能自闭合
二、 JavaScript 基础语法
书写语法、输出语句、变量、数据类型、运算符、流程控制语句、函数
1. 书写语法
- 区分大小写:与 Java 一样,变量名、函数名以及一些其他的东西都是区分大小写的
- 每行结尾的分号可有可无
- 注释:
- 单行注释:// 注释内容
- 多行注释:/* 注释内容 */
- 大括号表示代码块
2. 输出语句
- 使用
window.alert()
写入警告框 - 使用
document.write()
写入 HTML 输出 - 使用
console.log()
写入浏览器控制台
window.alert(); // 写入警告框
document.write(); // 写入 HTML 输出
console.log(); // 写入浏览器控制台
3. 变量
- JavaScript 中用
var
关键字(variable 的缩写)来声明变量- 作用域:全局变量
- 变量可以重复定义
var test=20;
test="张三";
- JavaScript 是一门弱类型语言,变量可以存放不同类型的值
- 变量名需要遵循如下规则:
- 组成字符可以是任意字母、数字、下划线(_)、或美元符号($)
- 数字不能开头
- 建议使用驼峰命名法
- ECMAScript 6 新增了
let
关键字来定义变量,它的语法类似于var
,但是所有声明的变量,只在let
关键字所在的代码块内有效,且不允许重复声明 - ECMAScript 6 新增了
const
关键字,用来声明一个只读的常量,一旦声明,常量的值就不能改变
<script>
// 定义 number 类型
var num1=1;
var num2=1.2;
var num3=NaN;
// 输出到页面上
document.write(num1+"<br>");
document.write(num2+"<br>");
document.write(num3+"<br>");
// 定义 string 类型
var str1="abc";
var str2='edf';
document.write(str1+"<br>");
document.write(str2+"<br>");
// 定义 boolean 类型
var flag=true;
document.write(flag+"<br>");
// 定义 null undefined 类型
var obj1=null;
var obj2=undefined;
var obj3;
document.write(obj1+"<br>");
document.write(obj2+"<br>");
document.write(obj3+"<br>");
</script>
4. 数据类型
JavaScript 中分为:原始类型和引用类型
- 5种原始类型:
- number:数字(整数、小数、NaN(Not a Number))
- string:字符、字符串、单双引皆可
- boolean:布尔:true、false
- null:对象为空
- undefined:当声明的变量未初始化时,该变量的默认值是 undefined
- 使用 typeof 运算符可以获取数据类型:
alert(typeof age);
- 引用数据类型:对象
<script>
// 定义 number 类型
var num1=1;
var num2=1.2;
var num3=NaN;
// 输出到页面上
document.write(num1+"------"+typeof (num1)+"<br>");
document.write(num2+"------"+typeof (num2)+"<br>");
document.write(num3+"------"+typeof (num3)+"<br>");
// 定义 string 类型
var str1="abc";
var str2='edf';
document.write(str1+"------"+typeof (str1)+"<br>");
document.write(str2+"------"+typeof (str2)+"<br>");
// 定义 boolean 类型
var flag=true;
document.write(flag+"------"+typeof (flag)+"<br>");
// 定义 null undefined 类型
var obj1=null;
var obj2=undefined;
var obj3;
document.write(obj1+"------"+typeof (obj1)+"<br>");
document.write(obj2+"------"+typeof (obj2)+"<br>"); // null 的数据类型是一个 bug,但仍然说得通
document.write(obj3+"------"+typeof (obj3)+"<br>");
</script>
5. 运算符
- 一元运算符:++、–、+、- …
- 算术运算符:+、-、*、/、%
- 赋值运算符:=、+=、-= …
- 关系运算符:>、<、>=、<=、!=、 == 、 === …
- 逻辑运算符:&&、||、!
- 三元运算符:
条件表达式?true_value:false_value
(1) 一元运算符
++
或--
为自增或自减
+
或-
为正号或负号
- ++(–) :在前,先自增(自减),再运算
- ++(–) :在后,先运算,再自增(自减)
<script>
var num=3;
var a=num++;
document.write(num); // 4
document.write(a); // 3
</script>
<script>
var num=3;
var a=++num;
document.write(num); // 4
document.write(a); // 4
</script>
- +(-)正号(负号)
- 注意:在 javaScript 中如果运算数不是运算所要求的类型,那么 javaScript 引擎会自动的将运算数进行类型转换
<script>
var b=+"123";
document.write(typeof(b));
document.write(b+1);
</script>
(2) 算数运算符
<script>
var a=3;
var b=4;
document.write(a+b+"<br>");
document.write(a-b+"<br>");
document.write(a*b+"<br>");
document.write(a/b+"<br>");
document.write(a%b+"<br>");
</script>
(3) 比较运算符
- 比较方式:
- 类型相同,直接比较
- 字符串:按照字典顺序比较,按位逐一比较,直到得出大小为止
- 类型不同:先进行类型转换,再比较
- 类型相同,直接比较
<script>
document.write((3>4)+"<br>"); // false
document.write(("abc"<"acd")+"<br>"); // true
document.write(("122"<123)+"<br>"); // true
</script>
区分:
==
:
- 判断类型是否一样,如果不一样,则进行类型转换
- 转换完之后,再去比较其值
===
:
- 判断类型是否一样,如果不一样,直接返回 false
- 如果类型一样,则比较其值
<script>
document.write(("123"==123)+"<br>"); // true
document.write(("123"===123)+"<br>"); // false
</script>
(4) 逻辑运算符
- && :与(具有短路特性)
- || :或(具有断路特性)
- ! :非
(5) 三元运算符
- 表达式?值1:值2;
- 判断表达式的值,如果是 true 则取值1,如果是 false 则取值2。
<script>
var a=3;
var b=4;
var c=a>b?1:0;
alert(c);
</script>
6. 类型转换
- 其他类型转为 number 类型:
- String:按照字符串的字面值,转为数字,如果字面值不是数字,则转为 NaN ,还可以使用方法进行类型转换,一般使用
parseInt()
方法 - boolean:true 转换为 1 ,false 转换为 0
- String:按照字符串的字面值,转为数字,如果字面值不是数字,则转为 NaN ,还可以使用方法进行类型转换,一般使用
<script>
var b=+"abc";
document.write(typeof(b));
document.write(b+1);
</script>
- 其他类型转为 boolean 类型:
- number:0 和 NaN 转为 false,其他数字转换为 true
- String:空字符串转为 false,其它字符串转为 true
- null:转换为 false
- undefined:转换为 false
- 所有对象都转化为 true
<script>
// boolean 类型
var a=true;
document.write(a+"<br>"); // true
document.write(!a+"<br>"); // false
document.write("<hr>");
// number:0 和 NaN 转为 false,其他数字转换为 true
var b=3;
var c=0;
var d=NaN;
document.write(!b+"<br>"); // false
document.write(!!b+"<br>"); // true
document.write(!!c+"<br>"); // false
document.write(!!d+"<br>"); // false
document.write("<hr>");
// String:空字符串转为 false,其它字符串转为 true
var str1="abc";
var str2="";
document.write(!!str1+"<br>"); // true
document.write(!!str2+"<br>"); // false
document.write("<hr>");
// null:转换为 false undefined:转换为 false
var obj1=null;
var obj2;
document.write(!!obj1+"<br>"); // false
document.write(!!obj2+"<br>"); // false
document.write("<hr>");
// 所有对象都转化为 true
var data=new Date();
document.write(!!data+"<br>"); // true
document.write("<hr>");
// 具有所有对象都转化为 true 的特性时可以简化代码
if(obj1!=null&&obj1.length>0){ // 如果 obj1 是对象或者是字符串的判断写法
alert(123);
}
if (obj1){ // 防止空指针异常,相当于执行了多项操作
alert(456);
}
</script>
7. 特殊语法
- 语句的定义以分号结尾,如果一行只有一条语句则分号可以省略(不建议)
- 变量的定义使用 var 关键字,也可以不使用,使用时,定义的变量是全局变量,不使用时,定义的变量是全局变量(不建议)
8. 流程控制语句
-
if
-
switch
-
for
-
while
-
do…while
-
在 Java 中,switch 语句可以接收的数据类型:byte、int、short、char、枚举(JDK1.5)、String(JDK1.7)
-
在 JavaScript 中,可以接收任意的原始数据类型
<script>
var a=1;
switch (a){
case 1:
alert("number");
break;
case "abc":
alert("string");
break;
case true:
alert("boolean");
break;
case null:
alert("null");
break;
case undefined:
alert("undefined");
break;
}
</script>
9. 函数
函数(方法)是被设计为执行特定任务的代码块
- 定义:JavaScript 函数通过
function
关键词进行定义,语法为:
function functionName(参数1,参数2)P{
要执行的代码;
}
- 注意:
- 形式参数不需要类型,因为 JavaScript 是弱类型语言
- 返回值也不需要定义类型,可以在函数内部直接使用
return
返回即可
function add(a,b){
return a+b;
}
- 调用:函数名称(实际参数列表)
let result=add(1,2);
- 定义方式二:
var functionName=function(参数列表){
要执行的代码;
}
var add=function(a,b){
return a+b;
}
- 调用:JavaScript 中,函数调用可以传递任意个参数
let result=add(1,2,3);
10. 练习:九九乘法表
<style>
td{
border: 1px solid;
}
</style>
<body>
<script>
document.write("<table align='center'>")
for (var i = 1; i < 10; i++) {
document.write("<tr>");
for (var j = 1; j <= i; j++) {
document.write("<td>");
document.write(i+"×"+j+"="+i*j+"   ");
document.write("</td>");
}
// document.write("<br>");
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
三、 JavaScript 对象
基本对象:
Function
Array
Boolean
Date
Math
Number
String
RegExp
Global
1. Function 函数(方法)对象
- 创建:
var fun=new Function(形式参数列表,方法体);
(不推荐使用)function 方法名称(形式参数列表){方法体;}
var 方法名=function(形式参数列表){方法体;}
- 方法:
- 属性:
length :代表形参的个数(fun.length
) - 特点:
- 方法定义时,形参的类型不用写,返回值类型也不用写
- 方法是一个对象,如果定义名称相同的方法,会进行覆盖
- 在 JavaScript 中,方法的调用只与方法的名称有关,和参数列表无关
- 在方法的声明中有一个隐藏的内置对象(数组),叫做:arguments ,封装了所有的实际参数
- 调用:
方法名称(实际参数列表);
<script>
// 1. 创建
var fun1=new Function("a","b","alert(a);");
// 2. 调用
fun1(3,4);
</script>
<script>
// 1. 创建
function fun2(a,b){
alert(a*b);
}
// 2. 调用
fun2(3,4);
</script>
<script>
// 1. 创建
var fun3=function (a,b){
alert(a+b);
}
// 2. 调用
fun3(3,4);
</script>
<script>
// 求任意个数数的和
function add(){
var sum=0;
for (var i = 0; i < arguments.length; i++) {
sum+=arguments[i];
}
return sum;
}
var sum=add(1,2,3);
alert(sum);
</script>
2. Array 数组对象
JavaScript Array 对象用于定义数组
- 定义:
var 变量名=new Array(元素列表); // 方式一
var arr=new Array(1,2,3);
var 变量名=[元素列表]; // 方式二
var arr=[1,2,3];
var 变量名=new Array(默认长度); // 方式三
- 访问:
arr[索引]=值;
arr[0]=1;
<script>
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+"<br>");
document.write(arr2+"<br>");
document.write(arr3+"<br>");
document.write(arr4+"<br>");
</script>
- 特点:JavaScript 数组类似于 Java 集合,长度、类型都可变
<script>
var arr=[1,"abc",true];
document.write(arr+"<br>");
document.write(arr[0]+"<br>");
document.write(arr[1]+"<br>");
document.write(arr[2]+"<br>");
document.write(arr[3]+"<br>");
</script>
- 属性:
- 方法:
<script>
var arr=[1,"abc",true];
document.write(arr.join("+")+"<br>"); // 如果不声明连接符则默认为逗号
arr.push(1);
document.write(arr.join("--")+"<br>");
</script>
3. String 对象
- 定义:
var 变量名=new String(s); // 方式一
var 变量名=s; // 方式二
- 属性:
length :字符串的长度 - 方法:
charAt() :返回在指定位置的字符
IndexOf() :检索字符串
等方法…
4. Date 日期对象
- 创建:
var date=new Date();
- 方法:
toLocaleString()
:返回当前的 date 对象对应的时间本地字符串格式getTime()
:获取毫秒值,返回当前时期对象描述的时间到1970年1月1日零点的毫秒差值
<script>
var date=new Date();
document.write(date+"<br>");
document.write(date.toLocaleString()+"<br>");
document.write(date.getTime()+"<br>");
</script>
5. Math 数学对象
- 创建:
- 特点:Math 对象不用创建,直接使用。
Math.方法名()
- 特点:Math 对象不用创建,直接使用。
- 方法:
random()
:返回 0~1 之间的随机数,含0不包含1ceil()
:对数进行向上舍入floor()
:对数进行向下舍入round()
:把数字进行四舍五入
- 属性:
PI
<script>
document.write(Math.PI+"<br>");
document.write(Math.random()+"<br>");
document.write(Math.round(3.14)+"<br>");
document.write(Math.ceil(3.14)+"<br>");
document.write(Math.floor(3.14)+"<br>");
</script>
// 取 1~100 之间的随机整数
var number=Math.floor(Math.random()*100)+1;
document.write(number);
6. RegExp 正则表达式对象
正则表达式:定义字符串的组成规则
- 单个字符:用
[]
表示:如:[a] 、[ab]、[a-zA-Z0-9_]- 特殊符号代表特殊含义的单个字符:
\d
:单个数字字符[0-9]
\w
:单个单词字符[a-zA-Z0-9_]
- 特殊符号代表特殊含义的单个字符:
- 量词符号:
?
:表示出现0次或1次*
:表示出现0次或多次(包含1次)+
:表示出现1次或多次{m,n}
:表示出现数量大于等于 m,小于等于 n- m 如果缺省:
{,n}
:最多出现 n 次 - n 如果缺省:
{m,}
:最少出现 m 次
- m 如果缺省:
- 开始结束符号:
^
:开始$
:结束
正则对象:
- 创建:
var reg=new RegExp("正则表达式");
var reg=/正则表达式/;
- 方法:
test(参数);
验证指定的字符串是否符合正则定义的规范
<script>
var reg1=new RegExp("^\\w{6,12}$");
var reg2=/^w{6,12}$/;
alert(reg1);
alert(reg2);
// 验证
var username="JohnSmith"
var flag=reg2.test(username);
alert(flag);
</script>
7. Global 对象
- 特点:全局对象,这个 Global 中封装的方法不需要对象就可以直接调用:
方法名();
- 方法:
encodeURI()
:url 编码decodeURI()
:url 解码encodeURIComponent()
:url 编码,编码的字符更多decodeURIComponent()
:url 解码parseInt()
:将字符串转为数字(逐一判断每一个字符是否为数字,直到不是数字为止,将前面数字部分转为 number 类型)isNaN()
:判断一个值是否是 NaN(NaN 六亲不认,凡是有 NaN 参与的关于==
的运算结果都是 false,包括自己)eval()
:将 JavaScript 字符串,并把它作为脚本代码来执行
- URL 编码:
百度一下=%E7%99%BE%E5%BA%A6%E4%B8%80%E4%B8%8B
<script>
var str1="https://www.baidu.com?wd=百度一下";
var encode1=encodeURI(str1);
document.write(encode1+"<br>"); // https://www.baidu.com?wd=%E7%99%BE%E5%BA%A6%E4%B8%80%E4%B8%8B
var s1=decodeURI(encode1);
document.write(s1+"<br>");
var str2="\"https://www.baidu.com?wd=百度一下\"";
var encode2=encodeURIComponent(str2);
document.write(encode2+"<br>"); // %22https%3A%2F%2Fwww.baidu.com%3Fwd%3D%E7%99%BE%E5%BA%A6%E4%B8%80%E4%B8%8B%22
var s2=decodeURIComponent(encode2);
document.write(s2+"<br>");
</script>
var str="123abc";
var number=parseInt(str);
alert(number+1);
var a=NaN;
document.write(a==NaN);
document.write(isNaN(a));
var jscode="alert(123)";
eval(jscode);
8. 自定义对象
- 格式:
var 对象名称={
属性名称1:属性值1;
属性名称2:属性值2;
......
函数名称:function(形参列表){}
......
}
var person={
name:"张三";
age:23;
eat:function(){
alert("吃饭");
}
}
9. BOM 对象
- Browser Object Model :浏览器对象模型
- JavaScript 将浏览器的各个组成部分封装为对象
- 组成:
- Window :浏览器窗口对象
- Navigator :浏览器对象
- Screen :屏幕对象
- History :历史记录对象
- Location :地址栏对象
(1) Window 窗口对象
- Window :浏览器对象
- 获取:不需要创建,直接使用 window 对象,其中 window,可以省略
window.alert("abc");
- 属性:①获取其他 BOM 对象;②获取 DOM 对象(document)
属性 | 作用 |
---|---|
history | 对 History 对象的只读引用,请参阅 History 对象 |
Navigator | 对 Navigator 对象的只读引用,请参阅 Navigator 对象 |
Screen | 对 Screen 对象的只读引用,请参阅 Screen 对象 |
location | 用于窗口或框架的 Location 对象,请参阅 Location 对象 |
document | 每个载入浏览器的 HTML 文档都会成为 Document 对象 |
- 方法:
方法 | 作用 |
---|---|
alert() | 显示带有一段消息和一个确认按钮的警告框 |
confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框(如果用户点击确定按钮,则方法返回 true,如果用户点击取消按钮,则方法返回 false) |
prompt() | 显示可提示用户输入的对话框(返回值获取用户输入的值) |
open() | 打开一个新的浏览器窗口(返回一个新的 window 对象) |
close() | 关闭浏览器窗口(谁调用关闭谁) |
setInterval() | 按照指定的周期(以毫秒计)来调用函数或计算表达式 |
clearInterval() | 取消由 setInterval() 设置的 timeout |
setTimeout() | 在指定的毫秒数后调用函数或计算表达式(参数:JavaScript 代码或者方法对象,毫秒值;返回值:唯一标识,用于取消定时器) |
clearTimeout() | 取消由 setTimeout() 方法设置的 timeout |
<body>
<input id="openBtn" type="button" value="打开一个窗口">
<input id="closeBtn" type="button" value="关闭窗口">
<script>
var newWindow;
var openBtn=document.getElementById("openBtn");
openBtn.onclick=function(){
newWindow=open("https://www.baidu.com");
}
var closeBtn=document.getElementById("closeBtn");
closeBtn.onclick=function(){
newWindow.close();
}
</script>
</body>
<script>
/*
* 定时器:
* setTimeout(function,毫秒值):在一定的时间间隔后执行一个 function 只执行一次
* setInterval(function,毫秒值);在一定的时间间隔后执行一个 function,循环执行*/
setTimeout(function (){
alert("你好!");
},3000);
setInterval(function () {
alert("你好!!!");
},2000);
</script>
var h1=window.history;
var h2=history;
alert(h1);
alert(h2);
window.document.getElementById("");
document.getElementById("");
(2) History 对象
- History :历史记录
- 获取:使用 window.history 获取,其中 window 可以省略
window.history.function();
history.function();
- 方法:
方法 | 作用 |
---|---|
back() | 加载 history 列表中的前一个 URL |
forward() | 加载 history 列表中的下一个 URL |
go(参数) | 加载 history 列表中的某个具体页面(参数:正数:前进几个历史记录;负数:后退几个历史记录) |
- 属性:
- length :返回当前窗口历史列表中的 URL 数量
<body>
<input type="button" id="btn" value="获取历史记录个数">
<script>
var btn=document.getElementById("btn");
btn.onclick=function () {
var length=history.length;
alert(length);
}
</script>
</body>
(3) Location 地址栏对象
- Location :地址栏对象
- 获取:使用
window.location
获取,其中 window 可以省略
window.location.function();
location.function();
- 属性:
- href :设置或返回完整的 URL
- 方法:
reload()
:重新加载当前文档,刷新
<body>
<input id="btn" type="button" value="刷新">
<input id="go" type="button" value="百度一下">
<script>
var btn=document.getElementById("btn");
btn.onclick=function(){
location.reload();
}
var href=location.href;
var go=document.getElementById("go");
go.onclick=function () {
location.href="https://www.baidu.com";
}
</script>
</body>
(4) 练习
10. DOM 对象
-
Document Object Model 文档对象模型
-
将标记语言的各个组成部分封装为对象
- Document :整个文档对象
- Element :元素对象
- Attribute :属性对象
- Text :文本对象
- Comment :注释对象
-
JavaScript 通过 DOM,就能够对 HTML 进行操作了
- 改变 HTML 元素的内容
- 改变 HTML 元素的样式(css)
- 对 HTML DOM 事件做出反应
- 添加和删除 HTML 元素
-
DOM 是 W3C (万维网联盟)的标准
-
DOM 定义了访问 HTML 和 XML 文档的标准
-
W3C DOM 标准被分为3个不同的部分:
- 核心 DOM :针对任何结构化文档的标准模型
- Document :整个文档对象
- Element :元素对象
- Attribute :属性对象
- Text :文本对象
- Comment :注释对象
- Node :节点对象(是另外5个的父对象)
- XML DOM :针对 XML 文档的标准模型
- HTML DOM :针对 HTML 文档的标准模型
- Image :
<img>
- Button :
<input type='button'>
- Image :
- 核心 DOM :针对任何结构化文档的标准模型
(1) 简单使用
① 获取 Element 对象
- Element :元素对象
- 获取:使用 Document 对象的方法来获取
getElementById()
:根据 id 属性获取,返回一个 Element 对象getElementByTagName()
:根据标签名称获取,返回 Element 对象数组getElementByName()
:根据 name 属性值获取,返回 Element 对象数组getElementByClassName()
:根据 class 属性值获取,返回 Element 对象数组
② 使用
- Element :元素对象
- 修改属性值:
- 明确获取的对象是哪一个
- 查看 API 文档,找出其中有哪些属性可以设置
- 修改标签体内容:
- 属性:innerHTML
- 修改属性值:
(2) 核心 DOM 模型
重点详解:
- Document :文档对象
- 创建(获取):在 HTML DOM 模型中可以使用 window 对象来获取,window 可以省略
- 方法:
- 获取 Element 对象:
getElementById()
:根据 ID 属性值获取元素对象,ID 属性值一般是唯一的getElementsByTagName()
:根据元素名称获取元素对象们,返回值是一个数组getElementsByClassName()
:根据 Class 属性值获取元素对象们,返回值是一个数组getElementsByName()
:根据 name 属性值获取元素对象们,返回值是一个数组
- 创建其他 DOM 对象:
createAttribute(name);
createComment();
createElement();
createTextNode();
- 获取 Element 对象:
- 属性:
- Element :元素对象
- 创建(获取):通过 document 来获取和创建
- 方法:
removeAttribute()
:删除指定属性setAttribute()
:设置属性
- Node :节点对象(其他5个的父对象)
- 特点:所有 DOM 对象都可以被认为是一个节点
- 方法:
- 增删改查 DOM 树:
appendChild()
:向节点的子节点列表的结尾添加新的子节点removeChild()
:删除(并返回)当前节点的指定子节点replaceChild()
:用新节点替换一个子节点
- 增删改查 DOM 树:
- 属性:
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div class="clc1">div4</div>
<div class="clc1">div5</div>
<input type="text" name="username">
<script>
var divs = document.getElementsByTagName("div");
alert(divs.length);
var div_clc = document.getElementsByClassName("clc1");
alert(div_clc.length);
var ele_username = document.getElementsByName("username");
alert(ele_username.length);
</script>
</body>
var table=document.createElement("table");
alert(table);
<body>
<a>点击</a>
<input type="button" id="btn_set" value="设置属性">
<input type="button" id="btn_remove" value="移除属性">
<script>
var btn_set=document.getElementById("btn_set");
btn_set.onclick=function () {
var element_a=document.getElementsByTagName("a")[0]; // 返回的是一个数组,但明确知道是一个标签
element_a.setAttribute("href","https://www.baidu.com");
}
var btn_remove=document.getElementById("btn_remove");
btn_remove.onclick=function () {
var element_a=document.getElementsByTagName("a")[0];
element_a.removeAttribute("href");
}
</script>
</body>
<style>
div{
border: 1px solid red;
}
#div1{
width: 200px;
height: 200px;
}
#div2{
width: 100px;
height: 100px;
}
#div3{
width: 100px;
height: 100px;
}
</style>
<body>
<div id="div1">
<div id="div2">div2</div>
div1
</div>
<a href="javascript:void(0);" id="del">删除子节点</a>
<!--这种方式不可以实现-->
<!-- 超链接标签的功能:1. 可以被点击,样式 2. 点击后跳转到 href 指定的 url
这里的需求:保留一功能,去掉二功能,实现: href="javascript:void(0);"-->
<!--<input type="button" id="del" value="删除子节点">-->
<a href="javascript:void(0);" id="add">添加子节点</a>
<script>
var element_a=document.getElementById("del");
element_a.onclick=function () {
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
div1.removeChild(div2);
}
var element_add=document.getElementById("add");
element_add.onclick=function () {
var div1=document.getElementById("div1");
var div3=document.createElement("div");
div3.setAttribute("id","div3");
div1.appendChild(div3);
}
var div2=document.getElementById("div2");
var div1=div2.parentNode;
alert(div1);
</script>
</body>
(3) 练习:动态表格
<style>
table{
border: 1px solid;
margin: auto;
width: 500px;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
text-align: center;
margin: 50px;
}
</style>
<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>
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
<td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>男</td>
<td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>女</td>
<td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>
</tr>
</table>
<script>
document.getElementById("btn_add").onclick=function () {
var id=document.getElementById("id").value;
var name=document.getElementById("name").value;
var gender=document.getElementById("gender").value;
// 创建 ID
var td_id=document.createElement("td");
var text_id=document.createTextNode(id);
td_id.appendChild(text_id);
// 创建姓名
var td_name=document.createElement("td");
var text_name=document.createTextNode(name);
td_name.appendChild(text_name);
// 创建性别
var td_gender=document.createElement("td");
var text_gender=document.createTextNode(gender);
td_gender.appendChild(text_gender);
// 创建 a 标签
var td_a=document.createElement("td");
var ele_a=document.createElement("a");
ele_a.setAttribute("href","javascript:void(0)");
ele_a.setAttribute("onclick","delTr(this)");
var text_a=document.createTextNode("删除");
ele_a.appendChild(text_a);
td_a.appendChild(ele_a);
// 创建并添加
var tr=document.createElement("tr");
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_gender);
tr.appendChild(td_a);
var table=document.getElementsByTagName("table")[0];
table.appendChild(tr);
}
function delTr(obj) {
var table=obj.parentNode.parentNode.parentNode;
var tr=obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</body>
(4) HTML DOM 模型
- 标签体的设置和获取:innerHTML
- 使用 HTML 元素对象的属性
- 控制样式
- 使用元素的 style 属性来设置
- 提前定义好选择器的样式,通过元素的 className 属性来设置 class 的属性值
<style>
.d1{
border: 1px solid red;
width: 100px;
height: 100px;
}
.d2{
border: 1px solid blue;
width: 200px;
height: 200px;
}
</style>
<body>
<div id="div1">
div
</div>
<div id="div2">
div
</div>
<script>
var div1=document.getElementById("div1");
div1.onclick=function () {
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>
对上述案例进行简化优化:
<style>
table{
border: 1px solid;
margin: auto;
width: 500px;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
text-align: center;
margin: 50px;
}
</style>
<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>
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
<td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>男</td>
<td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>女</td>
<td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>
</tr>
</table>
<script>
document.getElementById("btn_add").onclick=function () {
var id=document.getElementById("id").value;
var name=document.getElementById("name").value;
var gender=document.getElementById("gender").value;
var table=document.getElementsByTagName("table")[0];
table.innerHTML+="<tr>\n" +
" <td>"+id+"</td>\n" +
" <td>"+name+"</td>\n" +
" <td>"+gender+"</td>\n" +
" <td><a href=\"javascript:void(0)\" οnclick=\"delTr(this)\">删除</a></td>\n" +
" </tr>"
}
function delTr(obj) {
var table=obj.parentNode.parentNode.parentNode;
var tr=obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</body>
四、 事件
属于 DOM 中的部分
- 功能:某些组件被执行了某些操作后,触发某些代码的执行
- 事件:HTML 事件是发生在 HTML 元素上的”事情“。比如:
- 按钮被点击时
- 鼠标移动到元素之上
- 按下键盘按键
- 事件源:组件。比如:按钮、文本输入框…
- 监听器:代码。
- 注册监听:将事件、事件源、监听器结合在一起。当事件源上发生了某个事件,则触发执行某个监听器代码。
- 事件监听:JavaScript 可以在事件被侦测到时执行代码
1. 事件绑定
- 事件绑定有两种方式:
- 方式一:通过 HTML 标签中的事件属性进行绑定
<input type="button" onclick='on()'>
function on(){
alert("我被点击了!");
}
- 方式二:通过 DOM 元素属性绑定
<input type="button" id="btn">
document.getElementById("btn").onclick=function(){
alert("我被点击了!");
}
2. 常见事件
事件名称 | 说明 |
---|---|
onclick | 鼠标单击事件 |
ondblclick | 鼠标双击事件 |
onblur | 鼠标失去焦点 |
onfocus | 元素获得焦点 |
onload | 某个页面或图像被完成加载 |
onkeydown | 某个键盘的按键被按下 |
onkeyup | 某个键盘按键被松开 |
onkeypress | 某个键盘按键被按下并松开 |
onmouseover | 鼠标被移到某元素之上 |
onmouseout | 鼠标从某元素移开 |
onmousemove | 鼠标被移动 |
onmouseup | 鼠标按键被松开 |
onsubmit | 当表单提交时触发该事件 |
onreset | 重置按钮被点击 |
onchange | 域的内容被改变 |
onselect | 文本被选中 |
- Event 代表事件对象
3. 案例练习
(1) 表格全选
<!DOCTYPE html>
<html lang="en">
<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%;
}
.out{
background-color: white;
}
.over{
background-color: #b6d4fe;
}
</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;
}
}
// 给所有的 tr 绑定鼠标移到元素之上和移出元素事件
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>
<th><input type="checkbox" name="cb" id="firstCb"></th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>1</td>
<td>张三</td>
<td>男</td>
<td><a href="javascript:void(0);"></a>删除</td>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>2</td>
<td>李四</td>
<td>男</td>
<td><a href="javascript:void(0);"></a>删除</td>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>3</td>
<td>王五</td>
<td>女</td>
<td><a href="javascript:void(0);"></a>删除</td>
</tr>
</table>
<div>
<input type="button" id="selectAll" value="全选">
<input type="button" id="unSelectAll" value="全不选">
<input type="button" id="selectRev" value="反选">
</div>
</body>
</html>
(2) 表单校验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单校验</title>
</head>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
background: url("img") no-repeat center;
padding-top: 25px;
}
.rg_layout {
width: 900px;
height: 500px;
border: 8px solid #EEEEEE;
background-color: white;
margin: auto;
}
.rg_left {
float: left;
margin: 15px;
}
.rg_left > p:first-child {
color: #FFD026;
font-size: 20px;
}
.rg_left > p:last-child {
color: #A6A6A6;
font-size: 20px;
}
.rg_center {
float: left;
}
.rg_right {
float: right;
margin: 15px;
}
.rg_right > p:first-child {
font-size: 15px;
}
.rg_right p a {
color: pink;
}
.td_left {
width: 100px;
text-align: right;
height: 45px;
}
.td_right {
padding-left: 50px;
}
#username, #password, #email, #name, #tel, #birthday, #checkcode {
width: 251px;
height: 32px;
border: 1px solid #A6A6A6;
border-radius: 5px;
padding-left: 10px;
}
#checkcode {
width: 110px;
}
#img_check {
height: 32px;
vertical-align: middle;
}
#btn_sub {
width: 150px;
height: 40px;
background-color: #FFD026;
border: 1px solid #FFD026;
}
.error {
color: red;
}
#td_sub {
padding-left: 150px;
}
</style>
<script>
/*
分析:
1. 给表单绑定 onsubmit 事件,监听器中判断每一个方法校验的结果:
如果都为 true,则监听器方法返回 true
如果有一个为 false,则监听器方法返回 false
2. 定义一些方法分别校验各个表单项
3. 给定义表单项绑定 onblur 事件
*/
window.onload = function () {
// 1. 给表单绑定 onsubmit 事件
document.getElementById("form").onsubmit = function () {
// 调用用户校验方法 checkUsername()
// 调用密码校验方法 checkPassword()
return checkUsername() && checkPassword();
}
// 给用户名和密码框分别绑定离焦事件
document.getElementById("username").onblur = checkUsername;
document.getElementById("password").onblur = checkPassword;
}
// 校验用户名
function checkUsername() {
// 1. 获取用户名的值
var username = document.getElementById("username").value;
// 2. 定义正则表达式
var reg_username = /^\w{6,12}$/;
// 3. 判断值是否符合正则的规则
var flag = reg_username.test(username);
// 4. 提示信息
var s_username = document.getElementById("s_username");
if (flag) {
// 提示绿色对勾
s_username.innerHTML = "<img width='35' height='25' src='img'>";
s_username.innerHTML = "用户名可以使用";
} else {
// 提示红色用户名有误
s_username.innerHTML = "用户名格式有误";
}
return flag;
}
// 校验密码
function checkPassword() {
// 1. 获取用户名的值
var password = document.getElementById("password").value;
// 2. 定义正则表达式
var reg_password = /^\w{6,12}$/;
// 3. 判断值是否符合正则的规则
var flag = reg_password.test(password);
// 4. 提示信息
var s_password = document.getElementById("s_password");
if (flag) {
// 提示绿色对勾
s_password.innerHTML = "<img width='35' height='25' src='img'>";
s_password.innerHTML = "密码格式合法";
} else {
// 提示红色用户名有误
s_password.innerHTML = "密码格式有误";
}
return flag;
}
</script>
<body>
<div class="rg_layout">
<div class="rg_left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="rg_center">
<div class="rg_form">
<form action="#" id="form" method="get">
<table>
<tr>
<td class="td_left"><label for="username">用户名</label></td>
<td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名">
<span id="s_username" class="error"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="password">密码</label></td>
<td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码">
<span id="s_password" class="error"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="email">Email</label></td>
<td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
</tr>
<tr>
<td class="td_left"><label for="name">姓名</label></td>
<td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
</tr>
<tr>
<td class="td_left"><label for="tel">手机号</label></td>
<td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
</tr>
<tr>
<td class="td_left"><label>性别</label></td>
<td class="td_right"><input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女
</td>
</tr>
<tr>
<td class="td_left"><label for="tel">出生日期</label></td>
<td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期">
</td>
</tr>
<tr>
<td class="td_left"><label for="tel">验证码</label></td>
<td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
<img id="img_check" src="#">
</td>
</tr>
<tr>
<td colspan="2" id="td_sub"><input type="submit" value="注册" id="btn_sub"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="rg_right">
<p>已有帐号<a href="#">立即登录</a></p>
</div>
</div>
</body>
</html>