js的一些困惑之处,貌似懂了

一、字符串中包含变量怎么弄

　　使用反引号（键盘左上角，esc键的下面那个）

　　用反引号把字符串包起来,用${}把变量括在里面

        var name = 'green';  //这里用的是正常的单引号
        var string = `我的名字叫:${name}`;  //注意这里用的是反引号
        console.log(string);

 二、随处可见的 function $()

　　只用单个$符号为变量命名

　　下面转载自:https://www.cnblogs.com/jokerjason/p/7404649.html

$在JS中本身只是一个符号而异，在JS里什么也不是。
但在JS应用库JQUERY的作者将之做为一个自定义函数名了，这个函数是获取指定网页元素的函数，使用非常之频繁，所以好多新手不知道，还以为$是JS的什么特殊语法。
后来，可能有些程序员JQUERY用得多了，发现$这个函数很好用，很方便，所以，在不用JQUERY的情况，一般自己也会自定义一个$函数。
即：
function $(Nid){
 return document.getElementById(Nid);
}

就这么简单(在JSQUERY里可能稍微功能再强大一点，但主要还是我写的这个功能。)
以后在网页就不用每次使用document.getElementById("ID名")来获取元素，只用$('ID名')即可，非常简使了。


三、js加载完成后,常驻内存(异步)

　　html文档是自上而下加载并同时执行的,加载完也就执行完了,js也是,但不同于html,js加载后常驻内存.

　　举个例子说明一下,比如js中的for循环: 

 

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style type="text/css">
 5         *{
 6             margin: 0;
 7             padding: 0;
 8         }
 9         #box{
10             border:1px solid #ccc;
11             width: 430px;
12             height: 70px;
13             padding-top: 430px;
14             background: url("images/big_pic1.jpg") no-repeat;
15         }
16         #box ul li{
17             display: inline-block;
18             margin-right: 15px;
19         }
20 
21     </style>
22 </head>
23 <body>
24     <div id="box">
25         <ul>
26             <li>
27                 <img src="images/pic1.jpg" class="smallimg">
28             </li>
29             <li>
30                 <img src="images/pic2.jpg" class="smallimg">
31             </li>
32             <li>
33                 <img src="images/pic3.jpg" class="smallimg">
34             </li>
35             <li>
36                 <img src="images/pic4.jpg" class="smallimg">
37             </li>
38             <li>
39                 <img src="images/pic5.jpg" class="smallimg">
40             </li>
41         </ul>
42     </div>
43     <script type="text/javascript">
44         var smallImg = document.getElementsByClassName('smallimg');
45         var boxDiv = document.getElementById('box');
46         for(i=0; i<smallImg.length; i++){
47             smallImg[i].onmouseover = function () {  //由于鼠标没碰到指定地方,所以并未触发鼠标悬浮效果.
48                 boxDiv.style.background = `url("images/big_pic${i}.jpg") no-repeat`;  //此处i的值是for循环后的5
49             }
50         }
51     </script>
52 
53 </body>

 

　　网页加载完成,for循环完毕,由于鼠标没碰到指定地方,所以并未触发鼠标悬浮效果.执行完毕后for循环中i的值是最大值5.

　　但是鼠标的悬浮效果是可以在for循环执行完成后,继续可用的,i始终是5.(异步,并发)

四、为多个同类(class属性相同)标签对象动态增加新属性(id属性)的新方法

　　这里如果不用id属性,可能在谷歌浏览器网页检查中发现不了标签的增加的新属性.但不妨碍我们对其的使用.

 1     <div class="s">你好</div>
 2     <div class="s">哼哼</div>
 3     <script type="text/javascript">
 4         //1. 找到触发事件的对象
 5         var oDivs = document.getElementsByClassName('s');
 6         //2. 遍历对象
 7         for(var i=0; i<oDivs.length; i++){
 8             //3. 为每个对象增加新的属性id=0
 9             oDivs[i].id=`${i}`;  //注意这里用的是反引号
10         }
11     </script>

 

posted @ 2020-10-30 09:55  蓝蓝的白云天！  阅读(123)  评论(0)    收藏  举报