JavaScript入门
JavaScript简介
JavaScript的概念
- JavaScript（简称“JS”） 是一种具有函数优先的轻量级解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于对象、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）泛型式风格。
JavaScript的特点
- 1、几乎每个浏览器都有JavaScript的解析引擎。
- 2、不需要编译，直接由浏览器解析运行。
JavaScript的作用
- 1、写在html内部为网页增添动态效果
- 2、表单校验
- 3、读写html DOM文档对象模型
- 4、获取浏览器相关信息 BOM浏览器对象模型
JavaScript的组成
ECMAScript核心语法
- 变量、数据类型、分支语句、循环语句、函数、数组...
DOM文档对象模型
BOM浏览器对象模型
JS的组成之ECMAScript
ECMAScript简介
- 1、ECMAScript实际上是一种脚本在语法和语义上的标准
- 2、包含了JS的基本语法和基本对象
引入方式
-
与html结合方式
-
内部JS
-
在HTML网页中通过script标签直接嵌入JavaScript脚本代码。可以出现在页面的任何位置，且可以写多个。
-
示例
<!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>Document</title> </head> <body> <!-- 内部引入 --> <script> // 警告框 alert(1111); </script> </body> </html>
-
-
外部JS
-
外链式是单独定义脚本文件（*.js），再将这个脚本文件通过script标签的src属性引入到HTML页面中。一个页面中可以引用多个外部js文件。
-
注意事项
- 引用外部js文件的script标签里不能再写自定义的javaScript代码
-
示例
<!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>Document</title> <!-- 引入外部的js src 引入资源的路径 type="text/javaScript" 引入资源的类型 charset="utf-8" 引入资源的编码格式 --> <script src="../js/demo.js" type="text/javaScript" charset="utf-8"> </script> </head> <body> </body> </html>
-
-
注释
-
注释概述
- 对代码起解释说明作用
-
单行注释
- //
-
多行注释
- /* */
数据类型
-
基本数据类型
-
undefined
- 未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined
-
null
- 占位符
-
boolean
- true和false
-
number
- 表示一个任意数字（整数和小数）
-
string
- 表示一个字符串（单双引号都可以）
-
-
引用类型
- 引用类型通常叫做类（class），JavaScript将引用类型转化为对象进行处理。
- JavaScript是基于对象而非面向对象。对象的默认值是null。
-
示例
<!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>Document</title> </head> <body> <!-- undefined 未定义 null 表示占位符 boolean true和false number 表示一个任意数字(整数和小数) string 表示一个字符串(单双引号都可以) java强类型语言 强：语法要求严格 ja弱类型语言 弱：语法要求松散 --> <script> var a // 在浏览器控制台看输出数据类型 console.log(typeof a) //undefined var a1 = null console.log(typeof a) //object var f1 = false caches.log(typeof f1) //boolean var b = 10 var b1 = 10.1 console.log(typeof b) //number console.log(typeof b1) //number var str = '大帅哥' console.log(typeof str) //string </script> </body> </html>
变量
-
概述
- 内存中一块区域，在一定范围内可以发生更改的值
运算符
-
一元运算符
-
++、--
- 符号在前，先自增(自减)，再运算；符号在后，先运算，再自增(自减)
-
-
算术运算符
-
-
-
- / % ++ -- 等。
-
-
-
-
赋值运算符
- := += -= *= /= %= 等。
-
比较运算符
-
、< 、>= 、<=、、!=、=(全等)、!==：类型相同直接比较，类型不同先转换再比较。
-
-
逻辑运算符
- &&(短路与)、||(短路或)、!(非)
-
条件（三元）运算符
- 表达式 ? 值1 : 值2 (表达式为true取值1，表达式为false取值2)
-
示例
<!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>Document</title> </head> <body> <!-- ==:只比较数值 ===:比较值和类型 !=：只比较值 !==：比较值和类型 --> <script> var a = 10;; var b = "10"; var c = "11"; console.log(a==b); //true console.log(a===b);//false console.log(a!=c);//true console.log(a!==b);//true var str = a==b?"等于":"不等于"; console.log(str); </script> </body> </html>
流程控制
-
if……else 闰年判断案例
<!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>Document</title> </head> <body> <!-- --> <script> var year = 1990; if((year%4 == 0 && year%100 != 0) || year%400==0){ console.log("闰年"); }else{ console.log("平年"); } </script> </body> </html> -
switch 求月份天数
<!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>Document</title> </head> <body> <script> var month = 10; switch(month){ case 1: case 3: case 5: case 7: case 8: case 10: case 12: console.log("是31天"); break; case 4: case 6: case 9: case 11: console.log("是30天"); break; case 2: console.log("28或29天"); break; default: console.log("输入有误"); } </script> </body> </html> -
while 打印1~100之间所有的整数
<!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>Document</title> </head> <body> <script> var a=1; while(a<=100){ console.log(a); a++; } </script> </body> </html> -
do……while 打印1~100之间的偶数
<!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>Document</title> </head> <body> <script> var a =1; do{ if(a%2==0){ console.log(a); } a++; }while(a<=100); </script> </body> </html> -
for 打印1~100之间包含7的整型数字
<!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>Document</title> </head> <body> <!-- indexOf(i) 如存在7 返回7在字符串中第一次出现的索引，不存在返回-1 --> <script> for(var i=1;i<=100;i++){ //将整数i变成字符串i var str = new String(i); if(str.indexOf("7") != -1){ console.log(i); } } </script> </body> </html>
基本对象
-
function函数对象
-
格式
- function 方法名(变量名,变量名){方法体} 推荐使用
- var 方法名 = function(形式参数列表)
-
方法调用
- 方法名称(实际参数列表)
-
js方法特点
- 方法定义时，形式参数不用写，返回值类型也不写
- 方法是一个对象，定义相同方法名回被覆盖 方法不支持重载
- 在js中方法调用只和方法名有关与方法参数无关
-
js方法属性
-
length
- 获取实际参数个数
-
-
示例
<!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>Document</title> </head> <body> <!-- 第一种方式：function 方法名(变量名,变量名){方法体} 推荐使用 第二种方式：var 变量名 = function(变量名,变量名){方法体} --> <script> //调用 show(); console.log(show1()); console.log(show2(10,11)); console.log(show3(10,23,1)); // 无参无返回值 function show(){ console.log("无参无返回值"); } //无参有返回值 function show1(){ return "你好厉害"; } // 有参无返回值 function show2(a,b){ console.log(a+b); } //有参有返回值 function show3(a,b,c){ console.log("方法的参数个数是"+show3.length); var temp = a>b?a:b; return temp>c?temp:c; } var f1 = function(a,b){ console.log(a+b); } f1(10,20); </script> </body> </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>Document</title> </head> <body> <!-- 模拟重载 arguments：存放方法参数的一个数组 --> <script> function getSum(a,b,c,d){ console.log(arguments.length) if(arguments.length==2){ //求2个数的和 console.log(arguments[0]+arguments[1]); }else if(arguments.length==3){ console.log(arguments[0]+arguments[1]+arguments[2]); }else if(arguments.length==4){ console.log(a+b+c+d); } } getSum(1,2); getSum(1,2,3); getSum(1,2,3,4); </script> </body> </html>
-
-
Array数组对象
-
创建数组
- var arr = new Array(); 空数组
- var arr = [元素列表]; 具有初值的数组
-
js数组特点
- 在js中，数组元素的类型可变
- 在js中数组的长度可变
-
js数组属性
-
length
- 获取数组长度、元素个数
-
-
常用方法
-
join(参数)
- 将数组元素通过指定的字符串拼接成字符串
-
push()
- 向数组的末尾添加一个或更多元素，并返回新的数
-
-
示例
<!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>Document</title> </head> <body> <!-- 创建数组 动态创建 var arr = new Array() 静态创建 var arr1 = [元素1,元素2...] 数组中元素可为任意类型 --> <script> //动态创建 var arr = new Array(); //通过索引存储数据 arr[0] = "字符串"; arr[1] = 12; arr[2] = true; console.log(arr); //静态创建 var arr1 = ["马蓉","小璐",66]; //通过索引获取 console.log(arr1[0]); //指定长度创建(指定了也没用) var arr2 = new Array(2); arr2[0] = "吴亦凡"; arr2[1] = "罗志祥"; arr2[2] = "都美竹" arr2[3] = "陈冠希"; /* 数组常用方法 join("字符串") 将数组中的元素根据指定执行进行拼接返回一个字符串 push() 相当于集合中的add在数组中的末尾添加元素 */ var str = arr2.join("="); console.log(str); //吴亦凡=罗志祥=都美竹=陈冠希 var str1 = arr2.join(","); console.log(str1); //吴亦凡,罗志祥,都美竹,陈冠希 arr2.push("官人"); console.log(arr2); /* 遍历数组 */ for(var i = 0;i<arr2.length;i++){ console.log(arr2[i]); } </script> </body> </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>Document</title> </head> <body> <!-- 二维数组：数组中的每个元素都是一个一维数组 --> <script> //动态初始化 var arr = new Array(); arr[0] = new Array("孙悟空","猪八戒"); arr[1] = ["沙和尚","唐三藏"]; arr[2] = ["白骨精","牛魔王"]; //静态初始化 var arr1 = [[11,12],["玄奘","玉兔"],[true,6]]; //遍历 for(var i = 0;i<arr.length;i++){ for(var j= 0;j<arr[i].length;j++){ console.log(arr[i][j]); } } </script> </body> </html>
-
-
Date日期对象
-
创建日期对象
- var now = new Date() 获取当前时间
-
常用方法
- tolocalString() 返回年月日时分秒形式的日期
- tolocalDateString()返回年月日形式的日期
- getTime()从1970年1月1日到至今的毫秒值
- getHours()返回是小时
- getMinutes()返回的是分钟
- getSeconds()分钟的秒
- getFullYear()获取年
- getMonth()获取月份 0-11 表示12个月份
- getDate()获取日
-
示例
<!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>Document</title> </head> <body> <!-- 日期 tolocalString() 返回年月日时分秒日期 tolocaDatrlString() 返回年月日日期 getTime() 从1970年1月1日至今的毫秒值 getFullYear() 返回年 getMonth()+1 返回月 0-11 表示12个月 getHours() 返回小时 getMinutes() 返回分钟 getSeconds() 返回秒 --> <script> //创建日期对象 var d = new Date(); document.write(d.toLocaleString()+"<br>"); document.write(d.toLocaleDateString()+"<br>"); document.write(d.getFullYear()+"<br>"); //返回年 document.write(d.getMonth()+1+"<br>"); //返回月 0-11 表示12个月 document.write(d.getDate()+"<br>"); //返回日 document.write(d.getTime()+"<br>"); document.write(d.getHours()+"<br>"); document.write(d.getMinutes()+"<br>"); document.write(d.getSeconds()+"<br>"); </script> </body> </html>
-
-
Math数学对象
-
创建
- Math对象不用创建直接使用。使用时直接调用方法，如：Math.方法名();
-
常用方法
- random()：返回 0 ~ 1 之间的随机数 不包含1
- max(x,y)：返回 x 和 y 中的最大值
- min(x,y)：返回 x 和 y 中的最低值
- ceil(x)：对数进行向上取整
- floor(x)：对数进行向下取整
- round(x)：把数四舍五入为最接近的整数
- abs(x)：返回数的绝对值
-
属性
- PI圆周率
-
示例
<!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>Document</title> </head> <body> <script> //随机数创建[0,1) console.log(Math.random()); //返回最大值 console.log(Math.max(10,19)); //返回最小值 console.log(Math.min(9,0)); //向上取整 console.log(Math.ceil(10.1)); //向下取整 console.log(Math.floor(10.1)); //四舍五入 console.log(Math.round(5.5)); //返回绝对值 console.log(Math.abs(-2)); //圆周率 console.log(Math.PI); // 产生0-10之间的随机数 console.log(Math.floor(Math.random()*11)); </script> </body> </html>
-
-
String字符串对象
-
创建
- var str1 = "abc"; // string
- var str2 = new String("abc"); // object
-
常用方法
-
length求长度 属性 -
startWith("指定字符串")判断是否是xx字符串开头 -
endWith("指定字符串")判断是否以xx字符串结尾 -
charAt(索引) 获取指定索引上的字符 -
indexOf("指定字符串") 获取指定字符串在该字符串中第一次出现的索引位置如果没有返回-1 -
lastIndexOf("指定字符串")获取指定字符串在该字符串中最后一次出现的索引位置如果没有返回-1 -
substring(开始索引) 从开始索引截取到最后 -
substring(开始索引,结束索引)截取字符串从开始索引到结束索引(不包括结束索引) -
spit("规则") 根据规则拆分字符串 -
replace()替换字符串 -
toLowerCase()转小写 -
toUpperCase()转大小 -
concat()字符串拼接
-
-
示例
<!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>Document</title> </head> <body> <!-- length 求长度 startWith("指定字符串") 判断是否以指定字符串开头 endWith("指定字符串") 判断是否以指定字符串结尾 charAt(指定索引) 获取指定位置字符 indexOf("指定字符串") 获取指定字符串在该字符串中第一次出现的索引位置，没有返回-1 lastIndexOf("指定字符串") 获取指定字符串在该字符串中最后一次出现的索引位置，没有返回-1 substring(开始索引) 从开始索引截取到最后 substring(开始索引,结束索引) 截取字符串从开始索引到结束索引（不包括结束索引） spit("规则") 根据规则拆分字符串 replace("需替换的字符串","替换后的字符串") 替换字符串 replaceAll() toUpperCase() 转大写 toLowerCase() 转小写 concat() 字符串拼接 --> <script> var str = "我是孙悟空"; console.log(str.length); //5 console.log(str.startsWith("我"));//true console.log(str.endsWith("悟空"));//true console.log(str.charAt(3));//悟 console.log(str.indexOf("孙"));//2 console.log(str.lastIndexOf("是"));//1 console.log(str.substring(2,4)); //孙悟 var str1 = "username=admin" var arr = str1.split("="); console.log(arr[0]+"\t"+arr[1]); console.log(str.replace("是","人")); console.log(str1.toUpperCase()); console.log(str+="拼接的字符串") </script> </body> </html>
-
DOM对象
DOM简介
- 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言XML语言的标准编程接口。通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。
- 当网页被加载时，浏览器会创建页面的文档对象模型
- HTML DOM 模型被结构化为对象树
获取页面元素对象
-
查找页面元素方法
- document.getElementById(id)：通过id号来查找元素。
- document.getElementsByTagName(name)：通过标签名来查找元素。
- document.getElementsByClassName(name)：通过类名来查找元素。
- document.getElementsByName(name)：通过name属性名来查找元素。
-
由于页面中元素的id号是唯一的，所以通过id获取的元素个数也是唯一的；而其他三种方式获取的元素个数不唯一，所以使用时需要像数组一样去获取指定的元素。
-
示例
<!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>Document</title> </head> <body> <!-- document.getElementById() 根据id获取一个元素 document.getElementsByName(hobby) 根据name获取多个元素 document.getElementsByTagName(标签名称) 根据标签名称获取多个元素 <div class="p1"></div> <p class="p1"></p> document.getElementsByClassName("p1") 根据类选择器名称获取到作用相同样式的所有元素 --> 用户名: <input type="text" name="username" id="username"><br> 爱好:<input type="checkbox" name="hobby" value="吃"> 吃 <input type="checkbox" name="hobby" checked value="喝"> 喝 <input type="checkbox" name="hobby" checked value="玩"> 玩 <input type="checkbox" name="hobby" value="乐"> 乐 <br> <div class="p1">111</div> <p class="p1">22</p> <script> //根据id获取元素 var username = document.getElementById("username"); console.log(username); //根据name获取多个元素 var hobbys = document.getElementsByName("hobby"); console.log(hobbys); //根据标签名称获取多个元素 var inputs = document.getElementsByTagName("input"); console.log(inputs) //根据类选择器名称获取到作用相同样式的所有元素 var ins = document.getElementsByClassName("p1"); console.log(ins); </script> </body> </html>
操作页面元素对象
-
创建dom对象
- document.createElement("标签名");
-
添加dom对象
- A.appendChild(B) 将B添加到A内部的最后面
- A.insertBefore(B,C) 将B添加到A内部C的前面
-
删除dom对象
- A.remove() 将A删除
-
替换dom对象
- A.replaceChild(B,C) 用B替换A内部的C
-
示例
<!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>Document</title> </head> <body id="b1"> <!-- 1、创建dom对象 document.createElement("标签名"); //给标签添加文本值 innerText 2、添加dom对象 （1）A.appendChild(B) 将B添加到A内部的最后面 （2）A.insertBefore(B, C) 将B添加到A内部C的前面 3、删除dom对象 （1）A.remove() 将A删除 4、替换dom对象 A.replaceChild(B, C) 用B替换A内部的C --> <a href="#" id="a1">点我</a> </body> <script> // 创建dom对象 var p = document.createElement("p"); //设置p段落标签中的内容 p.innerText="我是齐天大圣孙悟空"; //获取到body var body = document.getElementById("b1"); //将p元素添加到body中 在body标签末尾添加元素 body.appendChild(p); //创建div元素 var div = document.createElement("div"); //设置div元素文本内容 div.innerText="我才是齐天大圣"; //将div元素添加到p标签前面 body.insertBefore(div,p); //删除标签 // p.remove(); //获取a元素 var a1 = document.getElementById("a1"); //移动元素 a1.remove(); //创建span var span = document.createElement("span"); //添加文本内容 span.innerText="我是玉兔"; body.replaceChild(span,p); </script> </html>
操作元素属性
-
根据属性名获取属性值
- xx.getAttribute("属性名")
- xx.属性名
-
设置元素的属性值
-
xx.setAttribute("属性","属性值")
-
xx.属性=新值
-
-
示例
```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>Document</title> </head> <body> <!-- [input] --> 用户名: <input type="text" name="username" value="孙悟空"> </body> <script> /* xx.getAttribute("属性名") 根据属性名获取属性值 xx.属性名 xx.setAttribute("属性","属性值")设置元素的属性值 xx.属性=新值 */ //获取input元素 //根据名称获取元素 返回的是一个数组对象 [0]获取数组中第一个元素标签 var username= document.getElementsByName("username")[0] //获取input的value值 //console.log(username.getAttribute("value")) //设置input的value值 //username.setAttribute("value","小白龙") //方式二 简写方式 console.log(username.name) //方式二 username.value="沙和尚" </script> </html> ```
操作元素样式
-
直接操作
- 页面元素.style.css颜色名称 = "值"
-
间接操作:通过类型进行操作
- 页面元素.setAttribute("class","类名1 类名2")
- 先将css样式定义在类中，通过行间属性class，为其设置类
-
示例
<!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>Document</title> </head> <body> <!-- xx.setAttribute("width","200px") 方式一 xx.style.样式=样式值 方式二 推荐 --> <img src="../img/1.jpg" alt=""> </body> <script> //根据标签名称获取img元素 var img = document.getElementsByTagName("img")[0] //设置样式 方式一 img.setAttribute("width","200px"); //方式二 img.style.width="400px"; </script> </html>
操作元素内容
-
获取或者设置内容 可以包含标签
- 标签对象.innerHTML
-
获取或者设置内容 只包含文本
- 标签对象.innerText
-
获取或者设置input框中的内容
- input标签对象.value
-
innerText和innerHTML语法
-
获取:标签对象.innerHTML
-
修改:标签对象.innerHTML=要修改的值
-
-
示例
<!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>Document</title> </head> <body> <p id="p1"> 今天的内容好简单 </p> </body> <script> /* xx.innerText:获取文本内容 只能获取纯文本 xx.innerText=新值 设置文本内容 不支持标签 推荐 xx.innerHTML:获取文本内容 如果文本上有标签会连同标签一起获取 xx.innerHTML=新值 设置文本内容 支持标签 推荐 区别: */ //获取p1元素 var p1 = document.getElementById("p1"); //获取p1文本内容 //console.log(p1.innerText) // console.log(p1.innerHTML) //设置p1的文本内容 //p1.innerText="我听的懂,但是我记不住" //p1.innerHTML="谁说的,我一听就会,我还能记得住" /* 区别 */ // p1.innerText="<font color='red'>我是内容但是我不变色</font>" p1.innerHTML="<font color='red'>我是内容但是我会变色</font>" //console.log(p1.innerText)//我是内容但是我会变色 console.log(p1.innerHTML)//<font color='red'>我是内容但是我会变色</font> </script> </html> ```
事件
-
元素被执行某种操作，触发某些代码
-
方法
-
在标签中指定事件的属性
- button id="btn" onclick="func01()">点我</button
- 需要在脚本中，先行定义好func01这个方法
-
获取标签元素绑定事件
- document.getElementById("btn").onclick = function(){}
- 绑定事件用到的是匿名函数，直接书写方法体代码即可
-
-
常见事件
-
单击事件(全选全不选)
- onclick
-
示例
<!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>Document</title> </head> <body> <!-- onclick:单机事件 fun1() 事件触发执行的函数 --> <input type="buttom" value="点我" onclick="fun1()"> <input type="buttom" value="就点你" id="btn1"> </body> <script> function fun1(){ alert("触发了事件") } // 动态绑定 //获取btn1元素 function 匿名函数 当事件触发自动执行的函数 document.getElementById("btn1").onclick=function(){ alert("我是动态绑定") } </script> </html>
-
-
双击事件
-
ondbclick
- 双击事件
-
-
示例
<!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>Document</title>
</head>
<body>
<input type="buttom" value="点我" id="btn">
</body>
<script>
//ondblclick:双击事件
//获取到btn
document.getElementById("btn").ondblclick=function(){
alert("双击触发");
}
</script>
</html>
```
- 内容改变事件
- onchange
- 示例
```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>Document</title>
</head>
<body>
<!--
onchange:内容改变事件
-->
<select name="" id="province">
<option value="河南">河南</option>
<option value="安徽">安徽</option>
<option value="天津">天津</option>
</select>
</body>
<script>
//动态绑定
document.getElementById("province").onchange=function(){
alert(this.value);
}
</script>
</html>
-
鼠标从某元素移入或移开事件
-
onmouseover
-
onmouseout
-
示例
-
<!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>Document</title>
<style>
div{
width: 400px;
height: 400px;
background-color: red;
border-radius: 100%;
}
</style>
</head>
<body>
<!--
onmouseover:鼠标移入事件
onmouseout：鼠标移除事件
-->
<div onmouseover="fun1()" onmouseout="fun2()">
</div>
</body>
<script>
function fun1(){
alert("鼠标移入");
}
function fun2(){
alert("鼠标移除");
}
</script>
</html>
-
元素时区焦点或获取焦点事件
-
onblur
-
onfocus
-
示例
-
<!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>Document</title>
</head>
<body>
<!--
onblur：失去焦点事件
onfocus：获得焦点事件
span:用于提示错误信息
trim():去除两端空格
-->
用户名：<input type="text" name="username" id="username" onblur="fun1(value,'s1','用户名不能为空')" onfocus="fun2('s1')"> <span id="s1"></span><br>
密码：<input type="password" name="password" id="password" onblur="fun1(value,'s2','密码不能为空')" onfocus="fun2('s2')"> <span id="s2"></span>
</body>
<script>
function fun1(value,id,info){
if(value.trim() == "" || value == null){
//获取span
document.getElementById(id).innerHTML="<font color='red'>"+info+"</font>";
}
}
function fun2(id){
document.getElementById(id).innerHTML="";
}
</script>
</html>
BOM
BOM间接
- BOM(browser object model)：浏览器对象模型。在浏览器页面初始化时，会在内存创建一个全局对象，用来描述当前窗口的属性和状态，这个全局对象被称为浏览器对象模型。
- window对象6个核心模块
- document对象：文档对象
- Frames对象：html的自框架
- History历史记录对象：页面的浏览记录
- Location定位对象：当前页面的地址
- Navigator导航对象：包含了访问者的浏览器相关信息
- Screen对象：显示屏幕相关信息
Window
-
介绍
- 所有的浏览器都支持window对象。它表示浏览器窗口，调用函数时window可以省略。所有JavaScript全局对象、函数以及变量均自动成为window对象的成员。
- 全局变量是window对象的属性。
- 全局函数是window对象的方法。
- html dom的document也是window对象的属性之一。
-
创建
- 直接使用window对象
-
方法
-
弹出方法
-
alert(); 显示带有一段消息和一个确认按钮的警告框
-
confirm(); 显示带有一段消息以及确认按钮和取消按钮的对话框
-
prompt(); 显示可提示用户输入的对话框
-
示例
-
-
<!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>Document</title>
</head>
<body>
<script>
// 页面弹窗 window可省略
alert("这是一个警告框");
// 确认取消框 window可省略 返回boolea值
var flag = window.confirm("确定取消框");
if(flag){
alert("点击了确认");
}else{
alert("点击了取消");
}
// 提示录入框 返回值为用户输入的内容
var content = window.prompt("是输入确定");
console.log(content);
</script>
</body>
</html>
-
打开关闭方法
-
open(”打开窗口的路径“) 打开一个新的浏览器窗口或查找一个已命名的窗口
-
close() 关闭浏览器
-
示例
-
<!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>Document</title>
</head>
<body>
<input type="button" value="打开窗口" onclick="fun1()">
<input type="button" value="关闭窗口" onclick="fun2()">
<script>
/*
参数1：打开的资源
参数2：打开方式 默认_blank 注意不要用_self因为在当前页面打开，窗口设置的大小会失效
参数3：新窗口的宽和高
返回值表示当前新窗口对象
*/
var t;
function fun1(){
//打开窗口
t = window.open("http://www.baidu.com",'','width=600,height=600');
}
function fun2(){
// 关闭窗口
t.close();
}
</script>
</body>
</html>
-
定时器方法
-
循环定时器：按照指定的周期来调用函数或代码串，执行多次。
- setInterval(调用函数,毫秒时间)
- clearInterval(t) 清除定时器
-
单词定时器：在指定的毫秒数后调用函数或代码串，只执行一次。
- setTimeout(毫秒时间)
- clearTimeout(t) 清除定时器
-
示例
<!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>Document</title> </head> <body> <!-- 1000毫秒=1秒 单次定时器：t window.setTimeOut(函数,毫秒值); 输入的毫秒值后执行 1、该定时器有返回值，返回值就是定时器对象用整数1代表(如果开启2个返回值是2,以此类推) clearTimeOut(t) 关闭单词定时器 循环定时器： window.setInterval(函数,毫秒值); 每间隔输入的毫秒值执行一次 1、该定时器有返回值，返回值就是定时器对象用整数1代表(如果开启2个返回值是2,以此类推) clearInterVal(t) 关闭循环定时器 --> <input type="button" value="点击3秒后执行函数" onclick="startTimeOut()"> <input type="button" value="点击后1秒执行一次" onclick="startInterval()"> <input type="button" value="关闭循环定时器" onclick="stopInterval()"> </body> <script> var t; //循环定时器对象 function stopInterval(){ //关闭定时器 clearInterval(t); } // 开启循环定时器 function startInterval(){ //方法1 t = setInterval(fun1,1000); //方法2 // setInterval(fun1(),1000); } // 开启单次定时器 function startTimeOut(){ setTimeOut(fun1,3000); } function fun1(){ console.log("我是3秒后执行的内容"); } </script> </html>
-
-
属性
-
获取其他BOM对象
-
window.history
-
window.location
-
window.Navigator
-
window.Screen
-
-
获取DOM对象：
- window.document/document
-
-
特点
- Window对象不用创建直接使用 window.方法名(); window引用可以省略
Navigator
-
Navigator 对象包含有关浏览器的信息。
-
属性
- appVersion 返回浏览器的平台和版本信息
- cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值
-
示例
<!DOCTYPE html>
<html lang="en">
<body>
<script>
navigator.appVersion
console.log("浏览器版本信息"+navigator.appVersion);
console.log("浏览器是否支持cookie"+navigator.cookieEnabled);
</script>
</body>
</html>
Screen
-
screen.availWidth - 可用的屏幕宽度
-
screen.availHeight - 可用的屏幕高度
-
示例
<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>Document</title>
</head>
<body>
<script>
// 高度除任务栏外
console.log("网页可用高度"+screen.availHeight);
console.log("网页可用宽度"+screen.availWidth);
</script>
</body>
</html>
History
-
window.history 对象包含浏览器历史。
-
方法
-
history.back() - 等同于在浏览器点击后退按钮
-
history.forward() - 等同于在浏览器中点击前进按钮
-
-
示例本页
<!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>Document</title> </head> <body> <input type="button" value="下一页" onclick="forWard()"> <a href="10_下一页.html" >下一页</a> </body> <script> function forWard(){ // 第一种方式 // history.forward; history.go(1); } </script> </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>Document</title>
</head>
<body>
这是第二页
<input type="button" value="上一页" onclick="back()">
</body>
<script>
function back(){
// 第一种方式
// history.back;
history.go(-1);
}
</script>
</html>
Location
-
window.location.href 对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面
-
方法：reload():刷新当前页面
-
案例：3秒跳转页面
<!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>Document</title> <style> div{ font-size: 100px; } #s1{ color: red; } </style> </head> <body> <div> 敌军还有<span id="s1">5</span>秒到达战场，碾碎他们 </div> </body> <script> var index=5; function updateSpan(){ //倒计时 document.getElementById("s1").innerHTML=index--; if(index<0){ //跳转网页 location.href="https://lol.qq.com/"; clearInterval(t); } } var t = setInterval(updateSpan,1000); </script> </html>
浙公网安备 33010602011771号