JavaScript Class 5

Posted Observer

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript Class 5相关的知识,希望对你有一定的参考价值。

学习内容:

BOM-javascript是运行在浏览器中的,
所以提供了一系列对象用于和浏览器窗口进行交互,
这些对象主要包括window、document、location、navigator和screen等。
通常称为浏览器对象模型(Browser Object Model)

1.window对象:
window是顶层对象

document、location、navigator、screen、history是其属性

 1 <script>        
 2 //windows是顶层对象,可以省略
 3     function c(){
 4         window.alert("这是alert方法");
 5     }
 6     function con(){  //带返回值的方法,确定返回true 取消返回false
 7         var a = window.confirm("这是confirm方法");
 8         if(a == true){
 9             alert("bye");
10         }else{
11             alert("no");
12         }
13         alert(a);
14     }
15     function pro(){ //带返回值的方法,点取消返回null
16         var b = window.prompt("这是prompt方法");
17         if(b!=null){
18             alert(b);
19         }else{
20             alert("你点了取消");
21         }
22         alert(b);
23     }
24     function move(){
25         window.moveBy(50,50);//窗口移动多少分别定义上下、左右,可多次移动 moveTo移动至 移动一次
26     }
27     function resizeT(){
28         window.resizeTo(600,500);//设置窗口大小至多大
29     }
30     function resizeB(){
31         window.resizeBy(100,100);//设置窗口增大多少
32     }
33 </script>

PS 制作一个钟表

 1 <html>
 2 <head>
 3     <script>
 4         function startTime(){
 5             var d = new Date();
 6             var h = d.getHours();
 7             var m = d.getMinutes();
 8             var s = d.getSeconds();
 9             m = checkTime(m);
10             s = checkTime(s);
11     document.getElementById("clock").innerHTML=h+":"+m+":"+s;
12             t = setTimeout(startTime(),500);
13     //setTimeout本来只能执行一次指定函数,但是写在要执行的函数内,就可以实现重复调用
14         }
    //var t = setInterval("startTime()",500);//setInterval 每隔多长时间执行一次函数
15 function checkTime(i){ 16 if(i<10){ 17 i="0"+i; 18 } 19 return i; 20 } 21 </script> 22 </head> 23 24 <body onLoad="startTime()"> 25 <div id="clock"></div> 26 </body> 27 </html>

 2.history对象:

(a)back();返回前一页,只有浏览过两页以上时才会生效

(b)forward();下一页,当前页面如果是第一个打开的,则无效

(c)go(),前进或后退指定数量的页面,正则进,负则退

<a href="javascript:history.forward()">下一页</a>
<a href="javascript:history.back()">上一页</a>
<a href="javascript:history.go(5)">前进5页</a>

3.DOM

DOM:
DOM是文档对象模型(Document Object Model)的简称。当网页加载时,可以将结构化文档在内存中转换成对象的树。
通俗来说,就是把每一个html标签看做一个个的对象,利用JS来进行各种操作。

DOM模型中的节点——文档可以说是由节点构成的集合。在DOM模型中有以下3种节点:
1.元素节点:各种标签就是这些元素节点的名称,例如p标签等。
2.文本节点:文本节点总是被包含在元素节点的内部,例如a标签内的文字。
3.属性节点:一般用来修饰元素节点就称之为属性节点,例如a标签内的href属性。

常用操作:

 1 <body>
 2 <div>
 3     <ul>
 4         <li>123</li>
 5         <li id="l1">456</li>
 6         <li>789</li>
 7     </ul>
 8 </div>
 9     <script>
10     //document.getElementById  通过id值来访问元素
11     //document.getElementsByTagName 通过标签名来访问元素
12     //var x = document.getElementsByTagName("li")[1].innerHTML;//方括号内为元素顺序
13     //alert(x);
14     //用过标签名来访问元素
15     //document.getElementById().parentNode 返回当前节点的父节点
16     //previousSibling 返回当前节点的前一个兄弟节点 nextSibling 返回当前节点的后一个兄弟节点
17     //document.getElementById().value 返回元素的属性值
18     //document.getElementById().innerHTML 返回元素的文本值
19     </script>
20 </body>

 4.访问元素

 1 <body>
 2     <div id="d1">
 3     我的div块
 4     </div>
 5     <textarea cols="20" rows="10" id="d2">
 6         好好学习,天天向上
 7     </textarea>
 8     <input type="text" value="按我呀" id="d3">
 9     <input type="button" value="访问三个元素的内容" onClick="t()">
10     <script>
11     function t(){
12         x = document.getElementById("d1").innerHTML;
13         
14         y = document.getElementById("d2").value;
15     
16         z = document.getElementById("d3").value;
17         alert(x+"\n"+y+"\n"+z);
18     }
19     </script>
20 </body>

5.访问节点

<body>
    <ul id="u">
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
    <li style="color: red;" id="f">赵六</li>
    <li>小红</li>
    <li>小明</li>
    </ul>
    <input type="button" value="父节点" onClick="f()">
    <input type="button" value="第一个子节点" onClick="fc()">
    <input type="button" value="上一个节点" onClick="ps()">
    <input type="button" value="下一个节点" onClick="ns()">
    <input type="button" value="最后一个子节点" onClick="lc()">
    <input type="button" value="得到所有li的元素个数" onClick="tn()">
    <script>
        function f(){
            var f =     document.getElementById("f").parentNode.innerHTML;
        alert(f);
        }
        function fc(){
        var fc = document.getElementById("f").parentNode.firstChild.nextSibling.innerHTML;//ul为块标签,之间的换行也是子节点,
     //要找到真正的文字要下一个节点才是
alert(fc); } function ps(){ var ps = document.getElementById("f").previousSibling.previousSibling.innerHTML; alert(ps); } function ns(){ var ns = document.getElementById("f").nextSibling.nextSibling.innerHTML; alert(ns); } function lc(){ var lc = document.getElementById("f").parentNode.lastChild.previousSibling.innerHTML;//lastChild是换行 alert(lc); } function tn(){ var tn = document.getElementById("u").getElementsByTagName("li").length; alert(tn); var arr = document.getElementById("u").getElementsByTagName("li")//这是一个数组,存放了所有li for(i=0;i<arr.length;i++){ document.write(arr[i].innerHTML+"\n"); } } </script> </body>

 












以上是关于JavaScript Class 5的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript - 代码片段,Snippets,Gist

JavaScript 片段

从一个活动开始一个片段

React 函数组件与class组件的区别

React 函数组件与class组件的区别

VSCode自定义代码片段12——JavaScript的Promise对象