代码 — 设计素材整理

javascript

console.log() .innerHTML .innerText .abs() .ceil() .floor() .round() .random() .sqrt() .substr() .substring() .indexOf() .replace() .parseFloat() .test() .match() .join() .split() decodeURI()

document.getElementById()

document.getElementById("div1")在浏览器（window）的网页（document）中通过id名得到一个元素

document.getElementsByTagName()

document.getElementsByTagName("li")通过标签名获得一组元素

document.getElementsByClassName()

document.getElementsByClassName(".class")通过类名（通过class属性的值）老版ie不支持

document.getElementsByName()

document.getElementsByName("str")通过name属性的值来获得一组表单元素（注意是表单元素）

.item(n)

item(n)是的所有的元素集合类型的数据的方法，它的作用就是在这一组元素里获取指定索引号为n的那个元素。索引号就是一组数据在保存的时候的顺序号，从0开始计oLis.item(n)也可以写成oLis[n]的方式

.style属性

.style.width="50px"、.style.fontSize="14px"像font-size，font-weight，background-color等这些，在JS中要写成fontSize这样，就是去掉减号，第二个单词的首字母大写。

Math 数学方法

Math.abs()取绝对值 Math.ceil()向上取整 Math.floor()向下取整 Math.round()四舍五入 Math.random()0-1之间的小数Math.sqrt()开平方

JSON.parse() 和 JSON.stringify()方法

JSON.parse(jsonstr) 可以将json字符串转换成json对象

JSON.stringify(jsonstr) 可以将json对象转换成json对符串

js 跳转链接的几种方式

window.location.href="http://www.123.com" 在当前窗口打开

window.parent.location.href='http://www.123.com' 在父级页面打开

window.open("http://www.123.com") 在新窗口打开

window.history.back(-1) 返回上一页

.substr()方法

.substr(start,length)是截取字符串的方法start,是起始位置必须的数字，length是长度也是个数也必须是数字例如：stringObject.substr(0,5)值就是strin。

.substring()方法

substring(start,stop)是截取字符串的方法start,是起始位置必须是正数的数字，stop是到第几个结束也是个数也必须是正数的数字例如：stringObject.substring(2,7)值就是ringO。

.indexOf()方法

字符串A.indexOf(字符串B)判断字符串B在字符串A里面的位置，值为-1表示没有，如果字符串B有重复的只判断最前面的。

.replace()方法

字符串A.replace("字符串B","新字符串C")在字符串A里面查找字符串B 然后用C替换然后变成一个新的字符串，这个方法不会修改字符串A。

.parseFloat()和.parseInt()和Number()方法

.parseFloat("123ad")=123提取字符串中的数字.parseInt()提取字符串开头的数字Number("999")强制把字符串转换成数字

.test()方法

正则表达式reg.test(字符串A)test这个方法是判断在字符串A里面能否找到reg这个表达式，能找到则返回 ture 找不到则返回false。

.toLowerCase()、.toUpperCase()、.fontsize()、.fontcolor()方法

.toLowerCase()大写转小写.toUpperCase()小写转大写.fontsize(16)设置字体大小.fontcolor("Red")设置字体颜色

.match()方法

str.match("str")返回str或者bull

.splice()方法

.splice(index,len,[item])数组方法，删除/添加数组的某一项

.join()方法

.join("str")数组方法，用str去替换数组中的分隔符，并整体输出为一个字符串

.split()方法

var spr="name?lisiyang"; spr.split('?')[1]=lisiyang用于把一个字符串分割成字符串数组

localStorage、sessionStorage

保存数据：localStorage.setItem(key,value);

读取数据：localStorage.getItem(key);

删除单个数据：localStorage.removeItem(key);

删除所有数据：localStorage.clear();

得到某个索引的key：localStorage.key(index);

encodeURIComponent()和decodeURIComponent()及decodeURI()方法

encodeURIComponent()、decodeURIComponent()跨页面传中文编码及解码方法

