一些新增的知识点

1、CSS引用文件字体

准备工作：将字体文件解压放于fonts文件夹中，字体文件通常有eot、svg、ttf、woff四种格式

CSS声明字体引用：

@font-face {
    font-family: test;
    src: url('../fonts/test.eot') format('embedded-opentype'),
    url('../fonts/test.svg') format('svg'),
    url('../fonts/test.ttf') format('truetype'),
    url('../fonts/test.woff') format('woff');
}

CSS设置字体为文件字体：

.example{
    font-family: test;
    font-style: normal;
}

假如使用的是字体图标，字体图标会有自己的编码，如果把字体图标放在伪元素中，则代码如下：

.example::before{
    content: 'e958'; //字体图标编码作为伪元素的内容
    font-size: 13px;
}

2、CSS选择器巧用

2.1、使用兄弟选择器

假如ul中并排的n个块级元素li，要设置相邻元素的间隔线，可使用以下代码：

//相邻兄弟选择器选择紧接在另一个元素后的元素，而且二者有相同的父元素，会循环查找
ul>li+li{
    border-left:1px solid #ccc;
}
//通用兄弟选择器选择指定元素的后面的所有兄弟结点，该情景下相邻兄弟选择器性能较好

ul>li~li{ border-left:1px solid #ccc; }

2.1、使用属性选择器

假如要匹配使用了test-开头的类，如class="test-1"、class=" test-2"、class="start test-3"...使用以下代码以匹配多种情况

[class^="test-"],[class*=" test-"]{
     ···      
}

3、jQuery和html数据交互

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
   <div data-name="张三" data-age="18"></div>
   <button id="btn1">获取数据</button>
   <button id="btn2">设置数据</button>
<script src="jquery/jquery.js"></script>
<script>
    $(function () {
        // 获取数据
        $("#btn1").on("click", function () {
            console.log($("div").data("name"));
            console.log($("div").data("age"));
        });
        // 设置数据
        $("#btn2").on("click", function () {
             $('div').data("name", "李四");
             $('div').data({"age": "40"});
        });
    });
</script>
</body>
</html>