写博有道可循

Vue

JS

JSON.stringify() 格式化对象

将对象转化为字符串

JSON.stringify(json);

将对象转化为格式化字符串

//最后一个参数，填数字代表每层嵌套叠加的空格数，可填字符串代替n*空格，例如"..."
JSON.stringify(json, null, 4);

转化过程中替换字符

function replacer(key, value) {
  console.log(typeof value);
  if (key === 'email') {
    return undefined;
  }
  return value;
}
const user = {
  id: 229,
  name: 'John',
  email: 'john@awesome.com'
};
const userStr = JSON.stringify(user, replacer);
// "{"id":229,"name":"John"}"

var censor = function(key, value){
    if(typeof(value) == 'function'){
         return Function.prototype.toString.call(value)
    }
    return value;
}
var foo = {o:{info:{getSex:function(){return 'sex';}}}};
console.log(JSON.stringify(foo,censor,4))
//{
//    "o": {
//        "info": {
//            "getSex": "function (){return 'sex';}"
//        }
//    }
//}

数组空判断

为空：array == undefined || array.length <= 0 (顺序不能调换)
不为空： array !==undefined && array.length > 0

JSONObject的读取字符串方法比较

optString：得不到预想值时返回空字符串””
getString：得不到预想值时抛出异常

等or不等

== 来比较两个数据是否相等

• 如果其中一个操作数的类型为 Boolean ，那么，首先将它转换为数字类型，false 转换为 0, true 将转换为 1。

• 如果其中一个操作数的类型是字符串，另外一个为数字类型，那么，将字符串转换为数字进行比较。

• 如果其中一个操作数的类型是字符串，另外一个为 object 类型，那么，将调用对象的 toString 方法之后，比较字符串。

• 如果其中一个操作数的类型是数字类型，另外一个为 object 类型，那么，将对象转换为数值后进行数字比较。

• null 和 undefined 是相等的。

• null 和 undefined 不会转换为任何其他类型

• 如果任何一个操作的结果为 NaN，那么相等比较返回 false，不相等比较返回 true。注意，即使两个操作数都为 NaN，返回结果一样是 false，也就是说，NaN 不等于 NaN。

• 如果两个操作数都是对象，那么比较它们引用的值，如果引用同一个对象，那么，返回真，否则，返回假。

alert(null == undefined);   // true
alert(undefined == null);   // true
alert(true == 1);   // true
alert(false == 0);  // true
alert(true == 2);   // false
var obj = {};  
alert(10 == obj);   // false

完全相同的比较 === ，和不完全相等 !==，不进行转换

var a = "100";
var b = 100;
alert(a == b);      // true
alert(a === b);     // false
alert(a != b);      // false
alert(a !== b);     // true

jquery选择器返回数组处理

var rows = $("#my_table tbody tr");
for (var index in rows) {
	var row = $(rows[index]);  
	var temp = row.attr("class");
	if (row.attr("class") == "is-selected") {
		delete_apk_id_list.append(row.attr("id"));
	}
}

jquery 选择器返回数组里的元素是 dom 元素，若想直接使用属性方法 attr 等 jquery 的方法则需要先用 $() 重新包装 dom 元素，即上面事例中的 $(rows[index])

获取 select 标签下选中的值

在 option 没设置 value 属性时

var text = $('#id').find(":selected").text();
// 也可以这样写
var text = $('#id :selected').text();

在 option 设置了 value 属性时

var value = $('#id').val();

find 与 each 的使用

使用命名规约找元素

<section id="id">
    <input name="xx" value="yy">
</section>

var res = $('#id').find("input[name='xx']").val(); // == yy

$(".child",parent);  // 子查找法，$("input",$('#id'));

each 的使用

var arr = [ "aaa", "bbb", "ccc" ];        
$.each(arr, function(index, value){        
    alert(index);     //0 1 2 
    alert(value);     // aaa bbb ccc
}); 
 
<input name="ccc" type="hidden"  value="444"/> 
<input name="bbb" type="hidden" value="333" />
<input name="aaa" type="hidden" value="222" />
$.each($("input:hidden"), function(i, val){     // : 用于匹配type值
    alert(val);  // [object HTMLInputElement]
    alert(i);   // 0 1 2 
    alert(val.name);  // ddd ccc aaa
    alert(val.value); // 444 333 222    
});

遍历子元素

$('#id').children('input').each(function () {
    alert(this.value); // "this" is the current element in the loop
});

== 

$('#id > input').each(function () { /* ... */ });

js数组删除元素