preventDefault()方法

event.preventDefault() 方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）

.hasOwnProperty('属性名称')方法

.hasOwnProperty()判断对象中是否有某属性，返回true和false

Vue

vue init webpack baoge

使用webpack创建项目：vue init webpack + 项目英文名 安装依赖包：npm install

npm run dev 和 npm run build

启动项目：npm run dev 打包项目：npm run build

Vue结构

new Vue({
    el:"#app",
    data:{
        data:"字符串"\[数组、json数组]\方法function(){return 初始值}
    },
    methods:{
        fn:function(){}
    }
})

v-model

v-model="message" 绑定参数值，常用于表单重

v-show、v-if

v-show="!message"给元素做显示隐藏操作，通常值都填写JS判断条件.v-show是添加display:none属性，v-if是剪切走该元素

v-on:submit、@:submit、@:submit.prevent

v-on:submit.prevent="fn-name"v-on:绑定方法@为简写，.prevent为阻止默认事件的简写

v-bing:class

v-bing:class="{ active: isActive, 'text-danger': hasError }"为元素绑定CLASS名称

css

!important

CSS通用样式

body, h1, h2, h3, h4, h5, h6, div, p, b, i, a, ul, ol, dl, dt, dd, li, td, input, select, textarea, form, table { margin: 0; padding: 0; font-weight: normal;}
li, img { padding: 0px; margin: 0px; list-style: none; }
a, a:hover{ text-decoration: none; outline: none;color: #000;}
img{ width:100%; height:100%;}
input,textarea{ resize: none; border: none;background: none;-webkit-appearance:none; border-radius: 0; outline: none;}
body { font-family: "微软雅黑"; font-size:14px; color: #000;}
.clear { clear: both; font-size: 1px; height: 0; line-height: 0px; margin: 0; padding: 0; }
.left{ float: left; }
.right { float: right;}

@media流媒体查询

@media screen and (min-width:1500px) {}
@media screen and (min-width: 1000px) and (max-width: 1499px) {}
@media screen and (min-width:750px) and (max-width: 1001px) {}
@media only screen and (min-width:180px) and (max-width:749px) {}

transition和transform

transition:1s执行时间为1秒
transition:1s linear 2s;执行时间为1秒延迟2秒执行
transform:rotate(360deg)旋转360度
transform: rotateY(180deg)沿着Y轴翻转180度

box-shadow

box-shadow:0px 0px 8px #f00;外阴影
box-shadow: inset 0px 0px 30px red;内阴影
-moz-Firefox 4
-webkit-Safari and Chrome
-o-Opera

placeholder属性样式修改

input::-webkit-input-placeholder {颜色: color: #aab2bd;字体大小:font-size: 12px;位置:text-align: right;}

文字不换行，超过的部分用“...”代替

overflow: hidden;text-overflow: ellipsis; white-space: nowrap;width: 210px;

text-transform英文大小写样式

text-transform:capitalize 英文拼音的首字母大写
text-transform:uppercase 英文拼音字母全大写
text-transform:lowercase英文拼音字母全小写

APICloud

$api.fixStatusBar() 获取手机顶部横条高度

var header = $api.dom('header') 先获取头部标签高度 var headerH = $api.fixStatusBar(header) 再获取标签和横条高度总和

tapmode

在有onclick事件的标签中加tapmode去掉300ms延迟，动态创建的标签需调用 api.parseTapmode() ,同时还支持添加点击效果的CSS样式，如：tapmode='className'

下载

@media兼容IE78.zip SuperSlide.zip swiper动画插件.zip frame页面分割框架.zip 自制漂浮图片.zip 3D旋转木马特效.zip

其他

修改表单上传样式

小程序

bindtap

bindtap="clickButton"clickButton为函数名称，在结构上绑定函数的方法

setData()

this.setData({userInfo:res.userInfo,hasUserInfo:true})修改当前参数的方法

template模板