系统学习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建模方法,请看本 ...
随机推荐
- Json字符串转Java对象和List集合
对象POJO和JSON互转 public class JsonUtil { /** * JSON 转 POJO */ public static <T> T getObject(Strin ...
- h5-动画基本介绍
1.介绍 *{ ; ; } div{ width: 200px; height: 200px; background-color: #5aff61; /*添加动画效果*/ /*1.animation- ...
- Maven:org.apache.maven.archiver.MavenArchiver.getManifest错误
Eclipse导入maven多模块工程时报错org.apache.maven.archiver.MavenArchiver.getManifestorg.apache.maven.archiver.M ...
- swoole怎么连接数据库
异步连接到MySQL服务器. $serverConfig为MySQL服务器的配置,必须为关联索引数组 $callback连接完成后回调此函数 swoole连接数据库实例: 推荐学习:swoole教程 ...
- MST(最小生成树)——Prim算法——HDU 1879-继续畅通工程
Prim算法很好理解,特别是学完了迪杰斯特拉算法之后,更加能理解Prim的算法思想 和迪杰斯特拉算法差不多,由于最后要形成连通图,故任意指定一个点,作为初始点,遍历所有点,以当前最小权值的点(和迪杰斯 ...
- java AES加解密
AES加解密工具类 package com.yan.demo; import org.apache.commons.lang3.StringUtils; import sun.misc.BASE64D ...
- 《打造扛得住的MySQL数据库架构》第4章 MySQL数据库结构优化
4-1 数据库结构优化介绍 良好的数据库逻辑设计和物理设计是数据库获得高性能的基础. 1.减少不必要的数据冗余. 2.尽量避免数据维护中出现更新,插入和删除异常. 插入异常:如果表中的某个实体随着另一 ...
- 从Evernote大批顶尖高管离职，看处于漩涡中的笔记应用未来前景
无论是巨头,还是独角兽,甚至是小而美的某些企业,在发生高管离职.裁员等情况时,总会引起业界的广泛关注.究其原因,就在于高管离职.裁员等往往意味着企业内部发生了动荡,甚至还会直接反映出所在行业的发展趋势 ...
- java日志处理汇总
org.apache.commons.lang3.time.DateUtils https://blog.csdn.net/yihaoawang/article/details/50638199
- Python说文解字_defaultdict
1. 这个构造函数需要一个函数作为参数,每当访问一个字典中不存在的键时,将会不带参数的调用这个函数,并将结果设定为默认值. 2. 众所周期,如果访问字典中不存在的键时,会引发KeyError异常. 其 ...