JavaScript高级--类型转换/变量作用域/封闭函数/闭包及其用法/内置对象/新增选择器

类型转换

1、直接转换 parseInt() 与 parseFloat()

alert('12'+7); //弹出127
alert( parseInt('12') + 7 );  //弹出19 
alert( parseInt(5.6));  // 弹出5
alert('5.6'+2.3);  // 弹出5.62.3
alert(parseFloat('5.6')+2.3);  // 弹出7.8999999999999995
alert(0.1+0.2); //弹出 0.3000000000000004
alert((0.1*100+0.2*100)/100); //弹出0.3
alert((parseFloat('5.6')*100+2.3*100)/100); //弹出7.9

2、隐式转换 “==” 和 “-”

if('3'==3)
{
    alert('相等');
}

// 弹出'相等'
alert('10'-3);  // 弹出7

3、NaN 和 isNaN

alert( parseInt('123abc') );  // 弹出123
alert( parseInt('abc123') );  // 弹出NaN

变量作用域

变量作用域指的是变量的作用范围，javascript中的变量分为全局变量和局部变量。

1、全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问。
2、局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>变量作用域/函数用变量方式定义</title>
 9 </head>
10 
11 <script type="text/javascript">
12     // 全局变量-函数外部定义的变量，函数内部和外部都可以访问,它的值可以共享。
13 
14     // 局部变量-函数内部定义的变量，函数内部可以访问，外部无法访问，函数内部访问变量时，先在内部查找是否有此变量，如果有，就使用内部，如果没有，就去外部查找。
15 
16     // 函数内部如果不用'var' 关键字定义变量，变量可能会变成全局变量
17 
18     var a=10;
19     var b=5;
20 
21 
22     function aa(){
23         var a=20;
24         var c=7
25         alert(a);
26         a++;
27 
28         d=20
29     }
30     aa();  //弹出20
31 
32     // alert(a); 弹出10
33     // alert(c); 报错
34     // alert(d); 弹出20，不用'var' 关键字定义变量，变量变成了全局变量
35 
36 
37     /*
38     function myalert(){
39         alert('hello');
40     }
41     myalert();
42     */
43 
44     // myalert(); 写在这里会报错，变量预解析需放在函数的后面执行才行
45     var myalert=function(){
46         alert('hello')
47     }
48     myalert();
49 
50 
51 
52 </script>
53 
54 <body>
55 
56 </body>
57 </html>

封闭函数

封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>封闭函数</title>  <!--封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。这个函数及其变量不能被外部所引用。从而避免了函数名重复及变量污染-->
 9 
10     <script type="text/javascript">
11         /*
12         function myalert(){
13             var str='欢迎来到我的主页';
14             alert(str);
15         }
16         myalert()
17         */
18 
19         /*封闭函数的一般写法：
20         (function(){
21             var str='欢迎来到我的主页';
22             alert(str);
23         })();
24         */;
25 
26         // 封闭函数定义：(function(){  .... })()
27 
28         // 封闭函数其他的写法： 在匿名函数前加“！” 或者“~”，之后加“()”。
29         ~function(){
30           var str='欢迎来到我的主页';
31           alert(str);
32         }()
33 
34         //----------------------------------------------------
35         var aa=function(){
36             alert('aa');
37         };  //注意这里要加分号，不然下面的封闭函数不好使
38 
39         ;(function(){    //或者在封闭函数前面加分号，避免封闭函数未生效
40             var aa=function(){
41                 alert('bb');
42             }
43             aa()
44         })()
45 
46         aa();
47 
48     </script>
49 </head>
50 <body>
51 
52 </body>
53 </html>

闭包

什么是闭包
函数嵌套函数，内部函数可以引用外部函数的参数和变量，参数和变量不会被垃圾回收机制收回

用处
1、将一个变量长期驻扎在内存当中，可用于循环中存索引值

2、私有变量计数器，外部无法访问，避免全局变量的污染

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>闭包</title>    <!--函数嵌套函数，内部函数可以引用外部函数的参数和变量，参数和变量不会被垃圾回收机制收回 -->
 9 
10     <script type="text/javascript">
11         /*
12         function aa(b){
13             var a=12;
14             function bb(){
15                 alert(a);
16                 alert(b)
17             }
18             return bb;
19         }
20 
21         var cc=aa(10);
22         cc()
23         */
24 
25         //改写成封闭函数的形式：
26         var cc=(function(b){
27             var a=12;
28             function bb(){
29                 alert(a);
30                 alert(b);
31             }
32             return bb;
33         })(24)
34         cc()
35 
36         /*
37          var aa=(function(b){
38             var a=2;
39             function bb(){
40                 alert(b);
41                 a++;
42                 alert(a);
43             }
44             return bb;
45         })(2)
46 
47         aa();
48         aa();
49         */
50 
51     </script>
52 </head>
53 <body>
54 
55 </body>
56 </html>

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>闭包的用途-存循环的索引值、闭包的用途-私有变量计数器</title>
 9 
