Web前端基础---JavaScript函数事件及其绑定DOM模型BOM模型
2024-05-17 12:03:47
Day03 JavaScript
JavaScript是一种属于网络的高级脚本语言,被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用
户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
JavaScript作用
可以通过事件操作HTML的元素、读写元素内容、验证提交数据、检验浏览器信息。也可以在HTML中添加动画效果。
JavaScript组成
ECMAScript（ECMA标准）：核心部分，包含基本语法，语句，事件，对象等
DOM（Document Object Model）：文档对象模型，操作元素及其内容
BOM（Broser Object Model）：浏览器对象模型，操作浏览器对象
JavaScript使用方式
1、行内式 ：直接在HTML标签中书写JS脚本代码
2、内嵌式 ：需要将JS脚本代码写到<script>标签中。该标签可以写在页面任意位置。
3、外链式 ：需要单独定义一个JS文件，将JS脚本代码放到该文件中，再将该JS文件引入到HTML 中。使用<script type=”” src=””>标签
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>JavaScript使用方式</title><!--外链式--><script type="text/javascript" src="js/first.js"></script><!--内嵌式--><script type="text/javascript" src="js/first.js">alert("这是内嵌式表现结果");</script></head><body><!--行内式--><input type="button" value="行内" onclick="javascript:alert('这是行内式表现结果！')" /></body>
</html>first.js文件内容：
alert("这是外链式表现结果");
JavaScript基础语法
1、变量（不需要指定数据类型）语法格式：var 变量名; var 变量名=变量值; var 变量a,变量b;
注意点：变量名由字母，数字，下划线，$组成，数字不能开头。关键字不能作为变量名。2、数据类型基本数据类型：1）Undefind：声明的变量没有初始化，默认值就是undefind。2）Null：只有一个值null，表示空，一个占位符。Undefind其实是从null派生 的。所以，ECMAScript将这两者列为等值。3）Boolean：表示真假，只有两个值true和false。4）Number：表示任意数值。5）String：字符串，可以使用单引号或者双引号进行赋值。引用数据类型：通常叫做类（class），JS会将引用数据类型转换成对象来处理。JS基于对象但不是面向对象，对象的默认值null。
查看变量的数据类型：typeof(变量名);3、运算符算数运算符：+ - * / % ++ --赋值运算符：= += -= *= /= %=比较运算符：== > < >= <= !=逻辑运算符：&& || !条件运算符：?:4、分支结构1）if分支：（多用于区间判断）单分支：if(){}双分支：if(){}else{}多分支：if(){}else if(){}else{}2）switch分支：（多用于等值判断）switch(表达式){case 常量1:语句1;break;case 常量2:语句2;break;......default:语句n;}5、数组1）空数组 var array1 = new Array();--->输出结果：[]2）有初始长度的数组 var array2 = new Array(5);--->输出结果：[empty*5]3）有初始值的数组 var array3 = [1,2,3];--->输出结果：[1,2,3]var array4 = ["apple","orange"];--->输出结果：["apple","orange"]6、循环结构
JS中的循环和Java中循环基本一致，while循环，do while循环，for循环，增强型for循环。
其中增强型for循环略有差异。
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>循环</title><script type="text/javascript">var array = [1,2,3,4,5,6];for (var i = 0;i<array.length;i++) {console.log(array[i]);}console.log("-----------------------");for (var i in array) {console.log(array[i]);}</script></head><body></body>
</html>JavaScript函数
JS定义函数，直接使用function关键字即可。
基本语法：
function 函数名(参数){
函数体;
}
1、无参函数
2、有参函数
3、有返回值的函数
JavaScript事件及其绑定
1、JS中常用的事件
1）鼠标事件：单击(onclick)、双击(ondblclick)、确认按钮被点击（onsubmit）移入(onmouseover)、移出(onmouseout)、移动(onmousemove)
2）键盘事件：按下(onkeydown)、抬起(onkeyup)、长按(onkeypress)
3）表单事件：聚焦(onfocus)、失焦(onblur)、值改变(onchange)2、事件的绑定
常用方式有两种，一是直接在标签中绑定，另一种是在JS中先获取要绑定的元素，再通过脚本进行绑定。
1）标签中直接绑定
2）获取元素再绑定
注意：使用方式二时，一定要注意代码执行的顺序。
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>JS事件</title><script type="text/javascript">function show(){alert("点击1展示结果!");}</script></head><body><!--标签中直接绑定--><input type="button" value="点击展示方式1" onclick="show()"/><!--获取元素再绑定--><input type="button" value="点击展示方式2" id="btn"/><script type="text/javascript">var btn = document.getElementById("btn");btn.onclick = function() {alert("点击2展示结果!");}</script></body>
</html>
3、常用事件讲解
1）焦点事件（只有可输入框才有）onblur：失焦onfocus：聚焦
2）键盘事件onkeydown：按键按下时onkeyup：按键释放时
3）鼠标事件onmouseover：鼠标移上去onmouseout：鼠标移开
4）内容改变事件
onchange：内容改变时触发
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>JS事件</title><script type="text/javascript">function show(){alert("点击展示结果!");}function getFocus(obj){obj.style.backgroundColor="yellow";}function loseFocus(obj){obj.style.backgroundColor="blue";}function keyboard1(obj){obj.style.backgroundColor="red";}function keyboard2(obj){obj.style.width="200px";}function change(id){var va = document.getElementById(id).value;document.getElementById(id).value = va.toUpperCase()}</script></head><body><!--点击--><input type="button" value="点击" onclick="show()" /><br /><!--聚焦与失焦--><!--键盘事件-->请输入姓名：<input type="text" id="event1" onfocus="getFocus(this)" onblur="loseFocus(this)" onkeydown="keyboard1(this)" onkeyup="keyboard2(this)"/><!--鼠标事件--><div id="event2" style="width: 200px; height: 200px; color: darkmagenta; background-color: aliceblue; text-align: center;" onkeydown="keyboard(this)"/>鼠标移过来</div><script type="text/javascript">var mouse = document.getElementById("event2");mouse.onmouseover = function(){this.style.backgroundColor="yellow";this.innerHTML="请把鼠标移开"}mouse.onmouseout = function(){this.style.borderRadius="50%";this.style.lineHeight="200px";this.innerHTML="鼠标移过来"} </script><!--内容改变事件-->请输入姓名：<input type="text" id="event3" onchange="change(this.id)" /></body>
</html>DOM模型
文档对象模型（Document Object Model，简称DOM），是W3C制定的标准接口规范，是一种处理HTML和XML文件的标准API。DOM提供了对整个文档的访问模型，将文档作为一个树形结构，树的每个结点表示了一个HTML标签或标签内的文本项。将HTML或XML文档转化为DOM树的过程称为解析(parse)。HTML文档被解析后，转化为DOM树，因此对HTML文档的处理可以通过对DOM树的操作实现。DOM模型不仅描述了文档的结构，还定义了结点对象的行为，利用对象的方法和属性，可以方便地访问、修改、添加和删除DOM树的结点和内容。
使用DOM查找元素
常用的查找元素的方法：
1）document.getElementById(id)：通过ID值来查找元素
2）document.getElementsByTagName(name)：通过标签名获取元素
3）document.getElementsByClassName(class)：通过类名获取元素
4）document.getElementsByName(name)：通过name属性值获取元素
由于ID属性值唯一，所以通过ID获取的元素只有一个，而其他3中可以一次性获取多个元素。
案例1.表单数据验证
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">function check() {// 获取输入的用户名和密码var un = document.getElementById("un").value;var pw = document.getElementById("pw").value;
// 判断if(un==null || un=="") {alert("用户名不能为空");
// 如果为空则返回false,不能提交return false;}if(pw==null || pw=="") {alert("密码不能为空");return false;}return true;}</script></head><body><form action="" method="" onsubmit="return check()">用户名：<input type="text" id="un" name="username" /><br />密码：<input type="text" id="pw" name="password"/><br /><input type="submit" name="submit" /></form></body>
</html>案例2.实现全选及反选效果
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">function checkAll(){// 获取全选框对象var all = document.getElementById("all");
// 获取其他选择框的对象(得到的是一个数组)var fruits = document.getElementsByName("selection");
// 获取全选框的checked属性的值（true or false）var allchecked = all.checked;
// 遍历非全选框对象,获取每个对象的checked属性的值,并将全选框的该属性的值赋值给他们,
// 这样其他框这个值就一直保持与全选框一样了for (var i = 0; i<fruits.length; i++) {fruits[i].checked=allchecked;}}</script></head><body><input type="checkbox" id="all" onclick="checkAll()"/>全选<br /><input type="checkbox" name="selection" value="0"/>苹果<br /><input type="checkbox" name="selection" value="1"/>桃子<br /><input type="checkbox" name="selection" value="2"/>荔枝<br /><input type="checkbox" name="selection" value="3" />香蕉</body>
</html>使用DOM修改元素
1、改变元素的文本内容
2、改变元素的样式
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>使用DOM修改元素</title><style type="text/css">div {width: 400px;height: 400px;background-color: cornflowerblue;}</style><script type="text/javascript">function changeStyle(){var divStyle = document.getElementById("style");divStyle.style.width="200px";divStyle.style.height="200px";divStyle.style.backgroundColor="blue"divStyle.style.color="#FF0000";divStyle.style.textAlign="center";divStyle.style.lineHeight="200px";divStyle.innerHTML="这是改变后的内容"}</script></head><body><div id="style" >这是原本的内容</div><input type="button" value="点我改变" onclick="changeStyle()"/></body>
</html>3、优化表单验证
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>优化表单验证</title><script type="text/javascript">function check() {// 获取输入的用户名和密码var un = document.getElementById("un").value;var pw = document.getElementById("pw").value;
// 判断if(un==null || un=="") {document.getElementById("us").innerText="用户名不能为空";document.getElementById("us").style.color="red";
// 如果为空则返回false,不能提交return false;}if(pw==null || pw=="") {document.getElementById("ps").innerText="密码不能为空";document.getElementById("ps").style.color="red";return false;}return true;}</script></head><body><form action="" method="" onsubmit="return check()">用户名：<input type="text" id="un" name="username" /><span id="us"></span><br />密码：<input type="text" id="pw" name="password"/><span id="ps"></span><br /><input type="submit" name="submit" /></form></body>
</html>
BOM模型
BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
document：文档对象
frames：HTML框架
location：页面的地址
history：页面的历史记录
navigator：浏览器相关信息
screen：屏幕相关信息
window定时器
1、周期定时器，每隔多少时间就调用某指定函数var timeid = window.setInterval(function,time);注意：时间单位是毫秒window.clearInterval(timeid);
案例：轮播效果
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>轮播</title></head><body><img src="img/1.jpg" width="400" onmouseover="stopImg()" onmouseout="startImg()"/><script type="text/javascript">var i = 1;function changeImg(){//获取图片标签var img = document.getElementsByTagName("img")[0];img.src = "img/"+i+".jpg";if(i<8){i++;}else{i=1;}}//第一参数写法：changeImg或者"changeImg()"var timeid = window.setInterval(changeImg,100);//鼠标移到图片上，定时器失效function stopImg(){window.clearInterval(timeid);}//鼠标移开，定时器生效function startImg(){timeid = window.setInterval(changeImg,100);}</script></body>
</html>2、超时定时器，隔多少时间调用某指定函数，只执行一次var timeid = window.setTimeout(function,time);注意：时间单位是毫秒window.clearTimeout(timeid)
案例：小广告（图片延迟加载
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>图片延迟加载</title><style type="text/css">img{display: none;}</style></head><body><img src="img/1.jpg" width="400" /><script type="text/javascript">function showImg(){var img = document.getElementsByTagName("img")[0];img.style.display = "inline-block";}var timeid = window.setTimeout(showImg,1000);//window.clearTimeout(timeid);</script></body>
</html>案例：实现电子时钟
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>电子时钟</title></head><body><div id="time"></div><script type="text/javascript">function getTime(){var date = new Date();var year = date.getFullYear();//month的值是0-11var month = date.getMonth()+1;var day = date.getDate();var hour = date.getHours();var minute = date.getMinutes();var second = date.getSeconds();var time = year+"年"+month+"月"+day+"日 "+hour+":"+minute+":"+second;document.getElementById("time").innerHTML = time;}getTime();setInterval(getTime,1000);</script></body>
</html>window弹框
1、警告框：window.alert(“text”);
2、确认框：window.confirm(“text”);点击确定返回true，点击取消返回false
3、提示框：window.prompt(“text”,”defaulttext”);点击确定返回输入内容，点击取消返回
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>图片延迟加载</title><style type="text/css">img{display: none;}</style></head><body><img src="img/1.jpg" width="400" /><script type="text/javascript">function showImg(){var img = document.getElementsByTagName("img")[0];img.style.display = "inline-block";}var timeid = window.setTimeout(showImg,1000);//window.clearTimeout(timeid);</script></body>
</html>window其他对象
1、location：当前页面的地址location.href：返回当前页面路径location.hostname：返回web主机域名location.pathname：返回当前页面的资源路径location.protocol：返回web协议location.port：返回web主机端口号
2、history：浏览器历史
常用方法： forward()：等同于浏览器前进功能back()：等同于浏览器后退功能go()：参数是整数，1代表前进一步，-1代表后退一步
3、screen：用户屏幕信息screen.width：屏幕宽度screen.height：屏幕高度document.body.offsetWidth：网页可见区域宽度document.body.offsetHeight：网页可见区域高度
Web前端基础---JavaScript函数事件及其绑定DOM模型BOM模型相关推荐
- Web前端之JavaScript基础
Web前端之JavaScript基础 JavaScript介绍 变量 变量类型 基本的数据类型Number String Boolean underfined null typeof运算符 引用的数据 ...
- JavaScript id_好程序员web前端分享Javascript中函数作为对象
好程序员web前端分享Javascript中函数作为对象,Javascript赋予了函数非常多的特性,其中最重要的特性之一就是将函数作为第一型的对象.那就意味着在javascript中函数可以有属性, ...
- WEB前端基础（HTML+CSS+JavaScript）（上）最好看最详细的笔记~
WEB前端基础 当前部分是基于HTML与CSS总结,后续有JavaScript更新~ 文章目录 WEB前端基础 一.HTML概述(阶段1 入门概述) 1.HTML 二.第一个HTML页面 1.HTML ...
- Web前端基础知识整理
1. 前端基础知识 文件分类 XML(扩展标记语言) 装载有格式的数据信息,用于各个框架和技术的配置文件描述 特点: 扩展名为.xml 内容区分大小写 标签要成对出现,形成容器,只能有一个 标签按正确 ...
- 03【Web】基础-JavaScript
03[Web]基础-JavaScript(P2)对象 本系列文章,针对Web前端的相关知识进行了详细的介绍 文章目录 03[Web]基础-JavaScript(P2)对象 1. 数组对象 1.1 基本 ...
- Web前端：JavaScript最强总结 附详细代码 （带常用案例！）
Web前端基础: Web前端:HTML最强总结 附详细代码 Web前端:CSS最强总结 附详细代码 Web前端:JavaScript最强总结 附详细代码 Web前端工具: Web前端: JQuery最 ...
- props写法_好程序员web前端培训React中事件的写法总结
好程序员web前端培训React中事件的写法总结,React的事件处理和DOM元素很相似,但是语法上是有不同的: 1.react事件采用驼峰命名法,而不是纯小写. 驼峰命名法(camelCase):命 ...
- 【从0到1学Web前端】javascript中的ajax对象（一）
[从0到1学Web前端]javascript中的ajax对象(一) 如今最流行的获取后端的(浏览器从server)数据的方式就是通过Ajax了吧.今天就来具体的来学习下这个知识吧.假设使用ajax来訪 ...
- iframe跨域调用js_郑州Web前端基础学习之JS跨域知识梳理
JS是Web前端开发三要素之一,是郑州Web前端基础学习中非常重要的知识点.JS涉及的知识点多且杂,很多同学反映不知如何下手,事实上,只要你认真记.多练习,就可以慢慢掌握它.今天千锋郑州Web前端培训 ...
最新文章
- 好记心不如烂笔头之jQuery学习,第一章
- matlab 神经网络ann用于分类方法
- python一条竖线_python matplotlib 画一条水平直线遇到的问题
- java入门从哪下手_java新手0基础如何最快速的入门
- luogu4267 TamingtheHerd (dp)
- centos6.5 安装 OpenResty
- Android P(1)---Android P 上手：十年来的最大升级，你想知道的都在这里
- Java关键字：final、default、transient
- tensorflow-gpu：false /cuda程序执行出错: libcudart.so.10.0: cannot open shared object file
- 976. 三角形的最大周长
- python：读取mat文件
- npm打包项目报错：npm ERR! A complete log of this run can be found in:npm ERR! C:\Users\AppData\Roa...
- 2021年氯化工艺考试题库及氯化工艺考试试卷
- 基于BP神经网络使用开盘价、最高价、最低价预测收盘价
- 腾讯私有云TStack 自动化部署
- 四百左右的蓝牙耳机有哪些？四百左右好用的蓝牙耳机推荐
- java 读取excel列_Java读取Excel指定列的数据详细教程和注意事项
- AMD黑苹果 3A平台EFI分享给大家
- C语言int 类型的表示范围 sizeof（）函数
- Pytest如何并发执行自动化脚本