重拾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">

<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.onclick=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" onmouseover="show(this,'red')" onmouseout="show(this,'blue') " onclick="show(this,'yellow')" ondblclick="show(this,'green')">wwwwwwwww</div>

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>

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.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（）方法

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 #######");

}

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>

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>

重拾javascript动态客户端网页脚本的更多相关文章

重拾《两周自制脚本语言》- Eclipse插件实现语法高亮
源码库: program-in-chinese/stone-editor-eclipse 参考: FAQ How do I write an editor for my own language? D ...
利用javascript动态向网页中添加表格
效果图如下: 以下是代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
带你重拾JavaScript(2)之console的你所不知道的功能
JavaScript最常用的调试工具就是console.info()了.console是浏览器中window对象的属性之一,由浏览器对象模型(BOM)提供,作用是访问浏览器控制台,你可以通过conso ...
用javascript动态改变网页文字大小
<script>function setFontSize(size){document.getElementById('bottom').style.fontsize=size+'pt'; ...
第一百一十八节，JavaScript，动态加载脚本和样式
JavaScript,动态加载脚本和样式一动态脚本当网站需求变大,脚本的需求也逐步变大.我们就不得不引入太多的JS脚本而降低了整站的性能,所以就出现了动态脚本的概念,在适时的时候加载相应的脚本. ...
JavaScript 动态脚本
动态脚本,指的是在页面加载时不存在,但将来的某一个时刻通过修改DOM动态添加的脚本. <script type="text/javascript"> function ...
Javascript技巧实例精选(1)—鼠标选择动态改变网页背景颜色
>>点击这里下载html源文件代码<< 采用Javascript实现,用鼠标点击相应颜色,动态改变网页背景颜色这是截图相应的Javascript源代码为: var hex ...
JavaScript的DOM_动态加载脚本和样式
一.动态加载脚本当网站需求变大,脚本的需求也逐步变大.我们就不得不引入太多的 JS 脚本而降低了整站的性能,所以就出现了动态脚本的概念,在适时的时候加载相应的脚本. 1.动态加载js文件比如:我们 ...
ASP.NET MVC WebApi 返回数据类型序列化控制（json,xml) 用javascript在客户端删除某一个cookie键值对 input点击链接另一个页面，各种操作。 C# 往线程里传参数的方法总结 TCP/IP 协议用C#+Selenium+ChromeDriver 生成我的咕咚跑步路线地图 (转)值得学习百度开源70+项目
ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml) 我们都知道在使用WebApi的时候Controller会自动将Action的返回值自动进行各种序列化处理(序列化为 ...

随机推荐

ASP.NET仿新浪微博下拉加载更多数据瀑布流效果
闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前, ...
Web Service和Servlet的区别（转）
Servlet是Java对于Web开发而产生的一项技术,可以说Servlet技术是Java专有的,它是服务器端的技术,客户端通常是浏览器. WebService是在DCOM/CORBA等分布式技术之后 ...
OpenGL绘制简单的时钟（首发测试）
#include <windows.h> #include <GL/glut.h>//本来OpenGL程序一般还要包含<GL/gl.h>和<GL/glu.h& ...
codeforces 8D Two Friends 二分+ 判断三个圆是否有公共交点
题目链接有两个人x, y, 现在在A点, x要直接去B点, y要先去C点在去B点, 现在给出x, y两人可以行走的最大距离T1, T2, 求出他们从A点出发之后, 可以走的最长的公共路径. 我们先看 ...
typedef struct 使用
typedef struct tagMyStruct { int iNum; long lLength; } MyStruct; 上面的tagMyStruct是标识符,MyStruct是 ...
Entity Framework 数据部分更新之Attach &&Detach
我们经常会遇到这样的问题:Update一个entity的部分数据时,通常需要new一个新的对象,然后事这新的对象Attach到Context中,代码如下所示: /// <summary> ...
数据仓库（七）：Oracle Warehouse Builder（OWB）创建数据仓库
本文简述使用OWB创建数据仓库的一般过程.Oracle的OWB是目前最好的三大ETL产品之一.OWB不但可以可以完成数据的抽取.转换和加载,还能帮助用户在Oracle数据库中创建ROLAP(Rela ...
深入Android媒体存储服务（二）：磁盘扫描流程
简介: 本文是<深入Android媒体存储服务>系列第二篇,简要介绍媒体存储服务扫描文件的流程.文中介绍的是 Android 4.2. Android 有一套媒体存储服务,进程名是 and ...
hibernate详解
Hibernate原理与应用主要内容 1.引入 2.安装配置 3.基本概念和CURD 4.HQL和Criteria 5.关联映射 6.继承映射 7.集合映射 8.懒加载 9.缓存 10.事务 11. ...
poj1862---变形虫（贪心）
题意:两条虫之间碰在一起,质量变为2*sqrt(m1*m2) 求怎么结合,能使最后的一只虫质量最小分析:如果让按从大到小的顺序依次结合,可以使大的数被开方的次数最多,得到的结果更小 4 3 2 1 ...

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

重拾javascript动态客户端网页脚本的更多相关文章

随机推荐

热门专题