重拾javascript动态客户端网页脚本
笔记一:
一、DOM
作用:
· DOM(Doument Object Model)
1、document文档 HTML 文件 (标记语言)
<html>
<head>
</head>
<body>
<div>
<a>wwwwwwwwwwwww</a>
</div>
</body>
</html>
2、Object对象(HTML元素转成的对象(js对象))
注意,如果使用javascript操作html文档,就需要选择将html文档结构转成javascript对象
a、操作属性
· innerText(IE兼容) textContent(火狐兼容)
innerHTML
outText
outHtml
b、操作表单
用value属性来操作
c、操作样式
aobj.stytle.backgroundcolor="red";
aobj.stytle.fontsize="3cm"
对多个样式的操作要用className操作
aobj.className="test";
aobj.className+=" demo";
aobj.className="";
有了以上三点的操作之前先转成对象
转成对象的两种格式
1、标记名(多个) id(唯一) name(多个)
doucument中的三个方法
var objs.document.getElementByTagname("div");
var objs.document.getElementById("div");
var objs.document.getElementByname("div");
<一>、将文档想成一个倒树,每一部分(元素、内容、属性、注释)都是一个节点
<二>、只要知道一个节点,按关系找到其他节点
父节点:parentNode
子节点:childNodes firstNode lastNode
同胞节点:(上一个,下一个) nextSibling previousSibling
<三>、找到节点 :节点类型nodeType、节点名nodeName、节点值nodeValue
每个节点都包含着关于节点某些信息的属性,这些属性是:
nodeName(节点类型)
nodeValue(节点值)
nodeType(节点类型)
nodeName属性含有节点名称
元素节点nodeName是标签名称
属性节点nodeName是属性名称
文本节点nodeName永远是#text
文档节点的nodeName永远是#document
注释:nodeName所包含的XML元素的标签名称永远是大写的
对于文本节点,nodeValue属性包含文本
对于属性节点安,nodeValue属性包含属性值
nodeValue属性对于文档节点和元素节点是不可用的
valueType属性可返回节点的的类型
最重要的节点类型是:
——————————————————————————————————
元素类型 节点类型(nodeType)
元素 1
属性 2
文本 3
注释 8
文档 9
——————————————————————————————————
可以在一个文档流中
1、创建节点
document.createElement("节点名");
2、添加到文档流中
3、删除节点
eg:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<div>
<u>ddddddd</u>
<h>ddddddh</h>
<p id="pp">
<a>aaaaaaaaaaaaaaa</a>
<span>wwwwwwwwwwwwww</span>
</p>
<h2></h2>
<i>dddddddddd</i>
</div>
<script>
var pobj=document.getElementById("p");
alert(pobj.parentNode.nodeName);//找父节点
alert(pobj.childNodes.length);//找子节点
alert(pobj.childNodes[0].nodeName);//找第一个标签,就是这里的a标签
alert(pobj.lastChild.nodeName);//找最后一个子节点
alert(pobj.firstChild.nodeName);//找第一个子节点
alert(pobj.nextSibling.nodeName);//找下一个同胞节点
alert(pobj.nextSibling.nextSibling.nodeName);//找下一个的下一个
alert(pobj.previousSibling.previousSibling.nodeName);
</script>
<body>
</body>
</html>
二、BOM
笔记二
事件处理
一、事件源:任何一个HTML元素(节点),body、div、button、p、a、h1
二、事件:你的操作
鼠标:
click点击事件
dblick双击事件
contextmenu(在body)文本菜单事件
mouseover鼠标放上
mouseout鼠标离开
mousedown鼠标按下
mouseup鼠标抬起
mousemove鼠标移动
键盘:(数字键、功能键、字母键、方向键)
keypress键盘事件
keyup键盘抬起(数字字母键触发事件)
keydown键盘按下(任意键触发事件)
文档:
load加载
unload关闭
beforeunload关闭之前
表单:
focus获取焦点事件
blur失去焦点
submit提交事件
change改变
其他:
scroll滚动事件
selected事件
。。。。。。。。。
、
住:事件要让他不往下执行,让她本身返回假就好
三、事件处理程序
第一种:
格式:
<tag(在此代表所有事件) on事件="事件处理程序"/>
eg:
------------------------------------------------------------------------
<div id="one">
wwwwwwwww
</div>
<script>
function show(){
var one=document.getElementById("one");
alert(one.innerText);
}
</script>
<input type="button" onclick="show()" value="show">
------------------------------------------------------------------------
第二种:
格式:
<script>
对象.on事件=事件处理程序
</script>
eg:
------------------------------------------------------------------------
html>
<div id="one">
wwwwwwwww
</div>
<script>
var one=document.getElementById("id")
one.onclick=function(){
this.style.background="red";
}
</script>
<input type="button" onclick="show()" value="show">
</html>
------------------------------------------------------------------------
第三种:
格式:
<script for="事件源id" event="事件">事件处理程序</script>
eg:
-----------------------------------------------------------------------
<html>
<div id="one">wwwwwwwww </div>
<script for="one" event="onclick" >
var one=document.getElementById("one");
one.style.backgroundColor="red";
</script>
</html>
------------------------------------------------------------------------
eg:
---------------------------------------------------------------------
<html>
<div id="one" onmouseover="show(this,'red')" onmouseout="show(this,'blue') " onclick="show(this,'yellow')" ondblclick="show(this,'green')">wwwwwwwww</div>
<script>
function show(obj,col){
obj.style.backgroundColor=col;
}
</script>
</html
---------------------------------------------------------------------
四、事件对象:
属性:
1、srcElement(源元素)(事件源对象)
eg:
————————————————————————————————————————
<div onclick="show()"> aaaaaaaaaaa</div>
<h2 onclick="show()">bbbbbbbbbbbbbb</h2>
<p onclick="show()">cccccccccccccc</p>
<script>
function show(){
event.srcElement.innerText="abc";
//等价于window.enent.srcElement.innerText="abc";,window可省略
//event为事件发生时产生的一个事件对象,在事件发生时就可用来取出源程序
}
</script>
————————————————————————————————————————
2、keyCode(键盘码)(键盘事件)(event.keyCode返回按键的值)
eg1:
————————————————————————————————————————
<input type="text" onkeyup="this.value=this.value.toUpperCase()"><br>
//在这种情况下,当光标移动到前面删除部分字符后,鼠标焦点就会立马移到最后,为解决这种情况,可以这样写
<input type="text" onkeyup="if(this.value!=this.value.toUpperCase()) this.value=this.value.toUpperCase()"><br>
————————————————————————————————————————
eg2:
________________________________________________________________________________
<body onkeydown="show()">
<script>
function show(){
alert(event.keyCode);
}
</script>
</body
________________________________________________________________________________
eg3:
————————————————————————————————————————
<div id="one" style="color:red;font-size:10cm;text-align:center">0</div>
<body >
<script>
var one=getElementById("one");
var i=1;
setInterval(function(){
one.innnerText=i;
i++;
},1000);
</script>
</body>
————————————————————————————————————————
3、事件event 等价于window.event
(1)、srcElement 代表源事件
(2)、keyCode 事件发生时的键盘码 keypress keydown keyup
(3)、clientX,clientY 获取鼠标的坐标(eg:event.clientX返回鼠标的x轴坐标 注意,这里的坐标是以浏览器页面左上角为原点,自左向右为x轴,自上向下为y轴)
(4)、screenX,screenY 获取鼠标坐标(eg:event.screenX返回鼠标的x轴坐标 注意,这里的坐标是以屏幕左上角为原点,自左向右为x轴,自上向下为y轴))
(5)、returnValue
(6)、cancelBubble
注:事件对象存在兼容性问题javascript事件对象下,也就是第十四节有详细讲解
在网页中鼠标坐标的获取:代码如下:
<body onmousemove="test()">
<div id="one"></div>
<script>
var one=document.getElementById("one");
function test(){
//获取坐标
var Cx=event.clientX;
var Cy=event.clientY;
var Sx=event.screenX;
var Sy=event.screenY;
var str="clientX="+Cx+",clientY="+Cy+",screenX="+Sx+",screenY="+Sy;
one.innerText=str;//在网页中显示坐标
window.status=str;//在状态栏中显示坐标
window.document.title=str;//在标题中显示坐标
}
</script>
</body>
这个鼠标坐标获取代码存在兼容性问题,只能在IE中运行,在非IE内核中会不兼容,下面做以改进:
<body onmousemove="test()">
<div id="one"></div>
<script>
var one=document.getElementById("one");
window.onmousemove=function(e){
//其他非IE浏览器传入事件对象是在事件处理器里直接等于一个函数,默认将函数这个参数传进来,而IE直接就是传入这个对象,不用任何参数,默认传入这个对象
var ev=e || window.event;//如果第一个成立,就用非IE浏览器打开,不再执行后面的,如果不成立,就用IE打开
//获取坐标
var Cx=ev.clientX;
var Cy=ev.clientY;
var Sx=ev.screenX;
var Sy=ev.screenY;
var str="clientX="+Cx+",clientY="+Cy+",screenX="+Sx+",screenY="+Sy;
//注意:innnerText在其他大多非IE浏览器中不兼容,在IE中兼容,
one.innerHTML=str;//在网页中显示坐标
window.status=str;//在状态栏中显示坐标
window.document.title=str;//在标题中显示坐标
}
</script>
</body>
以下代码是一个改变菜单项的代码
将以下代码写入网页中,打开网页,单击鼠标右键即可执行show()方法
<body oncontextmenu="show()">
<script>
function show(){
alert("0000000000");
window.event.returnValue=false;
}
</script>
</body>
将以下代码写入网页,在网页即将关闭时,可弹出一个框,显示返回信息你小心点
<body onbeforeunload="window.event.returnValue='你小心点'">
<script>
</script>
</body>
在执行下述代码的时候,点击body体会弹出body onclick #######,点击图片的时候会弹出img onclick +++++++,当再次点击确定的时候,会不断地弹框,由于图片也是在body体里的,点击图片事件是同样会触发body体的点击事件,所以说,这个时候,我们就要用到cancelBubble事件了
</body>
<body onclick="one()">
<img src="gif图片/u=3045238994,2349249283&fm=21&gp=0.jpg.gif" onclick="two()">
<script>
function one(){
alert("body onclick #######");
}
function two(){
alert("img onclick +++++++");
}
</script>
</body>
以下对该段代码做出改进:
<body onclick="one()">
<img src="gif图片/u=3045238994,2349249283&fm=21&gp=0.jpg.gif" onclick="two()">
<script>
function one(){
alert("body onclick #######");
}
function two(){
alert("img onclick +++++++");
window.event.cancelBubble=true;//阻止继续弹框
}
</script>
</body>
框架的鼠标点击拖动
<style>
.one1{
position:absolute;left:100px;top:100px;width:200px;height:30px;background:red;}
</style>
<body>
<input type="button" onClick="crea()" value="add" />
<script>
var one=null;
function crea(){
if(one!=null)
return;
//创建div标签
one=document.createElement("div");
one.className="one1";
one.style.top="100";
one.style.left="100";
one.style.width="200px";
one.style.height="30px";
//向body体里添加子节点
document.body.appendChild(one);
one.onmousedown=function(e){
var ev=e||window.event;
dx=ev.clientX;
dy=ev.clientY;
//获取的是带像素的,所以要将其转换为整数
sx=parseInt(one.style.left);
sy=parseInt(one.style.top);
if(!down)
down=true;
}
one.onmouseup=function(){
if(down)
down=false;
}
}
//var one=document.getElementById("one");
var down=false;
//鼠标左键按下时鼠标的坐标
var dx=0;
var dy=0;
//样式的左顶点的位置
var sx=0;
var sy=0;
document.onmousemove=function(e){
var ev=e||window.event;
if(down){
//鼠标的移动位置等ev.clientX-(dx-sx),ev.clientY-(dy-sy))
one.style.top=ev.clientY-dy+sy;
one.style.left=ev.clientX-dx+sx;
//等价于one.style.left=ev.clientX-(dx-sx);
}
}
</script>
</body>