方法1中，第一个参数是删除的起始索引（从0算起，这里例子是数组第二个元素）。第二个参数是删除元素的个数（这里例子是只删除一个元素），数组长度会变化。方法2中，长度不会变化，对应被删元素的位置会变为 undefined。

test.splice(2,1); // 方法1
delete test[2]; // 方法2

获取当前链接的信息

window.location.href //returns the href (URL) of the current page
window.location.hostname //returns the domain name of the web host
window.location.pathname //returns the path and filename of the current page
window.location.protocol //returns the web protocol used (http: or https:)
window.location.port //returns the web port
window.location.assign() //loads a new document

HTML

溢出滚动

/*自动出现x轴和y轴的滚动条*/
overflow:scroll 
overflow:auto; 
overflow-y:auto;
overflow-x:auto;

/*滚动条颜色的详细设置*/
scrollbar-face-color:#F00;
scrollbar-track-color:#FFF;
scrollbar-arrow-color:#FFF;
scrollbar-3dlight-color:#0F0;
scrollbar-darkshadow-color:#00F;
scrollbar-highlight-color:#F0F;
scrollbar-shadow-color:#006600;
scrollbar-base-color:#0f0;

解决iOS和Android上无法精确控制和底部按钮的边距，及自适应效果不好的问题

height:calc(100% - 60px)

隐藏滚动条

margin-right: -20px;
padding-right: 20px;

/*针对WebKit浏览器，修改私有属性*/
::-webkit-scrollbar{
    display: none
}

解决iOS上滚动卡顿

/*设置后ios会为其创建一个UIScrollView，利用硬件来加速渲染*/
-webkit-overflow-scrolling: touch

li小黑点超出div

list-style-position : outside |inside

• outside：默认值。列表项目标记放置在文本以外，且环绕文本不根据标记对齐
• inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐

强制文字在同一行中显示

white-space:nowrap;

解决输出带转义符的双引号

当对一个对象转JSON字符串时（使用JSON.stringify），若value为字符串且其中含有双引号时，则会被自动带上转义字符（在字符串中的实质是 \"），因为value本身要跟在“key”和“:”后面，当作为字符串直接拼接时，外层会自动添加“””，内部的双引号就自动被带上转义符了（和我们想要在双引号字符串中写双引号一样道理）。其它特殊符号则不存在此问题，例如单引号、反斜杠等。

解决方法是使用字符串的替换方法，将双引号换为单引号表示

var newValue = value.replace(/\"/g,"'");

meta

• X-UA-Compatible：自从IE8新加的一个设置，对于IE8以下的浏览器是不识别的。 通过在meta中设置X-UA-Compatible的值，可以指定网页的兼容性模式设置。

<meta http-equiv="X-UA-Compatible" content="IE=edge">  
#以上代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面

• 当网站添加到主屏幕快速启动方式，伪装webapp，可隐藏工具栏/菜单栏/地址栏，仅针对ios的safari，但要注意网站需满足没浏览器按钮也能运作。

<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 对 safari 设置。ios7.0版本以后，safari上已看不到效果 -->
<meta name="mobile-web-app-capable" content="yes">
<!-- 对 chrome 设置。 -->

• 移动端页面设置视口宽度等于设备宽度，并禁止缩放。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

• 设置页面的作者和描述

<meta name="author" content="author">
<meta name="description" content="des">

• 前端 Meta 用法大汇总 - 简书

form 表单提交方法

通过type=submit提交

<form action="/url.do" method="post">
   <input type="text" name="name"/>
   <input type="submit" value="提交">
</form>

js提交form表单，js调用submit()方法提交表单数据

<form id="form" action="/url.do" method="post">
   <input type="text" name="name"/>
</form>

ajax异步提交表单数据

<form id="form"  method="post">
   <input type="text" name="name" id="name"/>
</form>

var params = {"name", $("#name").val()}
 $.ajax({
      type: "POST",
      url: "/url.do",
      data: params,
      dataType : "json",
      success: function(respMsg){
      }
   });

form表单上传文件

 <form action="/url.do" enctype="multipart/form-data" method="post">
     <input type="file" name="name"/>
     <input type="submit" value="提交">
</form>

form 里不能使用 button

在一些框架下的 form 中，如果包含了 button 标签，可能会导致点击时触发 reload 当前页面。

可使用 input 标签，将其 type 设为 button 代替来避免。

• javascript - Why would a button click event cause site to reload in a Bootstrap form? - Stack Overflow

css

!important

当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明。虽然，从技术上讲，!important 与优先级无关，但它与最终的结果直接相关。使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则 使得调试找bug变得更加困难了。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。可采用 CSS 的级联属性来代替。

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 mingfungliu@gmail.com