春花秋月何时了,往事知多少。此付费专栏不要订阅,不要订阅,听人劝。
🌹作者主页:青花锁 🌹简介:Java领域优质创作者🏆、Java微服务架构公号作者😄
🌹简历模板、学习资料、面试题库、技术互助🌹文末获取联系方式 📝
[Java项目实战] 介绍Java组件安装、使用;手写框架等
[Aws服务器实战] Aws Linux服务器上操作nginx、git、JDK、Vue等
[Java微服务实战] Java 微服务实战,Spring Cloud Netflix套件、Spring Cloud Alibaba套件、Seata、gateway、shadingjdbc等实战操作
[Java基础篇] Java基础闲聊,已出HashMap、String、StringBuffer等源码分析,JVM分析,持续更新中
[Springboot篇] 从创建Springboot项目,到加载数据库、静态资源、输出RestFul接口、跨越问题解决到统一返回、全局异常处理、Swagger文档
[Spring MVC篇] 从创建Spring MVC项目,到加载数据库、静态资源、输出RestFul接口、跨越问题解决到统一返回
[华为云服务器实战] 华为云Linux服务器上操作nginx、git、JDK、Vue等,以及使用宝塔运维操作添加Html网页、部署Springboot项目/Vue项目等
[Java爬虫] 通过Java+Selenium+GoogleWebDriver 模拟真人网页操作爬取花瓣网图片、bing搜索图片等
[Vue实战] 讲解Vue3的安装、环境配置,基本语法、循环语句、生命周期、路由设置、组件、axios交互、Element-ui的使用等
[Spring] 讲解Spring(Bean)概念、IOC、AOP、集成jdbcTemplate/redis/事务等
本章介绍JavaScript的函数、事件处理、作用域等。
函数是一组执行特定任务(具有特定功能)的,可以重复使用的代码块
function functionName(parameter_list) {
// 函数中的代码
}
function sayHello(name){
document.write("Hello " + name);
}
// 调用 sayHello() 函数
sayHello('清华大学');
function sayHello(name = "World"){
document.write("Hello " + name);
}
sayHello(); // 输出:Hello World
sayHello('qh.com'); // 输出:Hello qh.com
var myfunction = function name(parameter_list){
// 函数中的代码
};
JS 事件(event)是当用户与网页进行交互时发生的事情
事件 | 事件 | 描述 |
---|---|---|
鼠标、键盘事件 | onclick | 点击鼠标时触发此事件 |
- | ondblclick | 双击鼠标时触发此事件 |
- | onmousedown | 按下鼠标时触发此事件 |
- | onmouseup | 鼠标按下后又松开时触发此事件 |
- | onmouseover | 当鼠标移动到某个元素上方时触发此事件 |
- | onmousemove | 移动鼠标时触发此事件 |
- | onmouseout | 当鼠标离开某个元素范围时触发此事件 |
- | onkeypress | 当按下并松开键盘上的某个键时触发此事件 |
- | onkeydown | 当按下键盘上的某个按键时触发此事件 |
- | onkeyup | 当放开键盘上的某个按键时触发此事件 |
窗口事件 | onabort | 图片在下载过程中被用户中断时触发此事件 |
- | onbeforeunload | 当前页面的内容将要被改变时触发此事件 |
- | onerror | 出现错误时触发此事件 |
- | onload | 页面内容加载完成时触发此事件 |
- | onmove | 当移动浏览器的窗口时触发此事件 |
- | onresize | 当改变浏览器的窗口大小时触发此事件 |
- | onscroll | 当滚动浏览器的滚动条时触发此事件 |
- | onstop | 当按下浏览器的停止按钮或者正在下载的文件被中断时触发此事件 |
- | oncontextmenu | 当弹出右键上下文菜单时触发此事件 |
- | onunload | 改变当前页面时触发此事件 |
表单事件 | onblur | 当前元素失去焦点时触发此事件 |
- | onchange | 当前元素失去焦点并且元素的内容发生改变时触发此事件 |
- | onfocus | 当某个元素获得焦点时触发此事件 |
- | onreset | 当点击表单中的重置按钮时触发此事件 |
- | onsubmit | 当提交表单时触发此事件 |
事件只有与 HTML 元素绑定之后才能被触发
onclick、onmouseover 、onmouseout 、onkeydown 、onkeyup 、onblur、onchange
例子,图片放大缩小
<!DOCTYPE html>
<html>
<head>
<title>图片</title>
</head>
<body>
<img id="imageId" src="fengjing.png" style="width: 100px;height:90px" onmouseover="big()" onmouseout="small()"/>
</body>
</html>
<script>
/**
* 放大图片
*/
function big(){
//定义宽度
document.getElementById("imageId").style.width='1000px';
//定义高度
document.getElementById("imageId").style.height='1000px';
}
/**
* 还原图片
*/
function small(){
//定义宽度
document.getElementById("imageId").style.width='100px';
//定义高度
document.getElementById("imageId").style.height='100px';
}
</script>
在函数内部声明的变量具有局部作用域,拥有局部作用域的变量也被称为“局部变量”
function myFun(){
var str = "Hello World!";
document.write(str); // 输出:Hello World!
}
document.write(str); // 报错:str is not defined