系统学习Javaweb8----JavaScript4（结束）
学习内容：
1.DOM对象
1.2DOM对象--元素对象常见属性
2.JS事件
2.1JS事件--入门案例
2.2JS事件--驱动机制
2.3常见JS事件--点击事件
2.4常见JS事件--点击事件
2.5常见JS事件--焦点事件
2.6常见JS事件--域内容改变事件
2.7常见JS事件--加载完毕事件
2.8常见JS事件--表单提交事件
2.9常见JS事件--键位弹起事件
2.9.*常见JS事件--常用鼠标事件
2.9.-JS事件绑定方式-元素事件句柄绑定.
2.9.+JS事件绑定方式-DOM绑定方式
学习内容：
4.3元素对象常见属性（HTML元素）
4.3.1、value
元素对象.value 获取元素对象的value属性值。
元素对象.value=属性值 设置元素对象的value属性值。
4.3.2、className
元素对象.className 获取元素对象的class属性值。
元素对象.className=属性值 设置元素对象的class属性值。
示例：
<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
<style>
.ys1{
color:red;
}
.ys2{
color:blue;
}
</style>
</head>
<body>
<input type="text" id="t1" value="你好"/>
<span id="s1" class="ys1">今天天气好晴朗</span>
<script type="text/javascript">
var t1=document.getElementById("t1");
alert(t1.value);
t1.value="你好嘛";
var s1=document.getElementById("s1");
alert(t1.className);
s1.className="ys2";
</script>
</body>
</html>
运行结果：
4.3.3、checked
元素对象.checked 获取元素的checked属性值
元素对象.checked=属性值 设置元素对象的checked属性
注：HTML中checked=“checked”，JavaScript中返回true
4.3.4、innerHTML
元素对象.innerHTML 获取元素对象的内容体
元素对象.innerHTML=值 设置元素对象的内容体
作用：操作元素的内容体。
5.JS事件
5.1、JS事件是什么？ 有什么作用?
通常鼠标或者热键的动作我们称之为事件（Event）
（点击、表单提交、值发生变化、鼠标移入、鼠标移出。）
通过JS事件，我们可以完成页面的指定特效。
5.2、JS驱动事件机制简述
页面上的特效，我们可以理解在JS事件驱动机制下进行。
JS驱动机制： 例如：警察抓小偷
事件源 小偷
事件 小偷偷东西
监听器 警察
注册/绑定监听器 让警察时刻盯着小偷
事件源：专门产生事件的组件
事件：由事件源所产生的动作或者事情
监听器：专门处理 事件源 所产生的时间
注册/绑定监听器：让监听器时刻监听事件源是否有指定事件产生，如果事件源产生指定事件，则掉用监听器处理。
5.3、常见JS事件。
5.3.1、点击事件 onclick
点击事件：由鼠标或热键点击元素组件时触发。
例如：
<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
<script type="text/javascript">
function run1(){
alert("提交成功！");
}
</script>
</head>
<body>
<input type="button" value="点我啊" onclick="run1()"/>
</body>
</html>
5.3.2、焦点事件 onbulr onfoucs
焦点：整个页面的注意力。
默认一个正常页面最多仅有一个焦点。
例如：文本框中闪烁的小竖线。
通常焦点也能反映出用户目前的关注点，或者正在操作的组件。
5.3.2.1、获取焦点事件
获取焦点事件：当元素组件获取焦点时触发。
示例：
<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
<script type="text/javascript">
function run1(){
alert("获取焦点成功");
}
</script>
</head>
<body>
<input type="text" value="点击获取焦点" onfocus="run1()" />
</body>
</html>
5.3.2.2、失去焦点事件 onblur
失去焦点事件：元素组件失去焦点时触发。
示例：
<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
<script type="text/javascript">
function run1(){
alert("失去焦点了");
}
</script>
</head>
<body>
<input type="text" value="点击其他地方失去焦点" onblur="run1()" />
</body>
</html>
5.3.3、域内容改变事件 onchange
域内容改变事件：元素组件的值发生改变时。
示例：
<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
<script type="text/javascript">
function run1(){
alert("对话框");
}
</script>
</head>
<body>
<select onchange="run1()">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="tj">天津</option>
</select>
</body>
</html>
5.3.4、加载完毕事件 onload
加载完毕事件：元素组件加载完毕时触发。
获取元素对象，保证元素对象先加载，建议把获取元素对象代码放在最后，有了这个之后就不用了
示例：
<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
<script type="text/javascript">
function run1(){
alert("加载完毕");
}
</script>
</head>
<body onload="run1">
你好
</body>
</html>
5.3.5、表单提交事件 onsubmit
表单提交事件：表单的提交按钮被点击时触发
注意：该事件需要返回boolean类型的值来执行 提交/阻止 表单数据的操作。
事件得到true，提交表单数据。
事件得到false，阻止表单数据提交。
<form onsubmit=”return hanshu()”></form>
示例：<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
<script type="text/javascript">
function run1(){
alert("表单提交成功");
return true;
}
</script>
</head>
<body >
<form onsubmit="return run1()">
<input type="text" name="uname"/><br/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
5.3.6、键位弹起事件 onkeyup
键位弹起事件：当组件中输入某些内容时，键盘键位弹起时触发该事件。
5.3.7、常见鼠标事件
5.3.7.1鼠标移入事件 onmouseover
鼠标移入事件：鼠标移入某个元素组件时触发
5.3.7.2鼠标移出事件 onmouseout
鼠标移出事件：鼠标移出某个组件时触发。
5.4、JS事件的两种绑定方式。
5.4.1、元素事件句柄绑定
将事件以元素属性的方式写到标签内部，进而绑定对应函数。
示例1：为事件绑定一个无参函数。
看以前的例子。
示例2：为事件绑定一个有参函数，参数是一个字符串。
<input type="text" onclick="run1('你好啊')"/><br/>
注意：双引号里面得是单引号
示例3：为事件绑定一个有参函数，函数是一个元素对象。
<input type="text" value="111111" onclick="run2(this)"/><br>
注意：用this指代这个元素即可。
示例2、3：
<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
<script type="text/javascript">
function run1(str){
alert(str);
}
function run2(obj)
{
alert(obj.value);
}
</script>
</head>
<body >
<input type="text" onclick="run1('你好啊')"/><br/>
<input type="text" value="111111" onclick="run2(this)"/><br>
</body>
</html>
示例四：绑定多个函数，且按顺序执行。
<input type="text" value="德玛西亚" onclick="run1('你好啊'),run2(this)"/><br/>
只需要依次用逗号隔开就行，写的顺序就是执行顺序。
示例：
<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
<script type="text/javascript">
function run1(str){
alert(str);
}
function run2(obj)
{
alert(obj.value);
}
</script>
</head>
<body >
<input type="text" value="德玛西亚" onclick="run1('你好啊'),run2(this)"/><br/>
</body>
</html>
事件句柄绑定方式
优点：开发便捷
传参方便
可以绑定多个函数
缺点：JS和HTML代码高度糅合在一起，不利于多部门开发维护。
5.4.2、DOM绑定方式
使用DOM事件的属性方式绑定事件。
两种写法：
1. 对象.事件属性 一次只能绑定一个函数，不能传递参数。
例如：window.onload=run1（）
2. 匿名函数方式 可以绑定多个函数，可以传递参数。
例如：window.onload=function(){
run1();
run2();
}
示例：
<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
<script type="text/javascript">
function run1()
{
alert("加载完毕");
}
window.onload=run1();
window.onload=function(){
run1();
}
</script>
</head>
<body>
你好
</body>
</html>
系统学习Javaweb8----JavaScript4（结束）的更多相关文章
- Linux系统学习笔记：文件I/O
Linux支持C语言中的标准I/O函数,同时它还提供了一套SUS标准的I/O库函数.和标准I/O不同,UNIX的I/O函数是不带缓冲的,即每个读写都调用内核中的一个系统调用.本篇总结UNIX的I/O并 ...
- Hibernate的系统 学习
Hibernate的系统 学习 一.Hibernate的介绍 1.什么是Hibernate? 首先,hibernate是数据持久层的一个轻量级框架.数据持久层的框架有很多比如:iBATIS,myBat ...
- 系统学习 Java IO (十五)----字符读写 Reader/Writer 其他子类
目录:系统学习 Java IO---- 目录,概览 跟踪行号的缓冲字符输入流 LineNumberReader LineNumberReader 类是一个 BufferedReader ,用于跟踪读取 ...
- 系统学习 Java IO (一)----输入流和输出流 InputStream/OutputStream
目录:系统学习 Java IO ---- 目录,概览 InputStream 是Java IO API中所有输入流的父类. 表示有序的字节流,换句话说,可以将 InputStream 中的数据作为有序 ...
- 系统学习机器学习之神经网络（三）--GA神经网络与小波神经网络WNN
系统学习机器学习之神经网络(三)--GA神经网络与小波神经网络WNN 2017年01月09日 09:45:26 Eason.wxd 阅读数 14135更多 分类专栏: 机器学习 1 遗传算法1.1 ...
- 系统学习Javaweb6----JavaScript2
感想:感觉自己还是只是学到皮毛,仍需继续努力,明天开始需要学习Android和阅读感想的书写. 学习笔记: 2.3.运算符 JavaScript运算符与java运算符基本一致. 这里我们来寻找不同点进 ...
- 零基础如何系统学习Java Web
零基础如何系统学习Java Web? 我来给你说一说 你要下决心,我要转行做开发,这样你才能学成. 你要会打字,我公司原来有一个程序员,打字都是两个手一指禅,身为程序员你一指禅怎么写出的代码,半个 ...
- Unity3D 装备系统学习Inventory Pro 2.1.2 基础篇
前言 前一篇 Unity3D 装备系统学习Inventory Pro 2.1.2 总结 基本泛泛的对于Inventory Pro 这个插件进行了讲解,主要是想提炼下通用装备系统结构和类体系.前两天又读 ...
- MES系统学习
MES系统是当今制造型企业信息化的热点,而统一建模语言UML是面向对象建模的标准语言,在软件工程发挥着重要作用.MES系统如何进行UML建模呢,今天和大家重点讨论一下MES系统的UML建模方法,请看本 ...
随机推荐
- JavaWeb之监听器
1. 介绍 监听器是一个专门用于对其他对象身上发生的事件或状态改变进行监听和相应处理的对象,当被监视的对象发生情况时,立即采取相应的行动.监听器其实就是一个实现特定接口的普通java程 ...
- Springboot 2.x 如何解决重复提交 （本地锁的实践）
有没有遇到过这种情况:网页响应很慢,提交一次表单后发现没反应,然后你就疯狂点击提交按钮(12306就经常被这样怒怼),如果做过防重复提交还好,否则那是什么级别的灾难就不好说了... 本文主要是应用 自 ...
- Jshint 安装方法
首先在编辑器中搜索扩展程序 "Jshint" 并安装,安装成功后 打开Javascript文件会出现报错提示: "Failed to load jshint librar ...
- Emoji表情符号兼容方案
Emoji表情符号兼容方案 一 什么是Emoji emoji就是表情符号:词义来自日语(えもじ,e-moji,moji在日语中的含义是字符) 表情符号现已普遍应用于手机短信和网络聊天软件. em ...
- Vue.js（4）- 生命周期
当new的时候,就创建了一个vue实例,这个实例就是vue框架的入口,也是VM层 <!DOCTYPE html> <html lang="en"> < ...
- Python中使用print打印进度条
import time for i in range(0,101,2): time.sleep(0.1) char_num = i//2 #打印多少个'*' per_str = '\r%s%% : % ...
- RTMP、RTSP
一.参考网址 1.RTMP.RTSP.HTTP视频协议详解(附:直播流地址.播放软件) 2.海康RTSP流转RTMP并推送至WEB端展示 3.使用FFmpeg将rtsp流摄像头视频转码为rtmp播放 ...
- u-boot中filesize环境变量【转载】
转载地址:https://blog.csdn.net/fzs333/article/details/48518559 U-Boot中的环境命令可以使用$(filesize)来确定刚下载(传输)得到的文 ...
- MyBatis 懒加载
懒加载的概念 MyBatis中的延迟加载,也称为懒加载,是指进行关联查询时,按需执行子查询. 当程序需要获取|使用关联对象时,mybatis再执行子查询,这样可以减轻数据库的压力,在一定程度上可以降低 ...
- Mybatis学习——初始MyBatis
什么是MyBatis框架? MyBatis框架是一种ORM(既对象关系映射)框架. 什么是ORM框架? 是一种为了解决面向对象与关系数据库之间数据不匹配的技术,它通过描述Java对象和关系数据库表之间 ...