javascript（一）详解编程语言

2021年7月19日 14:26 • 编程笔记

1、history属性

<body>

    <h1>第一个界面</h1>

<a href=”js02history.html”>当前页面</a>

<a href=”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=”刷新当前页面” onclick=”location.reload()”>

   <input type=”button” value=”替换当前页面” 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=”改变层内容” onclick=”changeLink();” /><br />

<br /><input name=”season” type=”text” value=”春” />

<input name=”season” type=”text” value=”夏” />

<input name=”season” type=”text” value=”秋” />

<input name=”season” type=”text” value=”冬” />

<br /><input name=”b2″ type=”button” value=”显示input内容” onclick=”all_input()” />

<input name=”b3″ type=”button” value=”显示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=”打开新的窗口” 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=”setInterval函数” onclick=”setI()”>

<input type=”button” value=”setTimeout函数” onclick=”setT()”><br/>

<input type=”button” value=”清除setInterval函数” onclick=”clearI()”>

<input type=”button” value=”清除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=”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>

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/12178.html

赞 (0)

0 0

javascript（二）详解编程语言

上一篇 2021年7月19日

表单验证详解编程语言

下一篇 2021年7月19日

发表回复

登录后才能评论