网络书屋(Web Reading Room)

A blogging framework for hackers.

JSDOM7-13节笔记代码March31th

连接到前文JavaScript 7-11节笔记代码

8: 注册和调用的不同: 注册 Onclick=function(){}; //匿名函数的注册行为 Onclick=ff; 调用 Onclick=ff();

9:计时器 setInterval反复性计时器(随着一定时间之后 再跳出来)

1
2
3
4
5
6
7
8
9
10
11
Var setId=setInterval(function()
{
Alert(‘你名函数’);
}1000);
clearInterval(setId);
setTimeout一次性计时器:
Var setID= setTimeOut(function()
{
Alert(‘这是一次性计时器’);
},1000);
clearTimeOut(setId);

计时器小案例1:

1
2
3
4
5
6
7
8
9
10
11
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: //跑马灯效果

1
2
3
4
5
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.复制代码 代码包含两个部分: 样式部分:

1
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脚本部分:

1
<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()来实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<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函数。

    由此可以模拟页面的进制复制和黏贴的案例,具体如代码所示:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<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中去除了破折号  然后大写后一个单词首字母。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<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=''

具体如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<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时,则按钮变成可选状态,并其值设置为“同意”。



          实现如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<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数据结构使用逗号进行分隔,不同于在