您的位置: 首页  >  IT文章  >  Day42:JS_DOM

Day42:JS_DOM

分类: IT文章 • 2024-04-06 22:04:59

1:BOM:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <script>
 9     //window 's function
10     //alert('hello')//window.alert('hello')
11     // var ret = window.confirm('hello chen')
12     // console.log(ret)
13     //prompt
14     // var ret = window.prompt('hello chen')
15     // console.log(ret)
16        // open('http://www.baidu.com')
17 
18     // setInterval(f,1000);
19     // function f(){
20     //     console.log('hello')
21     // }
22 //###############################################a example:
23 
24 </script>
25 </body>
26 </html>
View Code

2:One example:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #id1{
 8              150px;
 9             height: 50px;
10         }
11     </style>
12 </head>
13 <body>
14 <input type="text" id="id1" onclick="begin()">
15 <button onclick="end()">stop</button>
16 
17 <script>
18 
19     function showTime() {
20         var current_time=new Date().toLocaleString();
21         // alert(current_time)
22         var ele=document.getElementById('id1');
23         ele.value=current_time
24     }
25     var clock1;
26     function begin() {
27         if (clock1==undefined){
28         showTime();
29         clock1=setInterval(showTime,1000)
30         }
31 
32 
33     }
34 
35     function end(){
36         clearInterval(clock1);
37         clock1=undefined
38     }
39 </script>
40 </body>
41 </html>
View Code

3:Set timeout:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 
10 <!--<div onclick="f()">hello</div>-->
11 
12 <script>
13     function f() {
14         console.log('hello')
15     }
16     var c=setTimeout(f,1000);//some alert message need be vanished in a period
17     clearTimeout(c)
18 </script>
19 </body>
20 </html>
View Code

4:History 1&history 2:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 
10 <a href="js_history2.html">click</a>
11 
12 <!--<button onclick="history.forward()">>>>>>>>></button>-->
13 <button onclick="history.go(1)">>>>>>>></button>
14 </body>
15 </html>
16 #######################################
17 <!DOCTYPE html>
18 <html lang="en">
19 <head>
20     <meta charset="UTF-8">
21     <title>Title</title>
22 </head>
23 <body>
24 
25 
26 <!--<button onclick="history.back()">back</button>-->
27 <button onclick="history.go(-1)">back</button>
28 </body>
29 </html>
View Code

5:JS_location:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 <button onclick="f()">click</button>
10 <script>
11     // location.assign("http://www.baidu.com")
12 
13     function f() {
14         // location.reload()
15         location.replace("http://www.baidu.com")
16     }
17 </script>
18 
19 
20 </body>
21 </html>
View Code

6:DOM:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 
10 <div class="div1">
11     <p class="p1">hello p</p>
12     <div class="div2">hello div</div>
13 </div>
14 
15 <script>
16     // var ele=document.getElementById();
17     var ele=document.getElementsByClassName('p1')[0];
18     // console.log(ele)
19 
20     // console.log(ele.nodeName);//p
21     // console.log(ele.nodeType);//1
22     // console.log(ele.nodeValue);//null
23     console.log(ele.innerHTML);//hello p
24     ele.innerHTML='hello world';
25 
26     // var ele_p=ele.parentNode;
27     // console.log(ele_p)
28     // var b_ele=ele.nextSibling;
29     // console.log(b_ele)  //#text(blank)
30 
31     var b_ele2=ele.nextElementSibling;
32     console.log(b_ele2.innerHTML)//hello div
33 </script>
34 </body>
35 </html>
View Code

7:Load_event:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script>
 7         // window.load=function(){}
 8         function f() {
 9             var ele=document.getElementsByClassName('div1')[0];
10             console.log(ele.innerHTML);
11         }
12 
13 
14 
15     </script>
16 </head>
17 <body onload="f()">
18 
19 <div class="div1">hello div1</div>
20 
21 </body>
22 </html>
View Code

8:Event_bond:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 <div class="v1">
10     <div class="v2">dddd</div>
11     <div class="v2">dddddd</div>
12     <div class="v2">dddddd</div>
13     <p id='p1' onclick="func(this)">pppppp</p>
14 </div>
15 
16 <script>
17     
18 function func(that) {
19     console.log(that);
20     console.log(that.previousElementSibling);
21     console.log(that.parentNode);
22 }//<p id="p1" onclick="func(this)">pppppp</p>
23 
24 
25 
26     // var ele=document.getElementById('p1');
27     // ele.onclick=function () {
28     //     alert(123)
29     // };
30 //the record method can divide the js and html;
31 
32     // var ele2=document.getElementsByClassName("v2");//$(".v2").click=function(){}
33     // ele2.onclick=function () {
34     //     alert(888)
35     // };
36 
37     // for(var i=0;i<ele2.length;i++){
38     //     ele2[i].onclick=function () {
39     //         alert(666)
40     //     }
41     // }
42 </script>
43 </body>
44 </html>
View Code

9:Event:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 <input type="text" id="search" value="please insert username" onfocus="f1()" onblur="f2()">
10 
11 <script>
12     var ele=document.getElementById("search");
13     function f1() {
14         if(ele.value=="please insert username"){
15             ele.value='';
16         }
17 
18     }
19 
20         function f2() {
21         if(!ele.value.trim()){
22             ele.value='please insert username';
23         }
24 
25     }
26 </script>
27 </body>
28 </html>
View Code

相关推荐