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

最新推荐文章于 2024-01-30 00:12:30 发布

ITDragon龙

最新推荐文章于 2024-01-30 00:12:30 发布

阅读量4.3k

点赞数 2

分类专栏： javascript 前端技术文章标签： javascript

本文链接：https://blog.csdn.net/qq_19558705/article/details/49849653

版权

前端技术同时被 2 个专栏收录

20 篇文章 13 订阅

订阅专栏

javascript

17 篇文章 0 订阅

订阅专栏

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

Math对象：

常用的有

向上取整

Math.ceil(x)

<script type="text/javascript">
    document.write(Math.ceil(3.3)+"<br>");
    document.write(Math.ceil(-0.1)+"<br>");
    document.write(Math.ceil(-9.9)+"<br>");
    document.write(Math.ceil(8.9));
</script>

向下取整

Math.floor(x);

<script type="text/javascript">
 document.write(Math.floor(3.3)+"<br>");
 document.write(Math.floor(-0.1)+"<br>");
 document.write(Math.floor(-9.9)+"<br>");
 document.write(Math.floor(8.9));
</script>

四舍五入

Math.round(x);

<script type="text/javascript">
    document.write(Math.round(3.3)+"<br>");
    document.write(Math.round(-0.1)+"<br>");
    document.write(Math.round(-9.9)+"<br>");
    document.write(Math.round(8.9));
</script>

随机数random()

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

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

<script type="text/javascript">
 document.write((Math.random())*10);
</script>

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事件了，发个图大家自行脑补一下

DOM：

写了那么多有点累了，下面就直接用图片的，别人总结的，不造算不算侵权

节点属性

遍历节点树

DOM操作

通过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了，一起进步一起成长，如果有问题和建议可以留言给我，我会及时更正。

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

ITDragon龙

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript快速入门第二章基础知识(下)

我们继续学习js剩下的基础内容Math对象：常用的有向上取整Math.ceil(x) document.write(Math.ceil(3.3)+""); document.write(Math.ceil(-0.1)+""); document.write(Math.ceil(-9.9)+""); document.write(Mat
复制链接

扫一扫

专栏目录