系统学习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建模方法,请看本 ...
随机推荐
- [极客大挑战 2019]Upload
0x00 知识点 一个常规上传题目,知识点全都来自前几天写的文章: https://www.cnblogs.com/wangtanzhi/p/12243206.html 1:某些情况下绕过后缀名检测: ...
- Codeforces 1296E1 - String Coloring (easy version)
题目大意: 给定一段长度为n的字符串s 你需要给每个字符进行涂色,然后相邻的不同色的字符可以进行交换 需要保证涂色后能通过相邻交换把这个字符串按照字典序排序(a~z) 你只有两种颜色可以用来涂 问是否 ...
- c++ 字母排序
char a[123] = {'Z', 's', 'p', 'l', 'j', 'r', 'q', 'v', 'n', 'm', 'C', 'F', 'D', 'B', 'A', '2', '0', ...
- MySQL--从库启动复制报错1236
链接:http://blog.csdn.net/yumushui/article/details/42742461 今天在搭建一个MySQL master-slave集群时,执行了change mas ...
- 数组 bash shell
http://www.cnblogs.com/chengmo/archive/2010/09/30/1839632.html #!/bin/bash # 脚本检测到离线主机会发送邮件通知,可一直运行. ...
- dp--树形dp P1352 没有上司的舞会
题目描述 某大学有N个职员,编号为1~N.他们之间有从属关系,也就是说他们的关系就像一棵以校长为根的树,父结点就是子结点的直接上司.现在有个周年庆宴会,宴会每邀请来一个职员都会增加一定的快乐指数Ri, ...
- Jenkins 插件中心国内镜像源发布
以下文章来源于Jenkins,作者LinuxSuRen Jenkins 社区的网络基础设施都是架设在国外的服务器上,而且,并没有在国内有 CDN 或者负载均衡的配置.对所有的 Jenkins 用户而言 ...
- 寒假day15
今天完成了毕设的人才动态模块,同时刷了计算机网络的相关面试题
- paddle(一)
一.概述 一个机器学习的框架,提供了深度学习需要的神经网络,激活函数等主要功能. 基础概念 Program 一次模型训练就是一个program,通过执行器执行,默认环境下是执行fluid.defaul ...
- 3D打印前途光明，它需要怎样的进化？
在很长一段时间内,笔者都认为3D打印只会存在于科幻场景内,众多的科技大佬在前几年也和我保持相当一致的看法,代工大王郭台铭曾口出狂言:如果3D打印能够普及,我就把"郭"字倒过来写,时 ...