10     <script type="text/javascript">
11         /*
12         window.onload=function(){
13             var aLi=document.getElementsByTagName('li');
14             for(i=0;i<aLi.length;i++){
15                 aLi[i].onclick=function(){
16                     alert(i);     //都是弹出8
17                 }
18             }
19         }
20         */
21 
22         window.onload=function(){
23             var aLi=document.getElementsByTagName('li');
24             for(i=0;i<aLi.length;i++){
25                 (function(i){
26                     aLi[i].onclick=function(){
27                         alert(i)    //弹出0,1,2,3...  将一个变量长期驻扎在内存当中，可用于循环中存索引值
28                     }
29                 }
30                 )(i)
31             }
32         }
33 
34         //------------------------------------------------
35         //私有变量计数器，外部无法访问，避免全局变量的污染
36         var count=(function(){
37             var a=0;
38             function bb(){
39                 a++;
40                 return a;
41             }
42             return bb;
43         }
44         )()
45 
46         alert(count());  //弹出1
47         alert(count());  //弹出2
48         alert(count());  //弹出3
49 
50 
51     </script>
52 
53     <style type="text/css">
54         li{
55             margin:20px;
56             background-color:gold;
57             height:30px;
58         }
59     </style>
60 </head>
61 <body>
62 <ul>
63     <li>1</li>
64     <li>2</li>
65     <li>3</li>
66     <li>4</li>
67     <li>5</li>
68     <li>6</li>
69     <li>7</li>
70     <li>8</li>
71 </ul>
72 </body>
73 </html>

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>闭包做选项卡</title>
 9 
10     <style type="text/css">
11         .btns{
12             width:500px;
13             height:50px;
14         }
15 
16         .btns input{
17             width:100px;
18             height:50px;
19             background-color:#ddd;
20             color:#666;
21             border:0px;
22         }
23 
24         .btns input.cur{
25             background-color:gold;
26         }
27 
28         .contents div{
29             width:500px;
30             height:300px;
31             background-color:gold;
32             line-height:300px;
33             text-align:center;
34             display:none;
35         }
36 
37         .contents div.active{
38             display:block;
39         }
40     </style>
41 
42 
43     <script type="text/javascript">
44         window.onload=function(){
45             var oBtns=document.getElementById('btns').getElementsByTagName('input');
46             var oCons=document.getElementById('contents').getElementsByTagName('div');
47             // alert(oCons.length);
48 
49             for(i=0;i<oBtns.length;i++){
50                 (function(i){    //闭包方法存存循环的索引值
51                     oBtns[i].onclick=function(){
52                         for(j=0;j<oBtns.length;j++){
53                             oBtns[j].className='';  //先将oBtns所有的className清掉，再设置className
54                             oCons[j].className='';  //先将oCons所有的className清掉，再设置className
55                         }
56 
57                         this.className='cur';  //设置当前按钮的className，等价于oBtns[i].className='cur'
58                         oCons[i].className='active';
59                     }
60                 })(i)
61             }
62         }
63     </script>
64 </head>
65 <body>
66 
67     <div class="btns" id="btns">
68         <input type="button" name="" value="tab01" class="cur">
69         <input type="button" name="" value="tab02">
70         <input type="button" name="" value="tab03">
71     </div>
72 
73     <div class="contents" id="contents">
74         <div class="active">tab文字内容一</div>
75         <div>tab文字内容二</div>
76         <div>tab文字内容三</div>
77     </div>
78 
79 </body>
80 </html>

内置对象

1、document

document.referrer  //获取上一个跳转页面的地址(需要服务器环境)

2、location

window.location.href  //获取或者重定url地址
window.location.search //获取地址参数部分
window.location.hash //获取页面锚点或者叫哈希值

3、Math

Math.random 获取0-1的随机数
Math.floor 向下取整
Math.ceil 向上取整

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>模拟登录过程</title>
 9 
10     <script type="text/javascript">
11         // 存储跳转的源页面
12         var backurl=document.referrer;
13 
14         // 处理中间的登录的逻辑 如果成功
15 
16         // 跳转
17         window.location.href=backurl;
18     </script>
19 </head>
20 <body>
21 
22 </body>
23 </html>

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>获取地址栏参数</title>
 9 
10     <script type="text/javascript">
11         window.onload=function(){
12             var Dat=window.location.search;  //获取地址参数部分
13             var hash=window.location.hash;   //获取页面锚点或者叫哈希值
14             var oSpan=document.getElementById('span01');
15             //alert(Dat);
16 
17             var arr=Dat.split('=');
18             //alert(arr)
19             //alert(arr[1])
20             alert(hash);
21 
22             var name=arr[1];
23             oSpan.innerHTML=name;
24         }
25 
26     </script>
27 </head>
28 <body>
29 
30     <div>欢迎<span id="span01"></span>访问我的主页！</div>
31 </body>
32 </html>

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Math用法</title>
 9 
10     <script type="text/javascript">
11         var a=Math.random(); //Math.random()获取0-1的随机数
12         //alert(a);
13 
14         var b=10;
15         var c=20;
16         var b=Math.random()*(c-b)+b; //等价于var b=Math.random()*10+10,获取10-20的随机数
17         //alert(b);
18 
19         arr=[];
20         for(i=0;i<20;i++){
21             var num=Math.floor(Math.random()*(c-b+1)+b);   //Math.floor() 向下取整;Math.ceil() 向上取整
22             arr.push(num);
23         }
24         alert(arr);
25     </script>
26 </head>
27 <body>
28 
29 </body>
30 </html>

新选择器

1、document.querySelector()
2、document.querySelectorAll()

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>新增选择器</title>
 9 
10     <script type="text/javascript">
11         window.onload=function(){
12             var oDiv=document.querySelector('#div1');
13             var oLi=document.querySelectorAll('.list li');
14             alert(oLi.length);
15         }
16     </script>
17 </head>
18 <body>
19 
20     <div id="div">这是一个div元素</div>
21     <ul class="list">
22         <li>1</li>
23         <li>2</li>
24         <li>3</li>
25         <li>4</li>
26         <li>5</li>
27         <li>6</li>
28         <li>7</li>
29         <li>8</li>
30     </ul>
31 </body>
32 </html>

posted on 2019-12-18 21:06 cherry_ning 阅读(165) 评论(0) 收藏举报

刷新页面返回顶部

cherry_ning