JSDOM7-13节笔记代码March31th
连接到前文JavaScript 7-11节笔记代码
8: 注册和调用的不同： 注册 Onclick=function(){}; //匿名函数的注册行为 Onclick=ff; 调用 Onclick=ff();
9:计时器 setInterval反复性计时器（随着一定时间之后 再跳出来）
Var setId=setInterval(function()
{
Alert(‘你名函数’);
}，1000);
clearInterval(setId);
setTimeout一次性计时器：
Var setID= setTimeOut(function()
{
Alert(‘这是一次性计时器’);
},1000);
clearTimeOut(setId);
计时器小案例1：
onload=function()
{
var i = 10;
setIntervar(function()
{
i--;
var btnObj=document.getElementById('btn');//获得btn对象
btnObj.value=i;//设置该对象的value值即可！
},1000);
}
经这么一写：
规律：所有的标签都可以有id-value对 或者name-value对象 或者class-value对 完全可以通过document对象获得所有的标签元素的id，name,class进行对应标签内容的设置
计时器小案例2： //跑马灯效果
setIntervale(function()
{
var tt=document.title;
document.title = tt.substring(1)+tt.substr(0,1); //1-尾部 + 0-1的字符
},1000 );
10 页面加载事件（3个） 前面接触最多的就是onload ,另外还有onunload,onbeforeload Onload:页面加载后触发 Onunload 页面退出后触发 Onbeforeunload: 页面关闭之前触发（发表帖子 和 你确定退出？）
11 刷新后，返回的页面 回顾window.location.href(‘www.baidu.com’); 类似于window.navigaete(‘’)
12 Document.write的两个作用 动态的创建控件(但是只能在页面加载时候动态创建 ) 但是有一个缺点：在IE中会删掉之前的控件标签，在源代码浏览时候，发现原先的标签都没有了 镶嵌广告
1.打开 news.baidu.com/newscode
输入关键字获得新闻的代码
2.复制代码
代码包含两个部分：
样式部分：
<style type=text/css> div{font-size:12px;font-family:arial}.baidu{font-size:14px;line-height:24px;font-family:arial} a,a:link{color:#0000cc;}
.baidu span{color:#6f6f6f;font-size:12px} a.more{color:#008000;}a.blk{color:#000;font-weight:bold;}</style>
Js脚本部分：
<script language="JavaScript" type="text/JavaScript" src="http://news.baidu.com/ns?word=title%3A%E9%A3%8E%E5%8A%9B%E5%8F%91%E7%94%B5&tn=newsfcu&from=news&cl=2&rn=5&ct=0"></script>
说明src其实就是document.write的实现！！但是为什么？原理暂时不知道
查询src里面内容的方式： 1：notepad 2：open-?黏贴进 src的地址 3： 就可以在记事本看到src所代表的新闻内容，他其实就是document.write()的内容！为了保证百度更新新闻的时候他也能更新新闻，所以采用这种document.write()来实现
<Html>
<Head>
<script type="text/javascript">
onload=function()
{
//第一个功能动态加载控件标签 但是在IE中会使其他的控件消失
//d当然这边加载 会把原先的页面的控件给隐藏掉！！
// document.write('<Font color="red" size="6">Today is </font>');
// document.write('<Input type="button" value="click me"\>');
}
</script>
<style type=text/css> div{font-size:12px;font-family:arial}.baidu{font-size:14px;line-height:24px;font-family:arial} a,a:link{color:#0000cc;}
.baidu span{color:#6f6f6f;font-size:12px} a.more{color:#008000;}a.blk{color:#000;font-weight:bold;}</style>
</Head>
<Body>
<script language="JavaScript" type="text/JavaScript" src="http://news.baidu.com/ns?word=title%3A%E9%A3%8E%E5%8A%9B%E5%8F%91%E7%94%B5&tn=newsfcu&from=news&cl=2&rn=5&ct=0">
</script>
</Body>
</Html>
13 获得页面元素的三种方法 Document.getElementById(‘btn’)—->最常用的方式 Document.getElementByName(‘fds’) —->name=”fds” Document.getElementByTagName(‘Input’)—->标签名
14获取坐标点 顶级对象window包含一个比较重要的对象event可以由此获得当前对象、页面、屏幕
1：当前对象作为参考点 –>offsetX|Y 2：当前页面作为参考点 —>clientX|Y 3：：当前屏幕作为参考点–>screenX|Y
<Html>
<Head>
<Title>hellow</Title>
<script type="text/javascript">
// alert(document.getElementById('btn').titleLabel.text)
// alert(window.event.button);
alert(screen.width+','+screen.height);
onload=function()
{
document.getElementById('ak').onclick=function()
{
alert(new Date().toLocaleTimeString());
window.event.returnValue=false;//IE Opera google支持 火狐不支持
}
document.getElementById('dv').onmousemove=function()
{
//鲁棒性最好的参数
if(arguments.length!=0)
{
//火狐 google IE不行
document.getElementById('ipClient').value=arguments[0].clientX+','+arguments[0].clientY;
}else
{
document.getElementById('ipClient').value=event.clientX+','+event.clientY;
}
//也可以另外一种鲁棒性的优化
//能力检测方式！
if(window.event)//判断如果存在则是IE不存在则是火狐 window.event是IE下的重要的属性
{
document.getElementById('ipClient2').value=event.clientX+','+event.clientY;
}else
{
document.getElementById('ipClient2').value=arguments[0].clientX+','+arguments[0].clientY;
}
//火弧+google可以通过 IE不行
//下面代码google和IE支持
//相对于页面的左上角
document.title=event.clientX+','+event.clientY;
//相对于屏幕的左上角
document.getElementById('btn').value=event.screenX+','+event.screenY;
document.getElementById('ip1').value=event.screenX+','+event.screenY;
//相对于当前对象的左上角（this)对象
document.getElementById('ip').value=event.offsetX+','+event.offsetY;
}
}
</script>
</Head>
<Body>
<Div id="dv" color="red">
<button type="button" id="btn" class="button">
屏幕值
</button>
<Input type="button" id="ipClient" value="页面左上角偏移"/>
<Input type="button" id="ipClient2" value="页面左上角偏移"/>
<Input type="button" id="ip" value="对象的左上角偏移"/>
<Input type="button" id="ip1" value="屏幕的偏移坐标"/>
hello
</Div>
<Div>
<A id="ak" href="www.baidu.com">百度</A>
</Div>
</Body>
</Html>
15：剪切板clipboard
当在网页复制的时候或者ctrl+C的时候，会激活body的oncopy函数。 当在网页黏贴的时候或者ctrl+V的时候，会激活body的onpaste函数。 由此可以模拟页面的进制复制和黏贴的案例，具体如代码所示：
<Html>
<Head>
<Title>Test copy clipdata</Title>
<script type='text/javascript'>
// 一复制则激活oncopy函数
/*
onload=function()
{
document.body.oncopy=function()
{
alert('不让复制');
return false;
};
document.getElementById('txt').onpaste=function()
{
alert('不能黏贴');
return false
};
};
*/
onload=function()
{
document.body.oncopy=function()
{
setTimeout(function()
{
//IE支持！！ opera 火狐不支持
//出现此错误是因为 window.clipboardData 为 IE 专有，其他浏览器均没有此对象。
if(window.clipboardData)
{
var dataFromClip=clipboardData.getData('text')+'你这个拷贝党';
alert(dataFromClip);
clipboardData.setData('text', dataFromClip);
}else
{
alert('Opera不知道如何做了 Opera 无操作剪贴板的对象。');
// window.location=dataFromClip;
alert('<Strong>复制</Strong>成功！')
return false;
}
},10);
};
};
document.onclick=function()
{
document.write('hello');
}
</script>
</Head>
<Body>
<Input type="text" id="txt" value="" />
good weather!
</Body>
</Html>
16：this和事件源srcElement this只记录当前对象的id alert(window.event.srcElement.id) 只记录最初加载完body第一次点击的id；
而srcElement其实是可以和事件冒泡的规律相结合的。 事件冒泡是指内层事件的触发，会由内至外的触发外层事件。 为了只是显示最内层的事件，可以用srcElement.id,比如：
注意点： 如果text/javscript 则 不会去检查 fucntion的错误！如果写成text/javascript 则客户端浏览器会去检查 js的语法。 一般规律： 一定要注意 style里面用的是 background-color 而 在js中用的是 backgroundColor 两者是不同的写法 并且这个是一个基本的规律！ js中去除了破折号 然后大写后一个单词首字母。
<Html>
<Head>
<Title>事件冒泡程序</Title>
<script type="text/javascript">
// 如果text/javscript 则 不会去检查 fucntion的错误！如果写成text/javascript
//则客户端浏览器会去检查 js的语法！
onload=function()
{
document.getElementById('div1').onclick=function()
{
// alert(this.id);
alert(window.event.srcElement.id);
};
document.getElementById('p1').onclick=function()
{
alert(this.id);
};
document.getElementById('str1').onclick=function()
{
alert(this.id);
//opera IE可以！
window.event.cancelBubble=true;
// 火狐e.stopPropagation();
};
};
</script>
</Head>
<Body>
<!--一定要注意 style里面用的是 background-color 而 在js中用的是 backgroundColor 两者是不同的写法
并且这个是一个基本的规律！ js中去除了破折号 然后大写后一个单词首字母-->
<Div id="div1" style="width:300px;height:200px;background-color:red;cursor:pointer;">
<!--<Div id="div1" style="width:300px;height:200px;backgroundColor=red;cursor:pointer;"> 一定要注意不要写成=号形式 style里面写成json形式-->
<!--<P id= "p1" style="width:100px;height:100px;background-color:blue;cursor:pointer;">这是第二层文字 -->
<P id= "p1" style="width:100px;height:100px;background-color:blue;cursor:pointer;">
<Strong id="str1">这是第三层文字</Strong>
</P>
</Div>
</Body>
</Html>
17：innerText和innerhtml
注意1：innerhtml 不要写成innerHtml 否则是undefined 注意2： var btnObjAgree=document.getElementsByName(‘agree’); var timeControl=document.getElementById(’time’); 正因为Id没有s 所以他必然是唯一的， 而name TagName都是可以重复 所以他的Element是复数的 案例1：四个按钮 分别显示 设置innerText 设置innerhtml 获取innerText 获取innerhtml 注意： //1 在添加文本时候 Text模式是直接添加无效果 而html是有效果 //2 在获取文本时候 Text模式是直接获得文本 而html是包含着标签信息 另外//在firefox不行!!firefox and Ie is a pair of enemy //In Firefox , You should use the statement below // dvObj.contentText=’'
具体如下所示：
<Html>
<Head>
<Title>Test InnerText And InnerHtml IN fireFox and IE ! </Title>
<style type="text/css">
div
{
width:300px;
height:200px;
background-color:green;
// 在style中使用 json形式的数据结构
// 在js中使用 =形式的数据结构
}
</style>
<script type="text/javascript">
onload=function()
{
var dvObj=document.getElementById('dv');
document.getElementById('btn1').onclick=function()
{
//显示原始的内容 不带上效果
//Ie google可以
dvObj.innerText='<A href="http://www.163.com">网易</A>';
//在firefox不行!!firefox and Ie is a pair of enemy
//In Firefox , You should use the statement below
// dvObj.contentText=''
}
//1 在添加文本时候 Text模式是直接添加无效果 而html是有效果
//2 在获取文本时候 Text模式是直接获得文本 而html是包含着标签信息
document.getElementById('btn2').onclick=function()
{
//直接添加上效果
//document.getElementById('dv').innerHtml='<A href="www.163.com">网易</A>';
//注意大小写 否则不能显示出 结果
document.getElementById('dv').innerhtml='<A href="http://www.163.com">网易</A>';
}
document.getElementById('btn3').onclick=function()
{
alert(dvObj.innerText);
}
document.getElementById('btn4').onclick=function()
{
alert(dvObj.innerhtml);
//alert(dvObj.innerHtml);
}
};
</script>
</Head>
<Body>
<input type="button" value="innerText insert" id="btn1"/>
<input type="button" value="innerHtml insert" id="btn2"/>
<input type="button" value="innerText get" id="btn3"/>
<input type="button" value="innerHtml get" id="btn4"/>
<Div id="dv">
</Div>
</Body>
</Html>
案例2： innerText和计时器联合的一个小程序 功能需求： 起先按钮是灰色，显示“请仔细阅读协议(5)” 并随时间递减， 当回归到0时，则按钮变成可选状态，并其值设置为“同意”。
实现如下：
<Html>
<Head>
<Title> Three small practices</Title>
<script type="text/javascript">
onload=function()
{
var btnObjs=document.getElementsByName("name");
for(var i =0; i< btnObjs.length;i++)
{
//你再点击之前得把所有的其他颜色都给他恢复成默认
//这点很重要 ！！ 否则你会发现之前点过的按钮依然是红色的！没有
//恢复回默认的状态
btnObjs.onclick=function()
//对这个网页的逻辑不是特别清楚！ 应该是点击之后才触发的事件
//而不是你想着我让他点的时候 他就触发！！必须有一个介质！
//这个介质说大点叫做计算机，说小点叫做onclick
{
for(var j=0; j< btnObjs.length;j++)
{
btnObjs[j].style.backgroundColor='';
}
this.style.backgroundColor='red';
}
}
var sec=5;
//不要少了一个s 间接说明 name可以有多个
//var btnObjAgree=document.getElementsByName('agree');
// 返回的是一个name数组！！！一定得注意 单写上btnobjagree.value不起作用
var btnObjAgree=document.getElementsByName('agree');
//不要多了一个s 间接说明Id只能有一个
//var btnObjAgree=document.getElementById('btn');
var setId= setInterval(function()
{
if(sec> 0)
{
sec--;
btnObjAgree[0].value='请仔细阅读下列协议('+sec+')';
}else
{
btnObjAgree[0].value='同意';
btnObjAgree[0].disabled=false;
clearInterval(setId);
}
},1000);
setInterval(function(){
var timeControl=document.getElementById('time');
//timeControl.innerText=new Date().toLocalTimeString();//别写错了Locale而不是Local
timeControl.innerText=new Date().toLocaleTimeString();
},1000);
};
</script>
</Head>
<Body>
<Input type="button" name="name" value="小明"/>
<Input type="button" name="name" value="小明"/>
<Input type="button" name="name" value="小明"/>
<Input type="button" name="name" value="小明"/>
<Input type="button" name="name" value="小明"/>
<Input type="button" name="name" value="小明"/>
<Input type="button" name="name" value="小明"/>
<Input type="button" name="name" value="小明"/>
<Input type="button" id="btn" name="agree" value="请仔细阅读下列协议(5)" disabled="disabled"/>
<P id="time"></P>
</Body>
</Html>
案例3：通过一个JSON数据结构，解析到一个表格中，其中表格分为两列，第一列是网址名字(innerText)，第二列是网址的连接（innerhtml）
注意 ： 1:再进行能力测试的时候，typeof不能写成typeOf 2: //如果不加入下面一行代码则无法显示！！！甚至调试不出来 document.body.appendChild(tableObj); 3: JSON数据结构使用逗号进行分隔，不同于在