By

文章目录

    这里记录的是在练习百度的2016IFE任务时的笔记，因为是边学边记所以也比较零散，仅供自己平日记录。

  1. node.childNodes 中包含空白节点
    node.children 中不包含空节点
    当是二叉树节点时，直接用node.firstElementChild 与 node.lastElementChild

  2. DOM节点的二叉树遍历

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    // 深度优先遍历
    function traverseDF(node){
    	if(node){
    		nodeList.push(node);
    		for(var i=0;i<node.children.length;i++){
    			traverseDF(node.children[i]);
    		}
    	}
    }
    //广度优先遍历
    var nodeList =[];
    function traverseBF(node) {;
    	if (node) {
    		nodeList.push(node);
    		traverseBF(node.nextElementSibling);
    		node = nodeList[BFindex++];
    		traverseBF(node.firstElementChild);
    	}
    }

  3. jpg 与 png 区别
    jpg

    全名应该是JPEG。JPEG 是与平台无关的格式，支持最高级别的压缩，不过，这种压缩是有损耗的。
    文件大小是以图像质量为代价的。压缩比率可以高达 100:1。（JPEG 格式可在 10:1 到 20:1 的比率下轻松地压缩文件，而图片质量不会下降。）JPEG 压缩可以很好地处理写实摄影作品。但是，对于颜色较少、对比级别强烈、实心边框或纯色区域大的较简单的作品，JPEG 压缩无法提供理想的结果。JPEG 不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。

    png

    目的是企图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。
    流式网络图形格式(Portable Network Graphic Format，PNG)名称来源于非官方的“PNG’s Not GIF”，是一种位图文件(bitmap file)存储格式，读成“ping”。
    流式读/写性能(streamability)：图像文件格式允许连续读出和写入图像数据，这个特性很适合于在通信过程中生成和显示图像。
    逐次逼近显示(progressive display)：这种特性可使在通信链路上传输图像文件的同时就在终端上显示图像，把整个轮廓显示出来之后逐步显示图像的细节，也就是先用低分辨率显示图像，然后逐步提高它的分辨率。
    透明性(transparency)：这个性能可使图像中某些部分不显示出来，用来创建一些有特色的图像。
    辅助信息(ancillary information)：这个特性可用来在图像文件中存储一些文本注释信息。
    独立于计算机软硬件环境。
    使用无损压缩。

  4. user-select :用来控制内容的可选择性

    auto:默认值 用户可以选中元素中的内容
    none——用户不能选择元素中的任何内容
    text——用户可以选择元素中的文本
    element——文本可选，但仅限元素的边界内(只有IE和FF支持)
    all——在编辑器内，如果双击/上下文点击发生在子元素上，改值的最高级祖先元素将被选中。
    -moz-none——firefox私有，元素和子元素的文本将不可选，但是，子元素可以通过text重设回可选

  5. 用css写箭头

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    .right-arrow{
        width: 0;
        height: 0;
        border-left: 10px solid #6898c2;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        cursor: pointer;
    }
    .down-arrow{
        width: 0;
        height: 0;
        border-top: 10px solid #6898c2;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        cursor: pointer;
    }

  6. 在父元素上hover时控制子元素的显隐

    1
    2
    3
    4
    5
    父元素 .father
    子元素 .child
      .father:hover>.child{
        display: block;
      }
文章目录