# 前端常用 API

# 1.Vue2.0 基础语法

# 1. 创建 vue 实例

<script>
//方式一 el:绑定HTML元素
    
var vm = new Vue({
    el:"#app",
    //model: 数据
    data(){
        return{
        
    	}
    },
   //计算属性  类似data概念
  computed: {
    //监控data中的数据变化
  },
  watch: {},
  //方法集合
  methods: {},
  //生命周期 -创建完成(可以访问当前this实例)
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {
  }, //生命周期 - 创建之前
  beforeMount() {
  }, //生命周期 - 挂载之前
  beforeUpdate() {
  }, //生命周期 - 更新之前
  updated() {
  }, //生命周期 - 更新之后
  beforeDestroy() {
  }, //生命周期 - 销毁之前
  destroyed() {
  }, //生命周期 - 销毁完成
  activated() {
  }, //如果页面有keep-alive缓存功能，这个函数会触发
});

    

/**
*方式二
*Vue.extend( options ) 创建构造器   
*使用构造器创建实例并挂载到HTML元素上
*/ 
var Main = {
    data () {
      return {
          
      };
    },
    methods:{
    }

  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
    
//HTML元素
<div id="mount-point"></div>
// 创建构造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')
//使用挂载器挂载一个空实例
var vm = new Vue.extend().$mount("#app")

</script>

# 2.vue 全局 API

<script>
	//创建一个vue子类实例的构造器
	Vue.extend( options )
    //DOM 更新循环结束之后执行延迟回调,获取更新后的 DOM
	Vue.nextTick( [callback, context] )
    //向响应式对象中添加一个 property，并确保这个新 property 同样是响应式且触发视图更新
    Vue.set( target, propertyName/index, value )
    //删除对象的 property。如果对象是响应式的，确保删除能触发更新视图。
    Vue.delete( target, propertyName/index )
    //注册或获取全局指令。
    Vue.directive( id, [definition] )
    //注册或获取全局过滤器。
    Vue.filter( id, [definition])
    //注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称
    Vue.component( id, [definition] )
    //安装 Vue.js 插件。
    Vue.use( plugin )
    //全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入，向组件注入自定义的行为
    Vue.mixin( mixin )
    //将一个模板字符串编译成 render 函数。只在完整版时可用。
    Vue.compile( template )
    //让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。 返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。
    Vue.observable( object )
    //提供字符串形式的 Vue 安装版本号
    Vue.version
</script>

1.Vue.directive( id, [definition] )

// 注册

Vue.directive('my-directive', {

  bind: function () {},

  inserted: function () {},

  update: function () {},

  componentUpdated: function () {},

  unbind: function () {}

})

// 注册 (指令函数)

Vue.directive('my-directive', function () {

  // 这里将会被 `bind` 和 `update` 调用

})

//getter，返回已注册的指令

var myDirective = Vue.directive('my-directive')

2. Vue.compile( template )

var res = Vue.compile('<div><span></span></div>')

new Vue({

  data: {

    msg: 'hello'

  },

  render: res.render,

  staticRenderFns: res.staticRenderFns

})

3.Vue.version

var version = Number(Vue.version.split('.')[0])

if (version === 2) {

  // Vue v2.x.x

} else if (version === 1) {

  // Vue v1.x.x

} else {

  // Unsupported versions of Vue

}

# 2.vue+axios+element 常用 cdn

<script src="/index/static/pc/js/vue.min.js"></script>

<link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui@2.15.2/lib/theme-chalk/index.css">

<script src="https://unpkg.zhimg.com/element-ui@2.15.2/lib/index.js"></script>

<script src="https://unpkg.zhimg.com/axios/dist/axios.min.js"></script>

# 3.Vue 计算属性

# 1.Vue-compute

// 计算属性

computed: {

  reversedMessage () {

    return this.message.split('').reverse().join('')

  }

}

// 方法

methods: {

  reversedMessage: function () {

    return this.message.split('').reverse().join('')

  }

}

//computed 只有在相关响应式依赖发生改变时才会重新求值，如果相关依赖没有发生改变，会直接返回上次的缓存结果

# 2.Vue-watch

var vm = new Vue({

  data: {

    sourceType: 1,

    sourceOrder: 2,

    sourceStatus: 3,

  },

  watch: {

    sourceType: function (val, oldVal) {},

    sourceOrder: function (val, oldVal) {},

    sourceOrder: function (val, oldVal) {},

  }

})

# 3.vue 插值表达式

1.Mustache

<!--swig4--> 			数据是响应式

2.v-once

<h1 v-once><!--swig5--><\h1>			元素和组件只渲染一次，不会随着数据的改变而改变。

3.v-html

<h1 v-html="link"><\h1>				v-html指令，string的html解析出来并且进行渲染

4.v-text

<h1 v-text="name">，你好<\h1>		  v-text作用和Mustache比较相似,但是标签中写入的内容将会被覆盖

5.v-pre

<h1 v-pre><!--swig6--><\h1>			用于显示原本的Mustache语法,第二个h1元素中会直接显示<!--swig7-->

6.v-cloak					

//html 部分		解决 Vue 来不及渲染，这时页面就会显示出 Vue 源代码

<div id="app" v-cloak>

    <!--swig8-->

<\div>

//css 部分

[v-cloak]{

    display: none !important;

}

# 4.JQuery

# 1.JQuery 元素选择器

# 1.jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

# 2.jQuery 属性选择器

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

# 3.jQuery CSS 选择器

$("p").css("background-color","red");

# 4. 更多的选择器实例

# 5.jQuery 选择器

# 2.location 页面跳转属性

# 1.window.location

1.页面跳转

window.location(.href)="URL"

winodw.location.assign("URL")

window.location.replace("URL") 		#跳转后不会保存跳出页面的信息

location.assign()					#在浏览器的历史记录中增加一条新纪录

#replace 之后，浏览历史就被清空了（href 与 assign 方法会产生历史记录）

2.历史跳转

window.history.back();

window.history.go(-1);

window.history.go('../routes/admin/') 

#这样可以跳转到指定的路由模块

3.页面重新加载

window.location.reload()

window.location.replace()

#这两种方法都可以重新加载本页，但是 replace () 可以导向另外一个 URL

4.操作window窗口的相关方法

window.location.search		#返回 URL 携带的查询 (参数) 部分

window.open(url,name,param) 

#url 是打开的地址 

#name 是窗口标识名称 

#param 是打开窗口的一些参数  

#打开一个新的浏览器窗口或查找一个已命名的窗口

4.location相关信息

window.location.host		#返回主机名或者当前 URL 端口号

window.location.hostname	#返回当前域名

window.location.pathname	#返回当前页面的路径和文件名

window.location.hash		#返回锚点部分 hash 值

window.location.href		#整个 URl 字符串，不能新打开页面，只能在当前页面跳转

window.close()  			#关闭当前窗口

window.moveTo() 			#移动当前窗口

window.resizeTo() 			#重新调整当前窗口

# 2.a 标签相关属性

//a 标签禁止跳转

href="javascript:;"								指向空地址

href="javascript:void(0);" 						指向当前界面

/**

*<a > 标签 target 属性

*<a target="_blank|_self|_parent|_top|framename"> 

*/

_blank			在新窗口中打开被链接文档。

_self			默认。在相同的框架中打开被链接文档。

_parent			在父框架集中打开被链接文档。

_top			在整个窗口中打开被链接文档。

framename		在指定的框架中打开被链接文档。

# 3.URLSearchParams

# 1.1. 用 URLSearchParams 处理 axios 请求的参数

var params = new URLSearchParams();

params.append('name','li');

params.append('age','18')

axios({

    method: 'post',

    url: '/query',

    data: params

})

# 2.URLSearchParams 常用方法

URLSearchParams.append()		#插入一个指定的键/值对作为新的搜索参数。

URLSearchParams.delete()		#从搜索参数列表里删除指定的搜索参数及其对应的值。

URLSearchParams.entries()		#返回一个iterator可以遍历所有键/值对的对象。

URLSearchParams.get()			#获取指定搜索参数的第一个值。

URLSearchParams.getAll()		#获取指定搜索参数的所有值，返回是一个数组。

URLSearchParams.has()			#返回 Boolean 判断是否存在此搜索参数。

URLSearchParams.keys()			#返回iterator 此对象包含了键/值对的所有键名。

URLSearchParams.set()			#设置一个搜索参数的新值，覆盖原有相同key的value

URLSearchParams.sort()			#按键名排序。

URLSearchParams.toString()		#返回搜索参数组成的字符串，可直接使用在URL上。

URLSearchParams.values()		#返回iterator 此对象包含了键/值对的所有值。

var paramsString = "q=URLUtils.searchParams&topic=api"

var searchParams = new URLSearchParams(paramsString);

for (let p of searchParams) {

  console.log(p);

}

searchParams.has("topic") === true; 	// true

searchParams.get("topic") === "api"; 	// true

searchParams.getAll("topic");			// ["api"]

searchParams.get("foo") === null;		// true

searchParams.append("topic", "webdev");

searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"

searchParams.set("topic", "More webdev");

searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"

searchParams.delete("topic");

searchParams.toString(); // "q=URLUtils.searchParams"

# 4.URL 截取 Query 使用的 RegExp 正则表达式

#匹配URL对应参数的值
getQueryString = function (name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");		
    var r = window.location.search.substr(1).match(reg);			//使用当前url的search部分截取?之后的部分进行匹配
    if (r != null) return unescape(r[2]);
    return null;
}
getQueryString = function (name) {
    var reg = new RegExp("(^|&|\\?)" + name + "=([^&]*)(&|$)", "i");		
    var r = window.location.href.match(reg);						//直接使用当前url进行正则匹配即可
    //if (r != null) return unescape(r[2]);
    return r?unescape(r[2]):null;
}


let s ='http://127.0.0.1:8088/buy/time?time=ds6&time=ss'.split('?')[1].match(new RegExp('(^|&)'+'time'+'=([^&]{2})([0-9])(&|$)'));
s: 	['time=ds6&', '', 'ds', '6', '&', index: 0, input: 'time=ds6&time=ss', groups: undefined]

new RegExp('(^|&)'+'time'+'=([^&]{2})([0-9])(&|$)')
/*
String.match() 					
如果 regexp 没有标志 g，那么 match() 方法就只能在 stringObject 中执行一次匹配
['time=ds6&', '', 'ds', '6', '&', index: 0, input: 'time=ds6&time=ss', groups: undefined]
返回值数组: ['匹配到的完整字符串','第一个()中匹配到的结果','第一个()中匹配到的结果'...,'起始位置索引','被匹配的字符串'] 
返回结果从index=1开始,后面依次为每个子正则Rex匹配到的结果
index 属性声明的是匹配文本的起始字符在 stringObject 中的位位置
input 属性声明的是对 stringObject 的引用。
在全局检索模式下，match() 即不提供与子表达式匹配的文本的信息，也不声明每个匹配子串的位置。如果您需要这些全局检索的信息，可以使用 RegExp.exec()。


正则表达式效果
^name	 							匹配任何开头以name的字符串
'(^|&)' 							匹配以&开头或者空白开头的字符串
'(^|&)' + query  					 匹配任何以&query开头 或者 以空白query开头的字符串
[^&]  	 							匹配除了&以外的任意字符，就是一旦在出现了&，就是另外一个新的参数了，就不继续匹配
([^&]*)   							匹配任意数量的 除了&以外的字符 如果query后面有&就停止匹配
(&|$)     							同理，匹配任何以&结尾 或者 空白结尾的参数  
([^&]*)(&|$) 						匹配以 & 开头之外的任意多个参数值，并且遇到&或者空白就停止
*/

# 5. 正则表达式常用参数

# 5.Axios 请求

# 1. 请求方式

axios(config)

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

# 2. 请求配置选项

#请求地址

url: '/user',

#请求类型

method: 'get',

#请根路径

baseURL: 'http://www.mt.com/api',

#请求前的数据处理

transformRequest:[function(data){}],

#请求后的数据处理

transformResponse: [function(data){}],

#自定义的请求头

headers:{'x-Requested-With':'XMLHttpRequest'},

#URL 查询对象 对应的是 get 请求，传参数

params:{ id: 12 },

#查询对象序列化函数

paramsSerializer: function(params){ }

request body：对应的是post请求，传请求数据

data: { key: 'aa'},

#超时设置 s

timeout: 1000,

#跨域是否带 Token

withCredentials: false,

#自定义请求处理

adapter: function(resolve, reject, config){},

#身份验证信息

auth: { uname: '', pwd: '12'},

#响应的数据格式 json /blob/document/arraybuffer/text/stream

responseType: 'json',

# 3.axios 封装

1.Promise 异步返回

export default{

    //get 请求

    get(url,param){

        return new Promise((resolve,reject)=>{

            service({

                method:'get',

                url,

                params:param,

                cancelToken:new CancelToken(c=>{

                    cancel=c

                })

            }).then(res=>{  //axios 返回的是一个 promise 对象

                resolve(res)  //resolve 在 promise 执行器内部 

            }).catch(err=>{

                console.log(err,'异常')

            })

        })

    },

    //post 请求

    post(url,param){

        return new Promise((resolve,reject)=>{

            service({

                method:'post',

                url,

                data:param,

                cancelToken:new CancelToken(c=>{

                    cancel=c

                })

            }).then(res=>{

                resolve(res)

            }).catch(err=>{

                console.log(err,'异常')

            })

        })

    }

}

2. 自定义封装

import axios from 'axios'

/**

* Content-Type 的几种常见类型有：

* 

*application/x-www-form-urlencoded

*multipart/form-data

*application/json

*text/xml

*binary（application/octet-stream）

*/

// 创建 axios 实例 & lt; 官网案例 >

const instance = axios.create({

    baseURL: 'https://some-domain.com/api/',

    timeout: 1000,

});

const form = { 'content-type': 'application/x-www-form-urlencoded' }

const json = { 'content-type':'application/json'}

//Promist 异步请求，默认为 get 请求

export function request(url, data={}, method = 'get', header = 'JSON'){

    return new Promise((resolve, reject)=> {

        instance({

            method: method,

            url: url,

            data: data,

            headers: header === 'JOSN' ? json : form,

            cancelToken: new CANCEL_TOKEN(c => { // 强行中断请求要用到的，记录请求信息

                Vue.prototype.$httpRequestList.push(c);

            })

        }).then(resp => {

            resolve(resp.data);

        }).catch(err => {

            reject(err);

        });

    });

}

//axios 基础封装

export function requestClog(url, data={}, method = 'get', header = 'JSON') {

    axios({

        url: url,

        methods: method,

        data: data,

        cancelToken: new CANCEL_TOKEN(c => { // 强行中断请求要用到的，记录请求信息

            Vue.prototype.$httpRequestList.push(c);

        }),

        headers: header === 'JOSN' ? json : form,

    }).then(resp => {

        console.log(resp);

    }).catch(err => {

        console.log(err);

    })

}

# 2.axios 相关配置信息

• axios 实例创建参数

  {
     // `url` 是用于请求的服务器 URL
    url: '/user',
  
    // `method` 是创建请求时使用的方法
    method: 'get', // default
  
    // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
    // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
    baseURL: 'https://some-domain.com/api/',
  
    // `transformRequest` 允许在向服务器发送前，修改请求数据
    // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
    // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
    transformRequest: [function (data, headers) {
      // 对 data 进行任意转换处理
      return data;
    }],
  
    // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
    transformResponse: [function (data) {
      // 对 data 进行任意转换处理
      return data;
    }],
  
    // `headers` 是即将被发送的自定义请求头
    headers: {'X-Requested-With': 'XMLHttpRequest'},
  
    // `params` 是即将与请求一起发送的 URL 参数
    // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
    params: {
      ID: 12345
    },
  
     // `paramsSerializer` 是一个负责 `params` 序列化的函数
    // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
    paramsSerializer: function(params) {
      return Qs.stringify(params, {arrayFormat: 'brackets'})
    },
  
    // `data` 是作为请求主体被发送的数据
    // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
    // 在没有设置 `transformRequest` 时，必须是以下类型之一：
    // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
    // - 浏览器专属：FormData, File, Blob
    // - Node 专属： Stream
    data: {
      firstName: 'Fred'
    },
  
    // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
    // 如果请求话费了超过 `timeout` 的时间，请求将被中断
    timeout: 1000,
  
     // `withCredentials` 表示跨域请求时是否需要使用凭证
    withCredentials: false, // default
  
    // `adapter` 允许自定义处理请求，以使测试更轻松
    // 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).
    adapter: function (config) {
      /* ... */
    },
  
   // `auth` 表示应该使用 HTTP 基础验证，并提供凭据
    // 这将设置一个 `Authorization` 头，覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
    auth: {
      username: 'janedoe',
      password: 's00pers3cret'
    },
  
     // `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
    responseType: 'json', // default
  
    // `responseEncoding` indicates encoding to use for decoding responses
    // Note: Ignored for `responseType` of 'stream' or client-side requests
    responseEncoding: 'utf8', // default
  
     // `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称
    xsrfCookieName: 'XSRF-TOKEN', // default
  
    // `xsrfHeaderName` is the name of the http header that carries the xsrf token value
    xsrfHeaderName: 'X-XSRF-TOKEN', // default
  
     // `onUploadProgress` 允许为上传处理进度事件
    onUploadProgress: function (progressEvent) {
      // Do whatever you want with the native progress event
    },
  
    // `onDownloadProgress` 允许为下载处理进度事件
    onDownloadProgress: function (progressEvent) {
      // 对原生进度事件的处理
    },
  
     // `maxContentLength` 定义允许的响应内容的最大尺寸
    maxContentLength: 2000,
  
    // `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject  promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，promise 将被 resolve; 否则，promise 将被 rejecte
    validateStatus: function (status) {
      return status >= 200 && status < 300; // default
    },
  
    // `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
    // 如果设置为0，将不会 follow 任何重定向
    maxRedirects: 5, // default
  
    // `socketPath` defines a UNIX Socket to be used in node.js.
    // e.g. '/var/run/docker.sock' to send requests to the docker daemon.
    // Only either `socketPath` or `proxy` can be specified.
    // If both are specified, `socketPath` is used.
    socketPath: null, // default
  
    // `httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。允许像这样配置选项：
    // `keepAlive` 默认没有启用
    httpAgent: new http.Agent({ keepAlive: true }),
    httpsAgent: new https.Agent({ keepAlive: true }),
  
    // 'proxy' 定义代理服务器的主机名称和端口
    // `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据
    // 这将会设置一个 `Proxy-Authorization` 头，覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
    proxy: {
      host: '127.0.0.1',
      port: 9000,
      auth: {
        username: 'mikeymike',
        password: 'rapunz3l'
      }
    },
    // `cancelToken` 指定用于取消请求的 cancel token
    // （查看后面的 Cancellation 这节了解更多）
    cancelToken: new CancelToken(function (cancel) {
    })
  }
  

• axios 响应结构

  {
    // `data` 由服务器提供的响应
    data: {},
  
    // `status` 来自服务器响应的 HTTP 状态码
    status: 200,
  
    // `statusText` 来自服务器响应的 HTTP 状态信息
    statusText: 'OK',
  
    // `headers` 服务器响应的头
    headers: {},
  
     // `config` 是为请求提供的配置信息
    config: {},
   // 'request'
    // `request` is the request that generated this response
    // It is the last ClientRequest instance in node.js (in redirects)
    // and an XMLHttpRequest instance the browser
    request: {}
  }
  

• axios 全局 默认值

  	axios.defaults.baseURL = 'https://api.example.com';
  	axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
  	axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

• axios 请求拦截器

  //在请求或响应被 then 或 catch 处理前拦截它们。
  // 添加请求拦截器
  axios.interceptors.request.use(function (config) {
      // 在发送请求之前做些什么
      return config;
    }, function (error) {
      // 对请求错误做些什么
      return Promise.reject(error);
    });
  
  // 添加响应拦截器
  axios.interceptors.response.use(function (response) {
      // 对响应数据做点什么
      return response;
    }, function (error) {
      // 对响应错误做点什么
      return Promise.reject(error);
    });
  

• # axois 请求数据 data 序列化

  	// 默认情况下，axios 将 JavaScript 对象序列化为 JSON。 要以 application /x-www-form-urlencoded 格式发送数据，您可以使用以下选项之一。
  	// 请求数据序列化方式 application/x-www-form-urlencoded application/json
  	#1.在浏览器中，您可以使用URLSearchParams API，如下所示：
  	const params = new URLSearchParams();
  	params.append('param1', 'value1');
  	params.append('param2', 'value2');
  	axios.post('/foo', params);
  	#2.使用es6在请求头中设置
  	import qs from 'qs';
  	const data = { 'bar': 123 };
  	const options = {
  	method: 'POST',
  	headers: { 'content-type': 'application/x-www-form-urlencoded' },
  	data: qs.stringify(data),
  	url,
  	};
  	axios(options);

# 6.css 常用修饰

# 1. 文字溢出隐藏设置

<style>

p{

    max-width: 12rem;				//设置显示最大宽度		

	white-space: nowrap;			

    overflow: hidden;

    text-overflow: ellipsis;

    text-align: right

}

多行文本溢出

p{

	width:300px; /* 限制元素宽度 */

	line-height: 30px;

	border:1px solid #ccc;

	overflow: hidden; /* 文本超出隐藏 */

	display:-webkit-box; /* 盒子模型微弹性伸缩模型 */

	-webkit-box-orient: vertical;/* 伸缩盒子的子元素垂直排列 */

	-webkit-line-clamp: 3; /* 文本显示 3 行 */

}

</style>

<--! white-space 可选属性值 -->

# normal	默认。空白会被浏览器忽略。

# pre		空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

# nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。

# pre-wrap	保留空白符序列，但是正常地进行换行。

# pre-line	合并空白符序列，但是保留换行符。

# inherit	规定应该从父元素继承 white-space 属性的值。

<--! overflow 可选属性值 -->

# visible	外默认值。内容不会被修剪，会呈现在元素框之

# hidden	内容会被修剪，并且其余内容是不可见的。

# scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

# auto		如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

# inherit	规定应该从父元素继承 overflow 属性的值。

<--! text-overflow 可选属性值 -->

# clip	修剪文本。	测试

# ellipsis	显示省略符号来代表被修剪的文本。	测试

# string	使用给定的字符串来代表被修剪的文本。

# 2. 防止父元素覆盖资源的绑定事件操作

$('#tranxDetails').on('click', function(e){

    if (e.target == e.currentTarget){// 防止父元素覆盖资源的绑定事件操作

      location.reload();

      // 执行父元素的事件

    }

  });

# 3. 页面输出 HTML 空格符

         不换行空格

         半角空格    等同于字体度的一半（如16px字体中就是8px）  宽度正好是1/2个中文宽度 基本上不受字体影响

     	  全角空格 	  相当于当前指定的点数, em在16px的字体中就是16px   宽度正好是1个中文宽度

       窄空格      是em之六分之一宽

‌ 		 零宽不连字   是一个不打印字符，放在电子文本的两个字符之间，抑制本来会发生的连字    HTML字符值引用为： ‌

‍		 零宽连字    使得这两个本不会发生连字的字符产生了连字效果  零宽连字符的Unicode码位是U+200D (HTML: ‍ ‍）

4. 盒子阴影

// 盒子添加阴影

box-shadow: 10px 10px 5px #888888;

// 语法

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow	// 必需的。水平阴影的位置。允许负值

v-shadow	// 必需的。垂直阴影的位置。允许负值

blur		// 可选。模糊距离

spread		// 可选。阴影的大小

color		// 可选。阴影的颜色。在 CSS 颜色值寻找颜色值的完整列表

inset		// 可选。从外层的阴影（开始时）改变阴影内侧阴影