CSS定位

1.绝对定位

说明：绝对定位脱离文档流，不会单独占满一行，他的方位只收到top，left，right，bottom影响

特性：如果父元素做了定位，那么就是相对于它最近的一个父元素，如果父元素没有定位，则相对body元素

2.相对定位

说明：相对定位没有脱离文档流，它的方位受到top，left，right，bottom影响

特性：相对定位的top、left等相对于它最近的一个父元素

3.固定定位

说明：脱离文档流，方位受left等影响

特性：top，left等总是相对于body

前端童鞋在做前后端数据交互的时候发现动态生成的html无法使用click方法触发事件。

$("#id").click(function(){
    //事件
})

当以上方法无法触发事件的时候可以用下面的方法解决

$("body").on("click","#id",function(){
         //事件
})

以上就解决了。

现在越来越多的公司开始实行前后端分离的开发模式，对前端而言在前后端各自开始干活阶段，后端无法提供相应的数据，这个时候就需要后端自己造一些假数据，mock.js就是为解决这种情况二出现的js库。

今天我们介绍下mock.js的语法规范。

数据模板定义可以分为7种分别是String、Number、Object、Array、Function、RegExp。

String 类型定义方式

1.通过重复string生成一个字符串

'name|min-max':string

实例

Mock.mock({
    "string | 1-10":"★"
})
//输出结果
{
    “string”："★★★" //五角星数量为1-10随机数量
}

2.通过重复string生成一个字符串，重复次数等于count。

‘name|count’:string;

实例

Mock.mock{(
    "string|5":"★"
)}
//输出结果
{
   "string":"★★★★★"
}

属性值是数字number类型定义

1.属性值自动加1，初始值为number，（通常配合数组使用）。

"number|+1":number

实例

Mock.mock({
    "number|+1":number
})
//输出结果
{
  “number”:100;
}

2.生成一个大于等于min，小于等于max的整数，属性值number只是用来确定类型。

“name|min-max”:number

实例

Mock.mock({
   "name|1-100":number
})
//输出结果
{
   "name":46
}

3.生成一个浮点数，整数部分大于等于min，小于等于max，小数部分保留dmin到dmax位。

“name|min-max.dmin-dmax”：number

实例

Mock.mock({
  'number1|1-100.1-10': 1,
  'number2|123.1-10': 1,
  'number3|123.3': 1,
  'number4|123.10': 1.123
})
//输出结果
{
    "number1": 12.92,
    "number2": 123.51,
    "number3": 123.777,
    "number4": 123.1231091814
}

属性值是布尔型Boolean

1.随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。

2.随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。

'name|1': boolean
'name|min-max': value

实例

Mock.mock({
  "boolean|1": true
})
Mock.mock({
  "boolean|1-2": true
})

属性值是对象 Object

1，从属性值 object 中随机选取 count 个属性。

'name|count': object

实例

Mock.mock({
  "object|2": {
    "310000": "上海市",
    "320000": "江苏省",
    "330000": "浙江省",
    "340000": "安徽省"
  }
})
//输出结果（结果为随机）
{
  "object": {
    "320000": "江苏省",
    "330000": "浙江省"
  }
}

2，从属性值 object 中随机选取 min 到 max 个属性。

'name|min-max': object

实例

Mock.mock({
  "object|2-4": {
    "110000": "北京市",
    "120000": "天津市",
    "130000": "河北省",
    "140000": "山西省"
  }
})
 //输出结果
{
  "object": {
    "110000": "北京市",
    "120000": "天津市"
  }
}

属性值是数组 Array

1.从属性值 array 中随机选取 1 个元素，作为最终值。

'name|1': array

实例

Mock.mock({
  "array|1": [
    "AMD",
    "CMD",
    "UMD"
  ]
})
//输出结果
{
  "array": "UMD"
}

2，从属性值 array 中顺序选取 1 个元素，作为最终值。

'name|+1': array

实例

Mock.mock({
  "array|+1": [
    "AMD",
    "CMD",
    "UMD"
  ]
})
//输出结果
{
  "array": "AMD"
}

3，通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。

'name|min-max': array

实例

Mock.mock({
  "array|1-10": [
    {
      "name|+1": [
        "Hello",
        "Mock.js",
        "!"
      ]
    }
  ]
})
    //输出结果 
{
  "array": [
    {
      "name": "Hello"
    },
    {
      "name": "Mock.js"
    },
    {
      "name": "!"
    },
    {
      "name": "Hello"
    }
  ]
}

4，通过重复属性值 array 生成一个新数组，重复次数为 count。

'name|count': array

实例

Mock.mock({
  "array|3": [
    "Hello",
    "Mock.js",
    "!"
  ]
})
//输出结果
{
  "array": [
    "Hello",
    "Mock.js",
    "!",
    "Hello",
    "Mock.js",
    "!",
    "Hello",
    "Mock.js",
    "!"
  ]
}

执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 ‘name’ 所在的对象。

'name': function

实例

Mock.mock({
  'foo': 'Syntax Demo',
  'name': function() {
    return this.foo
  }
})
//输出结果
{
  "foo": "Syntax Demo",
  "name": "Syntax Demo"
}

根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。

'name': regexp

实例

Mock.mock({
    'regexp1': /[a-z][A-Z][0-9]/,
    'regexp2': /\w\W\s\S\d\D/,
    'regexp3': /\d{5,10}/
})
// 输出结果
{
    "regexp1": "pJ7",
    "regexp2": "F)\fp1G",
    "regexp3": "561659409"
}

数据占位符定义规范 DPD

占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。

占位符 的格式为：

@占位符
@占位符(参数 [, 参数])

注意：
1.用 @ 来标识其后的字符串是 占位符。
2.占位符 引用的是 Mock.Random 中的方法。
3.通过 Mock.Random.extend() 来扩展自定义占位符。
4.占位符 也可以引用 数据模板 中的属性。
5.占位符 会优先引用 数据模板 中的属性。
6.占位符 支持 相对路径 和 绝对路径。
实例

Mock.mock({
    name: {
        first: '@FIRST',
        middle: '@FIRST',
        last: '@LAST',
        full: '@first @middle @last'
    }
})
//输出结果
{
    "name": {
        "first": "Charles",
        "middle": "Brenda",
        "last": "Lopez",
        "full": "Charles Brenda Lopez"
    }
}

备注：安装express之前确保电脑上以及安装了node.js。

首先打开cmd命令提示框。

第一步：安装express

执行命令：npm install -g express-generator 

提示:请务必操作这一步,否则创建express项目的时候会提示express命令没有找到；

第二步:执行 npm install -g express

第三步:执行express -V      //此步骤是查看express版本已确定express安装成功（注意“V”是大写）

（以上express环境已经安装好）;

接下来开始创建express项目！

第一步：执行 express myapp（项目文件名可以根据自己喜好命名，此处我所以命名）;

第二步：进入你的项目执行命令: cd myapp;

第三步：在你的项目的目录下执行 npm install    //此命令是安装express项目的依赖包

第四步：启动你的项目,执行 npm start；

第五步：打开你的浏览器,在地址栏中输入:   http://127.0.0.1:3000  就可以看到:express的欢迎信息 。