网页预览

知识点：

1.为什么auto能实现水平居中？

这是因为水平方向的 auto，其计算值取决于可用空间，左右方向的auto值均分了可用空间，使得块元素得以在包含块内居中显示。

2.href=”javascript:;”

禁止超链接的跳转

3.mixins

css封装常用的操作

比如:

由于父元素中的子元素的浮动效果，会产生父元素的高度塌陷问题，这种现象在后面的样式中也是比较常见的，所以我们需要在css目录中创建一个单独的mixins目录，在其中创建一个clear.less文件，然后在需要的位置调用即可。

4.font-size=0

用来解决行内元素留有一小撮空白的问题

给父元素添加属性font-size=0，再给子元素单独设置一个font-size值，以免子元素受到父元素影响

5.window.onload

6.Js文件顺序

如果这个文件需要另一个js文件的数据，则先让另一个引入，所有js文件一般都放在body的末尾引入

7.动态创建元素和追加元素的实现

8.className 和class的注意点

给一个元素添加类名时要使用className，而不能使用class

比如maskDiv.class=’mask’是错误的

9.蒙版元素的创建(思路很重要)

10.实现蒙版元素的移动效果

11.实现大图片放大和对应移动效果

12.放大镜下方缩略图小图css实现：

13.缩略图动态渲染：

14.模板字符串:

用两个反引号(``)来实现字符串的拼接，还能保持html的格式，对于动态渲染商品信息数据很有用，而且用${变量}可以动态使用数据

15.dl, dt, dd

dl, dt, dd是组合标签，使用了dt dd最外层就必须使用dl包裹，此组合标签我们也又叫表格标签，与table表格类似组合标签，故名我们也叫dl表格。

默认格式：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!doctype html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>This is title</title>
</head>
 
<body>
 
<div class="container">
    <dl>
        <dt>标题1</dt>
        <dd>列表1</dd>
    </dl>
    <dl>
        <dt>标题1</dt>
        <dd>列表1</dd>
        <dt>标题2</dt>
        <dd>列表1</dd>
        <dd>列表2</dd>
    </dl>
</div>
 
<script>
 
</script>
</body>
</html>

资料：[CSS之排列系列–dl, dt, dd](CSS之排列系列–dl, dt, dd–使用/教程/实例_dt dd-CSDN博客)

16.浮动与清除浮动：

1
2
3
 子元素{
	float：left
}

为了防止影响到父元素(父元素高度塌陷)，要对父元素做清除浮动处理

1
2
3
4
5
6
父元素{
      clear: both;
      display: block;
      content: '';
  }

17.闭包解决循环中变量问题

利用闭包函数来解决循环中事件里面的变量问题

事件之前的i变量以及j变量都已经循环完毕了，则无法得到每一次循环的变量值，那么针对这个问题，我们的需求就是想要每一次循环的变量都有所保留，我们可以使用闭包函数来解决这个问题

js链式作用域：子对象会一级一级向上寻找所有父对象的变量，反之不行。

js中函数内部可以读取全局变量，函数外部不能读取函数内部的局部变量。

1
2
3
4
5
6
7
8
9
function f1(){
        var n = 123;
        function f2(){    //f2是一个闭包
            alert(n)
        }    
        return f2;
    }


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
for (var i = 0; i < dlNodes.length; i++) {
 (function (i) {
        //获取第一个dl中的所有的dd元素
        var ddNodes = dlNodes[i].querySelectorAll('dd');

       //循环添加点击事件
    for (var j = 0; j < ddNodes.length; j++) {
       ddNodes[j].onclick = function () {
       //排他思想：
       //(1) 其他dd保持不动
       for (var k = 0; k < ddNodes.length; k++) {
             ddNodes[k].style.color = '#666'
          }
       //(2) 点击dd变色
         this.style.color = 'red';
       }
  }

 })(i)
}

18.数据类型的强制转换:

1.使用Number()函数

  • 1.如果是纯数字的字符串，则直接将其转换为数字

  • 2.如果字符串中有非数字的内容，则转换为NaN

  • 3.如果字符串是一个空串或者是一个全是空格的字符串，则转换为0

2.parseFloat()

​

这种方式专门用来对付字符串

  • parseInt() 把一个字符串转换为一个整数

  • parseFloat() 把一个字符串转换为一个浮点数