forEach 循环
1、foreach里面return 直接跳出本次循环，进入下一次循环；
splice对数组进行删除、添加操作
var arr = ['1','2','3']；
1、splice(0,0,'4') //从第0个位置开始插入
2、splice(2,1)//2 表示删除元素的位置，删除元素的个数
JSON字符串与对象互相转换
pageDataList = { data:'对象转化成字符串'}
1、JSON.stringify(pageDataList )//对象转化成字符串
2、JSON.parse('字符串转化成对象') //字符串转化成对象
jquery在父窗口中获取iframe中的元素
在运用一下方法时因考虑到H5的加载机制，必须等到iframe加载完成才可使用，内联js会按顺序正常加载，这样可以取到dome节点，但是外联的js会先于iframe加载，这时就拿不到dome节点。
1、方法一：
格式：$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery 方法1
实例：$("#ifm").contents().find("#btnOk").click();//jquery 方法1
2、方法二：
格式：$("#iframe中的控件ID",document.frames("frame的name").document).click();//jquery 方法2
实例：$("#btnOk",document.frames("ifm").document).click();//jquery 方法2
在iframe中获取父窗口的元素
格式：$('#父窗口中的元素ID', parent.document).click();
实例：$('#btnOk', parent.document).click();
vue阻止冒泡
函数里传入event，实例如下；
方法一：
<div @click="deleteBannerImg($event)"></div>
deleteBannerImg(event){
if(event) {
event.stopPropagation ? event.stopPropagation(): event.cancelBubble = true;
}
}
方法二：
<div @click.stop="doSomething($event)">vue取消事件冒泡</div>
vue阻止默认事件
<div @click.prevent="doSomething($event)">vue阻止默认事件</div>
vue点击右键阻止默认行为
//原生js
<body>
<div id="box">
<input type="button" value="按钮" @contextmenu="show($event)">
</div>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
},
methods:{
show:function(ev){
alert(1);
ev.preventDefault();
}
}
});
};
</script>
</body>
//vue
<body>
<div id="box">
<input type="button" value="按钮" @contextmenu.prevent="show()">
</div>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
},
methods:{
show:function(){
alert(1);
}
}
});
};
</script>
</body>
vertical-align失效问题
1、起作用的前提
vertical-align起作用的前提是元素为inline水平元素或table-cell元素，包括 span , img , input , button , td 以及通过display改变了显示水平为inline水平或者table-cell的元素。这也意味着，默认情况下， div , p 等元素设置vertical-align无效。
2、取值
vertical-align可以有以下取值方式：
（1）关键字：如 top , middle , baseline(默认值) , bottom , super , sub , text-bottom , text-top
（2）长度值：如10px，-10px(均为相对于baseline偏移)
（3）百分比值：如10%，根据 line-height 作为基数进行计算( 重要 )后的值。
js判断字符串是否包含在一个字符串中
String对象的方法
方法一: indexOf()
var str = "123";
console.log(str.indexOf("3") != -1 ); // true
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。
方法二: search()
var str = "123";
console.log(str.search("3") != -1 ); // true
search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。如果没有找到任何匹配的子串，则返回 -1。
方法三:match()
var str = "123";
var reg = RegExp(/3/);
if(str.match(reg)){
// 包含
}
match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
RegExp 对象方法
方法四:test()
var str = "123";
var reg = RegExp(/3/);
console.log(reg.test(str)); // true
test() 方法用于检索字符串中指定的值。返回 true 或 false。
方法五:exec()
var str = "123";
var reg = RegExp(/3/);
if(reg.exec(str)){
// 包含
}
exec() 方法用于检索字符串中的正则表达式的匹配。返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
css text-decoration下划线 删除线 上划线属性样式
text-decoration : none || underline || blink || overline || line-through
text-decoration下划线CSS单词值参数：
text-decoration:none 无装饰，通常对html下划线标签去掉下划线样式
text-decoration:underline 下划线样式
text-decoration:line-through 删除线样式-贯穿线样式
text-decoration:overline 上划线样式
查看更多css属性
动态添加style标签
方法一：
var stylee = document.createElement('style');
stylee.type = 'text/css';
stylee.innerHTML = '.navTwoListItem .muenItem:hover{background:'+navSetup.color7+';}';
document.getElementsByTagName('head').item(0).appendChild(stylee);
方法二：
var stylee = document.createElement('style');
stylee.type = 'text/css';
document.head.appendChild(stylee);
sheet = stylee.sheet;
sheet.addRule('.navListItem:before','border-bottom: 6px solid '+navSetup.color6);
sheet.insertRule('.navListItem:before{border-bottom: 6px solid '+navSetup.color6+' }',0);
js判断数组中对象是否存在某个值
var arr = [{
name: "回锅肉",
value: "0"
}, {
name: "小炒肉",
value: "1"
}]
var result = arr.some(function(item) {
if (item.name == "小炒肉") {
return true;
}
})
console.log(result);//result 为true时表示数组内已存在 false表示不存在
js保留两位小数的方法
1、toFixed()方法
需注意，保留两位小数，将数值类型的数据改变成了字符串类型
//1、四舍五入
var num =2.446242342;
num = num.toFixed(2);
console.log(num); //2.45
console.log(typeof num); // string
2、Math.floor()，不四舍五入 ，向下取整
注意，不改变数据类型
// 2.不四舍五入 向下取整
var num =2.446242342;
num = Math.floor(num * 100) / 100;
console.log(num); //2.44
console.log(typeof num); // number
3、字符串匹配
注意，先将数据转换为字符串，最后再转为数值类型
// 3.不四舍五入 字符串匹配再转换
var num =2.446242342;
num = Number(num.toString().match(/^\d+(?:\.\d{0,2})?/));
console.log(num); //2.44
console.log(typeof num); // number
4、四舍五入保留2位小数（若第二位小数为0，则保留一位小数）
注意，数据类型不变
//4.四舍五入保留2位小数（若第二位小数为0，则保留一位小数）
var num =2.446242342;
function keepTwoDecimal(num) {
var result = parseFloat(num);
if (isNaN(result)) {
alert('传递参数错误，请检查！');
return false;
}
result = Math.round(num * 100) / 100;
return result;
};
keepTwoDecimal(num);
console.log(num); //2.44
console.log(typeof num); //number
5、四舍五入保留2位小数（不够位数，则用0替补）
注意，数据类型变为字符串类型
//5.四舍五入保留2位小数（不够位数，则用0替补）
var num =2.446242342;
function keepTwoDecimalFull(num) {
var result = parseFloat(num);
if (isNaN(result)) {
alert('传递参数错误，请检查！');
return false;
}
result = Math.round(num * 100) / 100;
var s_x = result.toString(); //将数字转换为字符串
var pos_decimal = s_x.indexOf('.'); //小数点的索引值
// 当整数时，pos_decimal=-1 自动补0
if (pos_decimal < 0) {
pos_decimal = s_x.length;
s_x += '.';
}
// 当数字的长度< 小数点索引+2时，补0
while (s_x.length <= pos_decimal + 2) {
s_x += '0';
}
return s_x;
}
console.log(keepTwoDecimalFull(120.5)); //120.50
console.log(typeof keepTwoDecimalFull(120.5)); //string
console.log(keepTwoDecimalFull(2.446242342)); //2.45
console.log(typeof keepTwoDecimalFull(2.446242342)); //string
浮点数保留两位小数
1、将浮点数四舍五入，取小数点后2位
注意，数据类型不变
//浮点数保留两位小数
//1.功能：将浮点数四舍五入，取小数点后2位
function toDecimal(x) {
var f = parseFloat(x);
if (isNaN(f)) {
return;
}
f = Math.round(x*100)/100;
return f;
}
console.log(toDecimal(3.1465926)); // 3.15
console.log(typeof toDecimal(3.1415926)); //number
2、强制保留2位小数，如：2，会在2后面补上00.即2.00
注意，数据类型变为字符串类型
//2.强制保留2位小数，如：2，会在2后面补上00.即2.00
function toDecimal2(x) {
var f = parseFloat(x);
if (isNaN(f)) {
return false;
}
var f = Math.round(x*100)/100;
var s = f.toString();
var rs = s.indexOf('.');
if (rs < 0) {
rs = s.length;
s += '.';
}
while (s.length <= rs + 2) {
s += '0';
}
return s;
}
console.log(toDecimal2(3.1)); // 3.10
console.log(typeof toDecimal2(3.1415926)); //string
3、保留两位小数 浮点数四舍五入 位数不够 不补0
注意，数据类型不变
// 3.保留两位小数 浮点数四舍五入 位数不够 不补0
function fomatFloat(src,pos){
return Math.round(src*Math.pow(10, pos))/Math.pow(10, pos);
}
console.log(fomatFloat(3.12645,2)); // 3.13
console.log(typeof fomatFloat(3.1415926)); //number
HTML5中input背景提示文字(placeholder)的CSS美化
/* 通用 */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }
/* webkit专用 */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }
/* mozilla专用 */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
