under java script- 学习笔记
2009-06-16 am
Event对象关联了所有事件,以提供有关事件的信息,但是对Eevent对象的访问各浏览器却存在着差异.
先来看一个Demo:
<!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=gb2312" />
<title>Event对象支持</title>
</head>
<body >
<div id="face" style="position:absolute;width:18px;height:18px;background-color:#0CC;">
</div>
<div id="info"></div>
<script>
document.getElementById(‘face’).style.position=’absolute’;
function getPos(){
var posx=event.clientX;
var posy=event.clientY;
var str="<p>("+posx+","+posy+")</p>";
document.getElementById(‘info’).innerHTML=str;
document.getElementById(‘face’).style.left=posx+’px’;
document.getElementById(‘face’).style.top=posy+’px’;
}
document.onmousemove=getPos;
</script>
</body>
</html>
Tips:You can change the code before run.
在IE中可以正常的运行,如果您是在FF中运行其代码会出现event is not defined的错误提示.在IE中会把event附加成window对象的一个属性,在作为事件处理的一部分访问时会相应填写Event对象所含的数据.
对于基于Netscape的浏览器,是需要作为函数的一个参数传入.
function getPos(evnt){
[...]
Continue to Read
under java script- 学习笔记
2009-02-19 pm
刚刚做一个例子,想要用getAttribute()方法获取对象的class属性.本来习惯在FF中测试,使用getAttribute(“className”)却总是无法获得结果,后来在ie中测试可得到结果.原来在FF中可识别getAttribute(“class”)在IE下识别getAttribute(“className”).找了个兼容办法:if (obj.getAttribute(”className”)== “class名字”||obj.getAttribute(”class”) == “class名字”)
Continue to Read
under java script- 学习笔记
2009-02-18 pm
因为浏览器解析之间差异,在选择兄弟结点时,多数浏览器将元素间的换行符作为了文本结点.这样的情况同样存在于查看元素的子结点时.
使用childNodes查看元素第一层子结点列表.
<!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=gb2312" />
<title>test</title>
<style type="text/css">
ul,li{
margin:0;
padding:0;
list-style-type:none;}
body{color:#939;
font-size:23px;
font-family:Arial,"黑体", ;
margin:50px;}
#eventslist
{
float:left;
padding:5px;
border-right:2px solid #333333;
}
#printT{
float:left;border:2px solid red;
margin:10px;
}
</style>
<script type="text/javascript">
function myDOM(){
var DOMstring=”;
if(!document.getElementById || !document.createTextNode){return;}
var demoList=document.getElementById(‘eventslist’);
if(demoList.hasChildNodes())
{
var ch=demoList.childNodes;
for(var i=0;i<ch.length;i++)
{DOMstring+=ch[i].nodeName+’\t’;}
printStr(DOMstring);
}
}
function printStr(str){
var prinDiv=document.createElement(‘div’);
var para=document.createElement(‘p’);
para.appendChild(document.createTextNode(str));
prinDiv.appendChild(para);
prinDiv.id=’printT’;
document.body.appendChild(prinDiv);
}
window.onload=myDOM;
</script>
</head>
<body>
<ul id="eventslist">
<li>list1</li>
<li>list2</li>
<li>list3</li>
<li>list4</li>
</ul>
</body>
</html>
Tips:You can change the code before run.
IE的输出中只有4个元素,FF同样将元素间的换行符作为了文本结点.
所以使用nextSibling,previousSibling并不能准确返回一个元素.
使用closestSibling方法避免这个问题,其中direction 为1时表示下一个兄弟结点,-1表示上一个兄弟结点:
function closestSibling(node,direction){
var tempObj;
if(direction==-1 && node.previousSibling!=null){
tempObj=node.previousSibling;
while(tempObj.nodeType!=1 && tempObj.previousSibling!=null){
tempObj=tempObj.previousSibling;
}
}else if(direction==1 && node.nextSibling!=null){
tempObj=node.nextSibling;
while(tempObj.nodeType!=1 && tempObj.nextSibling!=null){
tempObj=tempObj.nextSibling;
}
}
return tempObj.nodeType==1?tempObj:false;
},
Continue to Read
under java script- 学习笔记
2008-11-6 pm
What this section covers:
Creating nodes
Duplicating nodes
Inserting nodes
Removing nodes
Replacing nodes
Manipulating nodes
Finding nodes
Node properties
Traversing the node tree
Continue to Read
under java script- 学习笔记
2008-11-5 pm
做一个使用DOM脚本设置样式信息的时候发现nextSibling属性在firefox2中无法被正确执行,仔细回忆关于对nextSibling的解释nextSibling——–下一个兄弟元素.又核对了脚本结构是没错的.还是使用alert(h2.nextsibling.nodeType)语句再判断其返回的下一个兄弟元素是何.在ff中的返回值是3一个textnode,不同与ie中的值!莫非??于是把h1与p之间的换行删掉.果然脚本被顺利的执行.想不到在在火狐中将换行符作为了nextSibling的下一个兄弟元素.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>nextsibling</title>
<script type="text/javascript">
window.onload=test;
function test(){
var headers = document.getElementsByTagName("h2");
for(i=0;i<headers.length;i++){
[...]
Continue to Read
under java script- 学习笔记
2008-10-26 pm
在BI看到一个求助帖关于DOM 方法 setAttribute 在ie中的问题,本来是个简单的onclick事件程序,但是在IE中总是无法被执行,后来把事件的条件语句改成了IF语句,在事件中添加了两个alert,发现在ie中 setAttribute 被正确的执行了而 getAttribute(“src”) 方法的返回值和FF中却不同,在IE中返回了绝对路径.经仔细查原来IE getAttribute(属性,参数) 参数有 0,1,2三个. getAttribute(属性) 将得到的是默认值,就是参数为0;
1为区分属性的大小写；2 为取出源代码中的原字符串值.
搞了半天原来问题并不在 setAttribute 方法上.
Continue to Read
under java script- 学习笔记
2008-07-10 am
在我们使用XHTML时,<script>标签内容需定义成CDATA,以告诉XML/HTML解释器不要解析这些内容,而是直接把他们交给脚本引擎去处理.
如:<script type=”text/javascript”>
//<![CDATA[
alert("Hello xiaofan!");
//]]>
</script>
使用javascript注释//将CDATA的定义字符串在javascript解释器前隐藏.
当我们在页面中同时引入了多个脚本时(两个脚本应该是相互独立而又不相互影响的)
如:
<script type=”text/javascript” src=”first.js”></script>
<script type=”text/javascript” src=”second.js”></script>
所有的脚本都会被注册为HTML页面中的全局对象;如果同时存在相同变量名的变量,在不同的脚本中后定义的那个优先本例中引用的将是second.js中定义的值.
<head>
<script type=”text/javascript” src=”test.js”></script>
</head>
//test.js
alert(“hello.xiaofan!”);
这里要说的是当浏览器解析遇到<script>标签时,它将发送一个HTTP请求,去获取脚本文件.此时对HTML页面的渲染将暂停,直到脚本被完全的加载完毕或者在一段时间之后停止加载.
Continue to Read
under java script- 学习笔记
2008-03-15 pm
javascript的无类型特性 使数据类型更灵活的在不同环境下自行转换,
清楚以下各类型值在不同环境下的返回值。
自动数据类型转换参照表
Tags:javascript
Continue to Read
