javascript快速入门第二章基础知识(下)

心已赠人 2022-08-10 08:35 7阅读 0赞

我们继续学习js剩下的基础内容

**Math对象：**

常用的有

向上取整

Math.ceil(x)

向下取整

Math.floor(x);

四舍五入

Math.round(x);

随机数random()

Math.random() 返回一个大于或等于0但小于1的符号为正的数字值

取0~10之间的随机数 (Math.random())\*10

**js计时器**

在js中科院设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行，js计时器非常重要，比如在拦截请求，5秒返回首页，实时提交等都会用。

类型有：

一次性计时器：仅在指定的延迟时间之后触发一次

间隔性触发计时器：每隔一定时间就触发一次

计时器setInterval()： setInterval(代码，交互时间);

取消计时器clearInterval()： clearInterval(id\_of\_setInterval); id\_of\_setInterval是由setInterval返回的ID值

<!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>计时器</title>
    <script type="text/javascript">
       function clock(){
          var time=new Date();               	  
          document.getElementById("clock").value = time;
       }
        var i = setInterval("clock()",1000); 
    </script>
    </head>
    <body>
      <form>
        <input type="text" id="clock" size="50"  />
        <input type="button" value="Stop"  οnclick="clearInterval(i)"/>
      </form>
    </body>
    </html>

计时器setTimeout()： setTimeout(代码，延迟时间); 在载入后延迟指定时间后，去执行一次表达式，仅执行一次

取消计时器clearTimeout()：用法 和clearInterval()一样

<!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>计时器</title>
    </head>
    <script type="text/javascript">
      var num=0;
      var i;
      function startCount(){
        document.getElementById('count').value=num;
        num=num+1;
        i=setTimeout("startCount()",1000);
      }
      function stopCount(){
        clearTimeout(i);
      }
    </script>
    </head>
    <body>
      <form>
        <input type="text" id="count" />
        <input type="button" value="Start"  οnclick="startCount()"/>
        <input type="button" value="Stop"   οnclick="stopCount()"/>
      </form>
    </body>
    </html>

**history对象**

history记录了用户曾经浏览过的页面（URL）

注意：从窗口被打开的那一刻开始记录，每个浏览器窗口，每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联

window.history.\[属性|方法\]

back()： 返回前一个浏览的页面

注意back()等同于go(-1)

window.history.back();

或者window.history.go(-1);

forward()： 返回下一个浏览的页面

window.history.forward();

window.history.go(1);

go()：跳转到某一具体页面

window.history.go(number);

既然忘记了最重要的js事件了，发个图大家自行脑补一下![大笑][laugh.gif]

![Center][]

DOM：

写了那么多有点累了，下面就直接用图片的，别人总结的，不造算不算侵权![尴尬][awkward.gif]  
节点属性

![20151115161829583][]

遍历节点树

![20151115161850982][]

DOM操作

![20151115161910921][]

通过id获取元素：

var \_id = document.getElementById("id");

var \_num = document.getElementById("id").value;

innerHTML属性：

innerHTML用于获取和替换HTML元素的内容

这在里jquery的优势就开始突显了，var \_id = $("\#id");就可以通过id获取元素，var \_class = $(".class");这样就可以通过class获取元素，而js如果要通过class获取元素就麻烦了很多很多。

<!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>innerHTML</title>
    </head>
    <body>
    <h2 id="con">javascript</H2>
    <p>Hello JavaScript</p>
    <script type="text/javascript">
      var mychar=document.getElementById("con");
      document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
      mychar.innerHTML="Hello world";
      document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
    </script>
    </body>
    </html>

getElementsByName()方法

document.getElementsByName(name);

1.因为文档中的name属性可能不唯一，所有getElementsByName() 方法返回的是元素的数组，而不是一个元素

2.和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始

<!DOCTYPE HTML>
    <html>
    <head>
    <script type="text/javascript">
    function getnum(){
      var mynode=document.getElementsByName("myt");  
      alert(mynode.length);
    }
    </script>
    </head>
    <body>
    <input name="myt" type="text" value="1">
    <input name="myt" type="text" value="2">
    <input name="myt" type="text" value="3">
    <input name="myt" type="text" value="4">
    <input name="myt" type="text" value="5">
    <input name="myt" type="text" value="6">
    <br />
    <input type="button" οnclick="getnum()" value="看看有几项？" />
    </body>
    </html>

getElementsByTagName()方法

返回带有指定标签签名的节点对象的集合，返回元素的顺序是它们在文档中的顺序

getElementsByTagName(Tagname);

1.Tagname是标签的名称，如p,a,img等标签

