前端零碎知识点补充--1

最新推荐文章于 2024-11-08 14:35:14 发布

yy_33404590

最新推荐文章于 2024-11-08 14:35:14 发布

阅读量131

点赞数

文章标签： javascript css

本文链接：https://blog.csdn.net/qq_33404590/article/details/104701248

版权

background 属性总结

在一个div元素中设置多个背景图像（并指定他们的位置）。

背景缩写属性可以在一个声明中设置所有的背景属性。

可以设置的属性分别是：background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment,和background-image.

语法：


background: bg-color bg-image  position/bg-size bg-repeat bg-origin bg-clip bg-attachment  initial|inherit;

如果上述值缺少一个，这不要紧，例如background：＃FF0000 URL（smiley.gif）;是允许的。

background-color --背景颜色
background-position --left top /center
size – width height /% cover content
background-repeat, --是否平铺
background-origin ----box类型 --定位区域
background-clip — box类型 --绘画区域
background-attachment ----背景图片是否随页面滚动
background-image —图片

立即执行函数的作用

两种写法：

(function () {alert ('我是匿名函数')})();
(function(){}());

立即执行函数的作用：

不必为函数命名，避免了污染全局变量
立即执行函数内部形成了一个单独的作用域，可以封装一些外部无法读取的私有变量
封装变量

<body>
    <ul id="list">
        <li>公司简介</li>
        <li>联系我们</li>
        <li>营销网络</li>
    </ul>
    <script>
       var list = document.getElementById("list");
      var li = list.children;
      for(var i = 0 ;i<li.length;i++){
        li[i].onclick=function(){
          alert(i);  // 结果总是3.而不是0，1，2
        }
      }
     </script>  
</body>

为什么alert总是3? 因为i是贯穿整个作用域的，而不是给每一个li分配一个i,点击事件使异步，用户一定是在for运行完了以后，才点击，此时i已经变成3了。
那么怎么解决这个问题呢?

m1:

可以用立即执行函数，给每个li创建一个独立的作用域,在立即执行函数执行的时候，i的值从0到2，对应三个立即执行函数，这3个立即执行函数里边的j分别是0，1，2所以就能正常输出了

m2:
ES6的块级作用域解决整个问题

<body>
    <ul id="list">
        <li>公司简介</li>
        <li>联系我们</li>
        <li>营销网络</li>
    </ul>
    <script>
       var list = document.getElementById("list");
      var li = list.children;
      for(let i = 0 ;i<li.length;i++){
        li[i].onclick=function(){
          alert(i);  // 结果是0，1，2
        }
      }
     </script>  
</body>

五、立即执行函数使用的场景

1、你的代码在页面加载完成之后，不得不执行一些设置工作，比如时间处理器，创建对象等等。

2、所有的这些工作只需要执行一次，比如只需要显示一个时间。

3、但是这些代码也需要一些临时的变量，但是初始化过程结束之后，就再也不会被用到，如果将这些变量作为全局变量，不是一个好的注意，我们可以用立即执行函数——去将我们所有的代码包裹在它的局部作用域中，不会让任何变量泄露成全局变量，看如下代码：

链接：https://www.jianshu.com/p/b10b6e93ddec

JS对象中，a.b与a[b]的异同？

同：

都是获得该对象的某个属性

异：

不同之处在于a[b]中的b必须是个字符串

b可以取值的类型为：

string a.b a[‘b’]
number a[‘0’]
null a.b a[‘b’]
undefined a.b a[‘b’]

var a = {};
console.log(a);

a = {0: "ha", true: 12, null: 2, undefined: 23, name: "wahaha"}

js获取对象属性的例题

  // example 1
        let a = {},
            b = '0',
            c = 0;
        a[b] = '小明';
        a[c] = '小红';
        console.log(a[b]); 

        //正确答案：小红
        /* b.toString()  -->'0'
           c.toString()   -->'0' (覆盖) ---获取键名
           键名为c
        */

  // example 2
        let a = {},
            b = Symbol('1'),
            c = Symbol('1');
        a[b] = '小明';
        a[c] = "小红";
        console.log(a[b]); 
        // 正确答案：小明
        /*
        ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。
        它是 JavaScript 语言的第七种数据类型，前六种是：undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）
        b.toString() --->Symbol('1')
        c.toString() --->Symbol('1') (独立的)
        故a[b] --键名为b
        */


  //example 3
        let a = {},
            b = {
                n: '1'
            },
            c = {
                m: '2'
            };
        a[b] = '小明';
        a[c] = "小红";
        console.log(a[b]); 
        // 正确答案：小红
    /*    
    获取对象属性的方法：a.b 与 a[b]

    不同点：a[b] -->b必须是字符串形式
    
    转换为字符串的方法toString()
        
    因为键名称只能是字符串，b/c单做键会调用toString()得到的都是[object Object]，a[b],a[c]都等价于a["[object Object]"]，
    那不就是更新[object Object]这个键的值了。--键名为c
    故a[b] = a[c] = "小红"
     */