重拾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的返回值自动进行各种序列化处理(序列化为 ...

随机推荐

CentOS安装maven3.2.2（Linux系列适用）
首先,下载最新的maven3.2.2,地址:http://mirrors.cnnic.cn/apache/maven/maven-3/3.2.2/binaries/apache-maven-3.2.2 ...
InterviewProblems
package com.xiaoysec; /** * 下面是面试趣医网技术面的时候出现的一个简单的题目题目的要求是将一个数组中的奇数和偶数进行分离以奇数在前一部分为例进行解题 * 算法的主要思想 ...
perl正则表达式第一周笔记
正则表达式基础 ^ 行首标志 $ 行末标志如^cat即一整行只有cat这个单词,^则是一个空行 [ ] 字符组,用来匹配若干字符之一如gr[ae]y,即grey或者gray - 在字符组内部,字 ...
js创建对象的几种常用方式小结
第一种模式:工厂方式 var lev=function(){ return "666"; }; function Parent(){ var Child = new Object ...
刷爆github小绿点
转载请注明出处:https://ahangchen.gitbooks.io/windy-afternoon/content/kit/git/green_blush.html 工程地址,欢迎star!! ...
asp.net数据库操作类（二）
第二版的数据库访问类出炉了: C# Code 123456789101112131415161718192021222324252627282930313233343536373839404142 ...
一次性关闭所有的Activity
原文:一次性关闭所有的Activity 一次性关闭所有的Activity ActivityManager am = (ActivityManager)getSystemService (Context ...
image.xx.com 通过haproxy 跳转到内部图片服务器
<pre name="code" class="html">http://www.hyyche.com/#main C:\Users\Adminis ...
剑指offer 25 二叉树中和为某一值的路径
非递归方法: class Solution { public: vector<vector<int>> FindPath(TreeNode* root,int expectNu ...
hdu2222之AC自动机入门
Keywords Search Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...

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

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

随机推荐

热门专题