• 一些新增的知识点


    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>
  • 相关阅读:
    spring hibernate 调用存储过程
    Mybatis mapper配置
    流量红包算法
    带搜索的下拉框Chosen
    生成二维码
    Linux netlink机制
    OpenFlow Switch学习笔记(七)——Matching Fields
    Hierarchical Token Bucket
    OpenvSwitch架构
    Examining Open vSwitch Traffic Patterns
  • 原文地址:https://www.cnblogs.com/chuanzi/p/9571624.html
Copyright © 2020-2023  润新知