首页 > 代码库 > javascript（一）

javascript（一）

2024-10-07 23:04:39   215人阅读

1、history属性
<body>
    <h1>第一个界面</h1>
  <a href="http://www.mamicode.com/js02history.html">当前页面</a>
  <a href="http://www.mamicode.com/js03history.html">下一个页面</a>
  <a href="javascript:history.forward()">forward()前进一个界面</a>
  <a href="javascript:history.go(1)">go(1)前进一个界面</a>
</body>
<body>
    <h1>第二个界面</h1>
    <a href="javascript:history.back()">back()后退一个界面</a>
    <a href="javascript:history.go(-1)">go(-1)后退一个界面</a>
</body>
2、location属性
    <script type="text/javascript">
    document.write("host值为："+location.host+"<br/>")
    document.write("hostname值为："+location.hostname+"<br/>")
    document.write("href值为："+location.href+"<br/>")
    document.write("hash值为："+location.hash+"<br/>")
    document.write("search值为："+location.search+"<br/>")
    </script>
</head>
<body>
    <input  type="text">
   <input type="button" value="http://www.mamicode.com/刷新当前页面" onclick="location.reload()">
   <input type="button" value="http://www.mamicode.com/替换当前页面" onclick="location.replace(‘http://www.bdqn.cn‘)">
</body>
3、document属性
 <style type="text/css">
        body{font-size:14px;
            line-height:30px;
        }
        input{margin:1px;
            width:90px;
            font-size:12px;
            padding:0;
        }
        #node{
            width:100px;
            font-size:24px;
            font-weight:bold;
            float: left;
        }
    </style>
<script type="text/javascript">
     /*改变层内容*/
    function changeLink(){
        document.getElementById("node").innerHTML="<h1>改变</h1>";
        //document.getElementById("node").innerText="<h1>改变</h1>";
    }
  /*获取所有input标签中所有的value*/
function all_input(){
   var allInput= document.getElementsByTagName("input");
    /*声明变量 接收所有input标签中所有的value*/
    var str="";
    for(var i=0;i<allInput.length;i++){
        str+=allInput[i].value+"<br/>";
    }
    /*把str获取的值 给  p标签*/
     document.getElementById("s").innerHTML=str;
}
  /*获取所有name属性值是season的value*/
function s_input(){
   var season= document.getElementsByName("season");
    /*声明变量 接收所有input标签中所有的value*/
    var str="";
    for(var i=0;i<season.length;i++){
        str+=season[i].value+"<br/>";
    }
    /*把str获取的值 给  p标签*/
     document.getElementById("s").innerHTML=str;
}
</script>
</head>
<body>
<div id="node">新浪</div>
<input name="b1" type="button" value="http://www.mamicode.com/改变层内容" onclick="changeLink();" /><br />
<br /><input name="season" type="text" value="http://www.mamicode.com/春" />
<input name="season" type="text" value="http://www.mamicode.com/夏" />
<input name="season" type="text" value="http://www.mamicode.com/秋" />
<input name="season" type="text" value="http://www.mamicode.com/冬" />
<br /><input name="b2" type="button" value="http://www.mamicode.com/显示input内容" onclick="all_input()" />
<input name="b3" type="button" value="http://www.mamicode.com/显示season内容" onclick="s_input()" />
<p id="s"></p>
</body>
4、open
<script type="text/javascript">
  function  openNew(){
      window.open(
              "http://www.baidu.com",
              "百度页面",
              "height=400,width=400"
      );
  }
</script>
</head>
<body>
<input  type="button" value="http://www.mamicode.com/打开新的窗口" onclick="openNew()">
</body>
5、定时函数
<script type="text/javascript">
    var time=0;
    function count(){  //计数的方法
        document.getElementById("context").innerHTML="时间："+(++time);
 
    }
  var interval,timeout;
    //定时函数
    function setI(){  //setInterval函数  周期执行
        interval=setInterval("count()",1000);
    }
    function setT(){  //setTimeout函数  执行一次
        timeout= setTimeout("count()",1000);
    }
    //清除定时函数
    function clearI(){//清除setInterval函数
        clearInterval(interval);
    }
    function clearT(){//清除setTimeout函数
        clearTimeout(timeout);
    }
 
</script>
</head>
<body>
  <div id="context"></div>
<input  type="button" value="http://www.mamicode.com/setInterval函数" onclick="setI()">
<input  type="button" value="http://www.mamicode.com/setTimeout函数" onclick="setT()"><br/>
  <input  type="button" value="http://www.mamicode.com/清除setInterval函数" onclick="clearI()">
  <input  type="button" value="http://www.mamicode.com/清除setTimeout函数" onclick="clearT()">
</body>
6、访问节点
<script type="text/javascript">
    /*
    * nodeName:
    *  元素节点显示的是标签名称
    *  属性节点显示的是属性名称
    *  文本节点显示的是 #text
    *  文档节点显示的是#document
    * nodeValue;
    * 文本节点显示的是文本
    * 属性节点显示的是属性值
    *
    * nodeType:
    * 1  元素节点
    * 2  属性节点
    * 3  文本节点
    * 8   注释
    * 9   文档
    * */
  window.onload=function(){
     var ul= document.getElementsByTagName("ul")[0];
     /* alert("节点名称："+ul.nodeName);
      alert("节点类型："+ul.nodeType);*/
      /*获取ul中的第一个li*/
      var li=ul.firstElementChild;
      alert("节点名称："+li.nodeName);
       alert("节点类型："+li.nodeType);
       alert("节点内容："+li.childNodes[0].nodeValue);
 
      /*改变小猫咪图片的宽度*/
      var image=document.getElementsByName("cat")[0];
      image.setAttribute("width","200px");
      //获取src的值
      alert(image.getAttribute("src"));
  }
 
</script>
</head>
<body>
   <ul>
       <li>小强1</li>
       <li>小强2</li>
       <li>小强3</li>
   </ul>
<img src="http://www.mamicode.com/images/cat.jpg" name="cat">
</body>
7、节点的增删改
<script type="text/javascript">
  window.onload=function(){
     var ul= document.getElementsByTagName("ul")[0];
   /*新增节点*/
     var newLi= document.createElement("li");
      newLi.innerHTML="小黑";
      ul.appendChild(newLi);
      /*获取ul第三个li*/
     var second= ul.getElementsByTagName("li")[2];
      ul.insertBefore(newLi,second);
      /*clone*/
      var ul2= document.getElementsByTagName("ul")[0].cloneNode(true);
      document.getElementById("d").appendChild(ul2);
      /*删除节点*/
      var reNode= ul.getElementsByTagName("li")[0];
     // ul.removeChild(reNode);
      /*替换节点*/
      ul.replaceChild(newLi,reNode);
  }
 
</script>
</head>
<body>
   <ul>
       <li>小强1</li>
       <li>小强2</li>
       <li>小强3</li>
   </ul>
<div id="d">
</div>
</body>

javascript（一）


联系
我们