系统学习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建模方法,请看本 ...
随机推荐
- Servlet详细教程
Servlet简介 servlet是Server Applet的简称,翻译过来就是服务程序．好吧,这么说你可能还是不太懂,简单的讲,这个servlet是运行在服务器上的一个小程序,用来处理服务器请求的 ...
- 大数据高可用集群环境安装与配置（03）——设置SSH免密登录
Hadoop的NameNode需要启动集群中所有机器的Hadoop守护进程,这个过程需要通过SSH登录来实现 Hadoop并没有提供SSH输入密码登录的形式,因此,为了能够顺利登录每台机器,需要将所有 ...
- 题解 P1317 【低洼地】
题目 这题挺简单的,没必要用数组 [分析] 需要判断的是低洼地的数量 通过对题目中图进行分析,显然可以发现低洼地的定义: 若数组中存在一个数值相同的连续区间,这个区间端点外相邻两点的数值都大于该区间的 ...
- pycharm实用技巧
https://mp.weixin.qq.com/s/-48vU9KtnInFaYJ6rQ9n-w
- SQL基础教程（第2版）第5章 复杂查询：5-2 子查询
第5章 复杂查询:5-2 子查询 ● 一言以蔽之,子查询就是一次性视图( SELECT语句).与视图不同,子查询在SELECT语句执行完毕之后就会消失.● 由于子查询需要命名,因此需要根据处理内容来指 ...
- Django1.11模型类数据库操作
django模型类数据库操作 数据库操作 添加数据 1,创建类对象,属性赋值添加 book= BookInfo(name='jack',pub_date='2010-1-1') book.save() ...
- 109.大型的csv文件的处理方式
HttpResponse对象将会将响应的数据作为一个整体返回,此时如果数据量非常大的话,长时间浏览器没有得到服务器的响应,就会超过默认的超时时间,返回超时.而StreamingHttpResponse ...
- MySQL-SQL语句分类
MySQL中的SQL语句有:DDL,DML,DCL,DQL,TCL DDL:数据库定义语言 data Definition language 用于创建.修改.和删除数据库内的数据结构,如: 1:创建和 ...
- 提高WiFi上网速度
https://jingyan.baidu.com/article/1876c852aa668c890b1376c4.html http://www.coozhi.com/youxishuma/you ...
- 吴裕雄--天生自然 PHP开发学习：魔术常量
<?php echo '这是第 " ' . __LINE__ . ' " 行'; ?> <?php echo '该文件位于 " ' . __FILE__ ...