2.和数组类似也有length属性，可以和访问数组一样的方法来访问，所有从0开始

一下是用js写的全选 /取消/输入序号选择，后续会用jquery完成

<!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
            <title>无标题文档</title>
        </head>    
        <body>
            <form>
              请选择你爱好:<br>
              <input type="checkbox" name="hobby" id="hobby1">  音乐
              <input type="checkbox" name="hobby" id="hobby2">  登山
              <input type="checkbox" name="hobby" id="hobby3">  游泳
              <input type="checkbox" name="hobby" id="hobby4">  阅读
              <input type="checkbox" name="hobby" id="hobby5">  打球
              <input type="checkbox" name="hobby" id="hobby6">  跑步 <br>
              <input type="button" value = "全选" onclick = "checkall();">
              <input type="button" value = "全不选" onclick = "clearall();">
              <p>请输入您要选择爱好的序号，序号为1-6:</p>
              <input id="wb" name="wb" type="text" >
              <input name="ok" type="button" value="确定" onclick = "checkone();">
            </form>
            <script type="text/javascript">
             function checkall(){
                var hobby = document.getElementsByTagName("input");
                for(i = 0;i < hobby.length;i++){
                        if(hobby[i].type == "checkbox"){
                          hobby[i].checked = true;   }
                      }
            }
            function clearall(){
                var hobby = document.getElementsByName("hobby");
             for(i=0;i<hobby.length;i++){
                  hobby[i].checked=false;
              } 
            }       
            function checkone(){
                var j=document.getElementById("wb").value;
            
             var hobby=document.getElementById("hobby"+j);
             hobby.checked=true;
            }        
            </script>
        </body>
    </html>

getAttribute()方法

通过元素节点的属性名称获取属性的值

elementNode.getAttribute(name);

1.elementNode：使用getElementById(),getElementsByTagName等方法，获取到的元素节点。

2.name：要想查询的元素节点的属性名字

<!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>getAttribute()</title>
    </head>
    <body>   
    <p id="intro">课程列表</p>  
        <ul>  
            <li title="第1个li">HTML</li>  
            <li>CSS</li>  
            <li title="第3个li">JavaScript</li>  
            <li title="第4个li">Jquery</li>  
            <li>Html5</li>  
        </ul>  
    <p>以下为获取的不为空的li标签title值:</p>
    <script type="text/javascript">
        var con=document.getElementsByTagName("li");
        for (var i=0; i< con.length;i++){
          var text=con[i].getAttribute("title");
          if(text!=null)
          {
            document.write(text+"<br>");
          }
        } 
     </script> 
    </body>
    </html>

setAttribute()方法

和getAttribute()方法相反，赋值

<!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    </head>
    <body>
      <p id="intro">我的课程</p>  
      <ul>  
        <li title="JS">JavaScript</li>  
        <li title="JQ">JQuery</li>  
        <li title="">HTML/CSS</li>  
        <li title="JAVA">JAVA</li>  
      </ul>  
      <h1>以下为li列表title的值,当title为空时，新设置值为"WEB前端技术":</h1>
    <script type="text/javascript">
      var Lists=document.getElementsByTagName("li");
      for (var i=0; i<Lists.length;i++)
      {
        var text = Lists[i].getAttribute("title");
        document.write(text +"<br>");
        if(text=="")
        {
        Lists[i].setAttribute("title","HTML/CSS");
        document.write(Lists[i].getAttribute("title")+"<br>");
        }
      }
    </script>
    </body>
    </html>

看了这么多，是否有想吐的感觉，先让我休息一下。。。。

这样js的入门知识就写完了，接下来就开始jquery了，一起进步一起成长，如果有问题和建议可以留言给我，我会及时更正。 ![微笑][smile.gif]

更多干货等你来拿  [http://www.itit123.cn/][http_www.itit123.cn]

[laugh.gif]: /images/20220731/1d5d928d180646c9b0debdb18f5946e0.png
[Center]: /images/20220731/b4d5e2f2da5b4077b5f253120138bf5f.png
[awkward.gif]: /images/20220731/77c0a958a97245a8bd7f170f48609f8a.png
[20151115161829583]: /images/20220731/1146cf99ef534cfa9ca188acc15b8df3.png
[20151115161850982]: /images/20220731/e5ee5daea712477d8dca352de1896a29.png
[20151115161910921]: /images/20220731/0d1b97a8f91f453cac7600220736cb07.png
[smile.gif]: /images/20220731/e4be8076f44f49cea729c929bb264feb.png
[http_www.itit123.cn]: http://www.itit123.cn/