JavaScript(二)-精简
十三 DOM(文档对象模型)
１ 作用 ： 可访问javascript HTML文档的所有元素．
２ 功能： (1) 改变html输出流
eg: <script>
document.write(Date());
</script>
(2) 改变HTML内容
eg: <p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
<p>以上段落通过脚本修改文本。</p>
(3) 改变HTML属性
eg:
<img id="image" src="smiley.gif" width="160" height="120">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
(4) 改变css样式
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通过脚本修改。</p>
(5)使用的事件
１ 元素被点击
eg:
<h1 id="id1">我的标题 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color='red'">
点我!</button>
２ 如需向ＨTML元素分配事件，可以使用事件属性
eg：
<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button onclick="displayDate()">点这里</button>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
３ onload 和 onunload 事件
用于在进入或离开页面时被触发，
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
eg:
function mymessage(){
alert("消息在 onload 事件触发后弹出。");
}
<body onload="mymessage()"></body>
４ onchange事件
onchange事件常结合对输入字段的验证来输入，
function myFunction(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
输入你的名字: <input type="text" id="fname" onchange="myFunction()">
5 onfocus事件（当输入字段获得焦点时，改变其背景色）
eg:
function myFunction(x){
x.style.background="yellow";
}
输入你的名字:
<input type="text" onfocus="myFunction(this)">
6 onmouseover 和 onmouseout 事件
可用在用户的鼠标移至HTML元素上方或移出元素时触发的函数．
eg:
<style>
div{
background-color:#D94A38;
width:120px;
height:20px;
padding:40px;
}
</style>
<div onmouseover="mOver(this)" onmouseout="mOut(this)">Mouse Over Me</div>
<script>
function mOver(obj){
obj.innerHTML="Thank You"
}
function mOut(obj){
obj.innerHTML="Mouse Over Me"
}
</script>
7 onmousedown , onmouseup, onclick 事件
nmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。
首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，
最后，当完成鼠标点击时，会触发 onclick 事件。
十四 EventListener 方法
一 语法
element.addEventListener(event,function,useCapture);
１ 第一个参数是事件的类型（如 "click"或 "mousedown").
2 第二个参数是事件触发后调用的函数．
３ 第三个参数是布尔值用于描述事件是冒泡还是捕获(该参数可选)
二 事件冒泡或事件捕获
事件传递的两种方式 ： 冒泡 和 捕获
三 addEventListener()方法
作用： １ 用于指定元素添加事件句柄
eg:
<button id="myBtn">点我</button>
document.getElementById("myBtn").addEventListener("click", function(){
alert("Hello World!");
});
２ 可以向一个元素添加多个事件句柄，也可以添加同类型的事件句柄，，且不会覆盖已存在的事件．
例如 (1)（两个"click事件"同类型事件）
<button id="myBtn">点我</button>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);
function myFunction() {
alert ("Hello World!")
}
function someOtherFunction() {
alert ("函数已执行!")
}
(2) 向同个元素添加不同类型的事件
<button id="myBtn">点我</button>
<p id="demo"></p>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);
function myFunction() {
document.getElementById("demo").innerHTML += "Moused over!<br>"
}
function mySecondFunction() {
document.getElementById("demo").innerHTML += "Clicked!<br>"
}
function myThirdFunction() {
document.getElementById("demo").innerHTML += "Moused out!<br>"
}
３ removeEventListener() 方法来移除事件的监听．
eg:
<div>
<p>点击按钮移除 DIV 的事件句柄。</p>
<button onclick="removeHandler()" id="myBtn">点我</button>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
４ 向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。
如： window 对象，Html元素, Html文档．
５ 传递参数
eg: <button id="myBtn">点我</button>
<p id="demo"></p>
var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function(){
myFunction(p1, p2);
});
function myFunction(a, b) {
var result = a * b;
document.getElementById("demo").innerHTML = result;
}
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 300px;
height: 300px;
background-color: red;
font-size: 30px;
color:yellow;
}
</style>
<script>
function dian(){
document.getElementById('aa').innerHTML="您被点击了";
document.getElementById('aa').style.background="blue";
}
function fang(){
var x = document.getElementById('aa').innerHTML="您被放开了";
document.getElementById('aa').style.background="black";
}
</script>
<style>
div{
/*background-color: coral;
border: 1px solid;
padding: 50px;*/
}
</style>
</head>
<body>
<!--
<div id="aa" onmousedown="dian()" onmouseup="fang()">Thank You</div>
<h1 onmouseover="style.color='red'"onmouseout="style.color='black'">
将鼠标移至文部上
</h1> -->
<p>实例演示了在添加不同事件监听时，冒泡与捕获的不同。</p>
<div id="myDiv">
<!-- 在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，
即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。 -->
<!-- <p id="myP">点击段落，我是冒泡。</p> -->
</div><br>
<div id="myDiv2">
<!-- 在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，
即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。 -->
<!-- <p id="myP2">点击段落，我是捕获。 </p> -->
</div>
<script>
// document.getElementById("myP").addEventListener("click", function() {
// alert("你点击了 P 元素!");
// }, false);
//
// document.getElementById("myDiv").addEventListener("click", function() {
// alert(" 你点击了 DIV 元素 !");
// }, false);
//
// document.getElementById("myP2").addEventListener("click", function() {
// alert("你点击了 P2 元素!");
// }, true);
//
// document.getElementById("myDiv2").addEventListener("click", function() {
// alert("你点击了 DIV2 元素 !");
// }, true);
</script>
<!--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>DOM对象</title>
<style>
#div{
width: 200px;
height: 200px;
background-color: bisque;
}
</style>
<script>
function fn_a(){
document.write("hello world!");
}
// 变 HTML 元素的内容
function fn_b(){
document.getElementById("hh").innerHTML="我是地球人";
}
// 改变 HTML 元素的属性
function fn_c(){
document.getElementById("a").href="http://www.qq.com";
}
// 改变 HTML 元素的样式
function fn_d(){
document.getElementById("div").style.backgroundColor="blue";
}
// 向 HTML 元素分配事件
function fn_e(){
document.getElementById("div").onclick=function(){
document.getElementById("div").style.backgroundColor="red";
}
}
</script>
</head>
<body onload="fn_e()">
<h1 id="hh">我是中国人</h1>
<a href="http://baidu.com" id="a">搜我一下</a><br><br>
<div id="div">我是div</div>
<button onclick="fn_b()">改变文本内容</button><br><br>
<button onclick="fn_c()">改变属性</button><br><br>
<button onclick="fn_d()">改变css样式</button><br><br>
</body>
</html>
-->
</body>
</html>
JavaScript(二)-精简的更多相关文章
- 从头开始学JavaScript (二)——变量及其作用域
原文:从头开始学JavaScript (二)--变量及其作用域 一.变量 ECMAscript变量是松散型变量,所谓松散型变量,就是变量名称可以保存任何类型的数据,每个变量仅仅是一个用于保存值的占位符 ...
- SkylineDemoForWeb JavaScript二次开发示例代码
SkylineDemoForWeb JavaScript二次开发示例代码 http://files.cnblogs.com/files/yitianhe/SkylineDemoForWeb.zip
- JavaScript二(第一个js程序)
一.<script>xxxx</script>标签解析 1.charset :可选,表示通过src属性指定的字符集,由于大多数浏览器忽略它,所以很少有人用它2.defer:可选 ...
- Javascript 二维码生成库：QRCode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 初识JavaScript(二)
初识JavaScript(二) 我从上一篇<初识JavaScript(一)>知道和认识JavaScript的词法结构,也开始慢慢接触到了JavaScript的使用方法,是必须按照JavaS ...
- (转)JavaScript二：JavaScript语言的基本语法要求
摘自:http://blog.csdn.net/erlian1992 要学习好JavaScript,首先我们要懂JavaScript语言的一些基本语法要求: 一,区分大小写 JavaScript语言区 ...
- 以Python角度学习Javascript(二)之DOM
HTML DOM 定义了访问和操作 HTML 文档的标准方法. DOM 将 HTML 文档表达为树结构. 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文 ...
- javascript二维数组
var a= new Array(new Array(1,2),new Array('b','c')); document.write(a[1][1]); 说白了,就是利用for循环定义二维数组! & ...
- javascript二维数组排序
js使用sort()函数对二维数组快速排序的写法 作者:admin 时间:2015-7-3 9:31:4 浏览:1847 js数组的排序方法有很多,冒泡法,插入法等等,不过对于数组的排序来 ...
随机推荐
- UVa 10375 选择与除法（唯一分解定理）
https://vjudge.net/problem/UVA-10375 题意: 输入整数p,q,r,s,计算C(p,q)/C(r,s). 思路: 先打个素数表,然后用一个数组e来保存每个素数所对应的 ...
- JDK_源码
1.http://hg.openjdk.java.net/ (ZC:这个貌似像官网的样子,不知道 到底是不是...) 1.1.jdk8u_jdk8u_jdk_ 5b86f66575b7 _src_.h ...
- 如何借助 OVN 来提高 OVS 在云计算环境中的性能
众所周知,OpenvSwitch 以其丰富的功能和不错的性能,已经成为 Openstack 部署中最受欢迎的虚拟交换机.由于 Openstack Neutron 的架构引入了一些性能问题,比如 neu ...
- 如何修改SQL Server 2008数据库服务器名称
在做数据库发布订阅的时候我们经常要碰到要使用服务器名称来进行. 那么我们经常会碰到的问题是,现在开始大量的使用云服,我们只需要一台服务器搭建好环境,做一个备份镜像,还原到其他的服务器上就可以了,但是问 ...
- IntelliJ IDEA自定义类和方法注解模板
现在Java开发主流工具应该是Intelij Idea 方便快捷. 本文将主要介绍如何用Intelij Idea配置类及方法的注释模板提高代码注释效率 1. 配置类注解模板 找到配置页面 File - ...
- 由 '' in 'abc' return True 引发的思考----Python 成员测试操作
最近遇到判断字典中是否存在空字符串‘’,这个很好判断,直接用:‘’ in ['a','b','c'],就可以直接判断出来:但是当我对字符串使用 “in” 方法进行判断的时候,发现:‘’ in ‘abc ...
- E: 无法获得锁 /var/cache/apt/archives/lock - open (11 资源临时不可用)
事件: 今软件包有更新,进入更新管理器,点击安装更新,出现错误. 错误提示: E: 无法获得锁 /var/cache/apt/archives/lock - open (11 资源临时不可用) E: ...
- hell 1>&2 2>&1 &>filename重定向的含义和区别
当初在shell中, 看到">&1"和">&2"始终不明白什么意思.经过在网上的搜索得以解惑.其实这是两种输出. 一.linux重定 ...
- java的继承（编程思想）
继承语法: extends 初始化基类: 由于现在设计基类和导出类两个类,而不是一个类,所以要试着想像导出类锁产生的结果对象,会有些困惑.从外部看来,它就像是一个与基类具有相同接口的新类,或许还会有一 ...
- IOS下使用多线程
ios有三种主要方法:1.NSThread.2.NSOperation.3.GCD. 1. NSThread: 调用方法如下:如果需要函数参数的话,可以通过Object传递. 1.1:[NSThre ...