under 学习笔记
2010-02-27 pm
这个是从Hemin那里看到的,我没找鬼哥要,刚好没见过,就拿来练手了.题目的综合性还是比较大.
详细的题目要求还是从这里看吧:
http://www.hemin.cn/demo/tengxunMS10-01-17/考核题关注.doc
http://www.hemin.cn/demo/tengxunMS10-01-17/q_group.psd
<!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>QQ群空间</title>
<link rel="stylesheet" href="http://www.aiyooo.net/demo/qqgroup/qqgroup.css" type="text/css" />
</head>
<body>
<div id="header">
<div id="nav">
<a href="http://www.aiyooo.net/blog/" title="tencent" id="logo">Tencent QQ群</a>
<div class="abc">
[...]
Tags:面试题
Continue to Read
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 学习笔记
2009-05-15 pm
Yahoo!网站性能最佳体验的34条黄金守则,1、尽量减少HTTP请求次数…
Tags:体验
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 学习笔记
2008-11-15 pm
这是一位叫做 Christos Chiotis 的希腊 Web 设计师发表在 CssGlobe 的一篇文章，讲述了黄金分割率在 CSS 中的应用。黄金分割率是一个应用广泛的数学常数，大约为 1.6180339887。黄金分割率用在 Web 设计中，可以为设计带来更多视觉上的和谐。
在一个简单的两栏式页面布局中，使用两个容器，第一个容器用来显示主要内容，第二个容器显示侧条。比如，页面宽度为 960 px，使用黄金分割率，主内容容器的宽度应该为 960 / 1.62 = 593 px，而侧条的宽度为 960-593=367 px。
作者建议，在 Web 排版与布局中可以使用以下基本 CSS 设置
line-height = font-size * 1.62
paragraph margin = paragraph line-height * 1.62 / 2
header’s margin-top = headers line-height * 1.62
不过对中文而言，至少 font-size 和 line-height 之间使用黄金分割率是不适合的，假如中文字体使用 12px 的话，最佳行高是 22px，如果字体使用 14px 的话，行高应该使用 [...]
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
