重拾javascript动态客户端网页脚本

最新推荐文章于 2021-02-26 23:45:11 发布

aipgbfj5971

最新推荐文章于 2021-02-26 23:45:11 发布

阅读量131

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/Gaopengfei/p/3701011.html

版权

笔记一：

一、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">

<head>

<title>无标题文档</title>

</head>

<div>

<u>ddddddd</u>

<h>ddddddh</h>

<a>aaaaaaaaaaaaaaa</a>

<span>wwwwwwwwwwwwww</span>

</p>

<i>dddddddddd</i>

</div>

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：

------------------------------------------------------------------------

wwwwwwwww

</div>

function show(){

var one=document.getElementById("one");

alert(one.innerText);

}

</script>

------------------------------------------------------------------------

第二种：

格式：

对象.on事件=事件处理程序

</script>

eg:

------------------------------------------------------------------------

html>

wwwwwwwww

</div>

var one=document.getElementById("id")

one.οnclick=function(){

this.style.background="red";

}

</script>

</html>

------------------------------------------------------------------------

第三种：

格式：

eg:

-----------------------------------------------------------------------

<html>

<div id="one">wwwwwwwww </div>

var one=document.getElementById("one");

one.style.backgroundColor="red";

</script>

</html>

------------------------------------------------------------------------

eg:

---------------------------------------------------------------------

<html>

<div id="one" οnmοuseοver="show(this,'red')" οnmοuseοut="show(this,'blue') " οnclick="show(this,'yellow')" οndblclick="show(this,'green')">wwwwwwwww</div>

function show(obj,col){

obj.style.backgroundColor=col;

}

</script>

</html

---------------------------------------------------------------------

四、事件对象：

属性：

1、srcElement（源元素）（事件源对象）

eg：

————————————————————————————————————————

<div οnclick="show()"> aaaaaaaaaaa</div>

<h2 οnclick="show()">bbbbbbbbbbbbbb</h2>

<p οnclick="show()">cccccccccccccc</p>

function show(){

event.srcElement.innerText="abc";

//等价于window.enent.srcElement.innerText="abc";，window可省略

//event为事件发生时产生的一个事件对象，在事件发生时就可用来取出源程序

}

</script>

————————————————————————————————————————

2、keyCode(键盘码)（键盘事件）（event.keyCode返回按键的值）

eg1：

————————————————————————————————————————

//在这种情况下，当光标移动到前面删除部分字符后，鼠标焦点就会立马移到最后，为解决这种情况，可以这样写

————————————————————————————————————————

eg2:

________________________________________________________________________________

function show(){

alert(event.keyCode);

}

</script>

</body

________________________________________________________________________________

eg3：

————————————————————————————————————————

<body >

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事件对象下，也就是第十四节有详细讲解

在网页中鼠标坐标的获取：代码如下：

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内核中会不兼容，下面做以改进：

var one=document.getElementById("one");

window.οnmοusemοve=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（）方法

function show(){

alert("0000000000");

window.event.returnValue=false;

}

</script>

</body>

将以下代码写入网页，在网页即将关闭时，可弹出一个框，显示返回信息你小心点

</script>

</body>

在执行下述代码的时候，点击body体会弹出body onclick #######，点击图片的时候会弹出img onclick +++++++，当再次点击确定的时候，会不断地弹框，由于图片也是在body体里的，点击图片事件是同样会触发body体的点击事件，所以说，这个时候，我们就要用到cancelBubble事件了

</body>

function one(){

alert("body onclick #######");

}

function two(){

alert("img onclick +++++++");

}

</script>

</body>

以下对该段代码做出改进：

function one(){

alert("body onclick #######");